🐝 Card menu fixes (#597)

closes: https://github.com/TryGhost/Ghost/issues/8106

- Fixes the keyboard selection problems of the '+' menu.
- Makes the active state of the keyboard selection blank until a key is pressed.
- Fixes it so that the '+' menu executes the tool on Enter.

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

@@ -3,6 +3,7 @@ import computed from 'ember-computed';
 import run from 'ember-runloop';
 import Tools from '../options/default-tools';
 import layout from '../templates/components/koenig-plus-menu';
+import Range from 'mobiledoc-kit/utils/cursor/range';
 import $ from 'jquery';
 
 const ROW_LENGTH = 4;
@@ -15,7 +16,7 @@ export default Component.extend({
         return this.get('isOpen') || this.get('isButton');
     }),
     toolsLength: 0,
-    selected: 0,
+    selected: -1,
     selectedTool: null,
     query: '',
     range: null,
@@ -44,13 +45,13 @@ export default Component.extend({
         });
         this.set('toolsLength', i);
         tools.sort((a, b) => a.order > b.order);
-
+        if (selected > -1) {
-        let selectedTool = tools[selected] || tools[0];
+            let selectedTool = tools[selected] || tools[0];
-        if (selectedTool) {
+            if (selectedTool) {
-            this.set('selectedTool', selectedTool);
+                this.set('selectedTool', selectedTool);
-            selectedTool.selected = true;
+                selectedTool.selected = true;
+            }
         }
-
         return tools;
     }),
     init() {
@@ -74,45 +75,6 @@ export default Component.extend({
             }, 200);
         });
 
-        input.keydown(({keyCode}) => {
-            let item = this.get('selected');
-            let length = this.get('toolsLength');
-            switch (keyCode) {
-            case 27: // escape
-                return this.send('closeMenu');
-            case 37: // left
-                if (item > 0) {
-                    this.set('selected', item - 1);
-                } else {
-                    this.set('selected', length - 1);
-                }
-                break;
-            case 38: // up
-                if (item > ROW_LENGTH) {
-                    this.set('selected', item - ROW_LENGTH);
-                } else {
-                    this.set('selected', 0);
-                }
-                break;
-            case 39: // right
-                if (item < length) {
-                    this.set('selected', item + 1);
-                } else {
-                    this.set('selected', 1);
-                }
-                break;
-            case 40: // down
-                if (item + ROW_LENGTH < length) {
-                    this.set('selected', item + ROW_LENGTH);
-                } else {
-                    this.set('selected', length - 1);
-                }
-                break;
-            case 13: // enter
-                alert('enter');
-            }
-        });
-
         editor.cursorDidChange(() => {
             if (!editor.range || !editor.range.head.section) {
                 return;
@@ -152,6 +114,10 @@ export default Component.extend({
                 startOffset: editor.range.head.offset,
                 endOffset: editor.range.head.offset
             });
+
+            this.set('selected', -1);
+            this.set('selectedTool', null);
+
             this.propertyDidChange('toolbar');
 
             run.schedule('afterRender', this,
@@ -169,8 +135,50 @@ export default Component.extend({
         closeMenuKeepButton: function () { // eslint-disable-line
             this.set('isOpen', false);
         },
-        updateSelection: function (event) { // eslint-disable-line
+        selectTool: function () { // eslint-disable-line
-            // alert(event);
+            let {section} = this.get('range');
+            let editor = this.get('editor');
+            editor.range = Range.create(section, 0, section, 0);
+            this.get('selectedTool').onClick(editor);
+            this.send('closeMenuKeepButton');
+        },
+        moveSelectionLeft: function () { // eslint-disable-line
+            let item = this.get('selected');
+            let length = this.get('toolsLength');
+            if (item > 0) {
+                this.set('selected', item - 1);
+            } else {
+                this.set('selected', length - 1);
+            }
+        },
+        moveSelectionUp: function () { // eslint-disable-line
+            let item = this.get('selected');
+            if (item > ROW_LENGTH) {
+                this.set('selected', item - ROW_LENGTH);
+            } else {
+                this.set('selected', 0);
+            }
+        },
+        moveSelectionRight: function () { // eslint-disable-line
+            let item = this.get('selected');
+            let length = this.get('toolsLength');
+            if (item < length) {
+                this.set('selected', item + 1);
+            } else {
+                this.set('selected', 0);
+            }
+        },
+        moveSelectionDown: function () { // eslint-disable-line
+            let item = this.get('selected');
+            if (item < 0) {
+                item = 0;
+            }
+            let length = this.get('toolsLength');
+            if (item + ROW_LENGTH < length) {
+                this.set('selected', item + ROW_LENGTH);
+            } else {
+                this.set('selected', length - 1);
+            }
         }
     }
 });

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

@@ -41,10 +41,12 @@ export default Component.extend({
         this.set('toolsLength', i);
         tools.sort((a, b) => a.order > b.order);
 
-        let selectedTool = tools[selected] || tools[0];
+        let selectedTool = tools[selected];
-        if (selectedTool) {
+        if (selected > -1) {
-            this.set('selectedTool', selectedTool);
+            if (selectedTool) {
-            selectedTool.selected = true;
+                this.set('selectedTool', selectedTool);
+                selectedTool.selected = true;
+            }
         }
 
         return tools;
@@ -109,6 +111,8 @@ export default Component.extend({
                 startOffset: editor.range.head.offset,
                 endOffset: editor.range.head.offset
             });
+            this.set('selected', -1);
+            this.set('selectedTool', null);
 
             editor.registerKeyCommand({
                 str: 'LEFT',
@@ -156,6 +160,9 @@ export default Component.extend({
                 name: 'slash',
                 run() {
                     let item = self.get('selected');
+                    if (item < 0) {
+                        item = 0;
+                    }
                     let length = self.get('toolsLength');
                     if (item + ROW_LENGTH < length) {
                         self.set('selected', item + ROW_LENGTH);

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

@@ -5,7 +5,16 @@
 <div class="gh-cardmenu">
     <div class="gh-cardmenu-search">
         {{inline-svg "search.svg"}}
-        {{gh-input query class="gh-input gh-cardmenu-search-input" placeholder="Search for a card..." type="text" update=(action (mut query)) key-press=(action "updateSelection")}}
+        {{gh-input query class="gh-input gh-cardmenu-search-input" placeholder="Search for a card..." type="text" update=(action (mut query)) 
+            keyEvents=(hash
+                27=(action "closeMenu")
+                13=(action "selectTool")
+                37=(action "moveSelectionLeft")
+                38=(action "moveSelectionUp")
+                39=(action "moveSelectionRight")
+                40=(action "moveSelectionDown")
+            )
+        }}
     </div>
     <div class="gh-cardmenu-divider">
         Primary