@atlaskit/editor-plugin-highlight/dist/es2019/highlightPlugin.js

Highlight plugin for @atlaskit/editor-core

import React from 'react';
import { backgroundColor } from '@atlaskit/adf-schema';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { changeColor } from './editor-commands/change-color';
import { createHighlightPaddingPlugin } from './pm-plugins/highlight-padding';
import { keymapPlugin } from './pm-plugins/keymap';
import { createPlugin, highlightPluginKey } from './pm-plugins/main';
import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
import { getToolbarComponent } from './ui/toolbar-component';
export const highlightPlugin = ({
  api
}) => {
  var _api$analytics;
  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
  const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
  const primaryToolbarComponent = ({
    popupsMountPoint,
    popupsBoundariesElement,
    popupsScrollableElement,
    disabled,
    isToolbarReducedSpacing,
    editorView
  }) => {
    if (!editorView) {
      return null;
    }
    return /*#__PURE__*/React.createElement(PrimaryToolbarHighlightColor, {
      popupsMountPoint: popupsMountPoint,
      popupsBoundariesElement: popupsBoundariesElement,
      popupsScrollableElement: popupsScrollableElement,
      disabled: disabled,
      isToolbarReducedSpacing: isToolbarReducedSpacing,
      pluginInjectionApi: api,
      editorView: editorView
    });
  };
  if (!isToolbarAIFCEnabled) {
    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: 'highlight',
      component: primaryToolbarComponent
    });
  } else {
    var _api$toolbar;
    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponent(api));
  }
  return {
    name: 'highlight',
    marks() {
      if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) || expValEquals('platform_editor_lovability_color_schema_change', 'isEnabled', true)) {
        return [{
          name: 'backgroundColor',
          mark: backgroundColor
        }];
      }
      // color is defined in platform/packages/editor/adf-schema/src/next-schema/marks/color.ts
      return [{
        name: 'backgroundColor',
        mark: {
          ...backgroundColor,
          excludes: 'color'
        }
      }];
    },
    commands: {
      changeColor: changeColor(editorAnalyticsAPI)
    },
    pmPlugins: () => {
      const plugins = [{
        name: 'highlight',
        plugin: () => createPlugin()
      }, {
        name: 'highlightKeymap',
        plugin: () => keymapPlugin({
          api
        })
      }, {
        name: 'highlightPadding',
        plugin: () => createHighlightPaddingPlugin()
      }];
      return plugins;
    },
    getSharedState(editorState) {
      if (!editorState) {
        return;
      }
      return highlightPluginKey.getState(editorState);
    },
    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.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.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) => /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
              dispatchAnalyticsEvent: dispatchAnalyticsEvent,
              pluginInjectionApi: api,
              editorView: view
            }),
            fallback: []
          };
          const rank = editorExperiment('platform_editor_controls', 'variant1') ? 5 : -9;
          return {
            rank,
            isToolbarAbove: true,
            items: [toolbarCustom],
            pluginName: 'highlight'
          };
        } else {
          return undefined;
        }
      }
    } : {},
    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
  };
};