@atlaskit/editor-plugin-highlight 1.8.1 → 1.10.0

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,11 +1,15 @@
 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 { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
+import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
 import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
 export var highlightPlugin = function highlightPlugin(_ref) {
   var _api$analytics;
-  var api = _ref.api;
+  var api = _ref.api,
+    options = _ref.config;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var popupsMountPoint = _ref2.popupsMountPoint,
@@ -13,15 +17,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
     });
@@ -61,6 +71,28 @@ export var highlightPlugin = function highlightPlugin(_ref) {
         component: primaryToolbarComponent
       }));
     },
+    pluginsOptions: {
+      selectionToolbar: function selectionToolbar() {
+        if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) || !getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd')) {
+          return;
+        }
+        var toolbarCustom = {
+          type: 'custom',
+          render: function render(_view, _idx, dispatchAnalyticsEvent) {
+            return /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
+              dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+              pluginInjectionApi: api
+            });
+          },
+          fallback: []
+        };
+        return {
+          rank: -9,
+          isToolbarAbove: true,
+          items: [toolbarCustom]
+        };
+      }
+    },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

package/dist/esm/ui/FloatingToolbarHighlightColor.js

@@ -0,0 +1,84 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { 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';
+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 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, {
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    activeColor: highlightState.activeColor,
+    trigger: jsx(ToolbarButton, {
+      buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
+      spacing: 'default',
+      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: ""
+      })))
+    }, formatMessage(messages.highlightFloatingToolbar)),
+    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/plugin.d.ts

@@ -4,7 +4,11 @@ import type { BackgroundColorPlugin } from '@atlaskit/editor-plugin-background-c
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { TextFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
 import type { HighlightPluginState } from './pm-plugins/main';
+export type HighlightPluginOptions = {
+    textHighlightingFloatingToolbarExperiment?: boolean;
+};
 export type HighlightPlugin = NextEditorPlugin<'highlight', {
+    pluginConfiguration?: HighlightPluginOptions;
     dependencies: [
         BackgroundColorPlugin,
         OptionalPlugin<AnalyticsPlugin>,

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

@@ -0,0 +1,14 @@
+/// <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<{
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+    pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+} & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<{
+        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 {};