@atlaskit/editor-plugin-highlight 1.8.1 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-highlight
 
+## 1.9.0
+
+### Minor Changes
+
+- [#112947](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112947)
+  [`ec865ff1780db`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ec865ff1780db) -
+  [ux] [ED-23760] Refactor Editor Highlight toolbar button to facilitate reuse and add a (currently
+  unused) Floating toolbar button
+
 ## 1.8.1
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.highlightPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
+var _PrimaryToolbarHighlightColor = require("./ui/PrimaryToolbarHighlightColor");
 var _ToolbarHighlightColor = require("./ui/ToolbarHighlightColor");
 var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
   var _api$analytics;
@@ -20,15 +22,21 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
       popupsScrollableElement = _ref2.popupsScrollableElement,
       disabled = _ref2.disabled,
       isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
-      dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
       editorView = _ref2.editorView;
-    return /*#__PURE__*/_react.default.createElement(_ToolbarHighlightColor.ToolbarHighlightColorWithIntl, {
+    return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.refactor-highlight-toolbar_mo0pj') ? /*#__PURE__*/_react.default.createElement(_PrimaryToolbarHighlightColor.PrimaryToolbarHighlightColorWithIntl, {
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      disabled: disabled,
+      isToolbarReducedSpacing: isToolbarReducedSpacing,
+      pluginInjectionApi: api,
+      editorView: editorView
+    }) : /*#__PURE__*/_react.default.createElement(_ToolbarHighlightColor.ToolbarHighlightColorWithIntl, {
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,
       popupsScrollableElement: popupsScrollableElement,
       disabled: disabled,
       isToolbarReducedSpacing: isToolbarReducedSpacing,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       pluginInjectionApi: api,
       editorView: editorView
     });

package/dist/cjs/ui/FloatingToolbarHighlightColor.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingToolbarHighlightColorWithIntl = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _primitives = require("@atlaskit/primitives");
+var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
+var _PaletteDropdown = require("./shared/PaletteDropdown");
+var _useDropdownEvents2 = require("./shared/useDropdownEvents");
+/** @jsx jsx */
+
+var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
+  var popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
+    disabled = _ref.disabled,
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    formatMessage = _ref.intl.formatMessage;
+  var toolbarItemRef = (0, _react.useRef)(null);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
+    highlightState = _useSharedPluginState.highlightState;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isDropdownOpen = _useState2[0],
+    setIsDropdownOpen = _useState2[1];
+  var _useDropdownEvents = (0, _useDropdownEvents2.useDropdownEvents)({
+      toolbarItemRef: toolbarItemRef,
+      setIsDropdownOpen: setIsDropdownOpen,
+      isDropdownOpen: isDropdownOpen,
+      pluginInjectionApi: pluginInjectionApi
+    }),
+    handleClick = _useDropdownEvents.handleClick,
+    handleKeyDown = _useDropdownEvents.handleKeyDown,
+    handleClickOutside = _useDropdownEvents.handleClickOutside,
+    handleEscapeKeydown = _useDropdownEvents.handleEscapeKeydown,
+    handleColorChange = _useDropdownEvents.handleColorChange,
+    isOpenedByKeyboard = _useDropdownEvents.isOpenedByKeyboard;
+
+  // Don't render the toolbar option while the plugin is initialising
+  if (!highlightState) {
+    return null;
+  }
+  var toolbarButtonLabel = formatMessage(_messages.highlightMessages.highlight);
+
+  // Get the design token for the  active color (if it exists) to modify the toolbar
+  // icon, but show the nice rainbow if none is selected
+  var activeColorToken = highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
+  return (0, _react2.jsx)(_primitives.Flex, {
+    alignItems: "center"
+  }, (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    activeColor: highlightState.activeColor,
+    trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+      buttonId: _uiMenu.TOOLBAR_BUTTON.BACKGROUND_COLOR,
+      spacing: isToolbarReducedSpacing ? 'none' : 'default',
+      disabled: disabled || highlightState.disabled,
+      selected: isDropdownOpen,
+      "aria-label": toolbarButtonLabel,
+      "aria-expanded": isDropdownOpen,
+      "aria-haspopup": true,
+      title: toolbarButtonLabel,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: toolbarItemRef,
+      iconBefore: (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
+        selectedColor: activeColorToken,
+        disabled: highlightState.disabled
+      }), (0, _react2.jsx)("span", {
+        css: _styles.expandIconWrapperStyle
+      }, (0, _react2.jsx)(_chevronDown.default, {
+        label: ""
+      })))
+    }),
+    onColorChange: function onColorChange(color) {
+      return handleColorChange(color);
+    },
+    isOpenedByKeyboard: isOpenedByKeyboard,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown
+  }));
+};
+var FloatingToolbarHighlightColorWithIntl = exports.FloatingToolbarHighlightColorWithIntl = (0, _reactIntlNext.injectIntl)(FloatingToolbarHighlightColor);

