diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js index c540b73fad..599bc3cfa2 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js @@ -4,8 +4,11 @@ import layout from '../templates/components/koenig-caption-input'; import {computed} from '@ember/object'; import {kgStyle} from '../helpers/kg-style'; import {run} from '@ember/runloop'; +import {inject as service} from '@ember/service'; export default Component.extend({ + koenigUi: service(), + tagName: 'figcaption', classNameBindings: ['figCaptionClass'], layout, @@ -40,6 +43,7 @@ export default Component.extend({ willDestroyElement() { this._super(...arguments); + this.koenigUi.captionLostFocus(this); this._detachHandlers(); }, @@ -71,6 +75,18 @@ export default Component.extend({ } }, + // events ------------------------------------------------------------------ + + focusIn() { + this.koenigUi.captionGainedFocus(this); + }, + + focusOut() { + this.koenigUi.captionLostFocus(this); + }, + + // private ----------------------------------------------------------------- + _attachHandlers() { if (!this._keypressHandler) { this._keypressHandler = run.bind(this, this._handleKeypress); diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js index a9d539ccc5..d6f8fb20ce 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js @@ -9,7 +9,7 @@ import {inject as service} from '@ember/service'; const TICK_HEIGHT = 8; export default Component.extend({ - koenigDragDropHandler: service(), + koenigUi: service(), layout, attributeBindings: ['_style:style'], @@ -44,8 +44,8 @@ export default Component.extend({ onEnterEdit() {}, onLeaveEdit() {}, - shouldShowToolbar: computed('showToolbar', 'koenigDragDropHandler.isDragging', function () { - return this.showToolbar && !this.koenigDragDropHandler.isDragging; + shouldShowToolbar: computed('showToolbar', 'koenigUi.{captionHasFocus,isDragging}', function () { + return this.showToolbar && !this.koenigUi.captionHasFocus && !this.koenigUi.isDragging; }), toolbarStyle: computed('shouldShowToolbar', 'toolbarWidth', 'toolbarHeight', function () { @@ -166,10 +166,11 @@ export default Component.extend({ this._skipMouseUp = true; } - // don't trigger select->edit transition for clicks in the caption + // don't trigger select->edit transition for clicks in the caption or + // when clicking out of the caption if (isSelected && hasEditMode) { let allowClickthrough = !!event.target.closest('[data-kg-allow-clickthrough]'); - if (allowClickthrough) { + if (allowClickthrough || this.koenigUi.captionHasFocus) { this._skipMouseUp = true; } } @@ -179,7 +180,7 @@ export default Component.extend({ mouseUp(event) { let {isSelected, isEditing, hasEditMode, _skipMouseUp} = this; - if (!_skipMouseUp && hasEditMode && isSelected && !isEditing && !this.koenigDragDropHandler.isDragging) { + if (!_skipMouseUp && hasEditMode && isSelected && !isEditing && !this.koenigUi.isDragging) { this.editCard(); this.set('showToolbar', true); event.preventDefault(); 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 8d062938d8..5aa869ecc9 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 @@ -4,8 +4,10 @@ import Container from '../lib/dnd/container'; import ScrollHandler from '../lib/dnd/scroll-handler'; import Service from '@ember/service'; import {A} from '@ember/array'; +import {alias} from '@ember/object/computed'; import {didCancel, task, waitForProperty} from 'ember-concurrency'; import {run} from '@ember/runloop'; +import {inject as service} from '@ember/service'; // this service allows registration of "containers" // containers can have both draggables and droppables @@ -15,13 +17,15 @@ import {run} from '@ember/runloop'; // this service keeps track of all containers and has centralized event handling for mouse events export default Service.extend({ + koenigUi: service(), containers: null, ghostInfo: null, grabbedElement: null, // TODO: standardise on draggableInfo.element - isDragging: false, sourceContainer: null, + isDragging: alias('koenigUi.isDragging'), + _eventHandlers: null, // lifecycle --------------------------------------------------------------- diff --git a/ghost/admin/lib/koenig-editor/addon/services/koenig-ui.js b/ghost/admin/lib/koenig-editor/addon/services/koenig-ui.js new file mode 100644 index 0000000000..03d66aef22 --- /dev/null +++ b/ghost/admin/lib/koenig-editor/addon/services/koenig-ui.js @@ -0,0 +1,18 @@ +import Service from '@ember/service'; + +export default Service.extend({ + captionHasFocus: false, + isDragging: false, + + captionGainedFocus(caption) { + this._focusedCaption = caption; + this.set('captionHasFocus', true); + }, + + captionLostFocus(caption) { + if (this._focusedCaption === caption) { + this._focusedCaption = null; + this.set('captionHasFocus', false); + } + } +}); diff --git a/ghost/admin/lib/koenig-editor/app/services/koenig-ui.js b/ghost/admin/lib/koenig-editor/app/services/koenig-ui.js new file mode 100644 index 0000000000..8aedc82a64 --- /dev/null +++ b/ghost/admin/lib/koenig-editor/app/services/koenig-ui.js @@ -0,0 +1 @@ +export {default} from 'koenig-editor/services/koenig-ui';