@atlaskit/editor-plugin-highlight
Version:
Highlight plugin for @atlaskit/editor-core
104 lines (103 loc) • 5.96 kB
JavaScript
/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
;
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 _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 _compiled = require("@atlaskit/primitives/compiled");
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 styles = {
container: "_zulp12x7 _19pkpxbi",
removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x",
icon: "_1e0c1o8l _18u01n1a"
};
var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
var label = _ref.label,
isSelected = _ref.isSelected;
var iconColor = "var(--ds-icon, #292A2E)";
return isSelected ? /*#__PURE__*/React.createElement(_checkMark.default, {
color: iconColor,
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"
}));
};
function HighlightColorMenuItem(_ref2) {
var api = _ref2.api,
parents = _ref2.parents;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
var context = (0, _editorToolbar.useToolbarDropdownMenu)();
var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
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)
}));
closeMenu === null || closeMenu === void 0 || closeMenu(event);
}
}, [api, closeMenu, parents]);
var colorPalette = (0, _react.useMemo)(function () {
var isSelected = function isSelected(color) {
return color.value === activeColor;
};
return _uiColor.highlightColorPalette.filter(function (color) {
return color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
}).map(function (color) {
return _objectSpread(_objectSpread({}, color), {}, {
decorator: /*#__PURE__*/React.createElement(TextColorIconDecorator, {
label: color.label,
isSelected: isSelected(color)
})
});
});
}, [activeColor]);
return /*#__PURE__*/React.createElement(_compiled.Stack, {
xcss: styles.container,
testId: "highlight-color-menu-item"
}, /*#__PURE__*/React.createElement(_heading.default, {
size: "xxsmall"
}, formatMessage(_messages.highlightMessages.highlight)), /*#__PURE__*/React.createElement(_editorToolbar.ColorPalette
// 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: activeColor || null
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
paletteOptions: {
palette: colorPalette || [],
hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
}
}));
}