@atlaskit/editor-plugin-highlight/dist/es2019/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';
const 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
  };
};
const PrimaryToolbarHighlightColor = ({
  popupsMountPoint,
  popupsBoundariesElement,
  popupsScrollableElement,
  isToolbarReducedSpacing,
  disabled,
  pluginInjectionApi,
  intl: {
    formatMessage
  },
  editorView
}) => {
  const toolbarItemRef = useRef(null);
  const {
    isPaletteOpen,
    highlightDisabled,
    activeColor
  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['highlight'], selector);
  const setIsDropdownOpen = isOpen => {
    if (!highlightDisabled) {
      const {
        state,
        dispatch
      } = editorView;
      // Ignored via go/ees005
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      setPalette(pluginInjectionApi)({
        isPaletteOpen: isOpen,
        inputMethod: INPUT_METHOD.TOOLBAR
      })(state, dispatch);
    }
  };
  const isDropdownOpen = !!isPaletteOpen;
  const {
    handleClick,
    handleKeyDown,
    handleClickOutside,
    handleEscapeKeydown,
    handleColorChange,
    isOpenedByKeyboard
  } = useDropdownEvents({
    toolbarItemRef,
    setIsDropdownOpen,
    isDropdownOpen,
    pluginInjectionApi
  });

  // Don't render the toolbar option while the plugin is initialising
  if (activeColor === undefined || highlightDisabled === undefined) {
    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 = 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: color => handleColorChange({
      color,
      inputMethod: INPUT_METHOD.TOOLBAR
    }),
    isOpenedByKeyboard: isOpenedByKeyboard,
    handleClickOutside: handleClickOutside,
    handleEscapeKeydown: handleEscapeKeydown
  }));
};
export const PrimaryToolbarHighlightColorWithIntl = injectIntl(PrimaryToolbarHighlightColor);