From eb865f841f09f6a491b901eb49f1968d6a2cca9a Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 17 Jul 2018 17:22:28 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Koenig=20-=20Fixed=20clicking=20?=
 =?UTF-8?q?certain=20icons=20in=20/-menu=20not=20creating=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs https://github.com/TryGhost/Ghost/issues/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
---
 .../koenig-editor/addon/components/koenig-slash-menu.js   | 8 +++++++-
 .../addon/templates/components/koenig-menu-content.hbs    | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js
index db0f65c5f4..0837ebde1e 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js
+++ b/ghost/admin/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 = {};
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-menu-content.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-menu-content.hbs
index 78ed443b75..8f118efbae 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-menu-content.hbs
+++ b/ghost/admin/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>