@atlaskit/editor-plugin-highlight
Version:
Highlight plugin for @atlaskit/editor-core
157 lines • 8.44 kB
JavaScript
/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v2.0.0 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./HighlightColorMenuItem.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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';
var HIGHLIGHT_COLOR_PICKER_COLUMNS = 10;
var styles = {
container: "_zulp12x7 _19pkpxbi",
containerPatch: "_19pkze3t",
icon: "_1e0c1o8l _18u01n1a"
};
var getTextColorIconColor = function 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)";
};
var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
var label = _ref.label,
isSelected = _ref.isSelected,
iconColor = _ref.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"
}));
};
var NoColorIconDecorator = function NoColorIconDecorator(_ref2) {
var isSelected = _ref2.isSelected,
iconColor = _ref2.iconColor;
return /*#__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(_ref3) {
var api = _ref3.api,
parents = _ref3.parents;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
var context = useToolbarDropdownMenu();
var _useSelectedTextColor = useSelectedTextColor(),
textColor = _useSelectedTextColor.textColor,
defaultColor = _useSelectedTextColor.defaultColor;
var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
var isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
var selectedColor = activeColor || (isNewColorPaletteEnabled ? REMOVE_HIGHLIGHT_COLOR : null);
var handleHighlightColorChange = useCallback(function (color, event) {
var _api$highlight;
if (api !== null && api !== void 0 && (_api$highlight = api.highlight) !== null && _api$highlight !== void 0 && (_api$highlight = _api$highlight.commands) !== null && _api$highlight !== void 0 && _api$highlight.changeColor) {
api.core.actions.execute(api.highlight.commands.changeColor({
color: color,
inputMethod: getInputMethodFromParentKeys(parents)
}));
if (!isNewColorPaletteEnabled) {
closeMenu === null || closeMenu === void 0 || closeMenu(event);
}
}
}, [api, closeMenu, isNewColorPaletteEnabled, parents]);
var colorPalette = useMemo(function () {
var isSelected = function isSelected(color) {
return color.value === selectedColor;
};
var iconColor = getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled);
var highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
return highlightPalette.filter(function (color) {
if (!isNewColorPaletteEnabled || fg('platform_editor_lovability_text_bg_color_patch_1')) {
return color.value !== REMOVE_HIGHLIGHT_COLOR;
}
return color.label !== 'Red';
}).map(function (color) {
return _objectSpread(_objectSpread({}, 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]);
var 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: function 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);
}