@atlaskit/editor-plugin-toolbar 4.0.2 → 4.0.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 4.0.4
+
+### Patch Changes
+
+- [`ba05557f777bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba05557f777bf) -
+  Add support to render selection toolbar in editors which have an ancestor elemenent which has
+  position fixed, most common use case is for the chromeless appearance when rendered inside modals,
+  popups etc.
+- Updated dependencies
+
+## 4.0.3
+
+### Patch Changes
+
+- [`1265c260f9bad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1265c260f9bad) -
+  [ED-29455] clean up experiment platform_editor_toolbar_migrate_loom
+- Updated dependencies
+
 ## 4.0.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"extends": "../../../../tsconfig.entry-points.confluence.json",
+	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-toolbar",

package/dist/cjs/toolbarPlugin.js

@@ -10,8 +10,9 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireDefault(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _utils2 = 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");
@@ -36,7 +37,7 @@ function getSelectedNode(editorState) {
     };
   }
   var nodes = editorState.schema.nodes;
-  var selectedNode = (0, _utils.findSelectedNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock])(selection);
+  var selectedNode = (0, _utils2.findSelectedNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock])(selection);
   if (selectedNode) {
     return {
       node: selectedNode.node,
@@ -47,7 +48,7 @@ function getSelectedNode(editorState) {
       })
     };
   }
-  var parentNode = (0, _utils.findParentNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.listItem, nodes.taskItem])(selection);
+  var parentNode = (0, _utils2.findParentNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.listItem, nodes.taskItem])(selection);
   if (parentNode) {
     return {
       node: parentNode.node,
@@ -83,6 +84,7 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
     breakpointPreset = config.breakpointPreset;
   var registry = (0, _editorToolbarModel.createComponentRegistry)();
   registry.register((0, _toolbarComponents.getToolbarComponents)(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
+  var cachedCalculateToolbarPosition = (0, _expValEquals.expValEquals)('platform_editor_sel_toolbar_fix', 'isEnabled', true) ? (0, _utils.calculateToolbarPositionTrackHead)(_consts.SELECTION_TOOLBAR_LABEL) : undefined;
   return {
     name: 'toolbar',
     actions: {
@@ -209,19 +211,12 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
       if (!editorView) {
         return null;
       }
-      if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_patch_7')) {
-        return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbarWithErrorBoundary, {
-          api: api,
-          editorView: editorView,
-          mountPoint: popupsMountPoint,
-          disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
-        });
-      }
-      return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbar, {
+      return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbarWithErrorBoundary, {
         api: api,
         editorView: editorView,
         mountPoint: popupsMountPoint,
-        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
+        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false,
+        calculateToolbarPosition: cachedCalculateToolbarPosition
       });
     } : undefined
   };

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

@@ -70,42 +70,25 @@ var usePluginState = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(fun
     selectedNode: selectedNode
   };
 });
-var useOnPositionCalculated = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
-  return (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_patch_7');
-}, function (editorView) {
+var useOnPositionCalculated = function useOnPositionCalculated(editorView, cachedCalculateToolbarPosition) {
   var onPositionCalculated = (0, _react.useCallback)(function (position) {
     try {
-      var toolbarTitle = _consts.SELECTION_TOOLBAR_LABEL;
-
       // Show special position on cell selection only when editor controls experiment is enabled
       var isEditorControlsEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls', 'cohort', 'variant1');
       var isCellSelection = ('$anchorCell' in editorView.state.selection);
       if (isCellSelection && isEditorControlsEnabled) {
-        return (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle)(editorView, position);
+        return (0, _utils.calculateToolbarPositionOnCellSelection)(_consts.SELECTION_TOOLBAR_LABEL)(editorView, position);
       }
-      return (0, _utils.calculateToolbarPositionTrackHead)(toolbarTitle)(editorView, position);
+      return cachedCalculateToolbarPosition ? cachedCalculateToolbarPosition(editorView, position) : (0, _utils.calculateToolbarPositionTrackHead)(_consts.SELECTION_TOOLBAR_LABEL)(editorView, position);
     } catch (error) {
       (0, _monitoring.logException)(error, {
         location: 'editor-plugin-toolbar/selectionToolbar'
       });
       return position;
     }
-  }, [editorView]);
+  }, [editorView, cachedCalculateToolbarPosition]);
   return onPositionCalculated;
