Koenig - Strip all formatting except links when converting to a heading

refs TryGhost/Ghost#9623 - adds `toggleHeaderSection` action to have a central place for logic - adds `_performEdit()` so that we can avoid nested runloops in actions - update text expansion and toolbar to use the new `toggleHeaderSection` action
TryGhost · May 15, 2018 · 106e29f · 106e29f
1 parent dd35184
commit 106e29f
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 14 deletions.
diff --git a/lib/koenig-editor/addon/components/koenig-editor.js b/lib/koenig-editor/addon/components/koenig-editor.js
@@ -335,14 +335,33 @@ export default Component.extend({
     },
 
     actions: {
-        toggleMarkup(markupTagName) {
-            let editor = this.editor;
-            editor.toggleMarkup(markupTagName);
+        toggleMarkup(markupTagName, postEditor) {
+            (postEditor || this.editor).toggleMarkup(markupTagName);
+        },
+
+        toggleSection(sectionTagName, postEditor) {
+            (postEditor || this.editor).toggleSection(sectionTagName);
         },
 
-        toggleSection(sectionTagName) {
+        toggleHeaderSection(headingTagName, postEditor) {
             let editor = this.editor;
-            editor.toggleSection(sectionTagName);
+
+            // skip toggle if we already have the same heading level
+            if (editor.activeSection.tagName === headingTagName) {
+                return;
+            }
+
+            let operation = function (postEditor) {
+                // strip all formatting aside from links
+                postEditor.removeMarkupFromRange(
+                    editor.activeSection.toRange(),
+                    m => m.tagName !== 'a'
+                );
+
+                postEditor.toggleSection(headingTagName);
+            };
+
+            this._performEdit(operation, postEditor);
         },
 
         replaceWithCardSection(cardName, range) {
@@ -727,6 +746,18 @@ export default Component.extend({
 
     /* internal methods ----------------------------------------------------- */
 
+    // nested editor.run loops will create additional undo steps so this is a
+    // shortcut for when we already have a postEditor
+    _performEdit(editOperation, postEditor) {
+        if (postEditor) {
+            editOperation(postEditor);
+        } else {
+            this.editor.run((postEditor) => {
+                editOperation(postEditor);
+            });
+        }
+    },
+
     _hideCursor() {
         this.editor.element.style.caretColor = 'transparent';
     },

diff --git a/lib/koenig-editor/addon/components/koenig-toolbar.js b/lib/koenig-editor/addon/components/koenig-toolbar.js
@@ -48,6 +48,7 @@ export default Component.extend({
     // closure actions
     toggleMarkup() {},
     toggleSection() {},
+    toggleHeaderSection() {},
     editLink() {},
 
     /* computed properties -------------------------------------------------- */
@@ -122,8 +123,16 @@ export default Component.extend({
 
         toggleSection(sectionName) {
             let range = this.editorRange;
-            this.toggleSection(sectionName);
             this.editor.run((postEditor) => {
+                this.toggleSection(sectionName, postEditor);
+                postEditor.setRange(range);
+            });
+        },
+
+        toggleHeaderSection(headingTagName) {
+            let range = this.editorRange;
+            this.editor.run((postEditor) => {
+                this.toggleHeaderSection(headingTagName, postEditor);
                 postEditor.setRange(range);
             });
         },

diff --git a/lib/koenig-editor/addon/options/text-expansions.js b/lib/koenig-editor/addon/options/text-expansions.js
@@ -34,12 +34,7 @@ export default function (editor, koenig) {
                 let position = postEditor.deleteRange(range);
                 postEditor.setRange(position);
 
-                // skip toggle if we already have the same heading level
-                if (editor.activeSection.tagName === headingTag) {
-                    return;
-                }
-
-                postEditor.toggleSection(headingTag);
+                koenig.send('toggleHeaderSection', headingTag, postEditor);
             });
         }
     });

diff --git a/lib/koenig-editor/addon/templates/components/koenig-editor.hbs b/lib/koenig-editor/addon/templates/components/koenig-editor.hbs
@@ -10,6 +10,7 @@
     activeSectionTagNames=activeSectionTagNames
     toggleMarkup=(action "toggleMarkup")
     toggleSection=(action "toggleSection")
+    toggleHeaderSection=(action "toggleHeaderSection")
     editLink=(action "editLink")
 }}
 

diff --git a/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs b/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs
@@ -24,7 +24,7 @@
             type="button"
             title="Heading One"
             class="dib dim-lite link h10 w9 nudge-top--1"
-            {{action "toggleSection" "h1"}}
+            {{action "toggleHeaderSection" "h1"}}
         >
             {{svg-jar "koenig/kg-heading-1" class=(concat (if activeSectionTagNames.isH1 "stroke-blue-l2" "stroke-white") " w4 h4")}}
         </button>
@@ -34,7 +34,7 @@
             type="button"
             title="Heading Two"
             class="dib dim-lite link h10 w9 nudge-top--1"
-            {{action "toggleSection" "h2"}}
+            {{action "toggleHeaderSection" "h2"}}
         >
             {{svg-jar "koenig/kg-heading-2" class=(concat (if activeSectionTagNames.isH2 "stroke-blue-l2" "stroke-white") " w4 h4")}}
         </button>