@atlaskit/editor-plugin-highlight/dist/esm/ui/FloatingToolbarHighlightColor.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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
import { toggleHighlightPalette, tooltip, getAriaKeyshortcuts } 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
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,
    activeColor: (_states$highlightStat2 = states.highlightState) === null || _states$highlightStat2 === void 0 ? void 0 : _states$highlightStat2.activeColor,
    disabled: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.disabled
  };
};
var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
  var pluginInjectionApi = _ref.pluginInjectionApi,
    formatMessage = _ref.intl.formatMessage,
    editorView = _ref.editorView;
  var toolbarItemRef = useRef(null);
  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['highlight'], selector),
    activeColor = _useSharedPluginState.activeColor,
    disabled = _useSharedPluginState.disabled,
    isPaletteOpen = _useSharedPluginState.isPaletteOpen;
  var setDropdownOpen = function setDropdownOpen(isOpen) {
    var _pluginInjectionApi$a;
    if (!disabled && editorView && pluginInjectionApi) {
      var state = editorView.state,
        dispatch = editorView.dispatch;
      setPalette(pluginInjectionApi)({
        isPaletteOpen: isOpen,
        inputMethod: INPUT_METHOD.FLOATING_TB
      })(state, dispatch);
    }
    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.fireAnalyticsEvent({
      action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
      actionSubject: ACTION_SUBJECT.TOOLBAR,
      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
      eventType: EVENT_TYPE.TRACK,
      attributes: {
        inputMethod: INPUT_METHOD.FLOATING_TB
      }
    });
  };
  var isDropdownOpen = !!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 (activeColor === undefined || disabled === 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);
  var title = editorExperiment('platform_editor_controls', 'variant1') ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
  return jsx(PaletteDropdown, {
    isOpen: isDropdownOpen && !disabled,
    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: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
      disabled: disabled,
      selected: isDropdownOpen,
      "aria-label": title,
      "aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
      "aria-expanded": isDropdownOpen,
      "aria-haspopup": true,
      title: title,
      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: disabled,
        icon: jsx(HighlightIcon, {
          label: "",
          color: "currentColor",
          spacing: "spacious"
        })
      }),
      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
      jsx("span", {
        css: expandIconContainerStyle
      }, jsx(ChevronDownIcon, {
        label: "",
        color: "currentColor",
        size: "small"
      })))
    }, editorExperiment('platform_editor_controls', 'control') && formatMessage(messages.highlightFloatingToolbar))
    // 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.FLOATING_TB
      });
    },
    isOpenedByKeyboard: isOpenedByKeyboard,
    handleClickOutside: handleClickOutside,
    handleEscapeKeydown: handleEscapeKeydown
  });
};
export var FloatingToolbarHighlightColorWithIntl = injectIntl(FloatingToolbarHighlightColor);