@atlaskit/editor-plugin-toolbar 11.0.5 → 12.0.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 12.0.1
+
+### Patch Changes
+
+- [`eec66a5b383e5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eec66a5b383e5) -
+  Scope selection toolbar interactions and dropdown refocus behavior to their owning editor behind
+  the `platform_editor_toolbar_multi_editor_fix` experiment.
+- Updated dependencies
+
+## 12.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.0.5
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-experiments/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},

package/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/0f961f0e-ea5b-4c29-8cb4-43f8e95ec14e
 name: '@atlaskit/editor-plugin-toolbar'
-ownerId: ari:cloud:identity::team/2484e1f6-f62c-4a70-95f1-8e5695c51b6b # Editor Jenga
+ownerId: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb # Editor Developers
 labels:
   - platform-code
   - platform-afm
@@ -16,14 +16,14 @@ links:
     url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
   - name: Slack Channel
     type: CHAT_CHANNEL
-    url: https://atlassian.enterprise.slack.com/archives/C061GUMN3NY # #team-cc-editor-exp-cloud-native
+    url: https://atlassian.enterprise.slack.com/archives/CFG3PSQ9E # #help-editor
   - name: Editor Plugin Toolbar
     type: REPOSITORY
     url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/editor/editor-plugin-toolbar
 customFields:
   - name: Department
     type: text
-    value: Eng - Editor Autonomy - Jenga
+    value: Editor Developers
   - name: Trusted Reviewer Teams
     type: text
     value: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb

package/dist/cjs/toolbarPlugin.js

@@ -14,6 +14,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 _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _selectionToolbarOpenExperience = require("./pm-plugins/experiences/selection-toolbar-open-experience");
 var _pluginKey = require("./pm-plugins/plugin-key");
@@ -77,6 +78,9 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
       disableSelectionToolbarWhenPinned: false
     } : _ref$config;
   var refs = {};
+  var handleToolbarMouseUp = function handleToolbarMouseUp(event) {
+    refs.toolbarMouseUpEvent = event.nativeEvent;
+  };
   var disableSelectionToolbar = config.disableSelectionToolbar,
     disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned,
     _config$contextualFor = config.contextualFormattingEnabled,
@@ -186,16 +190,34 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
               var unbind = (0, _bindEventListener.bind)(_view.root, {
                 type: 'mouseup',
                 listener: function listener(ev) {
-                  var _api$editorViewMode;
+                  var _api$editorViewMode2;
                   mouseState.isMouseDown = false;
                   var event = ev;
+                  if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_toolbar_multi_editor_fix')) {
+                    var _api$editorViewMode;
+                    // Scope mouseups to this editor and its React-portaled toolbar.
+                    var isMouseUpInOwnedToolbar = refs.toolbarMouseUpEvent === event;
+                    var isMouseUpInEditor = event.composedPath().includes(_view.dom);
+                    refs.toolbarMouseUpEvent = undefined;
+
+                    // Prevent outside clicks from reopening a blurred editor's toolbar.
+                    var _editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
+                    var _isViewModeEnabled = (_editorViewModePlugin === null || _editorViewModePlugin === void 0 ? void 0 : _editorViewModePlugin.mode) === 'view';
+                    // Include focus in nested editable islands when enabled.
+                    var _hasEditorFocus = (0, _fg.fg)('platform_editor_blocks_patch_7') ? _view.hasFocus() || _view.dom.contains(_view.root.activeElement) : _view.hasFocus();
+                    var shouldShowToolbar = _isViewModeEnabled ? isMouseUpInEditor || isMouseUpInOwnedToolbar : _hasEditorFocus || isMouseUpInOwnedToolbar;
+                    _view.dispatch(_view.state.tr.setMeta(_pluginKey.editorToolbarPluginKey, {
+                      shouldShowToolbar: shouldShowToolbar
+                    }));
+                    return;
+                  }
                   var isInToolbar = (0, _toolbar.isEventInContainer)(event, _consts.DEFAULT_POPUP_SELECTORS.toolbarContainer);
                   var isInPortal = (0, _toolbar.isEventInContainer)(event, _consts.DEFAULT_POPUP_SELECTORS.portal);
 
                   // We only want to set selectionStable to true if the editor has focus
                   // to prevent the toolbar from showing when the editor is blurred
                   // due to a click outside the editor.
-                  var editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
+                  var editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState();
                   var isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
                   // Focus can sit inside a nested editable region ProseMirror does not own -
                   // such as a reference synced block's island - where `view.hasFocus()` is
@@ -263,7 +285,8 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
         api: api,
         editorView: editorView,
         mountPoint: popupsMountPoint,
-        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
+        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false,
+        onToolbarMouseUp: handleToolbarMouseUp
       });
     } : undefined
   };

package/dist/cjs/ui/SelectionToolbar/index.js

@@ -20,6 +20,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../consts");
@@ -68,7 +69,8 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
   var api = _ref.api,
     editorView = _ref.editorView,
     mountPoint = _ref.mountPoint,
-    disableSelectionToolbarWhenPinned = _ref.disableSelectionToolbarWhenPinned;
+    disableSelectionToolbarWhenPinned = _ref.disableSelectionToolbarWhenPinned,
+    onToolbarMouseUp = _ref.onToolbarMouseUp;
   var _usePluginState = usePluginState(api),
     connectivityStateMode = _usePluginState.connectivityStateMode,
     editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
@@ -101,15 +103,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
   currentUserIntent && currentUserIntent !== 'default' && !(currentUserIntent === 'dragHandleSelected' && !isCellSelection) || (0, _coreUtils.isSSR)()) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_ui.Popup
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , {
-    offset: [0, 10],
-    target: (0, _utils2.getDomRefFromSelection)(editorView),
-    onPositionCalculated: onPositionCalculated,
-    mountTo: mountPoint,
-    zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex
-  }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
+  var toolbarContent = /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
     editorViewMode: editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit',
@@ -134,14 +128,26 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
       menuSection: _editorToolbar.ToolbarDropdownItemSection,
       group: _editorToolbar.ToolbarButtonGroup
     }
-  }))));
+  })));
+  return /*#__PURE__*/_react.default.createElement(_ui.Popup
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+  , {
+    offset: [0, 10],
+    target: (0, _utils2.getDomRefFromSelection)(editorView),
+    onPositionCalculated: onPositionCalculated,
+    mountTo: mountPoint,
+    zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex
+  }, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_toolbar_multi_editor_fix') ? /*#__PURE__*/_react.default.createElement("div", {
+    onMouseUpCapture: onToolbarMouseUp
+  }, toolbarContent) : toolbarContent);
 };
 var SelectionToolbarWithErrorBoundary = exports.SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErrorBoundary(_ref3) {
   var _api$analytics2;
   var api = _ref3.api,
     editorView = _ref3.editorView,
     mountPoint = _ref3.mountPoint,
-    disableSelectionToolbarWhenPinned = _ref3.disableSelectionToolbarWhenPinned;
+    disableSelectionToolbarWhenPinned = _ref3.disableSelectionToolbarWhenPinned,
+    onToolbarMouseUp = _ref3.onToolbarMouseUp;
   return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
     component: _analytics.ACTION_SUBJECT.TOOLBAR,
     componentId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
@@ -151,6 +157,7 @@ var SelectionToolbarWithErrorBoundary = exports.SelectionToolbarWithErrorBoundar
     api: api,
     editorView: editorView,
     mountPoint: mountPoint,
-    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
+    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned,
+    onToolbarMouseUp: onToolbarMouseUp
   }));
 };

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 { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getSelectionToolbarOpenExperiencePlugin } from './pm-plugins/experiences/selection-toolbar-open-experience';
 import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
@@ -60,6 +61,9 @@ export const toolbarPlugin = ({
   }
 }) => {
   const refs = {};
+  const handleToolbarMouseUp = event => {
+    refs.toolbarMouseUpEvent = event.nativeEvent;
+  };
   const {
     disableSelectionToolbar,
     disableSelectionToolbarWhenPinned,
@@ -178,16 +182,34 @@ export const toolbarPlugin = ({
               const unbind = bind(view.root, {
                 type: 'mouseup',
                 listener: function (ev) {
-                  var _api$editorViewMode;
+                  var _api$editorViewMode2;
                   mouseState.isMouseDown = false;
                   const event = ev;
+                  if (isExperimentEnabled('platform_editor_toolbar_multi_editor_fix')) {
+                    var _api$editorViewMode;
+                    // Scope mouseups to this editor and its React-portaled toolbar.
+                    const isMouseUpInOwnedToolbar = refs.toolbarMouseUpEvent === event;
+                    const isMouseUpInEditor = event.composedPath().includes(view.dom);
+                    refs.toolbarMouseUpEvent = undefined;
+
+                    // Prevent outside clicks from reopening a blurred editor's toolbar.
+                    const editorViewModePlugin = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
+                    const isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
+                    // Include focus in nested editable islands when enabled.
+                    const hasEditorFocus = fg('platform_editor_blocks_patch_7') ? view.hasFocus() || view.dom.contains(view.root.activeElement) : view.hasFocus();
+                    const shouldShowToolbar = isViewModeEnabled ? isMouseUpInEditor || isMouseUpInOwnedToolbar : hasEditorFocus || isMouseUpInOwnedToolbar;
+                    view.dispatch(view.state.tr.setMeta(editorToolbarPluginKey, {
+                      shouldShowToolbar
+                    }));
+                    return;
+                  }
                   const isInToolbar = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.toolbarContainer);
                   const isInPortal = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.portal);
 
                   // We only want to set selectionStable to true if the editor has focus
                   // to prevent the toolbar from showing when the editor is blurred
                   // due to a click outside the editor.
-                  const editorViewModePlugin = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
+                  const editorViewModePlugin = api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState();
                   const isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
                   // Focus can sit inside a nested editable region ProseMirror does not own -
                   // such as a reference synced block's island - where `view.hasFocus()` is
@@ -254,7 +276,8 @@ export const toolbarPlugin = ({
         api: api,
         editorView: editorView,
         mountPoint: popupsMountPoint,
-        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
+        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false,
+        onToolbarMouseUp: handleToolbarMouseUp
       });
     } : undefined
   };

package/dist/es2019/ui/SelectionToolbar/index.js

@@ -13,6 +13,7 @@ import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state'
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
@@ -59,7 +60,8 @@ export const SelectionToolbar = ({
   api,
   editorView,
   mountPoint,
-  disableSelectionToolbarWhenPinned
+  disableSelectionToolbarWhenPinned,
+  onToolbarMouseUp
 }) => {
   var _ref, _api$toolbar, _api$toolbar2;
   const {
@@ -94,15 +96,7 @@ export const SelectionToolbar = ({
   currentUserIntent && currentUserIntent !== 'default' && !(currentUserIntent === 'dragHandleSelected' && !isCellSelection) || isSSR()) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Popup
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , {
-    offset: [0, 10],
-    target: getDomRefFromSelection(editorView),
-    onPositionCalculated: onPositionCalculated,
-    mountTo: mountPoint,
-    zIndex: akEditorFloatingDialogZIndex
-  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+  const toolbarContent = /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
     editorViewMode: editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit',
@@ -127,13 +121,25 @@ export const SelectionToolbar = ({
       menuSection: ToolbarDropdownItemSection,
       group: ToolbarButtonGroup
     }
-  }))));
+  })));
+  return /*#__PURE__*/React.createElement(Popup
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+  , {
+    offset: [0, 10],
+    target: getDomRefFromSelection(editorView),
+    onPositionCalculated: onPositionCalculated,
+    mountTo: mountPoint,
+    zIndex: akEditorFloatingDialogZIndex
+  }, isExperimentEnabled('platform_editor_toolbar_multi_editor_fix') ? /*#__PURE__*/React.createElement("div", {
+    onMouseUpCapture: onToolbarMouseUp
+  }, toolbarContent) : toolbarContent);
 };
 export const SelectionToolbarWithErrorBoundary = ({
   api,
   editorView,
   mountPoint,
-  disableSelectionToolbarWhenPinned
+  disableSelectionToolbarWhenPinned,
+  onToolbarMouseUp
 }) => {
   var _api$analytics2;
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -145,6 +151,7 @@ export const SelectionToolbarWithErrorBoundary = ({
     api: api,
     editorView: editorView,
     mountPoint: mountPoint,
-    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
+    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned,
+    onToolbarMouseUp: onToolbarMouseUp
   }));
 };

package/dist/esm/toolbarPlugin.js

@@ -10,6 +10,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 { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getSelectionToolbarOpenExperiencePlugin } from './pm-plugins/experiences/selection-toolbar-open-experience';
 import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
@@ -70,6 +71,9 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
       disableSelectionToolbarWhenPinned: false
     } : _ref$config;
   var refs = {};
+  var handleToolbarMouseUp = function handleToolbarMouseUp(event) {
+    refs.toolbarMouseUpEvent = event.nativeEvent;
+  };
   var disableSelectionToolbar = config.disableSelectionToolbar,
     disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned,
     _config$contextualFor = config.contextualFormattingEnabled,
@@ -179,16 +183,34 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
               var unbind = bind(_view.root, {
                 type: 'mouseup',
                 listener: function listener(ev) {
-                  var _api$editorViewMode;
+                  var _api$editorViewMode2;
                   mouseState.isMouseDown = false;
                   var event = ev;
+                  if (isExperimentEnabled('platform_editor_toolbar_multi_editor_fix')) {
+                    var _api$editorViewMode;
+                    // Scope mouseups to this editor and its React-portaled toolbar.
+                    var isMouseUpInOwnedToolbar = refs.toolbarMouseUpEvent === event;
+                    var isMouseUpInEditor = event.composedPath().includes(_view.dom);
+                    refs.toolbarMouseUpEvent = undefined;
+
+                    // Prevent outside clicks from reopening a blurred editor's toolbar.
+                    var _editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
+                    var _isViewModeEnabled = (_editorViewModePlugin === null || _editorViewModePlugin === void 0 ? void 0 : _editorViewModePlugin.mode) === 'view';
+                    // Include focus in nested editable islands when enabled.
+                    var _hasEditorFocus = fg('platform_editor_blocks_patch_7') ? _view.hasFocus() || _view.dom.contains(_view.root.activeElement) : _view.hasFocus();
+                    var shouldShowToolbar = _isViewModeEnabled ? isMouseUpInEditor || isMouseUpInOwnedToolbar : _hasEditorFocus || isMouseUpInOwnedToolbar;
+                    _view.dispatch(_view.state.tr.setMeta(editorToolbarPluginKey, {
+                      shouldShowToolbar: shouldShowToolbar
+                    }));
+                    return;
+                  }
                   var isInToolbar = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.toolbarContainer);
                   var isInPortal = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.portal);
 
                   // We only want to set selectionStable to true if the editor has focus
                   // to prevent the toolbar from showing when the editor is blurred
                   // due to a click outside the editor.
-                  var editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
+                  var editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState();
                   var isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
                   // Focus can sit inside a nested editable region ProseMirror does not own -
                   // such as a reference synced block's island - where `view.hasFocus()` is
@@ -256,7 +278,8 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
         api: api,
         editorView: editorView,
         mountPoint: popupsMountPoint,
-        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
+        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false,
+        onToolbarMouseUp: handleToolbarMouseUp
       });
     } : undefined
   };

package/dist/esm/ui/SelectionToolbar/index.js

@@ -13,6 +13,7 @@ import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state'
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
@@ -60,7 +61,8 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
   var api = _ref.api,
     editorView = _ref.editorView,
     mountPoint = _ref.mountPoint,
-    disableSelectionToolbarWhenPinned = _ref.disableSelectionToolbarWhenPinned;
+    disableSelectionToolbarWhenPinned = _ref.disableSelectionToolbarWhenPinned,
+    onToolbarMouseUp = _ref.onToolbarMouseUp;
   var _usePluginState = usePluginState(api),
     connectivityStateMode = _usePluginState.connectivityStateMode,
     editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
@@ -93,15 +95,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
   currentUserIntent && currentUserIntent !== 'default' && !(currentUserIntent === 'dragHandleSelected' && !isCellSelection) || isSSR()) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Popup
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , {
-    offset: [0, 10],
-    target: getDomRefFromSelection(editorView),
-    onPositionCalculated: onPositionCalculated,
-    mountTo: mountPoint,
-    zIndex: akEditorFloatingDialogZIndex
-  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+  var toolbarContent = /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
     editorViewMode: editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit',
@@ -126,14 +120,26 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
       menuSection: ToolbarDropdownItemSection,
       group: ToolbarButtonGroup
     }
-  }))));
+  })));
+  return /*#__PURE__*/React.createElement(Popup
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+  , {
+    offset: [0, 10],
+    target: getDomRefFromSelection(editorView),
+    onPositionCalculated: onPositionCalculated,
+    mountTo: mountPoint,
+    zIndex: akEditorFloatingDialogZIndex
+  }, isExperimentEnabled('platform_editor_toolbar_multi_editor_fix') ? /*#__PURE__*/React.createElement("div", {
+    onMouseUpCapture: onToolbarMouseUp
+  }, toolbarContent) : toolbarContent);
 };
 export var SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErrorBoundary(_ref3) {
   var _api$analytics2;
   var api = _ref3.api,
     editorView = _ref3.editorView,
     mountPoint = _ref3.mountPoint,
-    disableSelectionToolbarWhenPinned = _ref3.disableSelectionToolbarWhenPinned;
+    disableSelectionToolbarWhenPinned = _ref3.disableSelectionToolbarWhenPinned,
+    onToolbarMouseUp = _ref3.onToolbarMouseUp;
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.TOOLBAR,
     componentId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
@@ -143,6 +149,7 @@ export var SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErro
     api: api,
     editorView: editorView,
     mountPoint: mountPoint,
-    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
+    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned,
+    onToolbarMouseUp: onToolbarMouseUp
   }));
 };

package/dist/types/ui/SelectionToolbar/index.d.ts

@@ -7,7 +7,8 @@ type SelectionToolbarProps = {
     disableSelectionToolbarWhenPinned: boolean;
     editorView: EditorView;
     mountPoint: HTMLElement | undefined;
+    onToolbarMouseUp?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
-export declare const SelectionToolbar: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element | null;
-export declare const SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element;
+export declare const SelectionToolbar: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, onToolbarMouseUp, }: SelectionToolbarProps) => React.JSX.Element | null;
+export declare const SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, onToolbarMouseUp, }: SelectionToolbarProps) => React.JSX.Element;
 export {};

package/docs/0-intro.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { AtlassianInternalWarning, code, md } from '@atlaskit/docs';
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { createEditorUseOnlyNotice } from '@atlaskit/editor-common/doc-utils';
 import { token } from '@atlaskit/tokens';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "11.0.5",
+	"version": "12.0.1",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,23 +21,24 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/browser-apis": "^1.2.0",
-		"@atlaskit/editor-plugin-analytics": "^14.0.0",
-		"@atlaskit/editor-plugin-connectivity": "^14.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^16.0.0",
-		"@atlaskit/editor-plugin-selection": "^14.0.0",
-		"@atlaskit/editor-plugin-user-intent": "^12.0.0",
-		"@atlaskit/editor-plugin-user-preferences": "^12.0.0",
+		"@atlaskit/editor-plugin-analytics": "^15.0.0",
+		"@atlaskit/editor-plugin-connectivity": "^15.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^17.0.0",
+		"@atlaskit/editor-plugin-selection": "^15.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^13.0.0",
+		"@atlaskit/editor-plugin-user-preferences": "^13.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
 		"@atlaskit/editor-toolbar": "^2.4.0",
 		"@atlaskit/editor-toolbar-model": "^1.2.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/tmp-editor-statsig": "^147.0.0",
+		"@atlaskit/tmp-editor-statsig": "^147.1.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.10.0",
+		"@atlaskit/editor-common": "^119.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},