🐛 Koenig - Fixed clicking certain icons in /-menu not creating cards

refs TryGhost/Ghost#9724
- the click event from clicking on the /-menu items continued propagating after the card was initialised which meant it was picked up by the card as a "click off the card" so certain cards such as the Markdown/HTML cards would then remove themselves as if they were deselected with empty content
- changed the icon click handler to use the DOM `onclick` syntax so that the click can be captured immediately rather than waiting for it to bubble up to Ember's global event handler
- updated the /-menu `itemClicked` action to use the now-accessible MouseEvent to stop it propagating any further and triggering unwanted card behaviour

Author: kevinansfield

lib/koenig-editor/addon/components/koenig-slash-menu.js

@@ -88,11 +88,17 @@ export default Component.extend({
     },
 
     actions: {
-        itemClicked(item) {
+        itemClicked(item, event) {
             let range = this._openRange.head.section.toRange();
             let [, ...params] = this._query.split(/\s/);
             let payload;
 
+            // make sure the click doesn't propagate and get picked up by the
+            // newly inserted card which can then remove itself because it
+            // looks like a click outside of an empty card
+            event.preventDefault();
+            event.stopImmediatePropagation();
+
             // params are order-dependent and listed in CARD_MENU for each card
             if (!isEmpty(item.params) && !isEmpty(params)) {
                 payload = {};

lib/koenig-editor/addon/templates/components/koenig-menu-content.hbs

@@ -3,7 +3,7 @@
         {{section.title}}
     </div>
     {{#each section.items as |item|}}
-        <div class="{{if item.selected "kg-cardmenu-card-selected"}} {{kg-style "cardmenu-card"}}" {{action itemClicked item on="click"}} data-kg="cardmenu-card">
+        <div class="{{if item.selected "kg-cardmenu-card-selected"}} {{kg-style "cardmenu-card"}}" onclick={{action itemClicked item}} data-kg="cardmenu-card">
             <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar item.icon class="w8 h8 stroke-midgrey"}}</div>
             <div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
         </div>