From c763b3218e1ae1cb2004d8e28aca0aea411a239e Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 28 Jan 2019 09:35:58 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20drag-n-drop=20card=20reo?=
 =?UTF-8?q?rdering=20interfering=20with=20caption=20and=20markdown/html=20?=
 =?UTF-8?q?card=20text=20selection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes  https://github.com/TryGhost/Ghost/issues/10399
- added a data attribute `data-koenig-dnd-disabled` which will prevent the element or any of it's children from initiating a koenig drag event
  - applied the data attribute to `{{koenig-basic-html-input}}`'s outer tag so that captions never initiate a card re-order
- disabled card re-ordering when a card is in edit mode
  - allows text selection within a markdown/html card without triggering the card re-order behaviour
  - clicking another card will exit edit mode and re-enable drag before the drag behaviour is initiated so you can still re-order other cards if you've left a card in edit mode
---
 .../addon/components/koenig-basic-html-input.js            | 3 +++
 .../lib/koenig-editor/addon/components/koenig-editor.js    | 3 +++
 ghost/admin/lib/koenig-editor/addon/lib/dnd/constants.js   | 3 +++
 .../addon/services/koenig-drag-drop-handler.js             | 7 +++++++
 4 files changed, 16 insertions(+)

diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-basic-html-input.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-basic-html-input.js
index a4b91b2f67..2c147abcf1 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-basic-html-input.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-basic-html-input.js
@@ -4,6 +4,7 @@ import layout from '../templates/components/koenig-basic-html-input';
 import parserPlugins from '../options/basic-html-parser-plugins';
 import registerKeyCommands, {BASIC_KEY_COMMANDS} from '../options/key-commands';
 import validator from 'validator';
+import {DRAG_DISABLED_DATA_ATTR} from '../lib/dnd/constants';
 import {MOBILEDOC_VERSION} from 'mobiledoc-kit/renderers/mobiledoc';
 import {arrayToMap, toggleSpecialFormatEditState} from './koenig-editor';
 import {assign} from '@ember/polyfills';
@@ -214,6 +215,8 @@ export default Component.extend({
 
         this._pasteHandler = run.bind(this, this.handlePaste);
         editorElement.addEventListener('paste', this._pasteHandler);
+
+        this.element.dataset[DRAG_DISABLED_DATA_ATTR] = 'true';
     },
 
     // our ember component has rendered, now we need to render the mobiledoc
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
index 044829eb76..7db87489dd 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
@@ -1066,6 +1066,8 @@ export default Component.extend({
 
         // select the card with edit mode
         this.selectCard(card, true);
+
+        this._cardDragDropContainer.disableDrag();
     },
 
     deselectCard(card) {
@@ -1073,6 +1075,7 @@ export default Component.extend({
         card.set('isSelected', false);
         this.selectedCard = null;
         this._showCursor();
+        this._cardDragDropContainer.enableDrag();
     },
 
     deleteCard(card, cursorDirection) {
diff --git a/ghost/admin/lib/koenig-editor/addon/lib/dnd/constants.js b/ghost/admin/lib/koenig-editor/addon/lib/dnd/constants.js
index 0709e738ca..a4192faeb4 100644
--- a/ghost/admin/lib/koenig-editor/addon/lib/dnd/constants.js
+++ b/ghost/admin/lib/koenig-editor/addon/lib/dnd/constants.js
@@ -13,6 +13,9 @@ export const DRAGGABLE_SELECTOR = `[data-${dasherize(DRAGGABLE_DATA_ATTR)}]`;
 export const DROPPABLE_DATA_ATTR = 'koenigDndDroppable';
 export const DROPPABLE_SELECTOR = `[data-${dasherize(DROPPABLE_DATA_ATTR)}]`;
 
+export const DRAG_DISABLED_DATA_ATTR = 'koenigDndDisabled';
+export const DRAG_DISABLED_SELECTOR = `[data-${dasherize(DRAG_DISABLED_DATA_ATTR)}]`;
+
 export const DROP_INDICATOR_ID = 'koenig-drag-drop-indicator';
 export const DROP_INDICATOR_ZINDEX = 10000;
 
diff --git a/ghost/admin/lib/koenig-editor/addon/services/koenig-drag-drop-handler.js b/ghost/admin/lib/koenig-editor/addon/services/koenig-drag-drop-handler.js
index efef4e0a7d..8d062938d8 100644
--- a/ghost/admin/lib/koenig-editor/addon/services/koenig-drag-drop-handler.js
+++ b/ghost/admin/lib/koenig-editor/addon/services/koenig-drag-drop-handler.js
@@ -104,6 +104,13 @@ export default Service.extend({
             this.grabbedElement = utils.getParent(event.target, constants.DRAGGABLE_SELECTOR);
 
             if (this.grabbedElement) {
+                // some elements may have explicitly disabled dragging such as
+                // captions where we want to allow text selection instead
+                let dragDisabledElement = utils.getParent(event.target, constants.DRAG_DISABLED_SELECTOR);
+                if (dragDisabledElement && this.grabbedElement.contains(dragDisabledElement)) {
+                    return;
+                }
+
                 let containerElement = utils.getParent(this.grabbedElement, constants.CONTAINER_SELECTOR);
                 let container = this.containers.findBy('element', containerElement);
                 this.sourceContainer = container;