@atlaskit/editor-plugin-floating-toolbar 3.3.3 → 3.3.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 3.3.5
+
+### Patch Changes
+
+- [#134885](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134885)
+  [`0d61709802162`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d61709802162) -
+  [ux] [ED-27312] Implement new scroll left/right buttons for scrollable floating toolbars
+
+## 3.3.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.3.3
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -10,6 +10,7 @@ exports.floatingToolbarPlugin = void 0;
 exports.floatingToolbarPluginFactory = floatingToolbarPluginFactory;
 exports.pluginKey = exports.getRelevantConfig = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -20,6 +21,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
 var _forceFocus = _interopRequireWildcard(require("./pm-plugins/force-focus"));
@@ -30,6 +32,7 @@ var _utils2 = require("./pm-plugins/utils");
 var _ConfirmationModal = require("./ui/ConfirmationModal");
 var _ExpandButton = require("./ui/ExpandButton");
 var _ToolbarLoader = require("./ui/ToolbarLoader");
+var _utils3 = require("./ui/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -275,6 +278,32 @@ function ContentComponent(_ref5) {
       return toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp];
     });
   }
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
+    var _items2;
+    // Consolidate floating toolbar items
+    var toolbarItemsArray = Array.isArray(items) ? items : (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2(node);
+    var overflowDropdownItems = toolbarItemsArray.filter(function (item) {
+      return item.type === 'overflow-dropdown';
+    });
+    if (overflowDropdownItems.length > 1) {
+      var consolidatedOverflowDropdown = (0, _utils3.consolidateOverflowDropdownItems)(overflowDropdownItems);
+      var otherItems = toolbarItemsArray.filter(function (item) {
+        return item.type !== 'overflow-dropdown';
+      });
+      if (otherItems.length > 0) {
+        // remove the last separators
+        while (((_otherItems$at = otherItems.at(-1)) === null || _otherItems$at === void 0 ? void 0 : _otherItems$at.type) === 'separator') {
+          var _otherItems$at;
+          otherItems.pop();
+        }
+      }
+      items = [].concat((0, _toConsumableArray2.default)(otherItems), [{
+        type: 'separator',
+        fullHeight: true,
+        supportsViewMode: true
+      }, consolidatedOverflowDropdown]);
+    }
+  }
   var customPositionCalculation;
   var toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.copyButton) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.hoverDecoration);
   var viewModeToolbarEntry = (0, _experiments.unstable_editorExperimentParam)('live_pages_graceful_edit', 'toolbar-entry', {

package/dist/cjs/ui/ScrollButton.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _new = require("@atlaskit/button/new");
+var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
+var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
+var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
+var _primitives = require("@atlaskit/primitives");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var rightSideStyles = (0, _primitives.xcss)({
+  borderLeft: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
+  right: 'space.0',
+  borderTopRightRadius: '3px',
+  borderBottomRightRadius: '3px'
+});
+var leftSideStyles = (0, _primitives.xcss)({
+  borderRight: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
+  left: 'space.0',
+  borderTopLeftRadius: '3px',
+  borderBottomLeftRadius: '3px'
+});
+var buttonCommonStyles = (0, _primitives.xcss)({
+  backgroundColor: 'elevation.surface.overlay',
+  zIndex: '1',
+  position: 'absolute'
+});
+var ScrollButton = exports.ScrollButton = function ScrollButton(_ref) {
+  var intl = _ref.intl,
+    scrollContainerRef = _ref.scrollContainerRef,
+    node = _ref.node,
+    disabled = _ref.disabled,
+    side = _ref.side;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    needScroll = _useState2[0],
+    setNeedScroll = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    canScrollToSide = _useState4[0],
+    setCanScrollToSide = _useState4[1];
+  var setCanScrollDebounced = (0, _rafSchd.default)(function () {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    var _scrollContainerRef$c = scrollContainerRef.current,
+      scrollLeft = _scrollContainerRef$c.scrollLeft,
+      scrollWidth = _scrollContainerRef$c.scrollWidth,
+      offsetWidth = _scrollContainerRef$c.offsetWidth;
+    setCanScrollToSide(
+    // -1 to account for pixel rounding error
+    side === 'left' ? scrollLeft > 0 : scrollLeft < scrollWidth - offsetWidth - 1);
+  });
+  var onScroll = function onScroll() {
+    setCanScrollDebounced();
+  };
+  var onClick = function onClick() {
+    var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
+    var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
+      _ref2$width = _ref2.width,
+      scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
+    var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
+    var scrollTo = side === 'left' ? scrollLeft - scrollContainerWidth : scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 || _scrollContainerRef$c4.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  var resizeObserver = new ResizeObserver(function (t) {
+    var _scrollContainerRef$c5, _scrollContainerRef$c6;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollWidth) || 0;
+    var parentNode = (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.parentNode;
+    var availableSpace = -1;
+    if (parentNode instanceof HTMLElement) {
+      availableSpace = parentNode.offsetWidth;
+    }
+    if (availableSpace === -1) {
+      return;
+    }
+    if (availableSpace >= widthNeededToShowAllItems) {
+      setNeedScroll(false);
+    } else {
+      setNeedScroll(true);
+      onScroll();
+    }
+  });
+  (0, _react.useEffect)(function () {
+    onScroll();
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    var unbind;
+    if (scrollContainerRefCurrent) {
+      // Adding/removing scroll button depending on scroll position
+      unbind = (0, _bindEventListener.bind)(scrollContainerRefCurrent, {
+        type: 'scroll',
+        listener: onScroll
+      });
+
+      // watch for toolbar resize and show/hide scroll buttons if needed
+      resizeObserver.observe(scrollContainerRefCurrent);
+    }
+    return function () {
+      if (scrollContainerRefCurrent) {
+        var _unbind;
+        (_unbind = unbind) === null || _unbind === void 0 || _unbind();
+        resizeObserver.unobserve(scrollContainerRefCurrent);
+      }
+      setCanScrollDebounced.cancel();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      var _scrollContainerRefCu;
+      // reset scroll position when switching from one node with toolbar to another
+      // scroll to made optional as it may not be rendered in testing env
+      (_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 || _scrollContainerRefCu.call(scrollContainerRefCurrent, {
+        left: 0
+      });
+    }
+  }, [node.type, scrollContainerRef]);
+  var Icon = side === 'left' ? _chevronLeftChevronLeftLarge.default : _chevronRightChevronRightLarge.default;
+  return needScroll && (side === 'left' && canScrollToSide || side === 'right' && canScrollToSide) && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    padding: "space.050",
+    xcss: [side === 'left' ? leftSideStyles : rightSideStyles, buttonCommonStyles]
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    label: intl.formatMessage(side === 'left' ? _floatingToolbar.messages.floatingToolbarScrollLeft : _floatingToolbar.messages.floatingToolbarScrollRight),
+    onClick: onClick,
+    isDisabled: disabled,
+    icon: Icon,
+    isTooltipDisabled: false,
+    tooltip: {
+      position: 'top'
+    }
+  }));
+};

package/dist/cjs/ui/ScrollButtons.js

@@ -36,6 +36,7 @@ var toolbarScrollButtons = (0, _react2.css)({
 });
 var LeftIcon = _chevronLeftChevronLeftLarge.default;
 var RightIcon = _chevronRightChevronRightLarge.default;
+// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
 var ScrollButtons = exports.ScrollButtons = function ScrollButtons(_ref) {
   var intl = _ref.intl,
     scrollContainerRef = _ref.scrollContainerRef,

package/dist/cjs/ui/Toolbar.js

@@ -33,6 +33,7 @@ var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 var _EmojiPickerButton = require("./EmojiPickerButton");
 var _ExtensionsPlaceholder = require("./ExtensionsPlaceholder");
 var _Input = require("./Input");
+var _ScrollButton = require("./ScrollButton");
 var _ScrollButtons = require("./ScrollButtons");
 var _Select = _interopRequireDefault(require("./Select"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -206,11 +207,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           setDisableParentScroll: scrollable ? setDisableScroll : undefined,
           dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
           alignDropdownWithToolbar: items.length === 1,
-          onToggle: item.onToggle,
-          footer: item.footer,
-          onMount: item.onMount,
-          onClick: item.onClick,
-          pulse: item.pulse
+          onClick: item.onClick
         });
       case 'dropdown':
         var DropdownIcon = item.icon;
@@ -650,6 +647,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         intl = _this$props2.intl,
         scrollable = _this$props2.scrollable,
         mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
+      var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+      var isEditorControlsPatch2Enabled = isEditorControlsEnabled && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
       if (!items || !items.length) {
         return null;
       }
@@ -681,10 +680,16 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: className,
-        onMouseDown: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? this.captureMouseEvent : undefined
+        onMouseDown: isEditorControlsEnabled ? this.captureMouseEvent : undefined
       }, (0, _react2.jsx)(_ui.Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer)) : intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer),
         delay: 250