package/dist/cjs/ui/PrimaryToolbarHighlightColor.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PrimaryToolbarHighlightColorWithIntl = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _primitives = require("@atlaskit/primitives");
+var _commands = require("../commands");
+var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
+var _PaletteDropdown = require("./shared/PaletteDropdown");
+var _useDropdownEvents2 = require("./shared/useDropdownEvents");
+/** @jsx jsx */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
+  var popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
+    disabled = _ref.disabled,
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    formatMessage = _ref.intl.formatMessage,
+    editorView = _ref.editorView;
+  var toolbarItemRef = (0, _react.useRef)(null);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
+    highlightState = _useSharedPluginState.highlightState;
+  var setDropdownOpen = function setDropdownOpen(isOpen) {
+    if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      (0, _commands.setPalette)(pluginInjectionApi, isOpen)(state, dispatch);
+    }
+  };
+  var isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
+  var _useDropdownEvents = (0, _useDropdownEvents2.useDropdownEvents)({
+      toolbarItemRef: toolbarItemRef,
+      setIsDropdownOpen: setDropdownOpen,
+      isDropdownOpen: isDropdownOpen,
+      pluginInjectionApi: pluginInjectionApi
+    }),
+    handleClick = _useDropdownEvents.handleClick,
+    handleKeyDown = _useDropdownEvents.handleKeyDown,
+    handleClickOutside = _useDropdownEvents.handleClickOutside,
+    handleEscapeKeydown = _useDropdownEvents.handleEscapeKeydown,
+    handleColorChange = _useDropdownEvents.handleColorChange,
+    isOpenedByKeyboard = _useDropdownEvents.isOpenedByKeyboard;
+
+  // Don't render the toolbar option while the plugin is initialising
+  if (!highlightState) {
+    return null;
+  }
+  var toolbarButtonLabel = formatMessage(_messages.highlightMessages.highlight);
+
+  // Get the design token for the  active color (if it exists) to modify the toolbar
+  // icon, but show the nice rainbow if none is selected
+  var activeColorToken = highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
+  return (0, _react2.jsx)(_primitives.Flex, {
+    alignItems: "center"
+  }, (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    activeColor: highlightState.activeColor,
+    trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+      buttonId: _uiMenu.TOOLBAR_BUTTON.BACKGROUND_COLOR,
+      spacing: isToolbarReducedSpacing ? 'none' : 'default',
+      disabled: disabled || highlightState.disabled,
+      selected: isDropdownOpen,
+      "aria-label": (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel),
+      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleHighlightPalette),
+      "aria-expanded": isDropdownOpen,
+      "aria-haspopup": true,
+      title: (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: toolbarItemRef,
+      iconBefore: (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
+        selectedColor: activeColorToken,
+        disabled: highlightState.disabled
+      }), (0, _react2.jsx)("span", {
+        css: _styles.expandIconWrapperStyle
+      }, (0, _react2.jsx)(_chevronDown.default, {
+        label: ""
+      })))
+    }),
+    onColorChange: function onColorChange(color) {
+      return handleColorChange(color);
+    },
+    isOpenedByKeyboard: isOpenedByKeyboard,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown
+  }));
+};
+var PrimaryToolbarHighlightColorWithIntl = exports.PrimaryToolbarHighlightColorWithIntl = (0, _reactIntlNext.injectIntl)(PrimaryToolbarHighlightColor);

package/dist/cjs/ui/ToolbarHighlightColor.js

@@ -22,7 +22,7 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _commands = require("../commands");
-var _EditorHighlightIcon = require("./EditorHighlightIcon");
+var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
 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 && Object.prototype.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; }
 /** @jsx jsx */

package/dist/cjs/ui/shared/PaletteDropdown.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaletteDropdown = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props) {
+  var popupsMountPoint = props.popupsMountPoint,
+    popupsBoundariesElement = props.popupsBoundariesElement,
+    popupsScrollableElement = props.popupsScrollableElement,
+    isOpen = props.isOpen,
+    activeColor = props.activeColor,
+    trigger = props.trigger,
+    onColorChange = props.onColorChange,
+    isOpenedByKeyboard = props.isOpenedByKeyboard,
+    handleClickOutside = props.handleClickOutside,
+    handleEscapeKeydown = props.handleEscapeKeydown;
+
+  // pixels, used to determine where to horizontally position the dropdown when space is limited
+  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
+  var fitWidth = 242;
+  var palette = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.dynamic-palette-borders') ? _uiColor.highlightColorPaletteWithTokenBorders : _uiColor.highlightColorPalette;
+  var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(palette, activeColor),
+    selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+    selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isOpen,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown,
+    zIndex: _editorSharedStyles.akEditorMenuZIndex,
+    fitWidth: fitWidth,
+    closeOnTab: true,
+    arrowKeyNavigationProviderOptions: {
+      type: _uiMenu.ArrowKeyNavigationType.COLOR,
+      selectedRowIndex: selectedRowIndex,
+      selectedColumnIndex: selectedColumnIndex,
+      isOpenedByKeyboard: isOpenedByKeyboard,
+      isPopupPositioned: true
+    },
+    trigger: trigger
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "highlight-color-palette"
+  }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
+    onClick: onColorChange,
+    selectedColor: activeColor,
+    paletteOptions: {
+      palette: palette,
+      hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
+    }
+  })));
+};

