@atlaskit/editor-plugin-text-color
Version:
Text color plugin for @atlaskit/editor-core
67 lines • 3.89 kB
JavaScript
/* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./TextColorMenuItem.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback } from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
import { getInputMethodFromParentKeys, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
import Heading from '@atlaskit/heading';
import { Stack } from '@atlaskit/primitives/compiled';
var styles = {
container: "_zulp12x7"
};
export function TextColorMenuItem(_ref) {
var api = _ref.api,
parents = _ref.parents;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['textColor'], function (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) || []
};
}),
color = _useSharedPluginState.color,
defaultColor = _useSharedPluginState.defaultColor,
palette = _useSharedPluginState.palette;
var _useEditorToolbar = useEditorToolbar(),
editorView = _useEditorToolbar.editorView;
var context = useToolbarDropdownMenu();
var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
var handleTextColorChange = useCallback(function (color, event) {
var _api$textColor;
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 = _api$textColor.actions) !== null && _api$textColor !== void 0 && _api$textColor.changeColor) {
api.textColor.actions.changeColor(color, getInputMethodFromParentKeys(parents))(editorView.state, editorView.dispatch);
closeMenu === null || closeMenu === 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]);
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
return /*#__PURE__*/React.createElement(Stack, {
xcss: styles.container,
testId: "text-color-menu-item"
}, /*#__PURE__*/React.createElement(Heading, {
size: "xxsmall"
}, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
onClick: function 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
}
}));
}