@atlaskit/editor-plugin-floating-toolbar 1.18.1 → 1.20.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 1.20.0
+
+### Minor Changes
+
+- [#117197](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117197)
+  [`d6202c120a039`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d6202c120a039) -
+  Remove @atlaskit/heading import which broke previous versions, replace with HeadingItem
+
+## 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

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

@@ -10,7 +10,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 var _menu = require("@atlaskit/menu");
 var _colors = require("@atlaskit/theme/colors");
@@ -39,7 +38,10 @@ var spacerStyles = (0, _react2.css)({
 });
 var separatorStyles = (0, _react2.css)({
   background: "var(--ds-border, #091E4224)",
-  height: '1px'
+  height: "var(--ds-space-025, 1px)"
+});
+var headingStyles = (0, _react2.css)({
+  padding: "var(--ds-space-100, 8px)".concat(" 0")
 });
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -268,22 +270,13 @@ var Dropdown = /*#__PURE__*/(0, _react.memo)(function (props) {
         });
       }
       if (item.type === 'overflow-dropdown-heading') {
-        return (
-          // eslint-disable-next-line react/no-array-index-key, @atlaskit/ui-styling-standard/enforce-style-prop
-          (0, _react2.jsx)("div", {
-            key: idx,
-            style: {
-              padding: '10px'
-            }
-          }, (0, _react2.jsx)(_heading.default, {
-            size: "xxsmall"
-          }, item.title))
-        );
+        return (0, _react2.jsx)("div", {
+          key: item.title,
+          css: headingStyles
+        }, (0, _react2.jsx)(_menu.HeadingItem, null, item.title));
       }
     }));
   }
-
-  // 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

@@ -10,9 +10,8 @@ import { css, jsx } from '@emotion/react';
 
 import { injectIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/floating-toolbar';
-import Heading from '@atlaskit/heading';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
-import { ButtonItem } from '@atlaskit/menu';
+import { ButtonItem, HeadingItem } from '@atlaskit/menu';
 import { B400 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
@@ -29,7 +28,10 @@ const spacerStyles = css({
 });
 const separatorStyles = css({
   background: "var(--ds-border, #091E4224)",
-  height: '1px'
+  height: "var(--ds-space-025, 1px)"
+});
+const headingStyles = css({
+  padding: `${"var(--ds-space-100, 8px)"} 0`
 });
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -259,22 +261,13 @@ const Dropdown = /*#__PURE__*/memo(props => {
         });
       }
       if (item.type === 'overflow-dropdown-heading') {
-        return (
-          // eslint-disable-next-line react/no-array-index-key, @atlaskit/ui-styling-standard/enforce-style-prop
-          jsx("div", {
-            key: idx,
-            style: {
-              padding: '10px'
-            }
-          }, jsx(Heading, {
-            size: "xxsmall"
-          }, item.title))
-        );
+        return jsx("div", {
+          key: item.title,
+          css: headingStyles
+        }, jsx(HeadingItem, null, item.title));
       }
     }));
   }
-
-  // here to change based on dropdown type
   return jsx("div", {
     css: menuContainerStyles,
     role: "menu"