-}, function (editorView) {
-  var onPositionCalculated = (0, _react.useCallback)(function (position) {
-    var toolbarTitle = _consts.SELECTION_TOOLBAR_LABEL;
-
-    // Show special position on cell selection only when editor controls experiment is enabled
-    var isEditorControlsEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls', 'cohort', 'variant1');
-    var isCellSelection = ('$anchorCell' in editorView.state.selection);
-    if (isCellSelection && isEditorControlsEnabled) {
-      return (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle)(editorView, position);
-    }
-    return (0, _utils.calculateToolbarPositionTrackHead)(toolbarTitle)(editorView, position);
-  }, [editorView]);
-  return onPositionCalculated;
-});
+};
 var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref) {
   var _api$toolbar$actions$, _api$toolbar, _api$toolbar2;
   var api = _ref.api,
@@ -118,7 +101,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     currentUserIntent = _usePluginState.currentUserIntent,
     shouldShowToolbar = _usePluginState.shouldShowToolbar,
     editorViewMode = _usePluginState.editorViewMode,
-    selection = _usePluginState.selection;
+    _selection = _usePluginState.selection;
   var contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
   var selectionToolbarConfigEnabled = (0, _toolbar.shouldShowSelectionToolbar)(contextualFormattingEnabled, editorToolbarDockingPreference);
   var intl = (0, _reactIntlNext.useIntl)();
@@ -178,7 +161,8 @@ var SelectionToolbarWithErrorBoundary = exports.SelectionToolbarWithErrorBoundar
   var api = _ref2.api,
     editorView = _ref2.editorView,
     mountPoint = _ref2.mountPoint,
-    disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned;
+    disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned,
+    calculateToolbarPosition = _ref2.calculateToolbarPosition;
   return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
     component: _analytics.ACTION_SUBJECT.TOOLBAR,
     componentId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
@@ -188,6 +172,7 @@ var SelectionToolbarWithErrorBoundary = exports.SelectionToolbarWithErrorBoundar
     api: api,
     editorView: editorView,
     mountPoint: mountPoint,
-    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
+    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned,
+    calculateToolbarPosition: calculateToolbarPosition
   }));
 };

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/toolbar-components.js

@@ -246,41 +246,39 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       }, children);
     } : undefined
   }]);
