@atlaskit/editor-plugin-highlight/dist/cjs/ui/FloatingToolbarHighlightColor.js

Highlight plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FloatingToolbarHighlightColorWithIntl = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _hooks = require("@atlaskit/editor-common/hooks");
var _icons = require("@atlaskit/editor-common/icons");
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/core/chevron-down"));
var _highlight = _interopRequireDefault(require("@atlaskit/icon/core/highlight"));
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _palette = require("../editor-commands/palette");
var _PaletteDropdown = require("./shared/PaletteDropdown");
var _useDropdownEvents2 = require("./shared/useDropdownEvents");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

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 = (0, _react.useRef)(null);
  var _useSharedPluginState = (0, _hooks.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;
      (0, _palette.setPalette)(pluginInjectionApi)({
        isPaletteOpen: isOpen,
        inputMethod: _analytics.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 ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED,
      actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR,
      actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
      eventType: _analytics.EVENT_TYPE.TRACK,
      attributes: {
        inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
      }
    });
  };
  var isDropdownOpen = !!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 (activeColor === undefined || disabled === undefined) {
    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 = activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(activeColor);
  var title = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
  return (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
    isOpen: isDropdownOpen && !disabled,
    activeColor: activeColor,
    trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton
    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
    , {
      css: _styles.disableBlueBorderStyles,
      buttonId: _uiMenu.TOOLBAR_BUTTON.BACKGROUND_COLOR,
      spacing: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'default' : 'compact',
      disabled: disabled,
      selected: isDropdownOpen,
      "aria-label": title,
      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.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
      (0, _react2.jsx)("div", {
        css: _styles.triggerWrapperStylesWithPadding
      }, (0, _react2.jsx)(_icons.DynamicStrokeIconDecoration, {
        selectedColor: activeColorToken,
        disabled: disabled,
        icon: (0, _react2.jsx)(_highlight.default, {
          label: "",
          color: "currentColor",
          spacing: "spacious"
        })
      }),
      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
      (0, _react2.jsx)("span", {
        css: _styles.expandIconContainerStyle
      }, (0, _react2.jsx)(_chevronDown.default, {
        label: "",
        color: "currentColor",
        size: "small"
      })))
    }, (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && formatMessage(_messages.highlightMessages.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: _analytics.INPUT_METHOD.FLOATING_TB
      });
    },
    isOpenedByKeyboard: isOpenedByKeyboard,
    handleClickOutside: handleClickOutside,
    handleEscapeKeydown: handleEscapeKeydown
  });
};
var FloatingToolbarHighlightColorWithIntl = exports.FloatingToolbarHighlightColorWithIntl = (0, _reactIntl.injectIntl)(FloatingToolbarHighlightColor);