@atlaskit/editor-plugin-highlight/dist/esm/ui/PrimaryToolbarHighlightColor.js

Highlight plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @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';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
import { disableBlueBorderStyles, expandIconContainerStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import HighlightIcon from '@atlaskit/icon/core/highlight';
import { Flex } from '@atlaskit/primitives/compiled';
import { setPalette } from '../editor-commands/palette';
import { PaletteDropdown } from './shared/PaletteDropdown';
import { useDropdownEvents } from './shared/useDropdownEvents';
var selector = function selector(states) {
  var _states$highlightStat, _states$highlightStat2, _states$highlightStat3;
  return {
    isPaletteOpen: (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.isPaletteOpen,
    highlightDisabled: (_states$highlightStat2 = states.highlightState) === null || _states$highlightStat2 === void 0 ? void 0 : _states$highlightStat2.disabled,
    activeColor: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.activeColor
  };
};
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 = useSharedPluginStateWithSelector(pluginInjectionApi, ['highlight'], selector),
    isPaletteOpen = _useSharedPluginState.isPaletteOpen,
    highlightDisabled = _useSharedPluginState.highlightDisabled,
    activeColor = _useSharedPluginState.activeColor;
  var setIsDropdownOpen = function setIsDropdownOpen(isOpen) {
    if (!highlightDisabled) {
      var state = editorView.state,
        dispatch = editorView.dispatch;
      // Ignored via go/ees005
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      setPalette(pluginInjectionApi)({
        isPaletteOpen: isOpen,
        inputMethod: INPUT_METHOD.TOOLBAR
      })(state, dispatch);
    }
  };
  var isDropdownOpen = !!isPaletteOpen;
  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 (activeColor === undefined || highlightDisabled === undefined) {
    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 = activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(activeColor);
  return jsx(Flex, {
    alignItems: "center"
  }, jsx(PaletteDropdown, {
    popupsMountPoint: popupsMountPoint,
    popupsBoundariesElement: popupsBoundariesElement,
    popupsScrollableElement: popupsScrollableElement,
    isOpen: isDropdownOpen && !highlightDisabled,
    activeColor: activeColor,
    trigger: jsx(ToolbarButton
    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
    , {
      css: disableBlueBorderStyles,
      buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
      spacing: isToolbarReducedSpacing ? 'none' : 'default',
      disabled: disabled || highlightDisabled,
      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:
      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
      jsx("div", {
        css: triggerWrapperStylesWithPadding
      }, jsx(DynamicStrokeIconDecoration, {
        selectedColor: activeColorToken,
        disabled: highlightDisabled,
        icon: jsx(HighlightIcon, {
          label: "",
          color: "currentColor",
          spacing: "spacious"
        })
      }),
      //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
      jsx("span", {
        css: expandIconContainerStyle
      }, jsx(ChevronDownIcon, {
        label: "",
        color: "currentColor",
        size: "small"
      })))
    })
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onColorChange: function onColorChange(color) {
      return handleColorChange({
        color: color,
        inputMethod: INPUT_METHOD.TOOLBAR
      });
    },
    isOpenedByKeyboard: isOpenedByKeyboard,
    handleClickOutside: handleClickOutside,
    handleEscapeKeydown: handleEscapeKeydown
  }));
};
export var PrimaryToolbarHighlightColorWithIntl = injectIntl(PrimaryToolbarHighlightColor);