-  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true)) {
-    components.push({
+  components.push({
+    type: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
+    key: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
+    }],
+    component: function component(_ref1) {
+      var children = _ref1.children;
+      return /*#__PURE__*/_react.default.createElement(_OverflowSection.OverflowSection, null, children);
+    }
+  }, {
+    type: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
+    key: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
+    parents: [{
       type: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
       key: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
-      parents: [{
-        type: 'toolbar',
-        key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
-        rank: _toolbar.TOOLBAR_RANK[_toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
-      }],
-      component: function component(_ref1) {
-        var children = _ref1.children;
-        return /*#__PURE__*/_react.default.createElement(_OverflowSection.OverflowSection, null, children);
-      }
-    }, {
+      rank: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
+    }]
+  }, {
+    type: _toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
+    key: _toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
+    parents: [{
       type: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
       key: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
-      parents: [{
-        type: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
-        key: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
-        rank: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
-      }]
-    }, {
-      type: _toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
-      key: _toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
-      parents: [{
-        type: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
-        key: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
-        rank: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[_toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
-      }],
-      component: function component(_ref10) {
-        var children = _ref10.children;
-        return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
-      }
-    });
-  }
+      rank: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[_toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
+    }],
+    component: function component(_ref10) {
+      var children = _ref10.children;
+      return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
+    }
+  });
   if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_placement_config')) {
     switch (contextualFormattingEnabled) {
       case 'always-inline':

package/dist/es2019/toolbarPlugin.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
@@ -8,8 +9,8 @@ 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';
-import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
-import { SelectionToolbar, SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
+import { DEFAULT_POPUP_SELECTORS, SELECTION_TOOLBAR_LABEL } from './ui/consts';
+import { SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
 import { getToolbarComponents } from './ui/toolbar-components';
 import { isEventInContainer } from './ui/utils/toolbar';
 function getSelectedNode(editorState) {
@@ -69,6 +70,7 @@ export const toolbarPlugin = ({
   } = config;
   const registry = createComponentRegistry();
   registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
+  const cachedCalculateToolbarPosition = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true) ? calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL) : undefined;
   return {
     name: 'toolbar',
     actions: {
@@ -198,19 +200,12 @@ export const toolbarPlugin = ({
       if (!editorView) {
         return null;
       }
-      if (fg('platform_editor_toolbar_aifc_patch_7')) {
-        return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
-          api: api,
-          editorView: editorView,
-          mountPoint: popupsMountPoint,
-          disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
-        });
-      }
-      return /*#__PURE__*/React.createElement(SelectionToolbar, {
+      return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
         api: api,
         editorView: editorView,
         mountPoint: popupsMountPoint,
-        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
+        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false,
+        calculateToolbarPosition: cachedCalculateToolbarPosition
       });
     } : undefined
   };

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

@@ -61,40 +61,25 @@ const usePluginState = conditionalHooksFactory(() => expValEquals('platform_edit
     selectedNode
   };
 });
-const useOnPositionCalculated = conditionalHooksFactory(() => fg('platform_editor_toolbar_aifc_patch_7'), editorView => {
+const useOnPositionCalculated = (editorView, cachedCalculateToolbarPosition) => {
   const onPositionCalculated = useCallback(position => {
     try {
-      const toolbarTitle = SELECTION_TOOLBAR_LABEL;
-
       // Show special position on cell selection only when editor controls experiment is enabled
       const isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
       const isCellSelection = ('$anchorCell' in editorView.state.selection);
       if (isCellSelection && isEditorControlsEnabled) {
-        return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
+        return calculateToolbarPositionOnCellSelection(SELECTION_TOOLBAR_LABEL)(editorView, position);
       }
-      return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
+      return cachedCalculateToolbarPosition ? cachedCalculateToolbarPosition(editorView, position) : calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL)(editorView, position);
     } catch (error) {
       logException(error, {
         location: 'editor-plugin-toolbar/selectionToolbar'
       });
       return position;
     }
-  }, [editorView]);
+  }, [editorView, cachedCalculateToolbarPosition]);
   return onPositionCalculated;
-}, editorView => {
-  const onPositionCalculated = useCallback(position => {
-    const toolbarTitle = SELECTION_TOOLBAR_LABEL;
-
-    // Show special position on cell selection only when editor controls experiment is enabled
-    const isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
-    const isCellSelection = ('$anchorCell' in editorView.state.selection);
-    if (isCellSelection && isEditorControlsEnabled) {
-      return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
-    }
-    return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
-  }, [editorView]);
-  return onPositionCalculated;
-});
+};
 export const SelectionToolbar = ({
   api,
   editorView,
@@ -109,7 +94,7 @@ export const SelectionToolbar = ({
     shouldShowToolbar,
     editorViewMode,
     // @ts-ignore
-    selection
+    selection: _selection
   } = usePluginState(api);
   const contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
   const selectionToolbarConfigEnabled = shouldShowSelectionToolbar(contextualFormattingEnabled, editorToolbarDockingPreference);
@@ -168,7 +153,8 @@ export const SelectionToolbarWithErrorBoundary = ({
   api,
   editorView,
   mountPoint,
-  disableSelectionToolbarWhenPinned
+  disableSelectionToolbarWhenPinned,
+  calculateToolbarPosition
 }) => {
   var _api$analytics2;
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -180,6 +166,7 @@ export const SelectionToolbarWithErrorBoundary = ({
     api: api,
     editorView: editorView,
     mountPoint: mountPoint,
-    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
+    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned,
+    calculateToolbarPosition: calculateToolbarPosition
   }));
 };

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

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/toolbar-components.js

@@ -240,43 +240,41 @@ export const getToolbarComponents = (contextualFormattingEnabled, api, disableSe
       }, children);
     } : undefined
   }];
