@atlaskit/editor-plugin-highlight
Version:
Highlight plugin for @atlaskit/editor-core
166 lines (165 loc) • 9.72 kB
JavaScript
/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v2.0.0 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.HighlightColorMenuItem = HighlightColorMenuItem;
require("./HighlightColorMenuItem.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _reactIntl = require("react-intl");
var _css = require("@atlaskit/css");
var _messages = require("@atlaskit/editor-common/messages");
var _toolbar = require("@atlaskit/editor-common/toolbar");
var _uiColor = require("@atlaskit/editor-common/ui-color");
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
var _editorPalette = require("@atlaskit/editor-palette");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
var _textStyle = _interopRequireDefault(require("@atlaskit/icon/core/text-style"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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; }
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 (0, _editorPalette.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(_checkMark.default, {
color: "var(--ds-icon, #292A2E)",
label: label
}) : /*#__PURE__*/React.createElement(_compiled.Box, {
as: "span",
xcss: styles.icon
}, /*#__PURE__*/React.createElement(_textStyle.default, {
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
})));
};
function HighlightColorMenuItem(_ref3) {
var api = _ref3.api,
parents = _ref3.parents;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
var context = (0, _editorToolbar.useToolbarDropdownMenu)();
var _useSelectedTextColor = (0, _uiColor.useSelectedTextColor)(),
textColor = _useSelectedTextColor.textColor,
defaultColor = _useSelectedTextColor.defaultColor;
var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
var isNewColorPaletteEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true);
var selectedColor = activeColor || (isNewColorPaletteEnabled ? _uiColor.REMOVE_HIGHLIGHT_COLOR : null);
var handleHighlightColorChange = (0, _react.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: (0, _toolbar.getInputMethodFromParentKeys)(parents)
}));
if (!isNewColorPaletteEnabled) {
closeMenu === null || closeMenu === void 0 || closeMenu(event);
}
}
}, [api, closeMenu, isNewColorPaletteEnabled, parents]);
var colorPalette = (0, _react.useMemo)(function () {
var isSelected = function isSelected(color) {
return color.value === selectedColor;
};
var iconColor = getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled);
var highlightPalette = isNewColorPaletteEnabled ? _uiColor.highlightColorPaletteNew : _uiColor.highlightColorPalette;
return highlightPalette.filter(function (color) {
if (!isNewColorPaletteEnabled || (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1')) {
return color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
}
return color.label !== 'Red';
}).map(function (color) {
return _objectSpread(_objectSpread({}, color), {}, {
decorator: isNewColorPaletteEnabled && color.value === _uiColor.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(_editorToolbar.ColorPalette, {
cols: isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
gap: isNewColorPaletteEnabled && (0, _platformFeatureFlags.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: _editorPalette.hexToEditorTextBackgroundPaletteColor
}
});
return /*#__PURE__*/React.createElement(_compiled.Stack, {
xcss: (0, _css.cx)(styles.container, isNewColorPaletteEnabled && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && styles.containerPatch),
testId: "highlight-color-menu-item"
}, /*#__PURE__*/React.createElement(_heading.default, {
size: "xxsmall"
}, formatMessage(_messages.highlightMessages.highlight)), isNewColorPaletteEnabled && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') ? /*#__PURE__*/React.createElement(_compiled.Bleed, {
inline: "space.025"
}, colorPaletteElement) : colorPaletteElement);
}