Koenig - Remove markdown/embed card if it's empty when leaving edit mode

refs https://github.com/TryGhost/Ghost/issues/9505
- add `deleteCard` action to `{{koenig-editor}}` component and pass it through to the component cards
  - required modifying the `_deleteCard` behaviour so that it doesn't always try to move the cursor
- use `onLeaveEdit` action from `{{koenig-card}}` in the markdown and html cards to check if their payload is empty and remove the card when exiting edit mode
- fixed `onLeaveEdit` action firing when card first rendered

ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js

@@ -1,5 +1,7 @@
 import Component from '@ember/component';
 import layout from '../templates/components/koenig-card-html';
+import {isBlank} from '@ember/utils';
+import {run} from '@ember/runloop';
 import {set} from '@ember/object';
 
 export default Component.extend({
@@ -11,7 +13,8 @@ export default Component.extend({
     isEditing: false,
 
     // closure actions
-    saveCard: null,
+    saveCard() {},
+    deleteCard() {},
 
     init() {
         this._super(...arguments);
@@ -28,6 +31,16 @@ export default Component.extend({
 
         updateCaption(caption) {
             this._updatePayloadAttr('caption', caption);
+        },
+
+        leaveEditMode() {
+            if (isBlank(this.get('payload.html'))) {
+                // afterRender is required to avoid double modification of `isSelected`
+                // TODO: see if there's a way to avoid afterRender
+                run.scheduleOnce('afterRender', this, function () {
+                    this.deleteCard();
+                });
+            }
         }
     },
 

ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js

@@ -3,6 +3,7 @@ import formatMarkdown from 'ghost-admin/utils/format-markdown';
 import layout from '../templates/components/koenig-card-markdown';
 import {computed} from '@ember/object';
 import {htmlSafe} from '@ember/string';
+import {isBlank} from '@ember/utils';
 import {run} from '@ember/runloop';
 import {set} from '@ember/object';
 
@@ -18,8 +19,9 @@ export default Component.extend({
     toolbar: null,
 
     // closure actions
-    saveCard: null,
-    selectCard: null,
+    saveCard() {},
+    selectCard() {},
+    deleteCard() {},
 
     renderedMarkdown: computed('payload.markdown', function () {
         return htmlSafe(formatMarkdown(this.get('payload.markdown')));
@@ -43,6 +45,16 @@ export default Component.extend({
             run.scheduleOnce('afterRender', this, this._focusTextarea);
         },
 
+        leaveEditMode() {
+            if (isBlank(this.get('payload.markdown'))) {
+                // afterRender is required to avoid double modification of `isSelected`
+                // TODO: see if there's a way to avoid afterRender
+                run.scheduleOnce('afterRender', this, function () {
+                    this.deleteCard();
+                });
+            }
+        },
+
         updateMarkdown(markdown) {
             let payload = this.get('payload');
             let save = this.get('saveCard');

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

@@ -24,6 +24,9 @@ export default Component.extend({
     toolbarWidth: 0,
     toolbarHeight: 0,
 
+    // internal properties
+    _lastIsEditing: false,
+
     // closure actions
     selectCard() {},
     editCard() {},

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

@@ -51,6 +51,7 @@ export const CARD_COMPONENT_MAP = {
 
 const CURSOR_BEFORE = -1;
 const CURSOR_AFTER = 1;
+const NO_CURSOR_MOVEMENT = 0;
 
 function arrayToMap(array) {
     let map = Object.create(null);
@@ -378,6 +379,10 @@ export default Component.extend({
             this.deselectCard(card);
         },
 
+        deleteCard(card, cursorMovement = NO_CURSOR_MOVEMENT) {
+            this._deleteCard(card, cursorMovement);
+        },
+
         moveCursorToPrevSection(card) {
             let section = this._getSectionFromCard(card);
 
@@ -714,7 +719,10 @@ export default Component.extend({
             }
 
             postEditor.removeSection(section);
-            postEditor.setRange(nextPosition);
+
+            if (cursorDirection !== NO_CURSOR_MOVEMENT) {
+                postEditor.setRange(nextPosition);
+            }
         });
     },
 

ghost/admin/lib/koenig-editor/addon/options/text-expansions.js

@@ -221,7 +221,7 @@ export default function (editor) {
         }
     }
 
-    function matchImage(editor, text, hasTextAfter = false) {
+    function matchImage(editor, text) {
         let matches = text.match(/^!\[(.*?)\]\((.*?)\)$/);
         if (matches) {
             let {range: {head, head: {section}}} = editor;

ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs

@@ -4,6 +4,7 @@
     isEditing=isEditing
     selectCard=(action selectCard)
     editCard=(action editCard)
+    onLeaveEdit=(action "leaveEditMode")
 }}
     {{#if isEditing}}
         {{gh-cm-editor payload.html

ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs

@@ -4,6 +4,7 @@
     isSelected=isSelected
     isEditing=isEditing
     onEnterEdit=(action "enterEditMode")
+    onLeaveEdit=(action "leaveEditMode")
     selectCard=(action selectCard)
     editCard=(action editCard)
 }}

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

@@ -46,6 +46,7 @@
             selectCard=(action "selectCard" card)
             isEditing=card.isEditing
             editCard=(action "editCard" card)
+            deleteCard=(action "deleteCard" card)
             moveCursorToPrevSection=(action "moveCursorToPrevSection" card)
             moveCursorToNextSection=(action "moveCursorToNextSection" card)
             addParagraphAfterCard=(action "addParagraphAfterCard" card)