From 5e3553e039e9ad30a54fb345e213d54163cbdf95 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Tue, 15 May 2018 12:08:58 +0100 Subject: [PATCH] Koenig - Strip all formatting except links when converting to a heading refs https://github.com/TryGhost/Ghost/issues/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 --- .../addon/components/koenig-editor.js | 41 ++++++++++++++++--- .../addon/components/koenig-toolbar.js | 11 ++++- .../addon/options/text-expansions.js | 7 +--- .../templates/components/koenig-editor.hbs | 1 + .../templates/components/koenig-toolbar.hbs | 4 +- 5 files changed, 50 insertions(+), 14 deletions(-) diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js index 7190ec6e24..4d1731cd66 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js +++ b/ghost/admin/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) { + toggleSection(sectionTagName, postEditor) { + (postEditor || this.editor).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/ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js index 2ca8c86452..5a8712da00 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js +++ b/ghost/admin/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/ghost/admin/lib/koenig-editor/addon/options/text-expansions.js b/ghost/admin/lib/koenig-editor/addon/options/text-expansions.js index 2cb4fa1d5c..5cb293ead9 100644 --- a/ghost/admin/lib/koenig-editor/addon/options/text-expansions.js +++ b/ghost/admin/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/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-editor.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-editor.hbs index c49519c8ba..76ba00f3fa 100644 --- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-editor.hbs +++ b/ghost/admin/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/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs index 98c45eb543..debf0b366e 100644 --- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs +++ b/ghost/admin/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")}} @@ -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")}}