UNPKG

@atlaskit/editor-plugin-text-color

Version:

Text color plugin for @atlaskit/editor-core

83 lines 2.87 kB
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin'; import { textColorPalette } from '@atlaskit/editor-common/ui-color'; import { PluginKey } from '@atlaskit/editor-prosemirror/state'; import { getActiveColor } 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 palette = [{ value: defaultColor.color, label: defaultColor.label, border: "var(--ds-border, #0B120E24)" }, ...textColorPalette]; const state = { color: getActiveColor(editorState), disabled: getDisabledState(editorState), palette, defaultColor: defaultColor.color, isPaletteOpen: false }; 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 }; break; case ACTIONS.SET_COLOR: nextState = { ...pluginState, color: meta.color, disabled: false, isPaletteOpen: false }; break; case ACTIONS.DISABLE: nextState = { ...pluginState, disabled: true }; break; case ACTIONS.SET_PALETTE: nextState = { ...pluginState, isPaletteOpen: meta.isPaletteOpen }; break; default: nextState = { ...pluginState, color: getActiveColor(newState), disabled: getDisabledState(newState) }; } if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) { dispatch(pluginKey, nextState); return nextState; } return pluginState; } } }); }