package/dist/cjs/ui/shared/useDropdownEvents.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdownEvents = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _commands = require("../../commands");
+var useDropdownEvents = exports.useDropdownEvents = function useDropdownEvents(args) {
+  var toolbarItemRef = args.toolbarItemRef,
+    setIsDropdownOpen = args.setIsDropdownOpen,
+    isDropdownOpen = args.isDropdownOpen,
+    pluginInjectionApi = args.pluginInjectionApi;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpenedByKeyboard = _useState2[0],
+    setIsOpenedByKeyboard = _useState2[1];
+  return {
+    handleClick: function handleClick() {
+      setIsOpenedByKeyboard(false);
+      setIsDropdownOpen(!isDropdownOpen);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        setIsOpenedByKeyboard(true);
+        setIsDropdownOpen(!isDropdownOpen);
+      }
+    },
+    handleClickOutside: function handleClickOutside() {
+      if (isDropdownOpen) {
+        setIsDropdownOpen(false);
+        setIsOpenedByKeyboard(false);
+      }
+    },
+    handleEscapeKeydown: function handleEscapeKeydown() {
+      if (isDropdownOpen) {
+        var _toolbarItemRef$curre;
+        setIsDropdownOpen(false);
+        setIsOpenedByKeyboard(false);
+        toolbarItemRef === null || toolbarItemRef === void 0 || (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 || _toolbarItemRef$curre.focus();
+      }
+    },
+    handleColorChange: function handleColorChange(color) {
+      var _pluginInjectionApi$c, _pluginInjectionApi$a;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute((0, _commands.changeColor)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)({
+        color: color
+      }));
+      setIsDropdownOpen(false);
+    },
+    isOpenedByKeyboard: isOpenedByKeyboard
+  };
+};

package/dist/es2019/plugin.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { changeColor } from './commands';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, highlightPluginKey } from './pm-plugins/main';
+import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
 import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
 export const highlightPlugin = ({
   api
@@ -14,15 +16,21 @@ export const highlightPlugin = ({
     popupsScrollableElement,
     disabled,
     isToolbarReducedSpacing,
-    dispatchAnalyticsEvent,
     editorView
-  }) => /*#__PURE__*/React.createElement(ToolbarHighlightColor, {
+  }) => getBooleanFF('platform.editor.refactor-highlight-toolbar_mo0pj') ? /*#__PURE__*/React.createElement(PrimaryToolbarHighlightColor, {
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    disabled: disabled,
+    isToolbarReducedSpacing: isToolbarReducedSpacing,
+    pluginInjectionApi: api,
+    editorView: editorView
+  }) : /*#__PURE__*/React.createElement(ToolbarHighlightColor, {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
     disabled: disabled,
     isToolbarReducedSpacing: isToolbarReducedSpacing,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     pluginInjectionApi: api,
     editorView: editorView
   });

package/dist/es2019/ui/FloatingToolbarHighlightColor.js

@@ -0,0 +1,89 @@
+/** @jsx jsx */
+import { useRef, useState } from 'react';
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
+import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
+import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { Flex } from '@atlaskit/primitives';
+import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
+import { PaletteDropdown } from './shared/PaletteDropdown';
+import { useDropdownEvents } from './shared/useDropdownEvents';
+const FloatingToolbarHighlightColor = ({
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  isToolbarReducedSpacing,
+  disabled,
+  pluginInjectionApi,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const toolbarItemRef = useRef(null);
+  const {
+    highlightState
+  } = useSharedPluginState(pluginInjectionApi, ['highlight']);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const {
+    handleClick,
+    handleKeyDown,
+    handleClickOutside,
+    handleEscapeKeydown,
+    handleColorChange,
+    isOpenedByKeyboard
+  } = useDropdownEvents({
+    toolbarItemRef,
+    setIsDropdownOpen,
+    isDropdownOpen,
+    pluginInjectionApi
+  });
+
+  // Don't render the toolbar option while the plugin is initialising
+  if (!highlightState) {
+    return null;
+  }
+  const toolbarButtonLabel = formatMessage(messages.highlight);
+
+  // Get the design token for the  active color (if it exists) to modify the toolbar
+  // icon, but show the nice rainbow if none is selected
+  const activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
+  return jsx(Flex, {
+    alignItems: "center"
+  }, jsx(PaletteDropdown, {
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    activeColor: highlightState.activeColor,
+    trigger: jsx(ToolbarButton, {
+      buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
+      spacing: isToolbarReducedSpacing ? 'none' : 'default',
+      disabled: disabled || highlightState.disabled,
+      selected: isDropdownOpen,
+      "aria-label": toolbarButtonLabel,
+      "aria-expanded": isDropdownOpen,
+      "aria-haspopup": true,
+      title: toolbarButtonLabel,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: toolbarItemRef,
+      iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
+        selectedColor: activeColorToken,
+        disabled: highlightState.disabled
+      }), jsx("span", {
+        css: expandIconWrapperStyle
+      }, jsx(ExpandIcon, {
+        label: ""
+      })))
+    }),
+    onColorChange: color => handleColorChange(color),
+    isOpenedByKeyboard: isOpenedByKeyboard,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown
+  }));
+};
+export const FloatingToolbarHighlightColorWithIntl = injectIntl(FloatingToolbarHighlightColor);

