@atlaskit/editor-plugin-text-color/dist/es2019/textColorPlugin.js

Text color plugin for @atlaskit/editor-core

import React from 'react';
import { textColor } from '@atlaskit/adf-schema';
import { fg } from '@atlaskit/platform-feature-flags';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { changeColor as changeColorCommand } from './editor-commands/change-color';
import { setPalette } from './editor-commands/palette';
import { changeColor } from './pm-plugins/commands/change-color';
import { keymapPlugin } from './pm-plugins/keymap';
import { createPlugin, pluginKey as textColorPluginKey } from './pm-plugins/main';
import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
import { getToolbarComponents } from './ui/toolbar-components';
const pluginConfig = textColorConfig => {
  if (!textColorConfig || typeof textColorConfig === 'boolean') {
    return undefined;
  }
  return textColorConfig;
};
const isToolbarComponentEnabled = textColorConfig => {
  return textColorConfig === undefined || textColorConfig.toolbarConfig === undefined || textColorConfig.toolbarConfig.enabled !== false;
};
export const textColorPlugin = ({
  config: textColorConfig,
  api
}) => {
  const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
  const primaryToolbarComponent = ({
    editorView,
    popupsMountPoint,
    popupsBoundariesElement,
    popupsScrollableElement,
    isToolbarReducedSpacing,
    dispatchAnalyticsEvent,
    disabled
  }) => {
    if (!editorView) {
      return null;
    }
    return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
      isReducedSpacing: isToolbarReducedSpacing,
      editorView: editorView,
      popupsMountPoint: popupsMountPoint,
      popupsBoundariesElement: popupsBoundariesElement,
      popupsScrollableElement: popupsScrollableElement,
      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
      disabled: disabled,
      api: api
    });
  };
  if (isToolbarAIFCEnabled) {
    if (fg('platform_editor_toolbar_aifc_text_color_config') || fg('platform_editor_toolbar_aifc_text_color_config_jsm')) {
      var _api$toolbar;
      if (api !== null && api !== void 0 && (_api$toolbar = api.toolbar) !== null && _api$toolbar !== void 0 && _api$toolbar.actions.registerComponents && isToolbarComponentEnabled(pluginConfig(textColorConfig))) {
        api.toolbar.actions.registerComponents(getToolbarComponents(api));
      }
    } else {
      var _api$toolbar2;
      if (api !== null && api !== void 0 && (_api$toolbar2 = api.toolbar) !== null && _api$toolbar2 !== void 0 && _api$toolbar2.actions.registerComponents) {
        api.toolbar.actions.registerComponents(getToolbarComponents(api));
      }
    }
  } else {
    var _api$primaryToolbar;
    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
      name: 'textColor',
      component: primaryToolbarComponent
    });
  }
  return {
    name: 'textColor',
    marks() {
      return [{
        name: 'textColor',
        mark: textColor
      }];
    },
    pmPlugins() {
      return isToolbarAIFCEnabled ? [{
        name: 'textColor',
        plugin: ({
          dispatch
        }) => createPlugin(dispatch, pluginConfig(textColorConfig))
      }, {
        name: 'textColorKeymap',
        plugin: () => keymapPlugin({
          api
        })
      }] : [{
        name: 'textColor',
        plugin: ({
          dispatch
        }) => createPlugin(dispatch, pluginConfig(textColorConfig))
      }];
    },
    getSharedState(editorState) {
      if (!editorState) {
        return undefined;
      }
      return textColorPluginKey.getState(editorState);
    },
    actions: {
      changeColor: (color, inputMethod) => {
        var _api$analytics;
        return changeColor(color, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
      }
    },
    commands: {
      changeColor: (color, inputMethod) => {
        return changeColorCommand(color, api, inputMethod);
      },
      setPalette: isPaletteOpen => {
        return setPalette(isPaletteOpen);
      }
    },
    pluginsOptions: !isToolbarAIFCEnabled ? {
      selectionToolbar: () => {
        var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
        const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.currentState()) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.preferences.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
        if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
          exposure: true
        })) {
          const toolbarCustom = {
            type: 'custom',
            render: (view, _idx, dispatchAnalyticsEvent) => {
              if (!view) {
                return;
              }
              return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
                editorView: view,
                dispatchAnalyticsEvent: dispatchAnalyticsEvent,
                api: api
              });
            },
            fallback: []
          };
          return {
            isToolbarAbove: true,
            items: [toolbarCustom],
            rank: 6,
            pluginName: 'textColor'
          };
        } else {
          return undefined;
        }
      }
    } : {},
    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
  };
};