-  if (expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true)) {
-    components.push({
+  components.push({
+    type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
+    key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
+    }],
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(OverflowSection, null, children);
+    }
+  }, {
+    type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
+    key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
+    parents: [{
       type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
       key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
-      parents: [{
-        type: 'toolbar',
-        key: TOOLBARS.PRIMARY_TOOLBAR,
-        rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
-      }],
-      component: ({
-        children
-      }) => {
-        return /*#__PURE__*/React.createElement(OverflowSection, null, children);
-      }
-    }, {
+      rank: OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
+    }]
+  }, {
+    type: OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
+    key: OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
+    parents: [{
       type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
       key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
-      parents: [{
-        type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
-        key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
-        rank: OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
-      }]
-    }, {
-      type: OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
-      key: OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
-      parents: [{
-        type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
-        key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
-        rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
-      }],
-      component: ({
-        children
-      }) => {
-        return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
-      }
-    });
-  }
+      rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
+    }],
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
+    }
+  });
   if (fg('platform_editor_toolbar_aifc_placement_config')) {
     switch (contextualFormattingEnabled) {
       case 'always-inline':

package/dist/esm/toolbarPlugin.js

@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
@@ -12,8 +13,8 @@ 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';
-import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
-import { SelectionToolbar, SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
+import { DEFAULT_POPUP_SELECTORS, SELECTION_TOOLBAR_LABEL } from './ui/consts';
+import { SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
 import { getToolbarComponents } from './ui/toolbar-components';
 import { isEventInContainer } from './ui/utils/toolbar';
 function getSelectedNode(editorState) {
@@ -76,6 +77,7 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
     breakpointPreset = config.breakpointPreset;
   var registry = createComponentRegistry();
   registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
+  var cachedCalculateToolbarPosition = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true) ? calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL) : undefined;
   return {
     name: 'toolbar',
     actions: {
@@ -202,19 +204,12 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
       if (!editorView) {
         return null;
       }
-      if (fg('platform_editor_toolbar_aifc_patch_7')) {
-        return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
-          api: api,
-          editorView: editorView,
-          mountPoint: popupsMountPoint,
-          disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
-        });
-      }
-      return /*#__PURE__*/React.createElement(SelectionToolbar, {
+      return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
         api: api,
         editorView: editorView,
         mountPoint: popupsMountPoint,
-        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
+        disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false,
+        calculateToolbarPosition: cachedCalculateToolbarPosition
       });
     } : undefined
   };

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

@@ -62,42 +62,25 @@ var usePluginState = conditionalHooksFactory(function () {
     selectedNode: selectedNode
   };
 });
-var useOnPositionCalculated = conditionalHooksFactory(function () {
-  return fg('platform_editor_toolbar_aifc_patch_7');
-}, function (editorView) {
+var useOnPositionCalculated = function useOnPositionCalculated(editorView, cachedCalculateToolbarPosition) {
   var onPositionCalculated = useCallback(function (position) {
     try {
-      var toolbarTitle = SELECTION_TOOLBAR_LABEL;
-
       // Show special position on cell selection only when editor controls experiment is enabled
       var isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
       var isCellSelection = ('$anchorCell' in editorView.state.selection);
       if (isCellSelection && isEditorControlsEnabled) {
-        return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
+        return calculateToolbarPositionOnCellSelection(SELECTION_TOOLBAR_LABEL)(editorView, position);
       }
-      return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
+      return cachedCalculateToolbarPosition ? cachedCalculateToolbarPosition(editorView, position) : calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL)(editorView, position);
     } catch (error) {
       logException(error, {
         location: 'editor-plugin-toolbar/selectionToolbar'
       });
       return position;
     }
-  }, [editorView]);
+  }, [editorView, cachedCalculateToolbarPosition]);
   return onPositionCalculated;
