do not show card toolbar if caption has focus

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

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();

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

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);
+        }
+    }
+});

lib/koenig-editor/app/services/koenig-ui.js

@@ -0,0 +1 @@
+export {default} from 'koenig-editor/services/koenig-ui';