Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

🐛 Fixed drag-n-drop card reordering interfering with caption and markdown/html card text selection

Browse source 
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
This commit is contained in:
Kevin Ansfield 2019-01-28 09:35:58 +00:00
parent a7e9796101
commit c763b3218e
4 changed files with 16 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ghost/admin/lib/koenig-editor/addon/components/koenig-basic-html-input.js
View file

@ -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

3
ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
View file

@ -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) {

3
ghost/admin/lib/koenig-editor/addon/lib/dnd/constants.js
View file

@ -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;

7
ghost/admin/lib/koenig-editor/addon/services/koenig-drag-drop-handler.js
View file

@ -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;