-}, function (editorView) {
-  var onPositionCalculated = useCallback(function (position) {
-    var toolbarTitle = SELECTION_TOOLBAR_LABEL;
-
-    // Show special position on cell selection only when editor controls experiment is enabled
-    var isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
-    var isCellSelection = ('$anchorCell' in editorView.state.selection);
-    if (isCellSelection && isEditorControlsEnabled) {
-      return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
-    }
-    return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
-  }, [editorView]);
-  return onPositionCalculated;
-});
+};
 export var SelectionToolbar = function SelectionToolbar(_ref) {
   var _api$toolbar$actions$, _api$toolbar, _api$toolbar2;
   var api = _ref.api,
@@ -110,7 +93,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
     currentUserIntent = _usePluginState.currentUserIntent,
     shouldShowToolbar = _usePluginState.shouldShowToolbar,
     editorViewMode = _usePluginState.editorViewMode,
-    selection = _usePluginState.selection;
+    _selection = _usePluginState.selection;
   var contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
   var selectionToolbarConfigEnabled = shouldShowSelectionToolbar(contextualFormattingEnabled, editorToolbarDockingPreference);
   var intl = useIntl();
@@ -170,7 +153,8 @@ export var SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErro
   var api = _ref2.api,
     editorView = _ref2.editorView,
     mountPoint = _ref2.mountPoint,
-    disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned;
+    disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned,
+    calculateToolbarPosition = _ref2.calculateToolbarPosition;
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.TOOLBAR,
     componentId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
@@ -180,6 +164,7 @@ export var SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErro
     api: api,
     editorView: editorView,
     mountPoint: mountPoint,
-    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
+    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned,
+    calculateToolbarPosition: calculateToolbarPosition
   }));
 };

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/toolbar-components.js

@@ -239,41 +239,39 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
       }, children);
     } : undefined
   }]);
-  if (expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true)) {
-    components.push({
+  components.push({
+    type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
+    key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
+    }],
+    component: function component(_ref1) {
+      var children = _ref1.children;
+      return /*#__PURE__*/React.createElement(OverflowSection, null, children);
+    }
+  }, {
+    type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
+    key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
+    parents: [{
       type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
       key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
-      parents: [{
-        type: 'toolbar',
-        key: TOOLBARS.PRIMARY_TOOLBAR,
-        rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
-      }],
-      component: function component(_ref1) {
-        var children = _ref1.children;
-        return /*#__PURE__*/React.createElement(OverflowSection, null, children);
-      }
-    }, {
+      rank: OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
+    }]
+  }, {
+    type: OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
+    key: OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
+    parents: [{
       type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
       key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
-      parents: [{
-        type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
-        key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
-        rank: OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
-      }]
-    }, {
-      type: OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
-      key: OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
-      parents: [{
-        type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
-        key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
-        rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
-      }],
-      component: function component(_ref10) {
-        var children = _ref10.children;
-        return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
-      }
-    });
-  }
+      rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
+    }],
+    component: function component(_ref10) {
+      var children = _ref10.children;
+      return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
+    }
+  });
   if (fg('platform_editor_toolbar_aifc_placement_config')) {
     switch (contextualFormattingEnabled) {
       case 'always-inline':

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

@@ -2,12 +2,14 @@ import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ToolbarPlugin } from '../../toolbarPluginType';
+import type { CalculateToolbarPosition } from './types';
 type SelectionToolbarProps = {
     api?: ExtractInjectionAPI<ToolbarPlugin>;
+    calculateToolbarPosition?: CalculateToolbarPosition;
     disableSelectionToolbarWhenPinned: boolean;
     editorView: EditorView;
     mountPoint: HTMLElement | undefined;
 };
 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 SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, calculateToolbarPosition, }: SelectionToolbarProps) => React.JSX.Element;
 export {};

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

@@ -0,0 +1,6 @@
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+export type Position = {
+    left?: number;
+    top?: number;
+};
+export type CalculateToolbarPosition = (editorView: EditorView, position: Position) => Position;

package/dist/types-ts4.5/ui/SelectionToolbar/index.d.ts

@@ -2,12 +2,14 @@ import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ToolbarPlugin } from '../../toolbarPluginType';
+import type { CalculateToolbarPosition } from './types';
 type SelectionToolbarProps = {
     api?: ExtractInjectionAPI<ToolbarPlugin>;
+    calculateToolbarPosition?: CalculateToolbarPosition;
     disableSelectionToolbarWhenPinned: boolean;
     editorView: EditorView;
     mountPoint: HTMLElement | undefined;
 };
 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 SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, calculateToolbarPosition, }: SelectionToolbarProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/SelectionToolbar/types.d.ts

@@ -0,0 +1,6 @@
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+export type Position = {
+    left?: number;
+    top?: number;
+};
+export type CalculateToolbarPosition = (editorView: EditorView, position: Position) => Position;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "4.0.2",
+	"version": "4.0.4",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
-		"@atlaskit/tmp-editor-statsig": "^16.11.0",
+		"@atlaskit/tmp-editor-statsig": "^16.18.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"