package/dist/es2019/ui/PrimaryToolbarHighlightColor.js

@@ -0,0 +1,104 @@
+/** @jsx jsx */
+import { useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
+import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
+import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
+import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { Flex } from '@atlaskit/primitives';
+import { setPalette } from '../commands';
+import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
+import { PaletteDropdown } from './shared/PaletteDropdown';
+import { useDropdownEvents } from './shared/useDropdownEvents';
+const PrimaryToolbarHighlightColor = ({
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  isToolbarReducedSpacing,
+  disabled,
+  pluginInjectionApi,
+  intl: {
+    formatMessage
+  },
+  editorView
+}) => {
+  const toolbarItemRef = useRef(null);
+  const {
+    highlightState
+  } = useSharedPluginState(pluginInjectionApi, ['highlight']);
+  const setDropdownOpen = isOpen => {
+    if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
+      const {
+        state,
+        dispatch
+      } = editorView;
+      setPalette(pluginInjectionApi, isOpen)(state, dispatch);
+    }
+  };
+  const isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
+  const {
+    handleClick,
+    handleKeyDown,
+    handleClickOutside,
+    handleEscapeKeydown,
+    handleColorChange,
+    isOpenedByKeyboard
+  } = useDropdownEvents({
+    toolbarItemRef,
+    setIsDropdownOpen: setDropdownOpen,
+    isDropdownOpen,
+    pluginInjectionApi
+  });
+
+  // Don't render the toolbar option while the plugin is initialising
+  if (!highlightState) {
+    return null;
+  }
+  const toolbarButtonLabel = formatMessage(messages.highlight);
+
+  // Get the design token for the  active color (if it exists) to modify the toolbar
+  // icon, but show the nice rainbow if none is selected
+  const activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
+  return jsx(Flex, {
+    alignItems: "center"
+  }, jsx(PaletteDropdown, {
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    activeColor: highlightState.activeColor,
+    trigger: jsx(ToolbarButton, {
+      buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
+      spacing: isToolbarReducedSpacing ? 'none' : 'default',
+      disabled: disabled || highlightState.disabled,
+      selected: isDropdownOpen,
+      "aria-label": tooltip(toggleHighlightPalette, toolbarButtonLabel),
+      "aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
+      "aria-expanded": isDropdownOpen,
+      "aria-haspopup": true,
+      title: tooltip(toggleHighlightPalette, toolbarButtonLabel),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: toolbarItemRef,
+      iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
+        selectedColor: activeColorToken,
+        disabled: highlightState.disabled
+      }), jsx("span", {
+        css: expandIconWrapperStyle
+      }, jsx(ExpandIcon, {
+        label: ""
+      })))
+    }),
+    onColorChange: color => handleColorChange(color),
+    isOpenedByKeyboard: isOpenedByKeyboard,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown
+  }));
+};
+export const PrimaryToolbarHighlightColorWithIntl = injectIntl(PrimaryToolbarHighlightColor);

package/dist/es2019/ui/ToolbarHighlightColor.js