+      }), scrollable && isEditorControlsPatch2Enabled && (0, _react2.jsx)(_ScrollButton.ScrollButton, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled,
+        side: "left"
       }), (0, _react2.jsx)("div", {
         "data-testid": "floating-toolbar-items",
         ref: this.scrollContainerRef
@@ -704,12 +709,18 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         setDisableScroll: this.setDisableScroll.bind(this),
         mountRef: this.mountRef,
         mounted: this.state.mounted
-      }))), scrollable && (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
+      }))), scrollable && (isEditorControlsPatch2Enabled ? (0, _react2.jsx)(_ScrollButton.ScrollButton, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled,
+        side: "right"
+      }) : (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
         disabled: this.state.scrollDisabled
-      })), (0, _react2.jsx)("div", {
+      }))), (0, _react2.jsx)("div", {
         ref: this.mountRef
       })));
     }

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.consolidateOverflowDropdownItems = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+// if there are more than 1 item with type `overflow-dropdown`, we should only show one and combine the options
+var consolidateOverflowDropdownItems = exports.consolidateOverflowDropdownItems = function consolidateOverflowDropdownItems(overflowDropdowns) {
+  if (overflowDropdowns.length <= 1) {
+    return overflowDropdowns[0];
+  }
+  var combinedItems = overflowDropdowns.reduce(function (acc, item) {
+    if (item.options) {
+      acc.push.apply(acc, (0, _toConsumableArray2.default)(item.options));
+    }
+    return acc;
+  }, []);
+
+  // To filter out items that have a rank property, sort them by rank in descending order (highest rank first)
+  var rankedItems = combinedItems.filter(function (item) {
+    return 'rank' in item && typeof item.rank === 'number';
+  }).sort(function (a, b) {
+    return (b.rank || 0) - (a.rank || 0);
+  });
+  var unrankedItems = combinedItems.filter(function (item) {
+    return !('rank' in item && typeof item.rank === 'number');
+  });
+  var sortedItems = [].concat((0, _toConsumableArray2.default)(rankedItems), (0, _toConsumableArray2.default)(unrankedItems));
+  var largestDropdownWidth = overflowDropdowns.reduce(function (acc, item) {
+    if (item.dropdownWidth && item.dropdownWidth > acc) {
+      return item.dropdownWidth;
+    }
+    return acc;
+  }, 0);
+  return {
+    type: 'overflow-dropdown',
+    dropdownWidth: largestDropdownWidth,
+    options: sortedItems
+  };
+};

