From 9075759335be1d14ad702415bee9c4746041c342 Mon Sep 17 00:00:00 2001 From: Nate Mielnik Date: Wed, 1 Jun 2016 08:19:30 -0400 Subject: [PATCH 1/2] Add getInteractionElements to extension contract for preventing blur --- spec/extension.spec.js | 36 ++++++++++++++++++++++++++- src/js/events.js | 38 ++++++++++++++++++++--------- src/js/extension.js | 10 ++++++++ src/js/extensions/anchor-preview.js | 5 ++++ src/js/extensions/toolbar.js | 4 +++ 5 files changed, 80 insertions(+), 13 deletions(-) diff --git a/spec/extension.spec.js b/spec/extension.spec.js index 015a0bf42..0ef322567 100644 --- a/spec/extension.spec.js +++ b/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 () { diff --git a/src/js/events.js b/src/js/events.js index a46735c7e..11a817071 100644 --- a/src/js/events.js +++ b/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 diff --git a/src/js/extension.js b/src/js/extension.js index 414eb0d5d..2b8a2ec7f 100644 --- a/src/js/extension.js +++ b/src/js/extension.js @@ -176,6 +176,16 @@ */ setInactive: undefined, + /* getInteractionElements: [function ()] + * + * If the extension renders any elements that the user can interact with + * this function should be implemented and return the root element or an array + * containg all of the root elements. MediumEditor will call this function to + * prevent the editor from triggering 'blur' when a user interacts with + * elements rendered by an extension. + */ + getInteractionElements: undefined, + /************************ Helpers ************************ * The following are helpers that are either set by MediumEditor * during initialization, or are helper methods which either diff --git a/src/js/extensions/anchor-preview.js b/src/js/extensions/anchor-preview.js index a186ae821..58d348227 100644 --- a/src/js/extensions/anchor-preview.js +++ b/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; }, diff --git a/src/js/extensions/toolbar.js b/src/js/extensions/toolbar.js index 33d6f13b0..16ce86d53 100644 --- a/src/js/extensions/toolbar.js +++ b/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(); From df7a6337d33a71835256dc71cb3c5bcfe65dd571 Mon Sep 17 00:00:00 2001 From: Nate Mielnik Date: Wed, 1 Jun 2016 08:27:18 -0400 Subject: [PATCH 2/2] Add documentation for getInteractionElements for extensions --- src/js/extension.js | 13 ++++++++----- src/js/extensions/README.md | 30 +++++++++++++++++++----------- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/js/extension.js b/src/js/extension.js index 2b8a2ec7f..0872a3f10 100644 --- a/src/js/extension.js +++ b/src/js/extension.js @@ -178,11 +178,14 @@ /* getInteractionElements: [function ()] * - * If the extension renders any elements that the user can interact with - * this function should be implemented and return the root element or an array - * containg all of the root elements. MediumEditor will call this function to - * prevent the editor from triggering 'blur' when a user interacts with - * elements rendered by an extension. + * 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, diff --git a/src/js/extensions/README.md b/src/js/extensions/README.md index 14ccbfd7b..36656f2d6 100644 --- a/src/js/extensions/README.md +++ b/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,24 +567,24 @@ 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 `` or a `` tag: - + ```js var CustomButtonExtension = MediumEditor.extensions.button.extend({ name: 'custom-button-extension', @@ -584,7 +592,7 @@ var CustomButtonExtension = MediumEditor.extensions.button.extend({ 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 ... }) ```