@@ -16,7 +16,7 @@ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { changeColor, setPalette } from '../commands';
-import { EditorHighlightIcon } from './EditorHighlightIcon';
+import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
 const ToolbarHighlightColor = ({
   popupsMountPoint,
   popupsBoundariesElement,

package/dist/es2019/ui/shared/PaletteDropdown.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteWithTokenBorders } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export const PaletteDropdown = props => {
+  const {
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    isOpen,
+    activeColor,
+    trigger,
+    onColorChange,
+    isOpenedByKeyboard,
+    handleClickOutside,
+    handleEscapeKeydown
+  } = props;
+
+  // pixels, used to determine where to horizontally position the dropdown when space is limited
+  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
+  const fitWidth = 242;
+  const palette = getBooleanFF('platform.editor.dynamic-palette-borders') ? highlightColorPaletteWithTokenBorders : highlightColorPalette;
+  const {
+    selectedRowIndex,
+    selectedColumnIndex
+  } = getSelectedRowAndColumnFromPalette(palette, activeColor);
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isOpen,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown,
+    zIndex: akEditorMenuZIndex,
+    fitWidth: fitWidth,
+    closeOnTab: true,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.COLOR,
+      selectedRowIndex,
+      selectedColumnIndex,
+      isOpenedByKeyboard,
+      isPopupPositioned: true
+    },
+    trigger: trigger
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "highlight-color-palette"
+  }, /*#__PURE__*/React.createElement(ColorPalette, {
+    onClick: onColorChange,
+    selectedColor: activeColor,
+    paletteOptions: {
+      palette,
+      hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
+    }
+  })));
+};

package/dist/es2019/ui/shared/useDropdownEvents.js

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { changeColor } from '../../commands';
+export const useDropdownEvents = args => {
+  const {
+    toolbarItemRef,
+    setIsDropdownOpen,
+    isDropdownOpen,
+    pluginInjectionApi
+  } = args;
+  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
+  return {
+    handleClick: () => {
+      setIsOpenedByKeyboard(false);
+      setIsDropdownOpen(!isDropdownOpen);
+    },
+    handleKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        setIsOpenedByKeyboard(true);
+        setIsDropdownOpen(!isDropdownOpen);
+      }
+    },
+    handleClickOutside: () => {
+      if (isDropdownOpen) {
+        setIsDropdownOpen(false);
+        setIsOpenedByKeyboard(false);
+      }
+    },
+    handleEscapeKeydown: () => {
+      if (isDropdownOpen) {
+        var _toolbarItemRef$curre;
+        setIsDropdownOpen(false);
+        setIsOpenedByKeyboard(false);
+        toolbarItemRef === null || toolbarItemRef === void 0 ? void 0 : (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 ? void 0 : _toolbarItemRef$curre.focus();
+      }
+    },
+    handleColorChange: color => {
+      var _pluginInjectionApi$c, _pluginInjectionApi$a;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(changeColor(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)({
+        color
+      }));
+      setIsDropdownOpen(false);
+    },
+    isOpenedByKeyboard
+  };
+};

package/dist/esm/plugin.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { changeColor } from './commands';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, highlightPluginKey } from './pm-plugins/main';
+import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
 import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
 export var highlightPlugin = function highlightPlugin(_ref) {
   var _api$analytics;
@@ -13,15 +15,21 @@ export var highlightPlugin = function highlightPlugin(_ref) {
       popupsScrollableElement = _ref2.popupsScrollableElement,
       disabled = _ref2.disabled,
       isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
-      dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
       editorView = _ref2.editorView;
-    return /*#__PURE__*/React.createElement(ToolbarHighlightColor, {
+    return getBooleanFF('platform.editor.refactor-highlight-toolbar_mo0pj') ? /*#__PURE__*/React.createElement(PrimaryToolbarHighlightColor, {
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      disabled: disabled,
+      isToolbarReducedSpacing: isToolbarReducedSpacing,
+      pluginInjectionApi: api,
+      editorView: editorView
+    }) : /*#__PURE__*/React.createElement(ToolbarHighlightColor, {
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,
       popupsScrollableElement: popupsScrollableElement,
       disabled: disabled,
       isToolbarReducedSpacing: isToolbarReducedSpacing,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       pluginInjectionApi: api,
       editorView: editorView
     });

package/dist/esm/ui/FloatingToolbarHighlightColor.js

@@ -0,0 +1,90 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { useRef, useState } from 'react';
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
+import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
+import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { Flex } from '@atlaskit/primitives';
+import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
+import { PaletteDropdown } from './shared/PaletteDropdown';
+import { useDropdownEvents } from './shared/useDropdownEvents';
+var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
+  var popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
+    disabled = _ref.disabled,
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    formatMessage = _ref.intl.formatMessage;
+  var toolbarItemRef = useRef(null);
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['highlight']),
+    highlightState = _useSharedPluginState.highlightState;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDropdownOpen = _useState2[0],
+    setIsDropdownOpen = _useState2[1];
+  var _useDropdownEvents = useDropdownEvents({
+      toolbarItemRef: toolbarItemRef,
+      setIsDropdownOpen: setIsDropdownOpen,
+      isDropdownOpen: isDropdownOpen,
+      pluginInjectionApi: pluginInjectionApi
+    }),
+    handleClick = _useDropdownEvents.handleClick,
+    handleKeyDown = _useDropdownEvents.handleKeyDown,
+    handleClickOutside = _useDropdownEvents.handleClickOutside,
+    handleEscapeKeydown = _useDropdownEvents.handleEscapeKeydown,
+    handleColorChange = _useDropdownEvents.handleColorChange,
+    isOpenedByKeyboard = _useDropdownEvents.isOpenedByKeyboard;
+
+  // Don't render the toolbar option while the plugin is initialising
+  if (!highlightState) {
+    return null;
+  }
+  var toolbarButtonLabel = formatMessage(messages.highlight);
+
+  // Get the design token for the  active color (if it exists) to modify the toolbar
+  // icon, but show the nice rainbow if none is selected
+  var activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
+  return jsx(Flex, {
+    alignItems: "center"
+  }, jsx(PaletteDropdown, {
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    activeColor: highlightState.activeColor,
+    trigger: jsx(ToolbarButton, {
+      buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
+      spacing: isToolbarReducedSpacing ? 'none' : 'default',
+      disabled: disabled || highlightState.disabled,
+      selected: isDropdownOpen,
+      "aria-label": toolbarButtonLabel,
+      "aria-expanded": isDropdownOpen,
+      "aria-haspopup": true,
+      title: toolbarButtonLabel,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: toolbarItemRef,
+      iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
+        selectedColor: activeColorToken,
+        disabled: highlightState.disabled
+      }), jsx("span", {
+        css: expandIconWrapperStyle
+      }, jsx(ExpandIcon, {
+        label: ""
+      })))
+    }),
+    onColorChange: function onColorChange(color) {
+      return handleColorChange(color);
+    },
+    isOpenedByKeyboard: isOpenedByKeyboard,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown
+  }));
+};
+export var FloatingToolbarHighlightColorWithIntl = injectIntl(FloatingToolbarHighlightColor);