package/dist/es2019/floatingToolbarPlugin.js

@@ -8,6 +8,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
 import { copyNode } from './pm-plugins/commands';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
@@ -18,6 +19,7 @@ import { findNode } from './pm-plugins/utils';
 import { ConfirmationModal } from './ui/ConfirmationModal';
 import { ExpandButton } from './ui/ExpandButton';
 import { ToolbarLoader } from './ui/ToolbarLoader';
+import { consolidateOverflowDropdownItems } from './ui/utils';
 
 // TODO: AFP-2532 - Fix automatic suppressions below
 export const getRelevantConfig = (selection, configs) => {
@@ -259,6 +261,28 @@ export function ContentComponent({
     const toolbarItemViewModeProp = 'supportsViewMode';
     items = iterableItems.filter(item => toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp]);
   }
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1')) {
+    var _items2;
+    // Consolidate floating toolbar items
+    const toolbarItemsArray = Array.isArray(items) ? items : (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2(node);
+    const overflowDropdownItems = toolbarItemsArray.filter(item => item.type === 'overflow-dropdown');
+    if (overflowDropdownItems.length > 1) {
+      const consolidatedOverflowDropdown = consolidateOverflowDropdownItems(overflowDropdownItems);
+      const otherItems = toolbarItemsArray.filter(item => item.type !== 'overflow-dropdown');
+      if (otherItems.length > 0) {
+        // remove the last separators
+        while (((_otherItems$at = otherItems.at(-1)) === null || _otherItems$at === void 0 ? void 0 : _otherItems$at.type) === 'separator') {
+          var _otherItems$at;
+          otherItems.pop();
+        }
+      }
+      items = [...otherItems, {
+        type: 'separator',
+        fullHeight: true,
+        supportsViewMode: true
+      }, consolidatedOverflowDropdown];
+    }
+  }
   let customPositionCalculation;
   const toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.copyButton) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.hoverDecoration);
   const viewModeToolbarEntry = unstable_editorExperimentParam('live_pages_graceful_edit', 'toolbar-entry', {

package/dist/es2019/ui/ScrollButton.js

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import rafSchedule from 'raf-schd';
+import { IconButton } from '@atlaskit/button/new';
+import { messages } from '@atlaskit/editor-common/floating-toolbar';
+import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
+import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
+import { Box, xcss } from '@atlaskit/primitives';
+const rightSideStyles = xcss({
+  borderLeft: `solid ${"var(--ds-border, #091E4224)"} 1px`,
+  right: 'space.0',
+  borderTopRightRadius: '3px',
+  borderBottomRightRadius: '3px'
+});
+const leftSideStyles = xcss({
+  borderRight: `solid ${"var(--ds-border, #091E4224)"} 1px`,
+  left: 'space.0',
+  borderTopLeftRadius: '3px',
+  borderBottomLeftRadius: '3px'
+});
+const buttonCommonStyles = xcss({
+  backgroundColor: 'elevation.surface.overlay',
+  zIndex: '1',
+  position: 'absolute'
+});
+export const ScrollButton = ({
+  intl,
+  scrollContainerRef,
+  node,
+  disabled,
+  side
+}) => {
+  const [needScroll, setNeedScroll] = useState(false);
+  const [canScrollToSide, setCanScrollToSide] = useState(true);
+  const setCanScrollDebounced = rafSchedule(() => {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    const {
+      scrollLeft,
+      scrollWidth,
+      offsetWidth
+    } = scrollContainerRef.current;
+    setCanScrollToSide(
+    // -1 to account for pixel rounding error
+    side === 'left' ? scrollLeft > 0 : scrollLeft < scrollWidth - offsetWidth - 1);
+  });
+  const onScroll = () => {
+    setCanScrollDebounced();
+  };
+  const onClick = () => {
+    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
+    const {
+      width: scrollContainerWidth = 0
+    } = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {};
+    const scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0;
+    const scrollTo = side === 'left' ? scrollLeft - scrollContainerWidth : scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  const resizeObserver = new ResizeObserver(t => {
+    var _scrollContainerRef$c4, _scrollContainerRef$c5;
+    const widthNeededToShowAllItems = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollWidth) || 0;
+    const parentNode = (_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.parentNode;
+    let availableSpace = -1;
+    if (parentNode instanceof HTMLElement) {
+      availableSpace = parentNode.offsetWidth;
+    }
+    if (availableSpace === -1) {
+      return;
+    }
+    if (availableSpace >= widthNeededToShowAllItems) {
+      setNeedScroll(false);
+    } else {
+      setNeedScroll(true);
+      onScroll();
+    }
+  });
+  useEffect(() => {
+    onScroll();
+    const scrollContainerRefCurrent = scrollContainerRef.current;
+    let unbind;
+    if (scrollContainerRefCurrent) {
+      // Adding/removing scroll button depending on scroll position
+      unbind = bind(scrollContainerRefCurrent, {
+        type: 'scroll',
+        listener: onScroll
+      });
+
+      // watch for toolbar resize and show/hide scroll buttons if needed
+      resizeObserver.observe(scrollContainerRefCurrent);
+    }
+    return () => {
+      if (scrollContainerRefCurrent) {
+        var _unbind;
+        (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
+        resizeObserver.unobserve(scrollContainerRefCurrent);
+      }
+      setCanScrollDebounced.cancel();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    const scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      var _scrollContainerRefCu;
+      // reset scroll position when switching from one node with toolbar to another
+      // scroll to made optional as it may not be rendered in testing env
+      (_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 ? void 0 : _scrollContainerRefCu.call(scrollContainerRefCurrent, {
+        left: 0
+      });
+    }
+  }, [node.type, scrollContainerRef]);
+  const Icon = side === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
+  return needScroll && (side === 'left' && canScrollToSide || side === 'right' && canScrollToSide) && /*#__PURE__*/React.createElement(Box, {
+    padding: "space.050",
+    xcss: [side === 'left' ? leftSideStyles : rightSideStyles, buttonCommonStyles]
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: intl.formatMessage(side === 'left' ? messages.floatingToolbarScrollLeft : messages.floatingToolbarScrollRight),
+    onClick: onClick,
+    isDisabled: disabled,
+    icon: Icon,
+    isTooltipDisabled: false,
+    tooltip: {
+      position: 'top'
+    }
+  }));
+};

package/dist/es2019/ui/ScrollButtons.js

@@ -24,6 +24,7 @@ const toolbarScrollButtons = css({
 });
 const LeftIcon = ChevronLeftLargeIcon;
 const RightIcon = ChevronRightLargeIcon;
+// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
 export const ScrollButtons = ({
   intl,
   scrollContainerRef,

package/dist/es2019/ui/Toolbar.js

@@ -26,6 +26,7 @@ import Dropdown from './Dropdown';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import { Input } from './Input';
+import { ScrollButton } from './ScrollButton';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
 export function groupItems(items) {
@@ -183,11 +184,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           setDisableParentScroll: scrollable ? setDisableScroll : undefined,
           dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && `${item.id}-dropdownList`,
           alignDropdownWithToolbar: items.length === 1,
-          onToggle: item.onToggle,
-          footer: item.footer,
-          onMount: item.onMount,
-          onClick: item.onClick,
-          pulse: item.pulse
+          onClick: item.onClick
         });
       case 'dropdown':
         const DropdownIcon = item.icon;
@@ -604,6 +601,8 @@ class Toolbar extends Component {
       scrollable,
       mediaAssistiveMessage
     } = this.props;
+    const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+    const isEditorControlsPatch2Enabled = isEditorControlsEnabled && fg('platform_editor_controls_patch_2');
     if (!items || !items.length) {
       return null;
     }
@@ -631,10 +630,16 @@ class Toolbar extends Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: className,
-      onMouseDown: editorExperiment('platform_editor_controls', 'variant1') ? this.captureMouseEvent : undefined
+      onMouseDown: isEditorControlsEnabled ? this.captureMouseEvent : undefined
     }, jsx(Announcer, {
       text: mediaAssistiveMessage ? `${mediaAssistiveMessage}, ${intl.formatMessage(messages.floatingToolbarAnnouncer)}` : intl.formatMessage(messages.floatingToolbarAnnouncer),
       delay: 250
+    }), scrollable && isEditorControlsPatch2Enabled && jsx(ScrollButton, {
+      intl: intl,
+      scrollContainerRef: this.scrollContainerRef,
+      node: node,
+      disabled: this.state.scrollDisabled,
+      side: "left"
     }), jsx("div", {
       "data-testid": "floating-toolbar-items",
       ref: this.scrollContainerRef
@@ -654,12 +659,18 @@ class Toolbar extends Component {
       setDisableScroll: this.setDisableScroll.bind(this),
       mountRef: this.mountRef,
       mounted: this.state.mounted
-    }))), scrollable && jsx(ScrollButtons, {
+    }))), scrollable && (isEditorControlsPatch2Enabled ? jsx(ScrollButton, {
+      intl: intl,
+      scrollContainerRef: this.scrollContainerRef,
+      node: node,
+      disabled: this.state.scrollDisabled,
+      side: "right"
+    }) : jsx(ScrollButtons, {
       intl: intl,
       scrollContainerRef: this.scrollContainerRef,
       node: node,
       disabled: this.state.scrollDisabled
-    })), jsx("div", {
+    }))), jsx("div", {
       ref: this.mountRef
     })));
   }

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

