@atlaskit/editor-plugin-highlight
Version:
Highlight plugin for @atlaskit/editor-core
154 lines • 7.21 kB
JavaScript
/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v2.0.0 */
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 { cx } from '@atlaskit/css';
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette, highlightColorPaletteNew, useSelectedTextColor } from '@atlaskit/editor-common/ui-color';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } 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 { fg } from '@atlaskit/platform-feature-flags';
import { Bleed, Stack, Box } from '@atlaskit/primitives/compiled';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
const HIGHLIGHT_COLOR_PICKER_COLUMNS = 10;
const styles = {
container: "_zulp12x7 _19pkpxbi",
containerPatch: "_19pkze3t",
icon: "_1e0c1o8l _18u01n1a"
};
const getTextColorIconColor = (defaultColor, textColor, isNewColorPaletteEnabled) => {
if (!isNewColorPaletteEnabled) {
return "var(--ds-icon, #292A2E)";
}
if (!textColor || defaultColor && textColor === defaultColor) {
return "var(--ds-icon, #292A2E)";
}
return hexToEditorTextPaletteColor(textColor) || "var(--ds-icon, #292A2E)";
};
const TextColorIconDecorator = ({
label,
isSelected,
iconColor
}) => {
return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
color: "var(--ds-icon, #292A2E)",
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"
}));
};
const NoColorIconDecorator = ({
isSelected,
iconColor
}) => /*#__PURE__*/React.createElement("svg", {
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true"
}, /*#__PURE__*/React.createElement("g", {
transform: "translate(-1 -1)"
}, /*#__PURE__*/React.createElement("rect", {
x: "1.70703",
y: "1.35383",
width: "29.8003",
height: "0.5",
transform: "rotate(45 1.70703 1.35383)",
stroke: "var(--ds-border, #0B120E24)",
strokeWidth: "0.5"
}), isSelected ? /*#__PURE__*/React.createElement("path", {
d: "M17.959 7.9707L10.709 16.9707C10.5675 17.1462 10.3544 17.2488 10.1289 17.25C9.90343 17.2512 9.68924 17.1506 9.5459 16.9766L6.0459 12.7266L7.2041 11.7734L10.1182 15.3115L16.791 7.0293L17.959 7.9707Z",
fill: "var(--ds-icon, #292A2E)"
}) : /*#__PURE__*/React.createElement("path", {
d: "M7.80469 16L10.9746 7.26953H12.2637L15.4746 16H14.3027L12.4512 10.8203C12.3379 10.5 12.2051 10.1016 12.0527 9.625C11.9043 9.14453 11.7227 8.5332 11.5078 7.79102H11.7188C11.5078 8.54102 11.3242 9.16016 11.168 9.64844C11.0156 10.1328 10.8887 10.5234 10.7871 10.8203L8.98828 16H7.80469ZM9.39844 13.5625V12.5898H13.8809V13.5625H9.39844Z",
fill: iconColor
})));
export function HighlightColorMenuItem({
api,
parents
}) {
const {
formatMessage
} = useIntl();
const activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
const context = useToolbarDropdownMenu();
const {
textColor,
defaultColor
} = useSelectedTextColor();
const closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
const isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
const selectedColor = activeColor || (isNewColorPaletteEnabled ? REMOVE_HIGHLIGHT_COLOR : null);
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)
}));
if (!isNewColorPaletteEnabled) {
closeMenu === null || closeMenu === void 0 ? void 0 : closeMenu(event);
}
}
}, [api, closeMenu, isNewColorPaletteEnabled, parents]);
const colorPalette = useMemo(() => {
const isSelected = color => color.value === selectedColor;
const iconColor = getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled);
const highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
return highlightPalette.filter(color => {
if (!isNewColorPaletteEnabled || fg('platform_editor_lovability_text_bg_color_patch_1')) {
return color.value !== REMOVE_HIGHLIGHT_COLOR;
}
return color.label !== 'Red';
}).map(color => ({
...color,
decorator: isNewColorPaletteEnabled && color.value === REMOVE_HIGHLIGHT_COLOR ? /*#__PURE__*/React.createElement(NoColorIconDecorator, {
isSelected: isSelected(color),
iconColor: iconColor
}) : /*#__PURE__*/React.createElement(TextColorIconDecorator, {
label: color.label,
isSelected: isSelected(color),
iconColor: iconColor
})
}));
}, [defaultColor, textColor, isNewColorPaletteEnabled, selectedColor]);
const colorPaletteElement = /*#__PURE__*/React.createElement(ColorPalette, {
cols: isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
gap: isNewColorPaletteEnabled && fg('platform_editor_lovability_text_bg_color_patch_1') ? 'space.0' : undefined
// 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: selectedColor
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
paletteOptions: {
palette: colorPalette || [],
hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
}
});
return /*#__PURE__*/React.createElement(Stack, {
xcss: cx(styles.container, isNewColorPaletteEnabled && fg('platform_editor_lovability_text_bg_color_patch_1') && styles.containerPatch),
testId: "highlight-color-menu-item"
}, /*#__PURE__*/React.createElement(Heading, {
size: "xxsmall"
}, formatMessage(messages.highlight)), isNewColorPaletteEnabled && fg('platform_editor_lovability_text_bg_color_patch_1') ? /*#__PURE__*/React.createElement(Bleed, {
inline: "space.025"
}, colorPaletteElement) : colorPaletteElement);
}