@atlaskit/editor-plugin-selection-extension/dist/cjs/selectionExtensionPlugin.js

editor-plugin-selection-extension plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.selectionExtensionPlugin = void 0;
var _react = _interopRequireDefault(require("react"));
var _main = require("./pm-plugins/main");
var _SelectionExtensionComponentWrapper = require("./ui/extension/SelectionExtensionComponentWrapper");
var _getBoundingBoxFromSelection = require("./ui/getBoundingBoxFromSelection");
var _SelectionExtensionItems = require("./ui/toolbar/SelectionExtensionItems");
var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
  var api = _ref.api,
    config = _ref.config;
  return {
    name: 'selectionExtension',
    getSharedState: function getSharedState(editorState) {
      if (!editorState) {
        return null;
      }
      return _main.selectionExtensionPluginKey.getState(editorState) || null;
    },
    commands: {
      setActiveExtension: function setActiveExtension(extension) {
        return function (_ref2) {
          var tr = _ref2.tr;
          return tr.setMeta(_main.selectionExtensionPluginKey, {
            type: 'set-active-extension',
            extension: extension
          });
        };
      },
      clearActiveExtension: function clearActiveExtension() {
        return function (_ref3) {
          var tr = _ref3.tr;
          return tr.setMeta(_main.selectionExtensionPluginKey, {
            type: 'clear-active-extension'
          });
        };
      }
    },
    contentComponent: function contentComponent(_ref4) {
      var _api$analytics;
      var editorView = _ref4.editorView;
      return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentWrapper.SelectionExtensionComponentWrapper, {
        editorView: editorView,
        api: api,
        editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
      });
    },
    pluginsOptions: {
      selectionToolbar: function selectionToolbar(state) {
        var _api$editorViewMode;
        if (!config) {
          return;
        }
        var pageModes = config.pageModes,
          extensions = config.extensions;

        /**
         * Extensions Config Validation
         *
         * Check whether plugin contains any selection extensions
         */
        if (!extensions || extensions.length === 0) {
          return;
        }

        /**
         * Content Mode Validation
         *
         * Check if pageModes is provided and matches against current content mode
         *
         * TODO: This will eventially transition from mode to contentMode
         */
        var editorContentMode = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode;
        if (pageModes) {
          // Early Exit: consumer has set pageModes but editorContentMode is undefined
          if (!editorContentMode) {
            return;
          }

          // Simplify traversion of pageModes which can be string or array of strings
          var showOnModesCollection = Array.isArray(pageModes) ? pageModes : [pageModes];

          // Early Exit: consumer has set pageModes but current editorContentMode is not in the collection
          if (!showOnModesCollection.includes(editorContentMode)) {
            return;
          }
        }

        /**
         * Active Extension
         *
         * Check if there is an active extension and hide the selection extension dropdown
         */
        var selectionExtensionState = _main.selectionExtensionPluginKey.getState(state);
        if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
          return;
        }
        var handleOnExtensionClick = function handleOnExtensionClick(view) {
          return function (extension) {
            var currentSelection = state.selection;
            var from = currentSelection.from,
              to = currentSelection.to;
            var text = state.doc.textBetween(from, to, '\n');
            var coords = (0, _getBoundingBoxFromSelection.getBoundingBoxFromSelection)(view, from, to);
            var selection = {
              text: text,
              selection: {
                from: from,
                to: to
              },
              coords: coords
            };

            // Render component here
            if (extension.component) {
              api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.setActiveExtension({
                extension: extension,
                selection: selection
              }));
            }
            if (extension.onClick) {
              extension.onClick(selection);
            }
          };
        };

        /**
         * Renders custom dropdown menu with active selection extensions
         */
        var selectionExtensionDropdown = {
          type: 'custom',
          supportsViewMode: true,
          render: function render(view) {
            var _api$analytics2;
            if (!view) {
              return;
            }
            return /*#__PURE__*/_react.default.createElement(_SelectionExtensionItems.SelectionExtensionItems, {
              api: api,
              editorView: view,
              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
              extensions: extensions,
              onExtensionClick: handleOnExtensionClick(view)
            });
          },
          fallback: []
        };
        return {
          isToolbarAbove: true,
          items: [selectionExtensionDropdown],
          rank: -6
        };
      }
    },
    pmPlugins: function pmPlugins() {
      return [{
        name: 'selectionExtension',
        plugin: function plugin() {
          return (0, _main.createPlugin)();
        }
      }];
    }
  };
};