@@ -0,0 +1,28 @@
+// if there are more than 1 item with type `overflow-dropdown`, we should only show one and combine the options
+export const consolidateOverflowDropdownItems = overflowDropdowns => {
+  if (overflowDropdowns.length <= 1) {
+    return overflowDropdowns[0];
+  }
+  const combinedItems = overflowDropdowns.reduce((acc, item) => {
+    if (item.options) {
+      acc.push(...item.options);
+    }
+    return acc;
+  }, []);
+
+  // To filter out items that have a rank property, sort them by rank in descending order (highest rank first)
+  const rankedItems = combinedItems.filter(item => 'rank' in item && typeof item.rank === 'number').sort((a, b) => (b.rank || 0) - (a.rank || 0));
+  const unrankedItems = combinedItems.filter(item => !('rank' in item && typeof item.rank === 'number'));
+  const sortedItems = [...rankedItems, ...unrankedItems];
+  const largestDropdownWidth = overflowDropdowns.reduce((acc, item) => {
+    if (item.dropdownWidth && item.dropdownWidth > acc) {
+      return item.dropdownWidth;
+    }
+    return acc;
+  }, 0);
+  return {
+    type: 'overflow-dropdown',
+    dropdownWidth: largestDropdownWidth,
+    options: sortedItems
+  };
+};

