@atlaskit/editor-plugin-text-color/dist/es2019/ui/TextColorMenuItem.js

Text color plugin for @atlaskit/editor-core

/* TextColorMenuItem.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./TextColorMenuItem.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useId } from 'react';
import { useIntl } from 'react-intl';
import { textColorMessages as messages } from '@atlaskit/editor-common/messages/text-color';
import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar/context';
import { textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color/ColorPalette/paletteMessagesTokenModeNames';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette/text';
import { ColorPalette } from '@atlaskit/editor-toolbar/color-palette';
import { useToolbarDropdownMenu } from '@atlaskit/editor-toolbar/toolbar-dropdown-menu-context';
import Heading from '@atlaskit/heading/heading';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Bleed } from '@atlaskit/primitives/compiled/bleed';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
const TEXT_COLOR_PICKER_COLUMNS = 10;
const styles = {
  container: "_zulp12x7"
};
export function TextColorMenuItem({
  api,
  parents
}) {
  const {
    color,
    defaultColor,
    palette
  } = useSharedPluginStateWithSelector(api, ['textColor'], states => {
    var _states$textColorStat, _states$textColorStat2, _states$textColorStat3;
    return {
      color: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.color,
      defaultColor: ((_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.defaultColor) || null,
      palette: ((_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.palette) || []
    };
  });
  const {
    editorView
  } = useEditorToolbar();
  const context = useToolbarDropdownMenu();
  const closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
  const {
    formatMessage
  } = useIntl();
  const labelId = useId();
  const isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
  const handleTextColorChange = useCallback((color, event) => {
    var _api$textColor, _api$textColor$action;
    if (!(editorView !== null && editorView !== void 0 && editorView.state) || !(editorView !== null && editorView !== void 0 && editorView.dispatch)) {
      return;
    }
    if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor$action = _api$textColor.actions) !== null && _api$textColor$action !== void 0 && _api$textColor$action.changeColor) {
      api.textColor.actions.changeColor(color, getInputMethodFromParentKeys(parents))(editorView.state, editorView.dispatch);
      if (!isNewColorPaletteEnabled) {
        closeMenu === null || closeMenu === void 0 ? void 0 : closeMenu(event);
      }
    }
  }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu, isNewColorPaletteEnabled]);
  const colorPalette = /*#__PURE__*/React.createElement(ColorPalette, {
    ariaLabelledBy: labelId,
    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined,
    gap: isNewColorPaletteEnabled ? 'space.0' : undefined
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onClick: (color, _, event) => {
      handleTextColorChange(color, event);
    },
    selectedColor: color || defaultColor
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    paletteOptions: {
      palette: palette,
      hexToPaletteColor: hexToEditorTextPaletteColor,
      paletteColorTooltipMessages: textPaletteTooltipMessages
    }
  });
  return /*#__PURE__*/React.createElement(Stack, {
    xcss: styles.container,
    testId: "text-color-menu-item"
  }, /*#__PURE__*/React.createElement(Heading, {
    id: labelId,
    size: "xxsmall"
    // The label names the palette's radio group; a heading inside a menu is skipped and has no stable level here
    ,
    as: fg('platform_editor_a11y_color_palette_radiogroup') ? 'div' : undefined
  }, formatMessage(messages.textColorTooltip)), isNewColorPaletteEnabled ? /*#__PURE__*/React.createElement(Bleed, {
    inline: "space.025"
  }, colorPalette) : colorPalette);
}