package/dist/esm/ui/PrimaryToolbarHighlightColor.js

@@ -0,0 +1,99 @@
+/** @jsx jsx */
+import { useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
+import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
+import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
+import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { Flex } from '@atlaskit/primitives';
+import { setPalette } from '../commands';
+import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
+import { PaletteDropdown } from './shared/PaletteDropdown';
+import { useDropdownEvents } from './shared/useDropdownEvents';
+var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
+  var popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
+    disabled = _ref.disabled,
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    formatMessage = _ref.intl.formatMessage,
+    editorView = _ref.editorView;
+  var toolbarItemRef = useRef(null);
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['highlight']),
+    highlightState = _useSharedPluginState.highlightState;
+  var setDropdownOpen = function setDropdownOpen(isOpen) {
+    if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      setPalette(pluginInjectionApi, isOpen)(state, dispatch);
+    }
+  };
+  var isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
+  var _useDropdownEvents = useDropdownEvents({
+      toolbarItemRef: toolbarItemRef,
+      setIsDropdownOpen: setDropdownOpen,
+      isDropdownOpen: isDropdownOpen,
+      pluginInjectionApi: pluginInjectionApi
+    }),
+    handleClick = _useDropdownEvents.handleClick,
+    handleKeyDown = _useDropdownEvents.handleKeyDown,
+    handleClickOutside = _useDropdownEvents.handleClickOutside,
+    handleEscapeKeydown = _useDropdownEvents.handleEscapeKeydown,
+    handleColorChange = _useDropdownEvents.handleColorChange,
+    isOpenedByKeyboard = _useDropdownEvents.isOpenedByKeyboard;
+
+  // Don't render the toolbar option while the plugin is initialising
+  if (!highlightState) {
+    return null;
+  }
+  var toolbarButtonLabel = formatMessage(messages.highlight);
+
+  // Get the design token for the  active color (if it exists) to modify the toolbar
+  // icon, but show the nice rainbow if none is selected
+  var activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
+  return jsx(Flex, {
+    alignItems: "center"
+  }, jsx(PaletteDropdown, {
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    activeColor: highlightState.activeColor,
+    trigger: jsx(ToolbarButton, {
+      buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
+      spacing: isToolbarReducedSpacing ? 'none' : 'default',
+      disabled: disabled || highlightState.disabled,
+      selected: isDropdownOpen,
+      "aria-label": tooltip(toggleHighlightPalette, toolbarButtonLabel),
+      "aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
+      "aria-expanded": isDropdownOpen,
+      "aria-haspopup": true,
+      title: tooltip(toggleHighlightPalette, toolbarButtonLabel),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: toolbarItemRef,
+      iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
+        selectedColor: activeColorToken,
+        disabled: highlightState.disabled
+      }), jsx("span", {
+        css: expandIconWrapperStyle
+      }, jsx(ExpandIcon, {
+        label: ""
+      })))
+    }),
+    onColorChange: function onColorChange(color) {
+      return handleColorChange(color);
+    },
+    isOpenedByKeyboard: isOpenedByKeyboard,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown
+  }));
+};
+export var PrimaryToolbarHighlightColorWithIntl = injectIntl(PrimaryToolbarHighlightColor);