package/dist/esm/floatingToolbarPlugin.js

@@ -1,4 +1,5 @@
 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';
@@ -11,6 +12,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
 import { copyNode as _copyNode } from './pm-plugins/commands';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
@@ -21,6 +23,7 @@ import { findNode } from './pm-plugins/utils';
 import { ConfirmationModal } from './ui/ConfirmationModal';
 import { ExpandButton } from './ui/ExpandButton';
 import { ToolbarLoader } from './ui/ToolbarLoader';
+import { consolidateOverflowDropdownItems } from './ui/utils';
 
 // TODO: AFP-2532 - Fix automatic suppressions below
 export var getRelevantConfig = function getRelevantConfig(selection, configs) {
@@ -263,6 +266,32 @@ export function ContentComponent(_ref5) {
       return toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp];
     });
   }
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1')) {
+    var _items2;
+    // Consolidate floating toolbar items
+    var toolbarItemsArray = Array.isArray(items) ? items : (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2(node);
+    var overflowDropdownItems = toolbarItemsArray.filter(function (item) {
+      return item.type === 'overflow-dropdown';
+    });
+    if (overflowDropdownItems.length > 1) {
+      var consolidatedOverflowDropdown = consolidateOverflowDropdownItems(overflowDropdownItems);
+      var otherItems = toolbarItemsArray.filter(function (item) {
+        return item.type !== 'overflow-dropdown';
+      });
+      if (otherItems.length > 0) {
+        // remove the last separators
+        while (((_otherItems$at = otherItems.at(-1)) === null || _otherItems$at === void 0 ? void 0 : _otherItems$at.type) === 'separator') {
+          var _otherItems$at;
+          otherItems.pop();
+        }
+      }
+      items = [].concat(_toConsumableArray(otherItems), [{
+        type: 'separator',
+        fullHeight: true,
+        supportsViewMode: true
+      }, consolidatedOverflowDropdown]);
+    }
+  }
   var customPositionCalculation;
   var toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.copyButton) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.hoverDecoration);
   var viewModeToolbarEntry = unstable_editorExperimentParam('live_pages_graceful_edit', 'toolbar-entry', {

package/dist/esm/ui/ScrollButton.js

@@ -0,0 +1,138 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import rafSchedule from 'raf-schd';
+import { IconButton } from '@atlaskit/button/new';
+import { messages } from '@atlaskit/editor-common/floating-toolbar';
+import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
+import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
+import { Box, xcss } from '@atlaskit/primitives';
+var rightSideStyles = xcss({
+  borderLeft: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
+  right: 'space.0',
+  borderTopRightRadius: '3px',
+  borderBottomRightRadius: '3px'
+});
+var leftSideStyles = xcss({
+  borderRight: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
+  left: 'space.0',
+  borderTopLeftRadius: '3px',
+  borderBottomLeftRadius: '3px'
+});
+var buttonCommonStyles = xcss({
+  backgroundColor: 'elevation.surface.overlay',
+  zIndex: '1',
+  position: 'absolute'
+});
+export var ScrollButton = function ScrollButton(_ref) {
+  var intl = _ref.intl,
+    scrollContainerRef = _ref.scrollContainerRef,
+    node = _ref.node,
+    disabled = _ref.disabled,
+    side = _ref.side;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    needScroll = _useState2[0],
+    setNeedScroll = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    canScrollToSide = _useState4[0],
+    setCanScrollToSide = _useState4[1];
+  var setCanScrollDebounced = rafSchedule(function () {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    var _scrollContainerRef$c = scrollContainerRef.current,
+      scrollLeft = _scrollContainerRef$c.scrollLeft,
+      scrollWidth = _scrollContainerRef$c.scrollWidth,
+      offsetWidth = _scrollContainerRef$c.offsetWidth;
+    setCanScrollToSide(
+    // -1 to account for pixel rounding error
+    side === 'left' ? scrollLeft > 0 : scrollLeft < scrollWidth - offsetWidth - 1);
+  });
+  var onScroll = function onScroll() {
+    setCanScrollDebounced();
+  };
+  var onClick = function onClick() {
+    var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
+    var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
+      _ref2$width = _ref2.width,
+      scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
+    var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
+    var scrollTo = side === 'left' ? scrollLeft - scrollContainerWidth : scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 || _scrollContainerRef$c4.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  var resizeObserver = new ResizeObserver(function (t) {
+    var _scrollContainerRef$c5, _scrollContainerRef$c6;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollWidth) || 0;
+    var parentNode = (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.parentNode;
+    var availableSpace = -1;
+    if (parentNode instanceof HTMLElement) {
+      availableSpace = parentNode.offsetWidth;
+    }
+    if (availableSpace === -1) {
+      return;
+    }
+    if (availableSpace >= widthNeededToShowAllItems) {
+      setNeedScroll(false);
+    } else {
+      setNeedScroll(true);
+      onScroll();
+    }
+  });
+  useEffect(function () {
+    onScroll();
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    var unbind;
+    if (scrollContainerRefCurrent) {
+      // Adding/removing scroll button depending on scroll position
+      unbind = bind(scrollContainerRefCurrent, {
+        type: 'scroll',
+        listener: onScroll
+      });
+
+      // watch for toolbar resize and show/hide scroll buttons if needed
+      resizeObserver.observe(scrollContainerRefCurrent);
+    }
+    return function () {
+      if (scrollContainerRefCurrent) {
+        var _unbind;
+        (_unbind = unbind) === null || _unbind === void 0 || _unbind();
+        resizeObserver.unobserve(scrollContainerRefCurrent);
+      }
+      setCanScrollDebounced.cancel();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      var _scrollContainerRefCu;
+      // reset scroll position when switching from one node with toolbar to another
+      // scroll to made optional as it may not be rendered in testing env
+      (_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 || _scrollContainerRefCu.call(scrollContainerRefCurrent, {
+        left: 0
+      });
+    }
+  }, [node.type, scrollContainerRef]);
+  var Icon = side === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
+  return needScroll && (side === 'left' && canScrollToSide || side === 'right' && canScrollToSide) && /*#__PURE__*/React.createElement(Box, {
+    padding: "space.050",
+    xcss: [side === 'left' ? leftSideStyles : rightSideStyles, buttonCommonStyles]
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: intl.formatMessage(side === 'left' ? messages.floatingToolbarScrollLeft : messages.floatingToolbarScrollRight),
+    onClick: onClick,
+    isDisabled: disabled,
+    icon: Icon,
+    isTooltipDisabled: false,
+    tooltip: {
+      position: 'top'
+    }
+  }));
+};

package/dist/esm/ui/ScrollButtons.js

@@ -25,6 +25,7 @@ var toolbarScrollButtons = css({
 });
 var LeftIcon = ChevronLeftLargeIcon;
 var RightIcon = ChevronRightLargeIcon;
+// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
 export var ScrollButtons = function ScrollButtons(_ref) {
   var intl = _ref.intl,
     scrollContainerRef = _ref.scrollContainerRef,

package/dist/esm/ui/Toolbar.js

@@ -33,6 +33,7 @@ import Dropdown from './Dropdown';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import { Input } from './Input';
+import { ScrollButton } from './ScrollButton';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
 export function groupItems(items) {
@@ -199,11 +200,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           setDisableParentScroll: scrollable ? setDisableScroll : undefined,
           dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
           alignDropdownWithToolbar: items.length === 1,
-          onToggle: item.onToggle,
-          footer: item.footer,
-          onMount: item.onMount,
-          onClick: item.onClick,
-          pulse: item.pulse
+          onClick: item.onClick
         });
       case 'dropdown':
         var DropdownIcon = item.icon;
@@ -643,6 +640,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         intl = _this$props2.intl,
         scrollable = _this$props2.scrollable,
         mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
+      var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+      var isEditorControlsPatch2Enabled = isEditorControlsEnabled && fg('platform_editor_controls_patch_2');
       if (!items || !items.length) {
         return null;
       }
@@ -674,10 +673,16 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: className,
-        onMouseDown: editorExperiment('platform_editor_controls', 'variant1') ? this.captureMouseEvent : undefined
+        onMouseDown: isEditorControlsEnabled ? this.captureMouseEvent : undefined
       }, jsx(Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(messages.floatingToolbarAnnouncer)) : intl.formatMessage(messages.floatingToolbarAnnouncer),
         delay: 250
+      }), scrollable && isEditorControlsPatch2Enabled && jsx(ScrollButton, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled,
+        side: "left"
       }), jsx("div", {
         "data-testid": "floating-toolbar-items",
         ref: this.scrollContainerRef
@@ -697,12 +702,18 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         setDisableScroll: this.setDisableScroll.bind(this),
         mountRef: this.mountRef,
         mounted: this.state.mounted
-      }))), scrollable && jsx(ScrollButtons, {
+      }))), scrollable && (isEditorControlsPatch2Enabled ? jsx(ScrollButton, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled,
+        side: "right"
+      }) : jsx(ScrollButtons, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
         disabled: this.state.scrollDisabled
-      })), jsx("div", {
+      }))), jsx("div", {
         ref: this.mountRef
       })));
     }

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

