@atlaskit/editor-plugin-text-color
Version:
Text color plugin for @atlaskit/editor-core
116 lines • 6 kB
JavaScript
import React, { useCallback, useEffect } from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
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';
import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
const getIconColor = (textColor, defaultColor, highlightColor) => {
if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
return "var(--ds-text, #292A2E)";
}
return hexToEditorTextPaletteColor(textColor) || "var(--ds-text, #292A2E)";
};
const getHighlightColorIcon = highlightColor => {
if (highlightColor) {
return hexToEditorTextBackgroundPaletteColor(highlightColor);
}
return undefined;
};
const useTextColorHighlightMenuStateNew = api => {
return useSharedPluginStateWithSelector(api, ['textColor', 'highlight', 'interaction'], states => {
var _states$interactionSt, _states$textColorStat, _states$textColorStat2, _states$textColorStat3, _states$textColorStat4, _states$highlightStat;
const useDefaultToolbarState = ((_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState) === 'hasNotHadInteraction';
return {
isTextColorDisabled: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.disabled,
textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
defaultColor: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.defaultColor,
isPaletteOpen: (_states$textColorStat4 = states.textColorState) === null || _states$textColorStat4 === void 0 ? void 0 : _states$textColorStat4.isPaletteOpen,
highlightColor: useDefaultToolbarState ? undefined : (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor
};
});
};
const useTextColorHighlightMenuStateOld = api => {
const isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
const textColor = useSharedPluginStateSelector(api, 'textColor.color');
const defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
const isPaletteOpen = useSharedPluginStateSelector(api, 'textColor.isPaletteOpen');
const highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
return {
isTextColorDisabled,
textColor,
defaultColor,
isPaletteOpen,
highlightColor
};
};
const useTextColorHighlightMenuState = conditionalHooksFactory(() => expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true), useTextColorHighlightMenuStateNew, useTextColorHighlightMenuStateOld);
export const TextColorHighlightMenu = ({
children,
api
}) => {
var _api$textColor2;
const isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
const {
isDisabled: isToolbarDisabled
} = useToolbarUI();
const {
isTextColorDisabled,
textColor,
defaultColor,
isPaletteOpen,
highlightColor
} = useTextColorHighlightMenuState(api);
const isDisabled = Boolean(isToolbarDisabled || isTextColorDisabled);
const {
formatMessage
} = useIntl();
const setIsPaletteOpen = useCallback(isOpen => {
var _api$textColor, _api$textColor$comman;
if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor$comman = _api$textColor.commands) !== null && _api$textColor$comman !== void 0 && _api$textColor$comman.setPalette) {
api.core.actions.execute(({
tr
}) => {
api.textColor.commands.setPalette(isOpen)({
tr
});
return tr;
});
}
}, [api === null || api === void 0 ? 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(() => {
return () => {
if (isPaletteOpen) {
setIsPaletteOpen(false);
}
};
}, [setIsPaletteOpen, isPaletteOpen]);
const 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));
};