package/dist/esm/ui/ToolbarHighlightColor.js

@@ -17,7 +17,7 @@ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { changeColor, setPalette } from '../commands';
-import { EditorHighlightIcon } from './EditorHighlightIcon';
+import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
 var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
   var popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,

package/dist/esm/ui/shared/PaletteDropdown.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteWithTokenBorders } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export var PaletteDropdown = function PaletteDropdown(props) {
+  var popupsMountPoint = props.popupsMountPoint,
+    popupsBoundariesElement = props.popupsBoundariesElement,
+    popupsScrollableElement = props.popupsScrollableElement,
+    isOpen = props.isOpen,
+    activeColor = props.activeColor,
+    trigger = props.trigger,
+    onColorChange = props.onColorChange,
+    isOpenedByKeyboard = props.isOpenedByKeyboard,
+    handleClickOutside = props.handleClickOutside,
+    handleEscapeKeydown = props.handleEscapeKeydown;
+
+  // pixels, used to determine where to horizontally position the dropdown when space is limited
+  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
+  var fitWidth = 242;
+  var palette = getBooleanFF('platform.editor.dynamic-palette-borders') ? highlightColorPaletteWithTokenBorders : highlightColorPalette;
+  var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(palette, activeColor),
+    selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+    selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isOpen,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown,
+    zIndex: akEditorMenuZIndex,
+    fitWidth: fitWidth,
+    closeOnTab: true,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.COLOR,
+      selectedRowIndex: selectedRowIndex,
+      selectedColumnIndex: selectedColumnIndex,
+      isOpenedByKeyboard: isOpenedByKeyboard,
+      isPopupPositioned: true
+    },
+    trigger: trigger
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "highlight-color-palette"
+  }, /*#__PURE__*/React.createElement(ColorPalette, {
+    onClick: onColorChange,
+    selectedColor: activeColor,
+    paletteOptions: {
+      palette: palette,
+      hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
+    }
+  })));
+};

package/dist/esm/ui/shared/useDropdownEvents.js

@@ -0,0 +1,48 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+import { changeColor } from '../../commands';
+export var useDropdownEvents = function useDropdownEvents(args) {
+  var toolbarItemRef = args.toolbarItemRef,
+    setIsDropdownOpen = args.setIsDropdownOpen,
+    isDropdownOpen = args.isDropdownOpen,
+    pluginInjectionApi = args.pluginInjectionApi;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpenedByKeyboard = _useState2[0],
+    setIsOpenedByKeyboard = _useState2[1];
+  return {
+    handleClick: function handleClick() {
+      setIsOpenedByKeyboard(false);
+      setIsDropdownOpen(!isDropdownOpen);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        setIsOpenedByKeyboard(true);
+        setIsDropdownOpen(!isDropdownOpen);
+      }
+    },
+    handleClickOutside: function handleClickOutside() {
+      if (isDropdownOpen) {
+        setIsDropdownOpen(false);
+        setIsOpenedByKeyboard(false);
+      }
+    },
+    handleEscapeKeydown: function handleEscapeKeydown() {
+      if (isDropdownOpen) {
+        var _toolbarItemRef$curre;
+        setIsDropdownOpen(false);
+        setIsOpenedByKeyboard(false);
+        toolbarItemRef === null || toolbarItemRef === void 0 || (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 || _toolbarItemRef$curre.focus();
+      }
+    },
+    handleColorChange: function handleColorChange(color) {
+      var _pluginInjectionApi$c, _pluginInjectionApi$a;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(changeColor(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)({
+        color: color
+      }));
+      setIsDropdownOpen(false);
+    },
+    isOpenedByKeyboard: isOpenedByKeyboard
+  };
+};

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { HighlightPlugin } from '../plugin';
+export declare const FloatingToolbarHighlightColorWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<{
+    popupsMountPoint?: HTMLElement | undefined;
+    popupsBoundariesElement?: HTMLElement | undefined;
+    popupsScrollableElement?: HTMLElement | undefined;
+    disabled: boolean;
+    isToolbarReducedSpacing: boolean;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+    pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+} & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<{
+        popupsMountPoint?: HTMLElement | undefined;
+        popupsBoundariesElement?: HTMLElement | undefined;
+        popupsScrollableElement?: HTMLElement | undefined;
+        disabled: boolean;
+        isToolbarReducedSpacing: boolean;
+        dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+        pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+    } & WrappedComponentProps>;
+};

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { HighlightPlugin } from '../plugin';
+export declare const PrimaryToolbarHighlightColorWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<{
+    popupsMountPoint?: HTMLElement | undefined;
+    popupsBoundariesElement?: HTMLElement | undefined;
+    popupsScrollableElement?: HTMLElement | undefined;
+    disabled: boolean;
+    isToolbarReducedSpacing: boolean;
+    pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+    editorView: EditorView;
+} & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<{
+        popupsMountPoint?: HTMLElement | undefined;
+        popupsBoundariesElement?: HTMLElement | undefined;
+        popupsScrollableElement?: HTMLElement | undefined;
+        disabled: boolean;
+        isToolbarReducedSpacing: boolean;
+        pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+        editorView: EditorView;
+    } & WrappedComponentProps>;
+};

