Added toggling between blockquote/aside/p via quote toolbar button

refs https://github.com/TryGhost/Team/issues/1239

- added new action for toggling quote sections that will loop through blockquote/aside/p when clicked
- copied `kg-quote.svg` to `kg-quote-2.svg` ready for alternate icon designs

ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.hbs

@@ -45,16 +45,35 @@
     <li class="ma0 ml1 mr1 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
 
     {{#unless this.basicOnly}}
-        <li class="ma0 lh-solid">
+        {{#if feature.quoteStyles}}
-            <button
+            <li class="ma0 lh-solid">
-                type="button"
+                <button
-                title="Quote"
+                    type="button"
-                class="dib dim-lite link h9 w9 nudge-top--1"
+                    title="Quote"
-                {{action "toggleSection" "blockquote"}}
+                    class="dib dim-lite link h9 w9 nudge-top--1"
-            >
+                    {{action "toggleQuoteSection"}}
-                {{svg-jar "koenig/kg-quote" class=(concat (if this.activeSectionTagNames.isBlockquote "fill-green-l2" "fill-white") " w4 h4")}}
+                >
-            </button>
+                    {{#if this.activeSectionTagNames.isBlockquote}}
-        </li>
+                        {{svg-jar "koenig/kg-quote" class="fill-green w4 h4"}}
+                    {{else if this.activeSectionTagNames.isAside}}
+                        {{svg-jar "koenig/kg-quote-2" class="fill-green w4 h4"}}
+                    {{else}}
+                        {{svg-jar "koenig/kg-quote" class="fill-white w4 h4"}}
+                    {{/if}}
+                </button>
+            </li>
+        {{else}}
+            <li class="ma0 lh-solid">
+                <button
+                    type="button"
+                    title="Quote"
+                    class="dib dim-lite link h9 w9 nudge-top--1"
+                    {{action "toggleSection" "blockquote"}}
+                >
+                    {{svg-jar "koenig/kg-quote" class=(concat (if this.activeSectionTagNames.isBlockquote "fill-green-l2" "fill-white") " w4 h4")}}
+                </button>
+            </li>
+        {{/if}}
     {{/unless}}
     <li class="ma0 lh-solid">
         <button

ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js

@@ -2,6 +2,7 @@ import Component from '@ember/component';
 import {computed} from '@ember/object';
 import {htmlSafe} from '@ember/template';
 import {run} from '@ember/runloop';
+import {inject as service} from '@ember/service';
 import {task, timeout} from 'ember-concurrency';
 
 // initially rendered offscreen with opacity 0 so that sizing is available
@@ -19,6 +20,8 @@ export const TOOLBAR_MARGIN = 15;
 const TICK_ADJUSTMENT = 8;
 
 export default Component.extend({
+    feature: service(),
+
     attributeBindings: ['style'],
     classNames: ['absolute', 'z-999'],
 
@@ -127,6 +130,22 @@ export default Component.extend({
             });
         },
 
+        toggleQuoteSection() {
+            let sectionName = 'blockquote';
+
+            if (this.activeSectionTagNames.isBlockquote) {
+                sectionName = 'aside';
+            } else if (this.activeSectionTagNames.isAside) {
+                sectionName = 'p';
+            }
+
+            const range = this.editorRange;
+            this.editor.run((postEditor) => {
+                this.toggleSection(sectionName, postEditor);
+                postEditor.setRange(range);
+            });
+        },
+
         toggleHeaderSection(headingTagName) {
             let range = this.editorRange;
             this.editor.run((postEditor) => {

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-quote-2.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 8h2c.552 0 1 .448 1 1v4c0 .552-.448 1-1 1H3c-.552 0-1-.448-1-1V5.082c0-1.176.906-2.12 2.538-2.969.49-.255 1.094-.065 1.349.425.255.49.065 1.094-.425 1.349-.578.3-.993.589-1.24.847-.168.174-.222.286-.222.348V8zm9 0c.552 0 1 .448 1 1v4c0 .552-.448 1-1 1h-3c-.552 0-1-.448-1-1V5.082c0-1.176.906-2.12 2.538-2.969.49-.255 1.094-.065 1.349.425.255.49.065 1.094-.425 1.349-.578.3-.993.589-1.24.847-.168.174-.222.286-.222.348V8h2z" fill="#FFF" fill-rule="nonzero"/></svg>