@atlaskit/editor-plugin-selection-toolbar 1.8.1 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 1.10.0
+
+### Minor Changes
+
+- [#117435](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117435)
+  [`2526289f60537`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2526289f60537) -
+  [ux] ED-26675 Docked primary toolbar overflow menu
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.9.0
+
+### Minor Changes
+
+- [#116013](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116013)
+  [`18e022766bfd3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/18e022766bfd3) -
+  [ux] ED-26464 Hiding primary toolbar and docking contextual toolbar items to top
+
 ## 1.8.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleToolbar = void 0;
+exports.toggleToolbar = exports.setToolbarDocking = void 0;
 var _pluginKey = require("./plugin-key");
 var toggleToolbar = exports.toggleToolbar = function toggleToolbar(_ref) {
   var hide = _ref.hide;
@@ -14,4 +14,14 @@ var toggleToolbar = exports.toggleToolbar = function toggleToolbar(_ref) {
     });
     return tr;
   };
+};
+var setToolbarDocking = exports.setToolbarDocking = function setToolbarDocking(_ref3) {
+  var toolbarDocking = _ref3.toolbarDocking;
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
+      toolbarDocking: toolbarDocking
+    });
+    return tr;
+  };
 };

package/dist/cjs/selectionToolbarPlugin.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.selectionToolbarPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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");
@@ -15,25 +16,61 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _overflowToolbarConfig = require("./ui/overflow-toolbar-config");
+var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selectionToolbarPlugin(options) {
+var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
+  var api = _ref.api,
+    config = _ref.config;
   var __selectionToolbarHandlers = [];
+  var primaryToolbarComponent;
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
+    exposure: true
+  })) {
+    var _api$primaryToolbar;
+    primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+      var popupsBoundariesElement = _ref2.popupsBoundariesElement,
+        popupsMountPoint = _ref2.popupsMountPoint,
+        popupsScrollableElement = _ref2.popupsScrollableElement;
+      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
+        api: api,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement
+      });
+    };
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'overflowMenu',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'selectionToolbar',
     actions: {
       suppressToolbar: function suppressToolbar() {
-        var _options$api$core$act, _options$api;
-        return (_options$api$core$act = (_options$api = options.api) === null || _options$api === void 0 ? void 0 : _options$api.core.actions.execute((0, _commands.toggleToolbar)({
+        var _api$core$actions$exe;
+        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.toggleToolbar)({
           hide: true
-        }))) !== null && _options$api$core$act !== void 0 ? _options$api$core$act : false;
+        }))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
       },
       unsuppressToolbar: function unsuppressToolbar() {
-        var _options$api$core$act2, _options$api2;
-        return (_options$api$core$act2 = (_options$api2 = options.api) === null || _options$api2 === void 0 ? void 0 : _options$api2.core.actions.execute((0, _commands.toggleToolbar)({
+        var _api$core$actions$exe2;
+        return (_api$core$actions$exe2 = api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.toggleToolbar)({
           hide: false
-        }))) !== null && _options$api$core$act2 !== void 0 ? _options$api$core$act2 : false;
+        }))) !== null && _api$core$actions$exe2 !== void 0 ? _api$core$actions$exe2 : false;
+      },
+      setToolbarDocking: function setToolbarDocking(toolbarDocking) {
+        var _api$core$actions$exe3;
+        return (_api$core$actions$exe3 = api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.setToolbarDocking)({
+          toolbarDocking: toolbarDocking
+        }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
+      }
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return;
       }
+      return _pluginKey.selectionToolbarPluginKey.getState(editorState);
     },
     pmPlugins: function pmPlugins(selectionToolbarHandlers) {
       if (selectionToolbarHandlers) {
@@ -48,7 +85,8 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
               init: function init() {
                 return {
                   selectionStable: false,
-                  hide: false
+                  hide: false,
+                  toolbarDocking: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'none' : 'top'
                 };
               },
               apply: function apply(tr, pluginState) {
@@ -63,12 +101,12 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
               var unbind = (0, _bindEventListener.bind)(_view.root, {
                 type: 'mouseup',
                 listener: function listener() {
-                  var _options$api3;
+                  var _api$editorViewMode;
                   // 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 = (_options$api3 = options.api) === null || _options$api3 === void 0 || (_options$api3 = _options$api3.editorViewMode) === null || _options$api3 === void 0 ? void 0 : _options$api3.sharedState.currentState();
+                  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';
                   _view.dispatch(_view.state.tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
                     selectionStable: !isViewModeEnabled ? _view.hasFocus() : true
@@ -129,11 +167,11 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
         // they add to the selection toolbar.
         // ie. if you want to have your plugin's group appear first, set rank to -10 if there is currently another
         // plugin you expect to be run at the same time as with an rank of -9
-        resolved.sort(function (_ref, _ref2) {
-          var _ref$rank = _ref.rank,
-            rankA = _ref$rank === void 0 ? 0 : _ref$rank;
-          var _ref2$rank = _ref2.rank,
-            rankB = _ref2$rank === void 0 ? 0 : _ref2$rank;
+        resolved.sort(function (_ref3, _ref4) {
+          var _ref3$rank = _ref3.rank,
+            rankA = _ref3$rank === void 0 ? 0 : _ref3$rank;
+          var _ref4$rank = _ref4.rank,
+            rankB = _ref4$rank === void 0 ? 0 : _ref4$rank;
           if (rankA < rankB) {
             return 1;
           }
@@ -168,9 +206,11 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
           }
         }
         if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-          items.push.apply(items, (0, _toConsumableArray2.default)(_overflowToolbarConfig.overflowToolbarConfig));
+          items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
+            api: api
+          })));
         }
-        var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
+        var calcToolbarPosition = config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
         var toolbarTitle = 'Selection toolbar';
         var onPositionCalculated = calcToolbarPosition(toolbarTitle);
         var nodeType = getSelectionNodeTypes(state);
@@ -181,7 +221,10 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
           onPositionCalculated: onPositionCalculated
         };
       }
-    }
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
+      exposure: true
+    }) ? primaryToolbarComponent : undefined
   };
 };
 function getSelectionNodeTypes(state) {

package/dist/cjs/ui/PrimaryToolbarComponent.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _overflowToolbarConfig = require("./overflow-toolbar-config");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+var DROPDOWN_WIDTH = 240;
+function PrimaryToolbarComponent(_ref) {
+  var api = _ref.api,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var items = (0, _react.useMemo)(function () {
+    return (0, _overflowToolbarConfig.getOverflowPrimaryToolbarConfig)({
+      api: api
+    });
+  }, [api]);
+  var content = 'Show more items';
+  var onClick = (0, _react.useCallback)(function () {
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+  var onMenuItemActivated = (0, _react.useCallback)(function (_ref2) {
+    var _item$onClick;
+    var item = _ref2.item;
+    item === null || item === void 0 || (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
+  }, []);
+  return (0, _react2.jsx)(_uiMenu.DropdownMenu, {
+    isOpen: isOpen,
+    onOpenChange: function onOpenChange(attrs) {
+      return setIsOpen(attrs.isOpen);
+    },
+    items: items,
+    arrowKeyNavigationProviderOptions: {
+      type: _uiMenu.ArrowKeyNavigationType.MENU
+    },
+    boundariesElement: popupsBoundariesElement,
+    mountTo: popupsMountPoint,
+    scrollableElement: popupsScrollableElement,
+    section: {
+      hasSeparator: true
+    },
+    onItemActivated: onMenuItemActivated,
+    fitWidth: DROPDOWN_WIDTH
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+    onClick: onClick,
+    "aria-haspopup": "dialog",
+    "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.addLink),
+    "aria-label": content,
+    testId: content,
+    spacing: "default",
+    title: content
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+    ,
+    css: buttonStyles
+  }, (0, _react2.jsx)(_showMoreHorizontal.default, {
+    label: "Show more items"
+  })));
+}
+var buttonStyles = (0, _react2.css)({
+  padding: "var(--ds-space-075, 6px)"
+});

package/dist/cjs/ui/overflow-toolbar-config.js

@@ -1,38 +1,88 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.overflowToolbarConfig = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.getOverflowPrimaryToolbarConfig = exports.getOverflowFloatingToolbarConfig = void 0;
+var _react = require("@emotion/react");
+var _menu = require("@atlaskit/menu");
 var _ContextualToolbarIcon = require("./icons/ContextualToolbarIcon");
 var _FixedToolbarIcon = require("./icons/FixedToolbarIcon");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
 // New editor controls
-var overflowToolbarConfig = exports.overflowToolbarConfig = [{
-  type: 'separator'
-}, {
-  type: 'overflow-dropdown',
-  options: [{
+var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
+  var api = _ref.api;
+  return [{
     type: 'separator'
   }, {
-    type: 'overflow-dropdown-heading',
-    title: 'Toolbar position'
-  }, {
-    title: 'Contextual',
-    onClick: function onClick() {
-      return true;
-    },
-    icon: /*#__PURE__*/_react.default.createElement(_ContextualToolbarIcon.ContextualToolbarIcon, {
-      label: "Contextual toolbar"
-    })
-  }, {
-    title: 'Fixed at top',
-    onClick: function onClick() {
-      return true;
-    },
-    icon: /*#__PURE__*/_react.default.createElement(_FixedToolbarIcon.FixedToolbarIcon, {
-      label: "Fixed toolbar"
-    })
-  }]
-}];
+    type: 'overflow-dropdown',
+    options: [{
+      type: 'separator'
+    }, {
+      type: 'overflow-dropdown-heading',
+      title: 'Toolbar position'
+    }, {
+      title: 'Contextual',
+      onClick: function onClick() {
+        var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+        return (_api$selectionToolbar = api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
+      },
+      icon: (0, _react.jsx)(_ContextualToolbarIcon.ContextualToolbarIcon, {
+        label: "Contextual toolbar"
+      })
+    }, {
+      title: 'Fixed at top',
+      onClick: function onClick() {
+        var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
+        return (_api$selectionToolbar4 = api === null || api === void 0 || (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 || (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
+      },
+      icon: (0, _react.jsx)(_FixedToolbarIcon.FixedToolbarIcon, {
+        label: "Fixed toolbar"
+      })
+    }]
+  }];
+};
+var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {
+  var api = _ref2.api;
+  return [{
+    items: [{
+      content:
+      // eslint-disable-next-line @atlaskit/design-system/use-primitives
+      (0, _react.jsx)("div", {
+        css: headingContainerStyles
+      }, (0, _react.jsx)(_menu.HeadingItem, null, "Toolbar position")),
+      value: {
+        name: ''
+      },
+      isDisabled: true
+    }, {
+      content: 'Contextual',
+      value: {
+        name: 'contextual'
+      },
+      onClick: function onClick() {
+        var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
+        return (_api$selectionToolbar7 = api === null || api === void 0 || (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 || (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
+      }
+    }, {
+      content: 'Fixed at top',
+      value: {
+        name: 'fixed'
+      },
+      onClick: function onClick() {
+        var _api$selectionToolbar10, _api$selectionToolbar11, _api$selectionToolbar12;
+        return (_api$selectionToolbar10 = api === null || api === void 0 || (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 || (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
+      }
+    }]
+  }];
+};
+var headingContainerStyles = (0, _react.css)({
+  padding: "var(--ds-space-100, 8px)".concat(" 0"),
+  margin: "var(--ds-space-negative-100, -8px)".concat(" 0")
+});

package/dist/es2019/pm-plugins/commands.js

@@ -8,4 +8,14 @@ export const toggleToolbar = ({
     hide
   });
   return tr;
+};
+export const setToolbarDocking = ({
+  toolbarDocking
+}) => ({
+  tr
+}) => {
+  tr.setMeta(selectionToolbarPluginKey, {
+    toolbarDocking
+  });
+  return tr;
 };

package/dist/es2019/selectionToolbarPlugin.js

@@ -1,28 +1,65 @@
+import React from 'react';
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { toggleToolbar } from './pm-plugins/commands';
+import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
-import { overflowToolbarConfig } from './ui/overflow-toolbar-config';
-export const selectionToolbarPlugin = options => {
+import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
+import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+export const selectionToolbarPlugin = ({
+  api,
+  config
+}) => {
   const __selectionToolbarHandlers = [];
+  let primaryToolbarComponent;
+  if (editorExperiment('platform_editor_controls', 'variant1', {
+    exposure: true
+  })) {
+    var _api$primaryToolbar;
+    primaryToolbarComponent = ({
+      popupsBoundariesElement,
+      popupsMountPoint,
+      popupsScrollableElement
+    }) => /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+      api: api,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsMountPoint: popupsMountPoint,
+      popupsScrollableElement: popupsScrollableElement
+    });
+    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+      name: 'overflowMenu',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'selectionToolbar',
     actions: {
       suppressToolbar: () => {
-        var _options$api$core$act, _options$api;
-        return (_options$api$core$act = (_options$api = options.api) === null || _options$api === void 0 ? void 0 : _options$api.core.actions.execute(toggleToolbar({
+        var _api$core$actions$exe;
+        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleToolbar({
           hide: true
-        }))) !== null && _options$api$core$act !== void 0 ? _options$api$core$act : false;
+        }))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
       },
       unsuppressToolbar: () => {
-        var _options$api$core$act2, _options$api2;
-        return (_options$api$core$act2 = (_options$api2 = options.api) === null || _options$api2 === void 0 ? void 0 : _options$api2.core.actions.execute(toggleToolbar({
+        var _api$core$actions$exe2;
+        return (_api$core$actions$exe2 = api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleToolbar({
           hide: false
-        }))) !== null && _options$api$core$act2 !== void 0 ? _options$api$core$act2 : false;
+        }))) !== null && _api$core$actions$exe2 !== void 0 ? _api$core$actions$exe2 : false;
+      },
+      setToolbarDocking: toolbarDocking => {
+        var _api$core$actions$exe3;
+        return (_api$core$actions$exe3 = api === null || api === void 0 ? void 0 : api.core.actions.execute(setToolbarDocking({
+          toolbarDocking
+        }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
+      }
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return;
       }
+      return selectionToolbarPluginKey.getState(editorState);
     },
     pmPlugins(selectionToolbarHandlers) {
       if (selectionToolbarHandlers) {
@@ -37,7 +74,8 @@ export const selectionToolbarPlugin = options => {
               init() {
                 return {
                   selectionStable: false,
-                  hide: false
+                  hide: false,
+                  toolbarDocking: editorExperiment('platform_editor_controls', 'variant1') ? 'none' : 'top'
                 };
               },
               apply(tr, pluginState) {
@@ -55,12 +93,12 @@ export const selectionToolbarPlugin = options => {
               const unbind = bind(view.root, {
                 type: 'mouseup',
                 listener: () => {
-                  var _options$api3, _options$api3$editorV;
+                  var _api$editorViewMode;
                   // 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 = (_options$api3 = options.api) === null || _options$api3 === void 0 ? void 0 : (_options$api3$editorV = _options$api3.editorViewMode) === null || _options$api3$editorV === void 0 ? void 0 : _options$api3$editorV.sharedState.currentState();
+                  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';
                   view.dispatch(view.state.tr.setMeta(selectionToolbarPluginKey, {
                     selectionStable: !isViewModeEnabled ? view.hasFocus() : true
@@ -157,9 +195,11 @@ export const selectionToolbarPlugin = options => {
           }
         }
         if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
-          items.push(...overflowToolbarConfig);
+          items.push(...getOverflowFloatingToolbarConfig({
+            api
+          }));
         }
-        const calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+        const calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
         const toolbarTitle = 'Selection toolbar';
         const onPositionCalculated = calcToolbarPosition(toolbarTitle);
         const nodeType = getSelectionNodeTypes(state);
@@ -170,7 +210,10 @@ export const selectionToolbarPlugin = options => {
           onPositionCalculated
         };
       }
-    }
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
+      exposure: true
+    }) ? primaryToolbarComponent : undefined
   };
 };
 function getSelectionNodeTypes(state) {

package/dist/es2019/ui/PrimaryToolbarComponent.js

@@ -0,0 +1,66 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
+import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
+const DROPDOWN_WIDTH = 240;
+export function PrimaryToolbarComponent({
+  api,
+  popupsBoundariesElement,
+  popupsMountPoint,
+  popupsScrollableElement
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const items = useMemo(() => getOverflowPrimaryToolbarConfig({
+    api
+  }), [api]);
+  const content = 'Show more items';
+  const onClick = useCallback(() => {
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+  const onMenuItemActivated = useCallback(({
+    item
+  }) => {
+    var _item$onClick;
+    item === null || item === void 0 ? void 0 : (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item);
+  }, []);
+  return jsx(DropdownMenu, {
+    isOpen: isOpen,
+    onOpenChange: attrs => setIsOpen(attrs.isOpen),
+    items: items,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    },
+    boundariesElement: popupsBoundariesElement,
+    mountTo: popupsMountPoint,
+    scrollableElement: popupsScrollableElement,
+    section: {
+      hasSeparator: true
+    },
+    onItemActivated: onMenuItemActivated,
+    fitWidth: DROPDOWN_WIDTH
+  }, jsx(ToolbarButton, {
+    onClick: onClick,
+    "aria-haspopup": "dialog",
+    "aria-keyshortcuts": getAriaKeyshortcuts(addLink),
+    "aria-label": content,
+    testId: content,
+    spacing: "default",
+    title: content
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+    ,
+    css: buttonStyles
+  }, jsx(ShowMoreHorizontalIcon, {
+    label: "Show more items"
+  })));
+}
+const buttonStyles = css({
+  padding: "var(--ds-space-075, 6px)"
+});

package/dist/es2019/ui/overflow-toolbar-config.js

@@ -1,9 +1,17 @@
-import React from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { HeadingItem } from '@atlaskit/menu';
 import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
 import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
-
 // New editor controls
-export const overflowToolbarConfig = [{
+export const getOverflowFloatingToolbarConfig = ({
+  api
+}) => [{
   type: 'separator'
 }, {
   type: 'overflow-dropdown',
@@ -15,18 +23,57 @@ export const overflowToolbarConfig = [{
   }, {
     title: 'Contextual',
     onClick: () => {
-      return true;
+      var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+      return (_api$selectionToolbar = api === null || api === void 0 ? void 0 : (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
     },
-    icon: /*#__PURE__*/React.createElement(ContextualToolbarIcon, {
+    icon: jsx(ContextualToolbarIcon, {
       label: "Contextual toolbar"
     })
   }, {
     title: 'Fixed at top',
     onClick: () => {
-      return true;
+      var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
+      return (_api$selectionToolbar4 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 ? void 0 : (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
     },
-    icon: /*#__PURE__*/React.createElement(FixedToolbarIcon, {
+    icon: jsx(FixedToolbarIcon, {
       label: "Fixed toolbar"
     })
   }]
-}];
+}];
+export const getOverflowPrimaryToolbarConfig = ({
+  api
+}) => [{
+  items: [{
+    content:
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives
+    jsx("div", {
+      css: headingContainerStyles
+    }, jsx(HeadingItem, null, "Toolbar position")),
+    value: {
+      name: ''
+    },
+    isDisabled: true
+  }, {
+    content: 'Contextual',
+    value: {
+      name: 'contextual'
+    },
+    onClick: () => {
+      var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
+      return (_api$selectionToolbar7 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 ? void 0 : (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
+    }
+  }, {
+    content: 'Fixed at top',
+    value: {
+      name: 'fixed'
+    },
+    onClick: () => {
+      var _api$selectionToolbar10, _api$selectionToolbar11, _api$selectionToolbar12;
+      return (_api$selectionToolbar10 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 ? void 0 : (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
+    }
+  }]
+}];
+const headingContainerStyles = css({
+  padding: `${"var(--ds-space-100, 8px)"} 0`,
+  margin: `${"var(--ds-space-negative-100, -8px)"} 0`
+});

package/dist/esm/pm-plugins/commands.js

@@ -8,4 +8,14 @@ export var toggleToolbar = function toggleToolbar(_ref) {
     });
     return tr;
   };
+};
+export var setToolbarDocking = function setToolbarDocking(_ref3) {
+  var toolbarDocking = _ref3.toolbarDocking;
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    tr.setMeta(selectionToolbarPluginKey, {
+      toolbarDocking: toolbarDocking
+    });
+    return tr;
+  };
 };

package/dist/esm/selectionToolbarPlugin.js

@@ -2,31 +2,68 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { toggleToolbar } from './pm-plugins/commands';
+import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
-import { overflowToolbarConfig } from './ui/overflow-toolbar-config';
-export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
+import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
+import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
+  var api = _ref.api,
+    config = _ref.config;
   var __selectionToolbarHandlers = [];
+  var primaryToolbarComponent;
+  if (editorExperiment('platform_editor_controls', 'variant1', {
+    exposure: true
+  })) {
+    var _api$primaryToolbar;
+    primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+      var popupsBoundariesElement = _ref2.popupsBoundariesElement,
+        popupsMountPoint = _ref2.popupsMountPoint,
+        popupsScrollableElement = _ref2.popupsScrollableElement;
+      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+        api: api,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement
+      });
+    };
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'overflowMenu',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'selectionToolbar',
     actions: {
       suppressToolbar: function suppressToolbar() {
-        var _options$api$core$act, _options$api;
-        return (_options$api$core$act = (_options$api = options.api) === null || _options$api === void 0 ? void 0 : _options$api.core.actions.execute(toggleToolbar({
+        var _api$core$actions$exe;
+        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleToolbar({
           hide: true
-        }))) !== null && _options$api$core$act !== void 0 ? _options$api$core$act : false;
+        }))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
       },
       unsuppressToolbar: function unsuppressToolbar() {
-        var _options$api$core$act2, _options$api2;
-        return (_options$api$core$act2 = (_options$api2 = options.api) === null || _options$api2 === void 0 ? void 0 : _options$api2.core.actions.execute(toggleToolbar({
+        var _api$core$actions$exe2;
+        return (_api$core$actions$exe2 = api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleToolbar({
           hide: false
-        }))) !== null && _options$api$core$act2 !== void 0 ? _options$api$core$act2 : false;
+        }))) !== null && _api$core$actions$exe2 !== void 0 ? _api$core$actions$exe2 : false;
+      },
+      setToolbarDocking: function setToolbarDocking(toolbarDocking) {
+        var _api$core$actions$exe3;
+        return (_api$core$actions$exe3 = api === null || api === void 0 ? void 0 : api.core.actions.execute(_setToolbarDocking({
+          toolbarDocking: toolbarDocking
+        }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
+      }
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return;
       }
+      return selectionToolbarPluginKey.getState(editorState);
     },
     pmPlugins: function pmPlugins(selectionToolbarHandlers) {
       if (selectionToolbarHandlers) {
@@ -41,7 +78,8 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
               init: function init() {
                 return {
                   selectionStable: false,
-                  hide: false
+                  hide: false,
+                  toolbarDocking: editorExperiment('platform_editor_controls', 'variant1') ? 'none' : 'top'
                 };
               },
               apply: function apply(tr, pluginState) {
@@ -56,12 +94,12 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
               var unbind = bind(_view.root, {
                 type: 'mouseup',
                 listener: function listener() {
-                  var _options$api3;
+                  var _api$editorViewMode;
                   // 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 = (_options$api3 = options.api) === null || _options$api3 === void 0 || (_options$api3 = _options$api3.editorViewMode) === null || _options$api3 === void 0 ? void 0 : _options$api3.sharedState.currentState();
+                  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';
                   _view.dispatch(_view.state.tr.setMeta(selectionToolbarPluginKey, {
                     selectionStable: !isViewModeEnabled ? _view.hasFocus() : true
@@ -122,11 +160,11 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
         // they add to the selection toolbar.
         // ie. if you want to have your plugin's group appear first, set rank to -10 if there is currently another
         // plugin you expect to be run at the same time as with an rank of -9
-        resolved.sort(function (_ref, _ref2) {
-          var _ref$rank = _ref.rank,
-            rankA = _ref$rank === void 0 ? 0 : _ref$rank;
-          var _ref2$rank = _ref2.rank,
-            rankB = _ref2$rank === void 0 ? 0 : _ref2$rank;
+        resolved.sort(function (_ref3, _ref4) {
+          var _ref3$rank = _ref3.rank,
+            rankA = _ref3$rank === void 0 ? 0 : _ref3$rank;
+          var _ref4$rank = _ref4.rank,
+            rankB = _ref4$rank === void 0 ? 0 : _ref4$rank;
           if (rankA < rankB) {
             return 1;
           }
@@ -161,9 +199,11 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
           }
         }
         if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
-          items.push.apply(items, _toConsumableArray(overflowToolbarConfig));
+          items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
+            api: api
+          })));
         }
-        var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+        var calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
         var toolbarTitle = 'Selection toolbar';
         var onPositionCalculated = calcToolbarPosition(toolbarTitle);
         var nodeType = getSelectionNodeTypes(state);
@@ -174,7 +214,10 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
           onPositionCalculated: onPositionCalculated
         };
       }
-    }
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
+      exposure: true
+    }) ? primaryToolbarComponent : undefined
   };
 };
 function getSelectionNodeTypes(state) {

package/dist/esm/ui/PrimaryToolbarComponent.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
+import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
+var DROPDOWN_WIDTH = 240;
+export function PrimaryToolbarComponent(_ref) {
+  var api = _ref.api,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var items = useMemo(function () {
+    return getOverflowPrimaryToolbarConfig({
+      api: api
+    });
+  }, [api]);
+  var content = 'Show more items';
+  var onClick = useCallback(function () {
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+  var onMenuItemActivated = useCallback(function (_ref2) {
+    var _item$onClick;
+    var item = _ref2.item;
+    item === null || item === void 0 || (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
+  }, []);
+  return jsx(DropdownMenu, {
+    isOpen: isOpen,
+    onOpenChange: function onOpenChange(attrs) {
+      return setIsOpen(attrs.isOpen);
+    },
+    items: items,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    },
+    boundariesElement: popupsBoundariesElement,
+    mountTo: popupsMountPoint,
+    scrollableElement: popupsScrollableElement,
+    section: {
+      hasSeparator: true
+    },
+    onItemActivated: onMenuItemActivated,
+    fitWidth: DROPDOWN_WIDTH
+  }, jsx(ToolbarButton, {
+    onClick: onClick,
+    "aria-haspopup": "dialog",
+    "aria-keyshortcuts": getAriaKeyshortcuts(addLink),
+    "aria-label": content,
+    testId: content,
+    spacing: "default",
+    title: content
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+    ,
+    css: buttonStyles
+  }, jsx(ShowMoreHorizontalIcon, {
+    label: "Show more items"
+  })));
+}
+var buttonStyles = css({
+  padding: "var(--ds-space-075, 6px)"
+});

package/dist/esm/ui/overflow-toolbar-config.js

@@ -1,32 +1,81 @@
-import React from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { HeadingItem } from '@atlaskit/menu';
 import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
 import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
-
 // New editor controls
-export var overflowToolbarConfig = [{
-  type: 'separator'
-}, {
-  type: 'overflow-dropdown',
-  options: [{
+export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
+  var api = _ref.api;
+  return [{
     type: 'separator'
   }, {
-    type: 'overflow-dropdown-heading',
-    title: 'Toolbar position'
-  }, {
-    title: 'Contextual',
-    onClick: function onClick() {
-      return true;
-    },
-    icon: /*#__PURE__*/React.createElement(ContextualToolbarIcon, {
-      label: "Contextual toolbar"
-    })
-  }, {
-    title: 'Fixed at top',
-    onClick: function onClick() {
-      return true;
-    },
-    icon: /*#__PURE__*/React.createElement(FixedToolbarIcon, {
-      label: "Fixed toolbar"
-    })
-  }]
-}];
+    type: 'overflow-dropdown',
+    options: [{
+      type: 'separator'
+    }, {
+      type: 'overflow-dropdown-heading',
+      title: 'Toolbar position'
+    }, {
+      title: 'Contextual',
+      onClick: function onClick() {
+        var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+        return (_api$selectionToolbar = api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
+      },
+      icon: jsx(ContextualToolbarIcon, {
+        label: "Contextual toolbar"
+      })
+    }, {
+      title: 'Fixed at top',
+      onClick: function onClick() {
+        var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
+        return (_api$selectionToolbar4 = api === null || api === void 0 || (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 || (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
+      },
+      icon: jsx(FixedToolbarIcon, {
+        label: "Fixed toolbar"
+      })
+    }]
+  }];
+};
+export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {
+  var api = _ref2.api;
+  return [{
+    items: [{
+      content:
+      // eslint-disable-next-line @atlaskit/design-system/use-primitives
+      jsx("div", {
+        css: headingContainerStyles
+      }, jsx(HeadingItem, null, "Toolbar position")),
+      value: {
+        name: ''
+      },
+      isDisabled: true
+    }, {
+      content: 'Contextual',
+      value: {
+        name: 'contextual'
+      },
+      onClick: function onClick() {
+        var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
+        return (_api$selectionToolbar7 = api === null || api === void 0 || (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 || (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
+      }
+    }, {
+      content: 'Fixed at top',
+      value: {
+        name: 'fixed'
+      },
+      onClick: function onClick() {
+        var _api$selectionToolbar10, _api$selectionToolbar11, _api$selectionToolbar12;
+        return (_api$selectionToolbar10 = api === null || api === void 0 || (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 || (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
+      }
+    }]
+  }];
+};
+var headingContainerStyles = css({
+  padding: "var(--ds-space-100, 8px)".concat(" 0"),
+  margin: "var(--ds-space-negative-100, -8px)".concat(" 0")
+});

package/dist/types/pm-plugins/commands.d.ts

@@ -1,4 +1,8 @@
 import type { EditorCommand } from '@atlaskit/editor-common/types';
+import type { ToolbarDocking } from '../types';
 export declare const toggleToolbar: ({ hide }: {
     hide: boolean;
 }) => EditorCommand;
+export declare const setToolbarDocking: ({ toolbarDocking }: {
+    toolbarDocking: ToolbarDocking;
+}) => EditorCommand;

package/dist/types/selectionToolbarPluginType.d.ts

@@ -1,15 +1,21 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
+import type { ToolbarDocking } from './types';
 export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
+    sharedState: {
+        toolbarDocking: ToolbarDocking;
+    };
     pluginConfiguration: {
         /**
          * Defaults to false
          */
         preferenceToolbarAboveSelection?: boolean;
     };
-    dependencies: [OptionalPlugin<EditorViewModePlugin>];
+    dependencies: [OptionalPlugin<EditorViewModePlugin>, OptionalPlugin<PrimaryToolbarPlugin>];
     actions?: {
         suppressToolbar?: () => boolean;
         unsuppressToolbar?: () => boolean;
+        setToolbarDocking?: (toolbarDocking: ToolbarDocking) => boolean;
     };
 }>;

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

@@ -4,3 +4,4 @@ export type SelectionToolbarPluginOptions = {
      */
     preferenceToolbarAboveSelection?: boolean;
 };
+export type ToolbarDocking = 'top' | 'none';

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

@@ -0,0 +1,11 @@
+import { jsx } from '@emotion/react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+type Props = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+    popupsBoundariesElement?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+};
+export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): jsx.JSX.Element;
+export {};

package/dist/types/ui/overflow-toolbar-config.d.ts

@@ -1,2 +1,12 @@
 import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
-export declare const overflowToolbarConfig: FloatingToolbarItem<Command>[];
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+type OverflowToobarConfigOptions = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+};
+export declare const getOverflowFloatingToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
+export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
+    items: MenuItem[];
+}[];
+export {};

package/dist/types-ts4.5/pm-plugins/commands.d.ts

@@ -1,4 +1,8 @@
 import type { EditorCommand } from '@atlaskit/editor-common/types';
+import type { ToolbarDocking } from '../types';
 export declare const toggleToolbar: ({ hide }: {
     hide: boolean;
 }) => EditorCommand;
+export declare const setToolbarDocking: ({ toolbarDocking }: {
+    toolbarDocking: ToolbarDocking;
+}) => EditorCommand;

package/dist/types-ts4.5/selectionToolbarPluginType.d.ts

@@ -1,6 +1,11 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
+import type { ToolbarDocking } from './types';
 export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
+    sharedState: {
+        toolbarDocking: ToolbarDocking;
+    };
     pluginConfiguration: {
         /**
          * Defaults to false
@@ -8,10 +13,12 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
         preferenceToolbarAboveSelection?: boolean;
     };
     dependencies: [
-        OptionalPlugin<EditorViewModePlugin>
+        OptionalPlugin<EditorViewModePlugin>,
+        OptionalPlugin<PrimaryToolbarPlugin>
     ];
     actions?: {
         suppressToolbar?: () => boolean;
         unsuppressToolbar?: () => boolean;
+        setToolbarDocking?: (toolbarDocking: ToolbarDocking) => boolean;
     };
 }>;

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

@@ -4,3 +4,4 @@ export type SelectionToolbarPluginOptions = {
      */
     preferenceToolbarAboveSelection?: boolean;
 };
+export type ToolbarDocking = 'top' | 'none';

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

@@ -0,0 +1,11 @@
+import { jsx } from '@emotion/react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+type Props = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+    popupsBoundariesElement?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+};
+export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/overflow-toolbar-config.d.ts

@@ -1,2 +1,12 @@
 import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
-export declare const overflowToolbarConfig: FloatingToolbarItem<Command>[];
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+type OverflowToobarConfigOptions = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+};
+export declare const getOverflowFloatingToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
+export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
+    items: MenuItem[];
+}[];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "1.8.1",
+	"version": "1.10.0",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,8 +31,9 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^99.18.0",
+		"@atlaskit/editor-common": "^99.19.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.2.0",
+		"@atlaskit/editor-plugin-primary-toolbar": "^2.4.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/tmp-editor-statsig": "^2.47.0",