@atlaskit/editor-plugin-highlight 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- Updated dependencies
+
 ## 1.8.0
 
 ### Minor 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,11 +22,13 @@ 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 */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
   var popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,

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

@@ -1,5 +1,7 @@
 /** @jsx jsx */
 import React, { useRef, useState } 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';
@@ -14,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,