Merge pull request #1108 from yabwe/interaction-elements

Support any extension preventing blur of editor (Fix #830)

spec/extension.spec.js

@@ -1,4 +1,4 @@
-/*global selectElementContentsAndFire */
+/*global selectElementContentsAndFire, fireEvent */
 
 describe('Extensions TestCase', function () {
     'use strict';
@@ -284,6 +284,40 @@ describe('Extensions TestCase', function () {
             expect(tempExtension.getEditorOption('disableReturn')).toBe(true);
             expect(tempExtension.getEditorOption('spellcheck')).toBe(editor.options.spellcheck);
         });
+
+        it('should be able to prevent blur on the editor when user iteracts with extension elements', function () {
+            var sampleElOne = this.createElement('button', null, 'Test Button'),
+                sampleElTwo = this.createElement('textarea', null, 'Test Div'),
+                externalEl = this.createElement('div', 'external-element', 'External Element'),
+                TempExtension = MediumEditor.Extension.extend({
+                    getInteractionElements: function () {
+                        return [sampleElOne, sampleElTwo];
+                    }
+                }),
+                editor = this.newMediumEditor('.editor', {
+                    extensions: {
+                        'temp-extension': new TempExtension()
+                    }
+                }),
+                spy = jasmine.createSpy('handler');
+
+            selectElementContentsAndFire(editor.elements[0]);
+            jasmine.clock().tick(1);
+            expect(editor.getExtensionByName('toolbar').isDisplayed()).toBe(true);
+
+            editor.subscribe('blur', spy);
+
+            fireEvent(sampleElTwo, 'mousedown');
+            fireEvent(sampleElTwo, 'mouseup');
+            fireEvent(sampleElTwo, 'click');
+            jasmine.clock().tick(51);
+            expect(spy).not.toHaveBeenCalled();
+
+            fireEvent(externalEl, 'mousedown');
+            fireEvent(document.body, 'mouseup');
+            fireEvent(document.body, 'click');
+            expect(spy).toHaveBeenCalled();
+        });
     });
 
     describe('Button integration', function () {

src/js/events.js

@@ -1,6 +1,26 @@
 (function () {
     'use strict';
 
+    function isElementDescendantOfExtension(extensions, element) {
+        return extensions.some(function (extension) {
+            if (typeof extension.getInteractionElements !== 'function') {
+                return false;
+            }
+
+            var extensionElements = extension.getInteractionElements();
+            if (!extensionElements) {
+                return false;
+            }
+
+            if (!Array.isArray(extensionElements)) {
+                extensionElements = [extensionElements];
+            }
+            return extensionElements.some(function (el) {
+                return MediumEditor.util.isDescendant(el, element, true);
+            });
+        });
+    }
+
     var Events = function (instance) {
         this.base = instance;
         this.options = this.base.options;
@@ -377,21 +397,16 @@
         },
 
         updateFocus: function (target, eventObj) {
-            var toolbar = this.base.getExtensionByName('toolbar'),
-                toolbarEl = toolbar ? toolbar.getToolbarElement() : null,
-                anchorPreview = this.base.getExtensionByName('anchor-preview'),
-                previewEl = (anchorPreview && anchorPreview.getPreviewElement) ? anchorPreview.getPreviewElement() : null,
-                hadFocus = this.base.getFocusedElement(),
+            var hadFocus = this.base.getFocusedElement(),
                 toFocus;
 
-            // For clicks, we need to know if the mousedown that caused the click happened inside the existing focused element.
-            // If so, we don't want to focus another element
+            // For clicks, we need to know if the mousedown that caused the click happened inside the existing focused element
+            // or one of the extension elements.  If so, we don't want to focus another element
             if (hadFocus &&
                     eventObj.type === 'click' &&
                     this.lastMousedownTarget &&
                     (MediumEditor.util.isDescendant(hadFocus, this.lastMousedownTarget, true) ||
-                     MediumEditor.util.isDescendant(toolbarEl, this.lastMousedownTarget, true) ||
-                     MediumEditor.util.isDescendant(previewEl, this.lastMousedownTarget, true))) {
+                     isElementDescendantOfExtension(this.base.extensions, this.lastMousedownTarget))) {
                 toFocus = hadFocus;
             }
 
@@ -407,10 +422,9 @@
                 }, this);
             }
 
-            // Check if the target is external (not part of the editor, toolbar, or anchorpreview)
+            // Check if the target is external (not part of the editor, toolbar, or any other extension)
             var externalEvent = !MediumEditor.util.isDescendant(hadFocus, target, true) &&
-                                !MediumEditor.util.isDescendant(toolbarEl, target, true) &&
-                                !MediumEditor.util.isDescendant(previewEl, target, true);
+                                !isElementDescendantOfExtension(this.base.extensions, target);
 
             if (toFocus !== hadFocus) {
                 // If element has focus, and focus is going outside of editor

src/js/extension.js

@@ -176,6 +176,19 @@
          */
         setInactive: undefined,
 
+        /* getInteractionElements: [function ()]
+         *
+         * If the extension renders any elements that the user can interact with,
+         * this method should be implemented and return the root element or an array
+         * containing all of the root elements. MediumEditor will call this function
+         * during interaction to see if the user clicked on something outside of the editor.
+         * The elements are used to check if the target element of a click or
+         * other user event is a descendant of any extension elements.
+         * This way, the editor can also count user interaction within editor elements as
+         * interactions with the editor, and thus not trigger 'blur'
+         */
+        getInteractionElements: undefined,
+
         /************************ Helpers ************************
          * The following are helpers that are either set by MediumEditor
          * during initialization, or are helper methods which either

src/js/extensions/README.md

@@ -21,6 +21,7 @@
     * [`checkState(node)`](#checkstatenode)
     * [`destroy()`](#destroy)
     * [`queryCommandState()`](#querycommandstate)
+    * [`getInteractionElements()`](#getinteractionelements)
     * [`isActive()`](#isactive)
     * [`isAlreadyApplied(node)`](#isalreadyappliednode)
     * [`setActive()`](#setactive)
@@ -233,10 +234,17 @@ If this method returns `true`, and the `setActive()` method is defined on the ex
 
 **Returns:** `boolean` OR `null`
 
+***
+### `getInteractionElements()`
+
+If the extension renders any elements that the user can interact with, this method should be implemented and return the root element or an array containing all of the root elements.
+
+MediumEditor will call this function during interaction to see if the user clicked on something outside of the editor. The elements are used to check if the target element of a click or other user event is a descendant of any extension elements. This way, the editor can also count user interaction within editor elements as interactions with the editor, and thus not trigger 'blur'
+
 ***
 ### `isActive()`
 
-If implemented, this method will be called from MediumEditor to determine whether the button has already been set as 'active'. 
+If implemented, this method will be called from MediumEditor to determine whether the button has already been set as 'active'.
 
 If it returns `true`, this extension/button will be skipped for checking its active state as MediumEditor responds to the change in selection.
 
@@ -252,7 +260,7 @@ If implemented, this method is similar to `checkState()` in that it will be call
 
 **NOTE:**
 
-* This method will NOT be called if `checkState()` has been implemented. 
+* This method will NOT be called if `checkState()` has been implemented.
 * This method will NOT be called if `queryCommandState()` is implemented and returns a non-null value when called.
 
 **Arguments**
@@ -273,7 +281,7 @@ Currently, this method is called when updating the editor & toolbar, and if `que
 ***
 ### `setInactive()`
 
-If implemented, this method is called when MediumEditor knows that this extension has not been applied to the current selection. Curently, this is called at the beginning of each state change for the editor & toolbar. 
+If implemented, this method is called when MediumEditor knows that this extension has not been applied to the current selection. Curently, this is called at the beginning of each state change for the editor & toolbar.
 
 After calling this, MediumEditor will attempt to update the extension, either via `checkState()` or the combination of `queryCommandState()`, `isAlreadyApplied(node)`, `isActive()`, and `setActive()`
 
@@ -540,7 +548,7 @@ var CustomButtonExtension = MediumEditor.extensions.button.extend({
   name: 'custom-button-extension',
 
   action: 'bold'
-  
+
   // ... other properties/methods ...
 })
 ```
@@ -559,32 +567,32 @@ var CustomButtonExtension = MediumEditor.extensions.button.extend({
   name: 'custom-button-extension',
 
   aria: 'bold text'
-  
+
   // ... other properties/methods ...
 })
 ```
 
 ***
 ### `tagNames` _(Array)_
-        
+
 Array of element tag names that would indicate that this button has already been applied. If this action has already been applied, the button will be displayed as 'active' in the toolbar.
 
-**NOTE:** 
+**NOTE:**
 
 `tagNames` is not used if `useQueryState` is set to `true`.
 
 **Example:**
 
 The following would create a custom button extension which would be 'active' in the toolbar if the selection is within a `<b>` or a `<strong>` tag:
-      
+
 ```js
 var CustomButtonExtension = MediumEditor.extensions.button.extend({
   name: 'custom-button-extension',
 
   useQueryState: false,
 
   tagNames: ['b', 'strong'],
-  
+
   // ... other properties/methods ...
 })
 ```
@@ -599,7 +607,7 @@ A pair of css property & value(s) that indicate that this button has already bee
 * **prop** *[String]*: name of the css property
 * **value** *[String]*: value(s) of the css property (multiple values can be separated by a '|')
 
-**NOTE:** 
+**NOTE:**
 
 `style` is not used if `useQueryState` is set to `true`.
 
@@ -617,7 +625,7 @@ var CustomButtonExtension = MediumEditor.extensions.button.extend({
     prop: 'font-weight',
     value: '700|bold'
   },
-  
+
   // ... other properties/methods ...
 })
 ```

src/js/extensions/anchor-preview.js

@@ -34,6 +34,11 @@
             this.attachToEditables();
         },
 
+        getInteractionElements: function () {
+            return this.getPreviewElement();
+        },
+
+        // TODO: Remove this function in 6.0.0
         getPreviewElement: function () {
             return this.anchorPreview;
         },

src/js/extensions/toolbar.js

@@ -189,6 +189,10 @@
 
         // Toolbar accessors
 
+        getInteractionElements: function () {
+            return this.getToolbarElement();
+        },
+
         getToolbarElement: function () {
             if (!this.toolbar) {
                 this.toolbar = this.createToolbar();