🐜 ⬛️ Card menu fixes:

Closes #8164

- When a user clicks on a card within a '/' menu it now executes that tool.
- If a user engages a card with the / menu the content of the paragraph is now inserted into the card.

ghost/admin/lib/gh-koenig/addon/components/koenig-menu-item.js

@@ -12,12 +12,12 @@ export default Component.extend({
         this.set('selected', this.get('tool').selected);
     },
     click: function () { // eslint-disable-line
-        let {section} = this.get('range');
+        let {section, startOffset, endOffset} = this.get('range');
         let editor = this.get('editor');
 
-        editor.range = Range.create(section, 0, section, 0);
+        editor.range = Range.create(section, startOffset, section, endOffset);
 
-        this.get('tool').onClick(editor, section);
         this.sendAction('clicked');
+        this.get('tool').onClick(editor, section);
     }
 });

ghost/admin/lib/gh-koenig/addon/components/koenig-plus-menu.js

@@ -68,6 +68,7 @@ export default Component.extend({
         let $editor = $(this.get('containerSelector'));
 
         input.blur(() => {
+            // nasty hack - give the tool time to execute before removing this from the dom.
             window.setTimeout(() => {
                 this.send('closeMenuKeepButton');
             }, 200);

ghost/admin/lib/gh-koenig/addon/components/koenig-slash-menu.js

@@ -47,9 +47,6 @@ export default Component.extend({
             selectedTool.selected = true;
         }
 
-        if (i === 0) {
-         //   this.send('closeMenu');
-        }
         return tools;
     }),
     init() {
@@ -79,12 +76,18 @@ export default Component.extend({
     cursorChange() {
         let editor = this.get('editor');
         let range = this.get('range');
+        let isOpen = this.get('isOpen');
+
+        // if the cursor isn't in the editor then close the menu
         if (!range || !editor.range.isCollapsed || editor.range.head.section !== range.section || this.editor.range.head.offset < 1 || !this.editor.range.head.section) {
+            // unless we click on a tool because the tool will close the menu.
+            if (isOpen && !$(window.getSelection().anchorNode).parents('.gh-cardmenu').length) {
                 this.send('closeMenu');
+            }
             return;
         }
 
-        if (this.get('isOpen')) {
+        if (isOpen) {
             let queryString = editor.range.head.section.text.substring(range.startOffset, editor.range.head.offset);
             this.set('query', queryString);
             // if we've typed 5 characters and have no tools then close.
@@ -208,6 +211,13 @@ export default Component.extend({
                     editor._keyCommands.splice(i, 1);
                 }
             }
+        },
+        clickedMenu: function () { // eslint-disable-line
+            // let{section, startOffset, endOffset} = this.get('range');
+
+            window.editor.range.head.offset = this.get('range').startOffset - 1;
+            window.editor.deleteRange(window.editor.range);
+            this.send('closeMenu');
         }
     }
 });

ghost/admin/lib/gh-koenig/addon/templates/components/koenig-slash-menu.hbs

@@ -1,7 +1,7 @@
 {{#if isOpen}}
 <div class="gh-cardmenu">
     {{#each toolbar as |tool index|}}
-        {{koenig-menu-item tool=tool editor=editor range=range selected=tool.selected clicked=(action "closeMenu")}}
+        {{koenig-menu-item tool=tool editor=editor range=range selected=tool.selected clicked=(action "clickedMenu")}}
     {{/each}}
 </div>
 {{/if}}