@atlaskit/editor-plugin-floating-toolbar 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 1.19.0
+
+### Minor Changes
+
+- [#115259](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115259)
+  [`a3150808f308a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a3150808f308a) -
+  Add new forceStaticToolbar config option to floating toolbar and add it to panel and table. Add
+  new contextual toolbar plugin which controls expand and collapse logic for toolbar options.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.18.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.18.0
 
 ### Minor Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -21,10 +21,12 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _plugin = require("./pm-plugins/contextual-toolbar/plugin");
+var _pluginKey = require("./pm-plugins/contextual-toolbar/plugin-key");
 var _forceFocus = _interopRequireWildcard(require("./pm-plugins/force-focus"));
 var _commands = require("./pm-plugins/toolbar-data/commands");
-var _plugin = require("./pm-plugins/toolbar-data/plugin");
-var _pluginKey = require("./pm-plugins/toolbar-data/plugin-key");
+var _plugin2 = require("./pm-plugins/toolbar-data/plugin");
+var _pluginKey2 = require("./pm-plugins/toolbar-data/plugin-key");
 var _utils2 = require("./pm-plugins/utils");
 var _ConfirmationModal = require("./ui/ConfirmationModal");
 var _ExpandButton = require("./ui/ExpandButton");
@@ -135,7 +137,7 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
     name: 'floatingToolbar',
     pmPlugins: function pmPlugins() {
       var floatingToolbarHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      return [{
+      var plugins = [{
         // Should be after all toolbar plugins
         name: 'floatingToolbar',
         plugin: function plugin(_ref2) {
@@ -151,7 +153,7 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
         name: 'floatingToolbarData',
         plugin: function plugin(_ref3) {
           var dispatch = _ref3.dispatch;
-          return (0, _plugin.createPlugin)(dispatch);
+          return (0, _plugin2.createPlugin)(dispatch);
         }
       }, {
         name: 'forceFocus',
@@ -159,6 +161,15 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
           return (0, _forceFocus.default)();
         }
       }];
+      if (!(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+        plugins.push({
+          name: 'contextualToolbar',
+          plugin: function plugin() {
+            return (0, _plugin.contextualToolbarPlugin)();
+          }
+        });
+      }
+      return plugins;
     },
     actions: {
       forceFocusSelector: _forceFocus.forceFocusSelector
@@ -171,16 +182,27 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
       var configWithNodeInfo = (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 || (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined;
       return {
         configWithNodeInfo: configWithNodeInfo,
-        floatingToolbarData: _pluginKey.pluginKey.getState(editorState)
+        floatingToolbarData: _pluginKey2.pluginKey.getState(editorState),
+        // Experimental - excluding this property from the external API whilst it's in development
+        contextualToolbar: _pluginKey.contextualToolbarPluginKey.getState(editorState)
       };
     },
-    contentComponent: function contentComponent(_ref4) {
-      var popupsMountPoint = _ref4.popupsMountPoint,
-        popupsBoundariesElement = _ref4.popupsBoundariesElement,
-        popupsScrollableElement = _ref4.popupsScrollableElement,
-        editorView = _ref4.editorView,
-        providerFactory = _ref4.providerFactory,
-        dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
+    commands: {
+      // Experimental
+      updateContextualToolbar: function updateContextualToolbar(action) {
+        return function (_ref4) {
+          var tr = _ref4.tr;
+          return tr.setMeta(_pluginKey.contextualToolbarPluginKey, action);
+        };
+      }
+    },
+    contentComponent: function contentComponent(_ref5) {
+      var popupsMountPoint = _ref5.popupsMountPoint,
+        popupsBoundariesElement = _ref5.popupsBoundariesElement,
+        popupsScrollableElement = _ref5.popupsScrollableElement,
+        editorView = _ref5.editorView,
+        providerFactory = _ref5.providerFactory,
+        dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(ContentComponent, {
         editorView: editorView,
         pluginInjectionApi: api,
@@ -193,23 +215,23 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
     }
   };
 };
-function ContentComponent(_ref5) {
+function ContentComponent(_ref6) {
   var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
-  var pluginInjectionApi = _ref5.pluginInjectionApi,
-    editorView = _ref5.editorView,
-    popupsMountPoint = _ref5.popupsMountPoint,
-    popupsBoundariesElement = _ref5.popupsBoundariesElement,
-    popupsScrollableElement = _ref5.popupsScrollableElement,
-    providerFactory = _ref5.providerFactory,
-    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    editorView = _ref6.editorView,
+    popupsMountPoint = _ref6.popupsMountPoint,
+    popupsBoundariesElement = _ref6.popupsBoundariesElement,
+    popupsScrollableElement = _ref6.popupsScrollableElement,
+    providerFactory = _ref6.providerFactory,
+    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode', 'blockControls']),
     floatingToolbarState = _useSharedPluginState.floatingToolbarState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     blockControlsState = _useSharedPluginState.blockControlsState;
-  var _ref6 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
-    configWithNodeInfo = _ref6.configWithNodeInfo,
-    floatingToolbarData = _ref6.floatingToolbarData;
+  var _ref7 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
+    configWithNodeInfo = _ref7.configWithNodeInfo,
+    floatingToolbarData = _ref7.floatingToolbarData;
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }
@@ -246,7 +268,8 @@ function ContentComponent(_ref5) {
     _config$mediaAssistiv = config.mediaAssistiveMessage,
     mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv,
     _config$stick = config.stick,
-    stick = _config$stick === void 0 ? true : _config$stick;
+    stick = _config$stick === void 0 ? true : _config$stick,
+    forceStaticToolbar = config.forceStaticToolbar;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
   var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
@@ -310,8 +333,8 @@ function ContentComponent(_ref5) {
   };
 
   // Confirm dialog
-  var _ref7 = floatingToolbarData || {},
-    confirmDialogForItem = _ref7.confirmDialogForItem;
+  var _ref8 = floatingToolbarData || {},
+    confirmDialogForItem = _ref8.confirmDialogForItem;
   var confirmButtonItem = confirmDialogForItem ?
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -374,7 +397,8 @@ function ContentComponent(_ref5) {
         extensionsProvider: providers.extensionProvider,
         scrollable: scrollable,
         api: pluginInjectionApi,
-        mediaAssistiveMessage: mediaAssistiveMessage
+        mediaAssistiveMessage: mediaAssistiveMessage,
+        forceStaticToolbar: forceStaticToolbar
       });
     }
   })), /*#__PURE__*/_react.default.createElement(_ConfirmationModal.ConfirmationModal, {

package/dist/cjs/pm-plugins/contextual-toolbar/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contextualToolbarPluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var contextualToolbarPluginKey = exports.contextualToolbarPluginKey = new _state.PluginKey('contextualToolbar');

package/dist/cjs/pm-plugins/contextual-toolbar/plugin.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contextualToolbarPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _pluginKey = require("./plugin-key");
+var defaultEditState = {
+  display: 'collapsed'
+};
+var contextualToolbarPlugin = exports.contextualToolbarPlugin = function contextualToolbarPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: _pluginKey.contextualToolbarPluginKey,
+    state: {
+      init: function init() {
+        return defaultEditState;
+      },
+      apply: function apply(tr, pluginState) {
+        if (pluginState.display === 'static') {
+          return pluginState;
+        }
+        var action = tr.getMeta(_pluginKey.contextualToolbarPluginKey);
+        if (action) {
+          switch (action.type) {
+            case 'expand-toolbar':
+              return {
+                display: 'expanded'
+              };
+            case 'collapse-toolbar':
+              return {
+                display: 'collapsed'
+              };
+            default:
+              return pluginState;
+          }
+        }
+        return pluginState;
+      }
+    }
+  });
+};

package/dist/cjs/pm-plugins/contextual-toolbar/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/ui/DropdownMenu.js

@@ -39,7 +39,7 @@ var spacerStyles = (0, _react2.css)({
 });
 var separatorStyles = (0, _react2.css)({
   background: "var(--ds-border, #091E4224)",
-  height: '1px'
+  height: "var(--ds-space-025, 1px)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -282,8 +282,6 @@ var Dropdown = /*#__PURE__*/(0, _react.memo)(function (props) {
       }
     }));
   }
-
-  // here to change based on dropdown type
   return (0, _react2.jsx)("div", {
     css: menuContainerStyles,
     role: "menu"

package/dist/cjs/ui/Toolbar.js

@@ -22,10 +22,14 @@ var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _commands = require("@atlaskit/editor-plugin-table/commands");
+var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _forceFocus = require("../pm-plugins/force-focus");
 var _commands2 = require("../pm-plugins/toolbar-data/commands");
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -381,6 +385,99 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
   // otherwise it causes an issue where multiple popups stays open
   return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !(0, _floatingToolbar.areSameItems)(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
+var ToolbarItemsCollapsable = /*#__PURE__*/_react.default.memo(function (_ref2) {
+  var items = _ref2.items,
+    groupLabel = _ref2.groupLabel,
+    dispatchCommand = _ref2.dispatchCommand,
+    popupsMountPoint = _ref2.popupsMountPoint,
+    popupsBoundariesElement = _ref2.popupsBoundariesElement,
+    editorView = _ref2.editorView,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+    popupsScrollableElement = _ref2.popupsScrollableElement,
+    scrollable = _ref2.scrollable,
+    providerFactory = _ref2.providerFactory,
+    extensionsProvider = _ref2.extensionsProvider,
+    node = _ref2.node,
+    setDisableScroll = _ref2.setDisableScroll,
+    mountRef = _ref2.mountRef,
+    mounted = _ref2.mounted,
+    api = _ref2.api,
+    forceStaticToolbar = _ref2.forceStaticToolbar;
+  var contextualToolbarState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'floatingToolbar.contextualToolbar');
+  var updatedItems = items.slice();
+  if (!forceStaticToolbar && (contextualToolbarState === null || contextualToolbarState === void 0 ? void 0 : contextualToolbarState.display) === 'collapsed') {
+    var nonSeparatorItems = 0;
+    var slicedIndex = -1;
+    for (var i = items.length - 1; i > 0; i--) {
+      var item = items[i];
+      if (item.type !== 'separator') {
+        nonSeparatorItems += 1;
+        slicedIndex = i;
+      }
+      if (nonSeparatorItems > 2) {
+        break;
+      }
+    }
+    updatedItems = updatedItems.slice(slicedIndex);
+    updatedItems.unshift({
+      type: 'separator'
+    });
+    updatedItems.unshift({
+      type: 'button',
+      icon: _edit.default,
+      title: 'Show items',
+      onClick: function onClick() {
+        if (api) {
+          api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
+            type: 'expand-toolbar'
+          }));
+        }
+      }
+    });
+  }
+  if (!forceStaticToolbar && (contextualToolbarState === null || contextualToolbarState === void 0 ? void 0 : contextualToolbarState.display) === 'expanded') {
+    updatedItems.unshift({
+      type: 'separator'
+    });
+    updatedItems.unshift({
+      type: 'button',
+      icon: _chevronRight.default,
+      title: 'Hide items',
+      onClick: function onClick() {
+        if (api) {
+          api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
+            type: 'collapse-toolbar'
+          }));
+        }
+      }
+    });
+  }
+  return (0, _react2.jsx)(ToolbarItems, {
+    items: updatedItems,
+    groupLabel: groupLabel,
+    dispatchCommand: dispatchCommand,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    editorView: editorView,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    popupsScrollableElement: popupsScrollableElement,
+    scrollable: scrollable,
+    providerFactory: providerFactory,
+    extensionsProvider: extensionsProvider,
+    node: node,
+    setDisableScroll: setDisableScroll,
+    mountRef: mountRef,
+    mounted: mounted,
+    api: api
+  });
+}, function (prevProps, nextProps) {
+  if (!nextProps.node) {
+    return false;
+  }
+  // only rerender toolbar items if the node is different
+  // otherwise it causes an issue where multiple popups stays open
+  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !(0, _floatingToolbar.areSameItems)(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
+});
 var buttonGroupStyles = (0, _react2.css)({
   display: 'flex',
   gap: "var(--ds-space-050, 4px)"
@@ -430,11 +527,11 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
 };
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var toolbarOverflow = function toolbarOverflow(_ref2) {
-  var scrollable = _ref2.scrollable,
-    scrollDisabled = _ref2.scrollDisabled,
-    firstElementIsSelect = _ref2.firstElementIsSelect,
-    paddingFeatureFlag = _ref2.paddingFeatureFlag;
+var toolbarOverflow = function toolbarOverflow(_ref3) {
+  var scrollable = _ref3.scrollable,
+    scrollDisabled = _ref3.scrollDisabled,
+    firstElementIsSelect = _ref3.firstElementIsSelect,
+    paddingFeatureFlag = _ref3.paddingFeatureFlag;
   return (0, _react2.css)(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   scrollable ?
@@ -520,8 +617,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Toolbar, _Component);
   return (0, _createClass2.default)(Toolbar, [{
     key: "resetStyling",
-    value: function resetStyling(_ref3) {
-      var table = _ref3.table;
+    value: function resetStyling(_ref4) {
+      var table = _ref4.table;
       if (this.props.editorView) {
         var _this$props$api;
         var _this$props$editorVie2 = this.props.editorView,
@@ -637,7 +734,14 @@ var Toolbar = /*#__PURE__*/function (_Component) {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
           paddingFeatureFlag: (0, _platformFeatureFlags.fg)('platform_editor_floating_toolbar_padding_fix')
         })
-      }, (0, _react2.jsx)(ToolbarItems
+      }, (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? (0, _react2.jsx)(ToolbarItems
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      , (0, _extends2.default)({}, this.props, {
+        setDisableScroll: this.setDisableScroll.bind(this),
+        mountRef: this.mountRef,
+        mounted: this.state.mounted
+      })) : (0, _react2.jsx)(ToolbarItemsCollapsable
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , (0, _extends2.default)({}, this.props, {

package/dist/es2019/floatingToolbarPlugin.js

@@ -9,6 +9,8 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
+import { contextualToolbarPlugin } from './pm-plugins/contextual-toolbar/plugin';
+import { contextualToolbarPluginKey } from './pm-plugins/contextual-toolbar/plugin-key';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
 import { createPlugin as floatingToolbarDataPluginFactory } from './pm-plugins/toolbar-data/plugin';
@@ -122,7 +124,7 @@ export const floatingToolbarPlugin = ({
   return {
     name: 'floatingToolbar',
     pmPlugins(floatingToolbarHandlers = []) {
-      return [{
+      const plugins = [{
         // Should be after all toolbar plugins
         name: 'floatingToolbar',
         plugin: ({
@@ -142,6 +144,13 @@ export const floatingToolbarPlugin = ({
         name: 'forceFocus',
         plugin: () => forceFocusPlugin()
       }];
+      if (!editorExperiment('platform_editor_controls', 'control')) {
+        plugins.push({
+          name: 'contextualToolbar',
+          plugin: () => contextualToolbarPlugin()
+        });
+      }
+      return plugins;
     },
     actions: {
       forceFocusSelector
@@ -154,9 +163,19 @@ export const floatingToolbarPlugin = ({
       const configWithNodeInfo = (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 ? void 0 : (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined;
       return {
         configWithNodeInfo,
-        floatingToolbarData: dataPluginKey.getState(editorState)
+        floatingToolbarData: dataPluginKey.getState(editorState),
+        // Experimental - excluding this property from the external API whilst it's in development
+        contextualToolbar: contextualToolbarPluginKey.getState(editorState)
       };
     },
+    commands: {
+      // Experimental
+      updateContextualToolbar: action => ({
+        tr
+      }) => {
+        return tr.setMeta(contextualToolbarPluginKey, action);
+      }
+    },
     contentComponent({
       popupsMountPoint,
       popupsBoundariesElement,
@@ -233,7 +252,8 @@ export function ContentComponent({
     },
     focusTrap,
     mediaAssistiveMessage = '',
-    stick = true
+    stick = true,
+    forceStaticToolbar
   } = config;
   const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   const isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
@@ -353,7 +373,8 @@ export function ContentComponent({
         extensionsProvider: providers.extensionProvider,
         scrollable: scrollable,
         api: pluginInjectionApi,
-        mediaAssistiveMessage: mediaAssistiveMessage
+        mediaAssistiveMessage: mediaAssistiveMessage,
+        forceStaticToolbar: forceStaticToolbar
       });
     }
   })), /*#__PURE__*/React.createElement(ConfirmationModal, {

package/dist/es2019/pm-plugins/contextual-toolbar/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const contextualToolbarPluginKey = new PluginKey('contextualToolbar');

package/dist/es2019/pm-plugins/contextual-toolbar/plugin.js

@@ -0,0 +1,36 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { contextualToolbarPluginKey } from './plugin-key';
+const defaultEditState = {
+  display: 'collapsed'
+};
+export const contextualToolbarPlugin = () => {
+  return new SafePlugin({
+    key: contextualToolbarPluginKey,
+    state: {
+      init() {
+        return defaultEditState;
+      },
+      apply(tr, pluginState) {
+        if (pluginState.display === 'static') {
+          return pluginState;
+        }
+        const action = tr.getMeta(contextualToolbarPluginKey);
+        if (action) {
+          switch (action.type) {
+            case 'expand-toolbar':
+              return {
+                display: 'expanded'
+              };
+            case 'collapse-toolbar':
+              return {
+                display: 'collapsed'
+              };
+            default:
+              return pluginState;
+          }
+        }
+        return pluginState;
+      }
+    }
+  });
+};

package/dist/es2019/ui/DropdownMenu.js

@@ -29,7 +29,7 @@ const spacerStyles = css({
 });
 const separatorStyles = css({
   background: "var(--ds-border, #091E4224)",
-  height: '1px'
+  height: "var(--ds-space-025, 1px)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -273,8 +273,6 @@ const Dropdown = /*#__PURE__*/memo(props => {
       }
     }));
   }
-
-  // here to change based on dropdown type
   return jsx("div", {
     css: menuContainerStyles,
     role: "menu"

package/dist/es2019/ui/Toolbar.js

@@ -15,10 +15,14 @@ import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar
 import { Announcer, FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
+import EditIcon from '@atlaskit/icon/core/edit';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Dropdown from './Dropdown';
@@ -344,6 +348,100 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   // otherwise it causes an issue where multiple popups stays open
   return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
+const ToolbarItemsCollapsable = /*#__PURE__*/React.memo(({
+  items,
+  groupLabel,
+  dispatchCommand,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  editorView,
+  dispatchAnalyticsEvent,
+  popupsScrollableElement,
+  scrollable,
+  providerFactory,
+  extensionsProvider,
+  node,
+  setDisableScroll,
+  mountRef,
+  mounted,
+  api,
+  forceStaticToolbar
+}) => {
+  const contextualToolbarState = useSharedPluginStateSelector(api, 'floatingToolbar.contextualToolbar');
+  let updatedItems = items.slice();
+  if (!forceStaticToolbar && (contextualToolbarState === null || contextualToolbarState === void 0 ? void 0 : contextualToolbarState.display) === 'collapsed') {
+    let nonSeparatorItems = 0;
+    let slicedIndex = -1;
+    for (let i = items.length - 1; i > 0; i--) {
+      const item = items[i];
+      if (item.type !== 'separator') {
+        nonSeparatorItems += 1;
+        slicedIndex = i;
+      }
+      if (nonSeparatorItems > 2) {
+        break;
+      }
+    }
+    updatedItems = updatedItems.slice(slicedIndex);
+    updatedItems.unshift({
+      type: 'separator'
+    });
+    updatedItems.unshift({
+      type: 'button',
+      icon: EditIcon,
+      title: 'Show items',
+      onClick: () => {
+        if (api) {
+          api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
+            type: 'expand-toolbar'
+          }));
+        }
+      }
+    });
+  }
+  if (!forceStaticToolbar && (contextualToolbarState === null || contextualToolbarState === void 0 ? void 0 : contextualToolbarState.display) === 'expanded') {
+    updatedItems.unshift({
+      type: 'separator'
+    });
+    updatedItems.unshift({
+      type: 'button',
+      icon: ChevronRightIcon,
+      title: 'Hide items',
+      onClick: () => {
+        if (api) {
+          api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
+            type: 'collapse-toolbar'
+          }));
+        }
+      }
+    });
+  }
+  return jsx(ToolbarItems, {
+    items: updatedItems,
+    groupLabel: groupLabel,
+    dispatchCommand: dispatchCommand,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    editorView: editorView,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    popupsScrollableElement: popupsScrollableElement,
+    scrollable: scrollable,
+    providerFactory: providerFactory,
+    extensionsProvider: extensionsProvider,
+    node: node,
+    setDisableScroll: setDisableScroll,
+    mountRef: mountRef,
+    mounted: mounted,
+    api: api
+  });
+}, (prevProps, nextProps) => {
+  if (!nextProps.node) {
+    return false;
+  }
+  // only rerender toolbar items if the node is different
+  // otherwise it causes an issue where multiple popups stays open
+  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
+});
 const buttonGroupStyles = css({
   display: 'flex',
   gap: "var(--ds-space-050, 4px)"
@@ -583,7 +681,14 @@ class Toolbar extends Component {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
         paddingFeatureFlag: fg('platform_editor_floating_toolbar_padding_fix')
       })
-    }, jsx(ToolbarItems
+    }, editorExperiment('platform_editor_controls', 'control') ? jsx(ToolbarItems
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , _extends({}, this.props, {
+      setDisableScroll: this.setDisableScroll.bind(this),
+      mountRef: this.mountRef,
+      mounted: this.state.mounted
+    })) : jsx(ToolbarItemsCollapsable
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
     , _extends({}, this.props, {

package/dist/esm/floatingToolbarPlugin.js

@@ -12,6 +12,8 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
+import { contextualToolbarPlugin } from './pm-plugins/contextual-toolbar/plugin';
+import { contextualToolbarPluginKey } from './pm-plugins/contextual-toolbar/plugin-key';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
 import { createPlugin as floatingToolbarDataPluginFactory } from './pm-plugins/toolbar-data/plugin';
@@ -123,7 +125,7 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
     name: 'floatingToolbar',
     pmPlugins: function pmPlugins() {
       var floatingToolbarHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      return [{
+      var plugins = [{
         // Should be after all toolbar plugins
         name: 'floatingToolbar',
         plugin: function plugin(_ref2) {
@@ -147,6 +149,15 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
           return forceFocusPlugin();
         }
       }];
+      if (!editorExperiment('platform_editor_controls', 'control')) {
+        plugins.push({
+          name: 'contextualToolbar',
+          plugin: function plugin() {
+            return contextualToolbarPlugin();
+          }
+        });
+      }
+      return plugins;
     },
     actions: {
       forceFocusSelector: forceFocusSelector
@@ -159,16 +170,27 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
       var configWithNodeInfo = (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 || (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined;
       return {
         configWithNodeInfo: configWithNodeInfo,
-        floatingToolbarData: dataPluginKey.getState(editorState)
+        floatingToolbarData: dataPluginKey.getState(editorState),
+        // Experimental - excluding this property from the external API whilst it's in development
+        contextualToolbar: contextualToolbarPluginKey.getState(editorState)
       };
     },
-    contentComponent: function contentComponent(_ref4) {
-      var popupsMountPoint = _ref4.popupsMountPoint,
-        popupsBoundariesElement = _ref4.popupsBoundariesElement,
-        popupsScrollableElement = _ref4.popupsScrollableElement,
-        editorView = _ref4.editorView,
-        providerFactory = _ref4.providerFactory,
-        dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
+    commands: {
+      // Experimental
+      updateContextualToolbar: function updateContextualToolbar(action) {
+        return function (_ref4) {
+          var tr = _ref4.tr;
+          return tr.setMeta(contextualToolbarPluginKey, action);
+        };
+      }
+    },
+    contentComponent: function contentComponent(_ref5) {
+      var popupsMountPoint = _ref5.popupsMountPoint,
+        popupsBoundariesElement = _ref5.popupsBoundariesElement,
+        popupsScrollableElement = _ref5.popupsScrollableElement,
+        editorView = _ref5.editorView,
+        providerFactory = _ref5.providerFactory,
+        dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ContentComponent, {
         editorView: editorView,
         pluginInjectionApi: api,
@@ -181,23 +203,23 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
     }
   };
 };
-export function ContentComponent(_ref5) {
+export function ContentComponent(_ref6) {
   var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
-  var pluginInjectionApi = _ref5.pluginInjectionApi,
-    editorView = _ref5.editorView,
-    popupsMountPoint = _ref5.popupsMountPoint,
-    popupsBoundariesElement = _ref5.popupsBoundariesElement,
-    popupsScrollableElement = _ref5.popupsScrollableElement,
-    providerFactory = _ref5.providerFactory,
-    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    editorView = _ref6.editorView,
+    popupsMountPoint = _ref6.popupsMountPoint,
+    popupsBoundariesElement = _ref6.popupsBoundariesElement,
+    popupsScrollableElement = _ref6.popupsScrollableElement,
+    providerFactory = _ref6.providerFactory,
+    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode', 'blockControls']),
     floatingToolbarState = _useSharedPluginState.floatingToolbarState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     blockControlsState = _useSharedPluginState.blockControlsState;
-  var _ref6 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
-    configWithNodeInfo = _ref6.configWithNodeInfo,
-    floatingToolbarData = _ref6.floatingToolbarData;
+  var _ref7 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
+    configWithNodeInfo = _ref7.configWithNodeInfo,
+    floatingToolbarData = _ref7.floatingToolbarData;
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }
@@ -234,7 +256,8 @@ export function ContentComponent(_ref5) {
     _config$mediaAssistiv = config.mediaAssistiveMessage,
     mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv,
     _config$stick = config.stick,
-    stick = _config$stick === void 0 ? true : _config$stick;
+    stick = _config$stick === void 0 ? true : _config$stick,
+    forceStaticToolbar = config.forceStaticToolbar;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
   var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
@@ -298,8 +321,8 @@ export function ContentComponent(_ref5) {
   };
 
   // Confirm dialog
-  var _ref7 = floatingToolbarData || {},
-    confirmDialogForItem = _ref7.confirmDialogForItem;
+  var _ref8 = floatingToolbarData || {},
+    confirmDialogForItem = _ref8.confirmDialogForItem;
   var confirmButtonItem = confirmDialogForItem ?
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -362,7 +385,8 @@ export function ContentComponent(_ref5) {
         extensionsProvider: providers.extensionProvider,
         scrollable: scrollable,
         api: pluginInjectionApi,
-        mediaAssistiveMessage: mediaAssistiveMessage
+        mediaAssistiveMessage: mediaAssistiveMessage,
+        forceStaticToolbar: forceStaticToolbar
       });
     }
   })), /*#__PURE__*/React.createElement(ConfirmationModal, {

package/dist/esm/pm-plugins/contextual-toolbar/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var contextualToolbarPluginKey = new PluginKey('contextualToolbar');

package/dist/esm/pm-plugins/contextual-toolbar/plugin.js

@@ -0,0 +1,36 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { contextualToolbarPluginKey } from './plugin-key';
+var defaultEditState = {
+  display: 'collapsed'
+};
+export var contextualToolbarPlugin = function contextualToolbarPlugin() {
+  return new SafePlugin({
+    key: contextualToolbarPluginKey,
+    state: {
+      init: function init() {
+        return defaultEditState;
+      },
+      apply: function apply(tr, pluginState) {
+        if (pluginState.display === 'static') {
+          return pluginState;
+        }
+        var action = tr.getMeta(contextualToolbarPluginKey);
+        if (action) {
+          switch (action.type) {
+            case 'expand-toolbar':
+              return {
+                display: 'expanded'
+              };
+            case 'collapse-toolbar':
+              return {
+                display: 'collapsed'
+              };
+            default:
+              return pluginState;
+          }
+        }
+        return pluginState;
+      }
+    }
+  });
+};

package/dist/esm/ui/DropdownMenu.js

@@ -30,7 +30,7 @@ var spacerStyles = css({
 });
 var separatorStyles = css({
   background: "var(--ds-border, #091E4224)",
-  height: '1px'
+  height: "var(--ds-space-025, 1px)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -273,8 +273,6 @@ var Dropdown = /*#__PURE__*/memo(function (props) {
       }
     }));
   }
-
-  // here to change based on dropdown type
   return jsx("div", {
     css: menuContainerStyles,
     role: "menu"

package/dist/esm/ui/Toolbar.js

@@ -22,10 +22,14 @@ import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar
 import { Announcer, FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
+import EditIcon from '@atlaskit/icon/core/edit';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Dropdown from './Dropdown';
@@ -374,6 +378,99 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   // otherwise it causes an issue where multiple popups stays open
   return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
+var ToolbarItemsCollapsable = /*#__PURE__*/React.memo(function (_ref2) {
+  var items = _ref2.items,
+    groupLabel = _ref2.groupLabel,
+    dispatchCommand = _ref2.dispatchCommand,
+    popupsMountPoint = _ref2.popupsMountPoint,
+    popupsBoundariesElement = _ref2.popupsBoundariesElement,
+    editorView = _ref2.editorView,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+    popupsScrollableElement = _ref2.popupsScrollableElement,
+    scrollable = _ref2.scrollable,
+    providerFactory = _ref2.providerFactory,
+    extensionsProvider = _ref2.extensionsProvider,
+    node = _ref2.node,
+    setDisableScroll = _ref2.setDisableScroll,
+    mountRef = _ref2.mountRef,
+    mounted = _ref2.mounted,
+    api = _ref2.api,
+    forceStaticToolbar = _ref2.forceStaticToolbar;
+  var contextualToolbarState = useSharedPluginStateSelector(api, 'floatingToolbar.contextualToolbar');
+  var updatedItems = items.slice();
+  if (!forceStaticToolbar && (contextualToolbarState === null || contextualToolbarState === void 0 ? void 0 : contextualToolbarState.display) === 'collapsed') {
+    var nonSeparatorItems = 0;
+    var slicedIndex = -1;
+    for (var i = items.length - 1; i > 0; i--) {
+      var item = items[i];
+      if (item.type !== 'separator') {
+        nonSeparatorItems += 1;
+        slicedIndex = i;
+      }
+      if (nonSeparatorItems > 2) {
+        break;
+      }
+    }
+    updatedItems = updatedItems.slice(slicedIndex);
+    updatedItems.unshift({
+      type: 'separator'
+    });
+    updatedItems.unshift({
+      type: 'button',
+      icon: EditIcon,
+      title: 'Show items',
+      onClick: function onClick() {
+        if (api) {
+          api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
+            type: 'expand-toolbar'
+          }));
+        }
+      }
+    });
+  }
+  if (!forceStaticToolbar && (contextualToolbarState === null || contextualToolbarState === void 0 ? void 0 : contextualToolbarState.display) === 'expanded') {
+    updatedItems.unshift({
+      type: 'separator'
+    });
+    updatedItems.unshift({
+      type: 'button',
+      icon: ChevronRightIcon,
+      title: 'Hide items',
+      onClick: function onClick() {
+        if (api) {
+          api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
+            type: 'collapse-toolbar'
+          }));
+        }
+      }
+    });
+  }
+  return jsx(ToolbarItems, {
+    items: updatedItems,
+    groupLabel: groupLabel,
+    dispatchCommand: dispatchCommand,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    editorView: editorView,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    popupsScrollableElement: popupsScrollableElement,
+    scrollable: scrollable,
+    providerFactory: providerFactory,
+    extensionsProvider: extensionsProvider,
+    node: node,
+    setDisableScroll: setDisableScroll,
+    mountRef: mountRef,
+    mounted: mounted,
+    api: api
+  });
+}, function (prevProps, nextProps) {
+  if (!nextProps.node) {
+    return false;
+  }
+  // only rerender toolbar items if the node is different
+  // otherwise it causes an issue where multiple popups stays open
+  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
+});
 var buttonGroupStyles = css({
   display: 'flex',
   gap: "var(--ds-space-050, 4px)"
@@ -423,11 +520,11 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
 };
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var toolbarOverflow = function toolbarOverflow(_ref2) {
-  var scrollable = _ref2.scrollable,
-    scrollDisabled = _ref2.scrollDisabled,
-    firstElementIsSelect = _ref2.firstElementIsSelect,
-    paddingFeatureFlag = _ref2.paddingFeatureFlag;
+var toolbarOverflow = function toolbarOverflow(_ref3) {
+  var scrollable = _ref3.scrollable,
+    scrollDisabled = _ref3.scrollDisabled,
+    firstElementIsSelect = _ref3.firstElementIsSelect,
+    paddingFeatureFlag = _ref3.paddingFeatureFlag;
   return css(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   scrollable ?
@@ -513,8 +610,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   _inherits(Toolbar, _Component);
   return _createClass(Toolbar, [{
     key: "resetStyling",
-    value: function resetStyling(_ref3) {
-      var table = _ref3.table;
+    value: function resetStyling(_ref4) {
+      var table = _ref4.table;
       if (this.props.editorView) {
         var _this$props$api;
         var _this$props$editorVie2 = this.props.editorView,
@@ -630,7 +727,14 @@ var Toolbar = /*#__PURE__*/function (_Component) {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
           paddingFeatureFlag: fg('platform_editor_floating_toolbar_padding_fix')
         })
-      }, jsx(ToolbarItems
+      }, editorExperiment('platform_editor_controls', 'control') ? jsx(ToolbarItems
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      , _extends({}, this.props, {
+        setDisableScroll: this.setDisableScroll.bind(this),
+        mountRef: this.mountRef,
+        mounted: this.state.mounted
+      })) : jsx(ToolbarItemsCollapsable
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , _extends({}, this.props, {

package/dist/types/floatingToolbarPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { FloatingToolbarConfig, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, FloatingToolbarConfig, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { CopyButtonPlugin } from '@atlaskit/editor-plugin-copy-button';
@@ -10,6 +10,7 @@ import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContextualToolbarActions, ContextualToolbarState } from './pm-plugins/contextual-toolbar/types';
 export type ConfigWithNodeInfo = {
     config: FloatingToolbarConfig | undefined;
     pos: number;
@@ -47,3 +48,17 @@ export type FloatingToolbarPlugin = NextEditorPlugin<'floatingToolbar', {
         floatingToolbarData: FloatingToolbarPluginData | undefined;
     } | undefined;
 }>;
+export type FloatingToolbarPluginNext = NextEditorPlugin<'floatingToolbar', {
+    dependencies: FloatingToolbarPluginDependencies;
+    actions: {
+        forceFocusSelector: ForceFocusSelector;
+    };
+    sharedState: {
+        configWithNodeInfo: ConfigWithNodeInfo | undefined;
+        floatingToolbarData: FloatingToolbarPluginData | undefined;
+        contextualToolbar: ContextualToolbarState | undefined;
+    } | undefined;
+    commands: {
+        updateContextualToolbar: (action: ContextualToolbarActions) => EditorCommand;
+    };
+}>;

package/dist/types/pm-plugins/contextual-toolbar/plugin-key.d.ts

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { ContextualToolbarState } from './types';
+export declare const contextualToolbarPluginKey: PluginKey<ContextualToolbarState>;

package/dist/types/pm-plugins/contextual-toolbar/plugin.d.ts

@@ -0,0 +1,4 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare const contextualToolbarPlugin: () => SafePlugin<{
+    display: string;
+}>;

package/dist/types/pm-plugins/contextual-toolbar/types.d.ts

@@ -0,0 +1,8 @@
+export type ContextualToolbarState = {
+    display: 'expanded' | 'collapsed' | 'static';
+};
+export type ContextualToolbarActions = {
+    type: 'expand-toolbar';
+} | {
+    type: 'collapse-toolbar';
+};

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

@@ -30,6 +30,7 @@ export interface Props {
     scrollable?: boolean;
     api: ExtractInjectionAPI<FloatingToolbarPlugin> | undefined;
     mediaAssistiveMessage?: string;
+    forceStaticToolbar?: boolean;
 }
 type GroupedItems = (Item | Item[])[];
 export declare function groupItems(items: Item[]): GroupedItems;

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

@@ -1,4 +1,4 @@
-import type { FloatingToolbarConfig, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, FloatingToolbarConfig, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { CopyButtonPlugin } from '@atlaskit/editor-plugin-copy-button';
@@ -10,6 +10,7 @@ import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContextualToolbarActions, ContextualToolbarState } from './pm-plugins/contextual-toolbar/types';
 export type ConfigWithNodeInfo = {
     config: FloatingToolbarConfig | undefined;
     pos: number;
@@ -47,3 +48,17 @@ export type FloatingToolbarPlugin = NextEditorPlugin<'floatingToolbar', {
         floatingToolbarData: FloatingToolbarPluginData | undefined;
     } | undefined;
 }>;
+export type FloatingToolbarPluginNext = NextEditorPlugin<'floatingToolbar', {
+    dependencies: FloatingToolbarPluginDependencies;
+    actions: {
+        forceFocusSelector: ForceFocusSelector;
+    };
+    sharedState: {
+        configWithNodeInfo: ConfigWithNodeInfo | undefined;
+        floatingToolbarData: FloatingToolbarPluginData | undefined;
+        contextualToolbar: ContextualToolbarState | undefined;
+    } | undefined;
+    commands: {
+        updateContextualToolbar: (action: ContextualToolbarActions) => EditorCommand;
+    };
+}>;

package/dist/types-ts4.5/pm-plugins/contextual-toolbar/plugin-key.d.ts

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { ContextualToolbarState } from './types';
+export declare const contextualToolbarPluginKey: PluginKey<ContextualToolbarState>;

package/dist/types-ts4.5/pm-plugins/contextual-toolbar/plugin.d.ts

@@ -0,0 +1,4 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare const contextualToolbarPlugin: () => SafePlugin<{
+    display: string;
+}>;

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

@@ -0,0 +1,8 @@
+export type ContextualToolbarState = {
+    display: 'expanded' | 'collapsed' | 'static';
+};
+export type ContextualToolbarActions = {
+    type: 'expand-toolbar';
+} | {
+    type: 'collapse-toolbar';
+};

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

@@ -30,6 +30,7 @@ export interface Props {
     scrollable?: boolean;
     api: ExtractInjectionAPI<FloatingToolbarPlugin> | undefined;
     mediaAssistiveMessage?: string;
+    forceStaticToolbar?: boolean;
 }
 type GroupedItems = (Item | Item[])[];
 export declare function groupItems(items: Item[]): GroupedItems;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "1.18.0",
+	"version": "1.19.0",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,10 +25,10 @@
 	"dependencies": {
 		"@atlaskit/adf-utils": "^19.18.0",
 		"@atlaskit/button": "^20.5.0",
-		"@atlaskit/checkbox": "^15.3.0",
-		"@atlaskit/editor-common": "^99.15.0",
+		"@atlaskit/checkbox": "^15.4.0",
+		"@atlaskit/editor-common": "^99.18.0",
 		"@atlaskit/editor-palette": "1.7.0",
-		"@atlaskit/editor-plugin-block-controls": "^2.26.0",
+		"@atlaskit/editor-plugin-block-controls": "^2.27.0",
 		"@atlaskit/editor-plugin-context-panel": "^2.1.0",
 		"@atlaskit/editor-plugin-copy-button": "^1.5.0",
 		"@atlaskit/editor-plugin-decorations": "^1.5.0",
@@ -39,16 +39,16 @@
 		"@atlaskit/editor-plugin-table": "^9.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/emoji": "^67.14.0",
-		"@atlaskit/icon": "^23.9.0",
+		"@atlaskit/icon": "^23.10.0",
 		"@atlaskit/menu": "^2.14.0",
 		"@atlaskit/modal-dialog": "^12.20.0",
-		"@atlaskit/platform-feature-flags": "^1.0.0",
-		"@atlaskit/primitives": "^13.5.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/primitives": "^13.6.0",
 		"@atlaskit/select": "^18.10.0",
-		"@atlaskit/theme": "^15.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.46.0",
+		"@atlaskit/theme": "^16.0.0",
+		"@atlaskit/tmp-editor-statsig": "^2.47.0",
 		"@atlaskit/tokens": "^3.3.0",
-		"@atlaskit/tooltip": "^19.1.0",
+		"@atlaskit/tooltip": "^19.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",