@atlaskit/editor-plugin-highlight
Version:
Highlight plugin for @atlaskit/editor-core
90 lines • 3.83 kB
JavaScript
/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./HighlightColorMenuItem.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
import Heading from '@atlaskit/heading';
import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
import Icon from '@atlaskit/icon/core/text-style';
import { Stack, Box } from '@atlaskit/primitives/compiled';
const styles = {
container: "_zulp12x7 _19pkpxbi",
removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x",
icon: "_1e0c1o8l _18u01n1a"
};
const TextColorIconDecorator = ({
label,
isSelected
}) => {
const iconColor = "var(--ds-icon, #292A2E)";
return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
color: iconColor,
label: label
}) : /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.icon
}, /*#__PURE__*/React.createElement(Icon, {
label: label,
color: iconColor,
shouldRecommendSmallIcon: true,
spacing: "spacious",
size: "small"
}));
};
export function HighlightColorMenuItem({
api,
parents
}) {
const {
formatMessage
} = useIntl();
const activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
const context = useToolbarDropdownMenu();
const closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
const handleHighlightColorChange = useCallback((color, event) => {
var _api$highlight, _api$highlight$comman;
if (api !== null && api !== void 0 && (_api$highlight = api.highlight) !== null && _api$highlight !== void 0 && (_api$highlight$comman = _api$highlight.commands) !== null && _api$highlight$comman !== void 0 && _api$highlight$comman.changeColor) {
api.core.actions.execute(api.highlight.commands.changeColor({
color,
inputMethod: getInputMethodFromParentKeys(parents)
}));
closeMenu === null || closeMenu === void 0 ? void 0 : closeMenu(event);
}
}, [api, closeMenu, parents]);
const colorPalette = useMemo(() => {
const isSelected = color => color.value === activeColor;
return highlightColorPalette.filter(color => color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
...color,
decorator: /*#__PURE__*/React.createElement(TextColorIconDecorator, {
label: color.label,
isSelected: isSelected(color)
})
}));
}, [activeColor]);
return /*#__PURE__*/React.createElement(Stack, {
xcss: styles.container,
testId: "highlight-color-menu-item"
}, /*#__PURE__*/React.createElement(Heading, {
size: "xxsmall"
}, formatMessage(messages.highlight)), /*#__PURE__*/React.createElement(ColorPalette
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
onClick: (color, _, event) => {
handleHighlightColorChange(color, event);
},
selectedColor: activeColor || null
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
paletteOptions: {
palette: colorPalette || [],
hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
}
}));
}