@atlaskit/editor-plugin-toolbar 5.1.20 → 5.1.21

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 5.1.21
+
+### Patch Changes
+
+- [`b9f9976c6adcd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b9f9976c6adcd) -
+  Fix selection toolbar appearing mid-drag on first page load by tracking mouse button state to
+  prevent the focus event from prematurely setting shouldShowToolbar to true
+
 ## 5.1.20
 
 ### Patch Changes

package/dist/cjs/toolbarPlugin.js

@@ -13,6 +13,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _selectionToolbarOpenExperience = require("./pm-plugins/experiences/selection-toolbar-open-experience");
 var _pluginKey = require("./pm-plugins/plugin-key");
@@ -113,6 +114,11 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
       return [{
         name: 'editor-toolbar-selection',
         plugin: function plugin() {
+          // Tracks mouse-down state to prevent the focus event (first page load)
+          // from prematurely showing the toolbar mid-drag
+          var mouseState = {
+            isMouseDown: false
+          };
           return new _safePlugin.SafePlugin({
             key: _pluginKey.editorToolbarPluginKey,
             state: {
@@ -145,6 +151,7 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
                 type: 'mouseup',
                 listener: function listener(ev) {
                   var _api$editorViewMode;
+                  mouseState.isMouseDown = false;
                   var event = ev;
                   var isInToolbar = (0, _toolbar.isEventInContainer)(event, _consts.DEFAULT_POPUP_SELECTORS.toolbarContainer);
                   var isInPortal = (0, _toolbar.isEventInContainer)(event, _consts.DEFAULT_POPUP_SELECTORS.portal);
@@ -162,6 +169,11 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
               var unbindEditorViewFocus = (0, _bindEventListener.bind)(_view.dom, {
                 type: 'focus',
                 listener: function listener() {
+                  // On first page load, focus fires after mousedown — skip to
+                  // avoid showing the toolbar mid-drag
+                  if (mouseState.isMouseDown && (0, _platformFeatureFlags.fg)('platform_editor_fix_toolbar_on_first_highlight')) {
+                    return;
+                  }
                   _view.dispatch(_view.state.tr.setMeta(_pluginKey.editorToolbarPluginKey, {
                     shouldShowToolbar: true
                   }));
@@ -177,6 +189,7 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
             props: {
               handleDOMEvents: {
                 mousedown: function mousedown(view) {
+                  mouseState.isMouseDown = true;
                   view.dispatch(view.state.tr.setMeta(_pluginKey.editorToolbarPluginKey, {
                     shouldShowToolbar: false
                   }));

package/dist/es2019/toolbarPlugin.js

@@ -4,6 +4,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getSelectionToolbarOpenExperiencePlugin } from './pm-plugins/experiences/selection-toolbar-open-experience';
 import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
@@ -98,6 +99,11 @@ export const toolbarPlugin = ({
       return [{
         name: 'editor-toolbar-selection',
         plugin: () => {
+          // Tracks mouse-down state to prevent the focus event (first page load)
+          // from prematurely showing the toolbar mid-drag
+          const mouseState = {
+            isMouseDown: false
+          };
           return new SafePlugin({
             key: editorToolbarPluginKey,
             state: {
@@ -135,6 +141,7 @@ export const toolbarPlugin = ({
                 type: 'mouseup',
                 listener: function (ev) {
                   var _api$editorViewMode;
+                  mouseState.isMouseDown = false;
                   const event = ev;
                   const isInToolbar = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.toolbarContainer);
                   const isInPortal = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.portal);
@@ -152,6 +159,11 @@ export const toolbarPlugin = ({
               const unbindEditorViewFocus = bind(view.dom, {
                 type: 'focus',
                 listener: () => {
+                  // On first page load, focus fires after mousedown — skip to
+                  // avoid showing the toolbar mid-drag
+                  if (mouseState.isMouseDown && fg('platform_editor_fix_toolbar_on_first_highlight')) {
+                    return;
+                  }
                   view.dispatch(view.state.tr.setMeta(editorToolbarPluginKey, {
                     shouldShowToolbar: true
                   }));
@@ -167,6 +179,7 @@ export const toolbarPlugin = ({
             props: {
               handleDOMEvents: {
                 mousedown: view => {
+                  mouseState.isMouseDown = true;
                   view.dispatch(view.state.tr.setMeta(editorToolbarPluginKey, {
                     shouldShowToolbar: false
                   }));

package/dist/esm/toolbarPlugin.js

@@ -8,6 +8,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getSelectionToolbarOpenExperiencePlugin } from './pm-plugins/experiences/selection-toolbar-open-experience';
 import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
@@ -106,6 +107,11 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
       return [{
         name: 'editor-toolbar-selection',
         plugin: function plugin() {
+          // Tracks mouse-down state to prevent the focus event (first page load)
+          // from prematurely showing the toolbar mid-drag
+          var mouseState = {
+            isMouseDown: false
+          };
           return new SafePlugin({
             key: editorToolbarPluginKey,
             state: {
@@ -138,6 +144,7 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
                 type: 'mouseup',
                 listener: function listener(ev) {
                   var _api$editorViewMode;
+                  mouseState.isMouseDown = false;
                   var event = ev;
                   var isInToolbar = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.toolbarContainer);
                   var isInPortal = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.portal);
@@ -155,6 +162,11 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
               var unbindEditorViewFocus = bind(_view.dom, {
                 type: 'focus',
                 listener: function listener() {
+                  // On first page load, focus fires after mousedown — skip to
+                  // avoid showing the toolbar mid-drag
+                  if (mouseState.isMouseDown && fg('platform_editor_fix_toolbar_on_first_highlight')) {
+                    return;
+                  }
                   _view.dispatch(_view.state.tr.setMeta(editorToolbarPluginKey, {
                     shouldShowToolbar: true
                   }));
@@ -170,6 +182,7 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
             props: {
               handleDOMEvents: {
                 mousedown: function mousedown(view) {
+                  mouseState.isMouseDown = true;
                   view.dispatch(view.state.tr.setMeta(editorToolbarPluginKey, {
                     shouldShowToolbar: false
                   }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "5.1.20",
+	"version": "5.1.21",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/editor-toolbar": "^0.20.0",
 		"@atlaskit/editor-toolbar-model": "^0.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^55.0.0",
+		"@atlaskit/tmp-editor-statsig": "^55.1.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -50,6 +50,9 @@
 		"react": "^18.2.0"
 	},
 	"platform-feature-flags": {
+		"platform_editor_fix_toolbar_on_first_highlight": {
+			"type": "boolean"
+		},
 		"platform_editor_toolbar_aifc_placement_overridden": {
 			"type": "boolean"
 		},