UNPKG

@atlaskit/editor-plugin-text-color

Version:

Text color plugin for @atlaskit/editor-core

108 lines 5.14 kB
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin'; import { getTextColorInNonActiveTheme, textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color'; import { PluginKey } from '@atlaskit/editor-prosemirror/state'; import { fg } from '@atlaskit/platform-feature-flags'; import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure'; import { getActiveColor, isMultiTextColorSelection } from './utils/color'; import { DEFAULT_COLOR } from './utils/constants'; import { getDisabledState } from './utils/disabled'; function createInitialPluginState(editorState, pluginConfig) { const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR; const paletteColors = expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? textColorPaletteNew : textColorPalette; const palette = [{ value: defaultColor.color, label: defaultColor.label, border: "var(--ds-border, #0B120E24)" }, ...paletteColors]; const color = getActiveColor(editorState); const state = { color, disabled: getDisabledState(editorState), palette, defaultColor: defaultColor.color, isPaletteOpen: false, // eslint-disable-next-line @atlaskit/platform/no-preconditioning ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && { colorInNonActiveTheme: getTextColorInNonActiveTheme(color, defaultColor.color), isMultiTextColor: isMultiTextColorSelection(editorState) }) }; return state; } export let ACTIONS = /*#__PURE__*/function (ACTIONS) { ACTIONS[ACTIONS["RESET_COLOR"] = 0] = "RESET_COLOR"; ACTIONS[ACTIONS["SET_COLOR"] = 1] = "SET_COLOR"; ACTIONS[ACTIONS["DISABLE"] = 2] = "DISABLE"; ACTIONS[ACTIONS["SET_PALETTE"] = 3] = "SET_PALETTE"; return ACTIONS; }({}); export const pluginKey = new PluginKey('textColorPlugin'); export function createPlugin(dispatch, pluginConfig) { return new SafePlugin({ key: pluginKey, state: { init(_config, editorState) { return createInitialPluginState(editorState, pluginConfig); }, apply(tr, pluginState, _, newState) { const meta = tr.getMeta(pluginKey) || {}; let nextState; switch (meta.action) { case ACTIONS.RESET_COLOR: nextState = { ...pluginState, color: pluginState.defaultColor, // eslint-disable-next-line @atlaskit/platform/no-preconditioning ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && { colorInNonActiveTheme: getTextColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor), isMultiTextColor: false }) }; break; case ACTIONS.SET_COLOR: nextState = { ...pluginState, color: meta.color, disabled: false, isPaletteOpen: false, // eslint-disable-next-line @atlaskit/platform/no-preconditioning ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && { colorInNonActiveTheme: getTextColorInNonActiveTheme(meta.color, pluginState.defaultColor), isMultiTextColor: false }) }; break; case ACTIONS.DISABLE: nextState = { ...pluginState, disabled: true }; break; case ACTIONS.SET_PALETTE: nextState = { ...pluginState, isPaletteOpen: meta.isPaletteOpen }; break; default: const color = getActiveColor(newState); nextState = { ...pluginState, color, disabled: getDisabledState(newState), // eslint-disable-next-line @atlaskit/platform/no-preconditioning ...(color !== pluginState.color && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && { colorInNonActiveTheme: getTextColorInNonActiveTheme(color, pluginState.defaultColor), isMultiTextColor: isMultiTextColorSelection(newState) }) }; } if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isMultiTextColor !== nextState.isMultiTextColor || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) { dispatch(pluginKey, nextState); return nextState; } return pluginState; } } }); }