package/dist/types/ui/shared/PaletteDropdown.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type WithOutsideClickProps } from '@atlaskit/editor-common/ui';
+type PaletteDropdownProps = {
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    isOpen: boolean;
+    activeColor: string | null;
+    trigger: React.ReactElement;
+    onColorChange: (color: string) => void;
+    isOpenedByKeyboard: boolean;
+} & WithOutsideClickProps;
+export declare const PaletteDropdown: (props: PaletteDropdownProps) => JSX.Element;
+export {};

package/dist/types/ui/shared/useDropdownEvents.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type ToolbarButtonRef } from '@atlaskit/editor-common/ui-menu';
+import type { HighlightPlugin } from '../../plugin';
+type UseDropdownEventArgs = {
+    setIsDropdownOpen: (isOpen: boolean) => void;
+    isDropdownOpen: boolean;
+    pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+    toolbarItemRef: React.RefObject<ToolbarButtonRef>;
+};
+export declare const useDropdownEvents: (args: UseDropdownEventArgs) => {
+    handleClick: () => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    handleClickOutside: () => void;
+    handleEscapeKeydown: () => void;
+    handleColorChange: (color: string) => void;
+    isOpenedByKeyboard: boolean;
+};
+export {};

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { HighlightPlugin } from '../plugin';
+export declare const FloatingToolbarHighlightColorWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<{
+    popupsMountPoint?: HTMLElement | undefined;
+    popupsBoundariesElement?: HTMLElement | undefined;
+    popupsScrollableElement?: HTMLElement | undefined;
+    disabled: boolean;
+    isToolbarReducedSpacing: boolean;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+    pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+} & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<{
+        popupsMountPoint?: HTMLElement | undefined;
+        popupsBoundariesElement?: HTMLElement | undefined;
+        popupsScrollableElement?: HTMLElement | undefined;
+        disabled: boolean;
+        isToolbarReducedSpacing: boolean;
+        dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+        pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+    } & WrappedComponentProps>;
+};

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { HighlightPlugin } from '../plugin';
+export declare const PrimaryToolbarHighlightColorWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<{
+    popupsMountPoint?: HTMLElement | undefined;
+    popupsBoundariesElement?: HTMLElement | undefined;
+    popupsScrollableElement?: HTMLElement | undefined;
+    disabled: boolean;
+    isToolbarReducedSpacing: boolean;
+    pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+    editorView: EditorView;
+} & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<{
+        popupsMountPoint?: HTMLElement | undefined;
+        popupsBoundariesElement?: HTMLElement | undefined;
+        popupsScrollableElement?: HTMLElement | undefined;
+        disabled: boolean;
+        isToolbarReducedSpacing: boolean;
+        pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+        editorView: EditorView;
+    } & WrappedComponentProps>;
+};

package/dist/types-ts4.5/ui/shared/PaletteDropdown.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type WithOutsideClickProps } from '@atlaskit/editor-common/ui';
+type PaletteDropdownProps = {
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    isOpen: boolean;
+    activeColor: string | null;
+    trigger: React.ReactElement;
+    onColorChange: (color: string) => void;
+    isOpenedByKeyboard: boolean;
+} & WithOutsideClickProps;
+export declare const PaletteDropdown: (props: PaletteDropdownProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/ui/shared/useDropdownEvents.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type ToolbarButtonRef } from '@atlaskit/editor-common/ui-menu';
+import type { HighlightPlugin } from '../../plugin';
+type UseDropdownEventArgs = {
+    setIsDropdownOpen: (isOpen: boolean) => void;
+    isDropdownOpen: boolean;
+    pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+    toolbarItemRef: React.RefObject<ToolbarButtonRef>;
+};
+export declare const useDropdownEvents: (args: UseDropdownEventArgs) => {
+    handleClick: () => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    handleClickOutside: () => void;
+    handleEscapeKeydown: () => void;
+    handleColorChange: (color: string) => void;
+    isOpenedByKeyboard: boolean;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-highlight",
-	"version": "1.8.1",
+	"version": "1.9.0",
 	"description": "Highlight plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -107,6 +107,9 @@
 	"platform-feature-flags": {
 		"platform.editor.dynamic-palette-borders": {
 			"type": "boolean"
+		},
+		"platform.editor.refactor-highlight-toolbar_mo0pj": {
+			"type": "boolean"
 		}
 	}
 }