@atlaskit/editor-plugin-text-color
Version:
Text color plugin for @atlaskit/editor-core
79 lines • 3.98 kB
JavaScript
import React, { useCallback, useEffect } from 'react';
import { useIntl } from 'react-intl';
import { toggleHighlightPalette, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { hexToEditorTextPaletteColor, hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarDropdownMenuProvider, ToolbarTooltip, useToolbarUI } from '@atlaskit/editor-toolbar';
var getIconColor = function getIconColor(textColor, defaultColor, highlightColor) {
if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
return "var(--ds-text, #292A2E)";
}
return hexToEditorTextPaletteColor(textColor) || "var(--ds-text, #292A2E)";
};
var getHighlightColorIcon = function getHighlightColorIcon(highlightColor) {
if (highlightColor) {
return hexToEditorTextBackgroundPaletteColor(highlightColor);
}
return undefined;
};
export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
var _api$textColor2;
var children = _ref.children,
api = _ref.api;
var isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
var isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
var _useToolbarUI = useToolbarUI(),
isToolbarDisabled = _useToolbarUI.isDisabled;
var isDisabled = Boolean(isToolbarDisabled || isTextColorDisabled);
var highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
var textColor = useSharedPluginStateSelector(api, 'textColor.color');
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
var isPaletteOpen = useSharedPluginStateSelector(api, 'textColor.isPaletteOpen');
var setIsPaletteOpen = useCallback(function (isOpen) {
var _api$textColor;
if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.commands) !== null && _api$textColor !== void 0 && _api$textColor.setPalette) {
api.core.actions.execute(function (_ref2) {
var tr = _ref2.tr;
api.textColor.commands.setPalette(isOpen)({
tr: tr
});
return tr;
});
}
}, [api === null || api === void 0 || (_api$textColor2 = api.textColor) === null || _api$textColor2 === void 0 ? void 0 : _api$textColor2.commands, api === null || api === void 0 ? void 0 : api.core.actions]);
useEffect(function () {
return function () {
if (isPaletteOpen) {
setIsPaletteOpen(false);
}
};
}, [setIsPaletteOpen, isPaletteOpen]);
var iconColor = getIconColor(textColor, defaultColor, highlightColor);
return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
isOpen: isPaletteOpen,
setIsOpen: setIsPaletteOpen
}, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
highlightColor: getHighlightColorIcon(highlightColor)
}, /*#__PURE__*/React.createElement(TextColorIcon, {
label: formatMessage(messages.textColorTooltip),
iconColor: iconColor,
shouldRecommendSmallIcon: true,
size: 'small',
isDisabled: isDisabled,
spacing: 'compact'
})),
isDisabled: isDisabled,
testId: "text-color-highlight-menu",
hasSectionMargin: false,
tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: /*#__PURE__*/React.createElement(ToolTipContent, {
description: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip),
keymap: toggleHighlightPalette
})
})
}, children));
};