@@ -0,0 +1,35 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+// if there are more than 1 item with type `overflow-dropdown`, we should only show one and combine the options
+export var consolidateOverflowDropdownItems = function consolidateOverflowDropdownItems(overflowDropdowns) {
+  if (overflowDropdowns.length <= 1) {
+    return overflowDropdowns[0];
+  }
+  var combinedItems = overflowDropdowns.reduce(function (acc, item) {
+    if (item.options) {
+      acc.push.apply(acc, _toConsumableArray(item.options));
+    }
+    return acc;
+  }, []);
+
+  // To filter out items that have a rank property, sort them by rank in descending order (highest rank first)
+  var rankedItems = combinedItems.filter(function (item) {
+    return 'rank' in item && typeof item.rank === 'number';
+  }).sort(function (a, b) {
+    return (b.rank || 0) - (a.rank || 0);
+  });
+  var unrankedItems = combinedItems.filter(function (item) {
+    return !('rank' in item && typeof item.rank === 'number');
+  });
+  var sortedItems = [].concat(_toConsumableArray(rankedItems), _toConsumableArray(unrankedItems));
+  var largestDropdownWidth = overflowDropdowns.reduce(function (acc, item) {
+    if (item.dropdownWidth && item.dropdownWidth > acc) {
+      return item.dropdownWidth;
+    }
+    return acc;
+  }, 0);
+  return {
+    type: 'overflow-dropdown',
+    dropdownWidth: largestDropdownWidth,
+    options: sortedItems
+  };
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+type ScrollButtonProps = {
+    intl: IntlShape;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    node: Node;
+    disabled: boolean;
+    side: 'left' | 'right';
+};
+export declare const ScrollButton: ({ intl, scrollContainerRef, node, disabled, side, }: ScrollButtonProps) => false | React.JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import { Command, FloatingToolbarOverflowDropdown } from '@atlaskit/editor-common/types';
+export declare const consolidateOverflowDropdownItems: (overflowDropdowns: FloatingToolbarOverflowDropdown<Command>[]) => FloatingToolbarOverflowDropdown<Command>;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+type ScrollButtonProps = {
+    intl: IntlShape;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    node: Node;
+    disabled: boolean;
+    side: 'left' | 'right';
+};
+export declare const ScrollButton: ({ intl, scrollContainerRef, node, disabled, side, }: ScrollButtonProps) => false | React.JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import { Command, FloatingToolbarOverflowDropdown } from '@atlaskit/editor-common/types';
+export declare const consolidateOverflowDropdownItems: (overflowDropdowns: FloatingToolbarOverflowDropdown<Command>[]) => FloatingToolbarOverflowDropdown<Command>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "3.3.3",
+	"version": "3.3.5",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -26,33 +26,34 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-utils": "^19.19.0",
-		"@atlaskit/button": "^22.0.0",
+		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/checkbox": "^17.0.0",
-		"@atlaskit/editor-common": "^102.13.0",
+		"@atlaskit/editor-common": "^102.16.0",
 		"@atlaskit/editor-palette": "^2.1.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.5.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.8.0",
 		"@atlaskit/editor-plugin-context-panel": "^4.0.0",
 		"@atlaskit/editor-plugin-copy-button": "^2.0.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-emoji": "^3.2.0",
-		"@atlaskit/editor-plugin-extension": "^5.0.0",
+		"@atlaskit/editor-plugin-emoji": "^3.3.0",
+		"@atlaskit/editor-plugin-extension": "^5.1.0",
 		"@atlaskit/editor-plugin-table": "^10.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/emoji": "^69.0.0",
-		"@atlaskit/icon": "^25.2.0",
-		"@atlaskit/menu": "^3.1.0",
-		"@atlaskit/modal-dialog": "^14.0.0",
+		"@atlaskit/icon": "^25.4.0",
+		"@atlaskit/menu": "^3.2.0",
+		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.4.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
+		"bind-event-listener": "^3.0.0",
 		"lodash": "^4.17.21",
 		"raf-schd": "^4.0.3",
 		"react-intl-next": "npm:react-intl@^5.18.1",
@@ -127,6 +128,12 @@
 		},
 		"platform_editor_fix_floating_toolbar_scrollbar": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_1": {
+			"type": "boolean"
+		},
+		"platform_editor_controls_patch_2": {
+			"type": "boolean"
 		}
 	}
 }