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

Highlight plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.highlightPlugin = void 0;
var _react = _interopRequireDefault(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _changeColor = require("./editor-commands/change-color");
var _highlightPadding = require("./pm-plugins/highlight-padding");
var _keymap = require("./pm-plugins/keymap");
var _main = require("./pm-plugins/main");
var _FloatingToolbarHighlightColor = require("./ui/FloatingToolbarHighlightColor");
var _PrimaryToolbarHighlightColor = require("./ui/PrimaryToolbarHighlightColor");
var _toolbarComponent = require("./ui/toolbar-component");
var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
  var _api$analytics;
  var api = _ref.api;
  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
  var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
  var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
    var popupsMountPoint = _ref2.popupsMountPoint,
      popupsBoundariesElement = _ref2.popupsBoundariesElement,
      popupsScrollableElement = _ref2.popupsScrollableElement,
      disabled = _ref2.disabled,
      isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
      editorView = _ref2.editorView;
    if (!editorView) {
      return null;
    }
    return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarHighlightColor.PrimaryToolbarHighlightColorWithIntl, {
      popupsMountPoint: popupsMountPoint,
      popupsBoundariesElement: popupsBoundariesElement,
      popupsScrollableElement: popupsScrollableElement,
      disabled: disabled,
      isToolbarReducedSpacing: isToolbarReducedSpacing,
      pluginInjectionApi: api,
      editorView: editorView
    });
  };
  if (!isToolbarAIFCEnabled) {
    var _api$primaryToolbar;
    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
      name: 'highlight',
      component: primaryToolbarComponent
    });
  } else {
    var _api$toolbar;
    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponent.getToolbarComponent)(api));
  }
  return {
    name: 'highlight',
    marks: function marks() {
      return [{
        name: 'backgroundColor',
        mark: _adfSchema.backgroundColor
      }];
    },
    commands: {
      changeColor: (0, _changeColor.changeColor)(editorAnalyticsAPI)
    },
    pmPlugins: function pmPlugins() {
      var plugins = [{
        name: 'highlight',
        plugin: function plugin() {
          return (0, _main.createPlugin)({
            api: api
          });
        }
      }, {
        name: 'highlightKeymap',
        plugin: function plugin() {
          return (0, _keymap.keymapPlugin)({
            api: api
          });
        }
      }, {
        name: 'highlightPadding',
        plugin: function plugin() {
          return (0, _highlightPadding.createHighlightPaddingPlugin)();
        }
      }];
      return plugins;
    },
    getSharedState: function getSharedState(editorState) {
      if (!editorState) {
        return;
      }
      return _main.highlightPluginKey.getState(editorState);
    },
    pluginsOptions: !isToolbarAIFCEnabled ? {
      selectionToolbar: function selectionToolbar() {
        var _api$userPreferences, _api$selectionToolbar;
        var toolbarDocking = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
        if (toolbarDocking === 'none' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
          exposure: true
        })) {
          var toolbarCustom = {
            type: 'custom',
            render: function render(view, _idx, dispatchAnalyticsEvent) {
              return /*#__PURE__*/_react.default.createElement(_FloatingToolbarHighlightColor.FloatingToolbarHighlightColorWithIntl, {
                dispatchAnalyticsEvent: dispatchAnalyticsEvent,
                pluginInjectionApi: api,
                editorView: view
              });
            },
            fallback: []
          };
          var rank = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 5 : -9;
          return {
            rank: rank,
            isToolbarAbove: true,
            items: [toolbarCustom],
            pluginName: 'highlight'
          };
        } else {
          return undefined;
        }
      }
    } : {},
    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
  };
};