@atlaskit/editor-plugin-paste-options-toolbar/dist/esm/pasteOptionsToolbarPlugin.js

Paste options toolbar for @atlaskit/editor-core

import React, { useEffect } from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
import { hideToolbar, showToolbar } from './editor-commands/commands';
import { createPlugin } from './pm-plugins/main';
import { pasteOptionsPluginKey, ToolbarDropdownOption } from './types/types';
import { firePasteActionsMenuExperimentExposure } from './ui/on-paste-actions-menu/exposure';
import { firePasteActionsMenuV2ExperimentExposure } from './ui/on-paste-actions-menu/exposure-v2';
import { PasteActionsMenu } from './ui/on-paste-actions-menu/PasteActionsMenu';
import { getPasteMenuComponents } from './ui/on-paste-actions-menu/PasteMenuComponents';
import { buildToolbar, isToolbarVisible } from './ui/toolbar';
import { getSingleSmartLinkUrlFromSlice } from './ui/utils/current-pasted-smart-link';
import { createPasteMenuRuleFactories } from './ui/utils/paste-menu-rules/rules';
export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref) {
  var _api$analytics;
  var config = _ref.config,
    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 getPasteMenuContext = function getPasteMenuContext() {
    return {
      getCurrentPasteRange: function getCurrentPasteRange() {
        var _api$pasteOptionsTool;
        var state = api === null || api === void 0 || (_api$pasteOptionsTool = api.pasteOptionsToolbarPlugin) === null || _api$pasteOptionsTool === void 0 ? void 0 : _api$pasteOptionsTool.sharedState.currentState();
        if (!state) {
          return undefined;
        }
        return {
          pasteEndPos: state.pasteEndPos,
          pasteStartPos: state.pasteStartPos
        };
      },
      getCurrentPastedUrl: function getCurrentPastedUrl() {
        var _api$paste;
        return getSingleSmartLinkUrlFromSlice(api === null || api === void 0 || (_api$paste = api.paste) === null || _api$paste === void 0 || (_api$paste = _api$paste.sharedState.currentState()) === null || _api$paste === void 0 || (_api$paste = _api$paste.lastContentPasted) === null || _api$paste === void 0 ? void 0 : _api$paste.pastedSlice);
      }
    };
  };
  if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)) {
    var _api$uiControlRegistr;
    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getPasteMenuComponents({
      api: api
    }));
  }
  if (config !== null && config !== void 0 && config.pasteMenuButtonsFactory && config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu) {
    var _api$uiControlRegistr2;
    var rules = function () {
      var getContext = function getContext() {
        var _api$pasteOptionsTool2, _api$paste2;
        var pasteOptsState = api === null || api === void 0 || (_api$pasteOptionsTool2 = api.pasteOptionsToolbarPlugin) === null || _api$pasteOptionsTool2 === void 0 ? void 0 : _api$pasteOptionsTool2.sharedState.currentState();
        var pasteState = api === null || api === void 0 || (_api$paste2 = api.paste) === null || _api$paste2 === void 0 ? void 0 : _api$paste2.sharedState.currentState();
        return {
          getPlaintextLength: function getPlaintextLength() {
            var _pasteOptsState$plain;
            return (_pasteOptsState$plain = pasteOptsState === null || pasteOptsState === void 0 ? void 0 : pasteOptsState.plaintextLength) !== null && _pasteOptsState$plain !== void 0 ? _pasteOptsState$plain : 0;
          },
          getAncestorNodeNames: function getAncestorNodeNames() {
            var _pasteOptsState$paste;
            return (_pasteOptsState$paste = pasteOptsState === null || pasteOptsState === void 0 ? void 0 : pasteOptsState.pasteAncestorNodeNames) !== null && _pasteOptsState$paste !== void 0 ? _pasteOptsState$paste : [];
          },
          getPastedText: function getPastedText() {
            var _pasteState$lastConte, _pasteState$lastConte2;
            return (_pasteState$lastConte = pasteState === null || pasteState === void 0 || (_pasteState$lastConte2 = pasteState.lastContentPasted) === null || _pasteState$lastConte2 === void 0 ? void 0 : _pasteState$lastConte2.text) !== null && _pasteState$lastConte !== void 0 ? _pasteState$lastConte : '';
          },
          getPastedSlice: function getPastedSlice() {
            var _pasteState$lastConte3;
            return pasteState === null || pasteState === void 0 || (_pasteState$lastConte3 = pasteState.lastContentPasted) === null || _pasteState$lastConte3 === void 0 ? void 0 : _pasteState$lastConte3.pastedSlice;
          },
          getNodeTypes: function getNodeTypes() {
            return [];
          },
          getPasteSource: function getPasteSource() {
            var _pasteState$lastConte4;
            return pasteState === null || pasteState === void 0 || (_pasteState$lastConte4 = pasteState.lastContentPasted) === null || _pasteState$lastConte4 === void 0 ? void 0 : _pasteState$lastConte4.pasteSource;
          }
        };
      };
      return createPasteMenuRuleFactories(getContext);
    }();
    var productButtons = config.pasteMenuButtonsFactory(rules, getPasteMenuContext());
    api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register(productButtons);
  }
  return {
    name: 'pasteOptionsToolbarPlugin',
    actions: {
      getPasteMenuRules: function getPasteMenuRules() {
        var getContext = function getContext() {
          var _api$pasteOptionsTool3, _api$paste3;
          var pasteOptsState = api === null || api === void 0 || (_api$pasteOptionsTool3 = api.pasteOptionsToolbarPlugin) === null || _api$pasteOptionsTool3 === void 0 ? void 0 : _api$pasteOptionsTool3.sharedState.currentState();
          var pasteState = api === null || api === void 0 || (_api$paste3 = api.paste) === null || _api$paste3 === void 0 ? void 0 : _api$paste3.sharedState.currentState();
          return {
            getPlaintextLength: function getPlaintextLength() {
              var _pasteOptsState$plain2;
              return (_pasteOptsState$plain2 = pasteOptsState === null || pasteOptsState === void 0 ? void 0 : pasteOptsState.plaintextLength) !== null && _pasteOptsState$plain2 !== void 0 ? _pasteOptsState$plain2 : 0;
            },
            getAncestorNodeNames: function getAncestorNodeNames() {
              var _pasteOptsState$paste2;
              return (_pasteOptsState$paste2 = pasteOptsState === null || pasteOptsState === void 0 ? void 0 : pasteOptsState.pasteAncestorNodeNames) !== null && _pasteOptsState$paste2 !== void 0 ? _pasteOptsState$paste2 : [];
            },
            getPastedText: function getPastedText() {
              var _pasteState$lastConte5, _pasteState$lastConte6;
              return (_pasteState$lastConte5 = pasteState === null || pasteState === void 0 || (_pasteState$lastConte6 = pasteState.lastContentPasted) === null || _pasteState$lastConte6 === void 0 ? void 0 : _pasteState$lastConte6.text) !== null && _pasteState$lastConte5 !== void 0 ? _pasteState$lastConte5 : '';
            },
            getPastedSlice: function getPastedSlice() {
              var _pasteState$lastConte7;
              return pasteState === null || pasteState === void 0 || (_pasteState$lastConte7 = pasteState.lastContentPasted) === null || _pasteState$lastConte7 === void 0 ? void 0 : _pasteState$lastConte7.pastedSlice;
            },
            getNodeTypes: function getNodeTypes() {
              return [];
            },
            getPasteSource: function getPasteSource() {
              var _pasteState$lastConte8;
              return pasteState === null || pasteState === void 0 || (_pasteState$lastConte8 = pasteState.lastContentPasted) === null || _pasteState$lastConte8 === void 0 ? void 0 : _pasteState$lastConte8.pasteSource;
            }
          };
        };
        return createPasteMenuRuleFactories(getContext);
      }
    },
    pmPlugins: function pmPlugins() {
      return [{
        name: 'pasteOptionsToolbarPlugin',
        plugin: function plugin(_ref2) {
          var dispatch = _ref2.dispatch;
          return createPlugin(dispatch, {
            useNewPasteMenu: (config === null || config === void 0 ? void 0 : config.usePopupBasedPasteActionsMenu) && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)
          });
        }
      }];
    },
    getSharedState: function getSharedState(editorState) {
      var _pluginState$isPlainT, _pluginState$pasteAnc, _pluginState$pasteEnd, _pluginState$pasteSta, _pluginState$plaintex, _pluginState$selected, _pluginState$showLega, _pluginState$showTool;
      if (!editorState) {
        return {
          isPlainText: false,
          pasteAncestorNodeNames: [],
          pasteEndPos: 0,
          pasteStartPos: 0,
          plaintextLength: 0,
          selectedOption: ToolbarDropdownOption.None,
          showLegacyOptions: false,
          showToolbar: false
        };
      }
      var pluginState = pasteOptionsPluginKey.getState(editorState);
      return {
        isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
        pasteAncestorNodeNames: (_pluginState$pasteAnc = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteAncestorNodeNames) !== null && _pluginState$pasteAnc !== void 0 ? _pluginState$pasteAnc : [],
        pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0,
        pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
        plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
        selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : ToolbarDropdownOption.None,
        showLegacyOptions: (_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false,
        showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
      };
    },
    pluginsOptions: {
      floatingToolbar: function floatingToolbar(state, intl) {
        if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)) {
          return;
        }
        var pastePluginState = pasteOptionsPluginKey.getState(state);
        if (pastePluginState.showToolbar) {
          return buildToolbar(state, intl, editorAnalyticsAPI);
        }
        return;
      }
    },
    contentComponent: function contentComponent(_ref3) {
      var editorView = _ref3.editorView,
        popupsMountPoint = _ref3.popupsMountPoint,
        popupsBoundariesElement = _ref3.popupsBoundariesElement,
        popupsScrollableElement = _ref3.popupsScrollableElement;
      if (!(config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && (expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true) || ['hasSpellingAndGrammar', 'hasAltAiActions'].includes(expValNoExposure('platform_editor_paste_actions_menu_v2', 'variant', 'control')))) || !editorView) {
        return null;
      }
      return /*#__PURE__*/React.createElement(PasteActionsMenu, {
        api: api,
        editorView: editorView,
        mountTo: popupsMountPoint,
        boundariesElement: popupsBoundariesElement,
        scrollableElement: popupsScrollableElement
      });
    },
    usePluginHook: function usePluginHook(_ref4) {
      var editorView = _ref4.editorView;
      var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['paste'], function (states) {
          var _states$pasteState;
          return {
            lastContentPasted: (_states$pasteState = states.pasteState) === null || _states$pasteState === void 0 ? void 0 : _states$pasteState.lastContentPasted
          };
        }),
        lastContentPasted = _useSharedPluginState.lastContentPasted;
      useEffect(function () {
        if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && fg('platform_editor_paste_actions_menu_exposure')) {
          var _lastContentPasted$te, _lastContentPasted$te2;
          firePasteActionsMenuExperimentExposure((_lastContentPasted$te = lastContentPasted === null || lastContentPasted === void 0 || (_lastContentPasted$te2 = lastContentPasted.text) === null || _lastContentPasted$te2 === void 0 ? void 0 : _lastContentPasted$te2.length) !== null && _lastContentPasted$te !== void 0 ? _lastContentPasted$te : 0, editorView.state, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.pasteStartPos, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.pasteEndPos, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.text, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.pastedSlice);
        }

        // These two need to be seperate to prevent them being dependant on each other
        if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && fg('platform_editor_paste_actions_menu_v2_exposure')) {
          var _lastContentPasted$te3, _lastContentPasted$te4;
          firePasteActionsMenuV2ExperimentExposure((_lastContentPasted$te3 = lastContentPasted === null || lastContentPasted === void 0 || (_lastContentPasted$te4 = lastContentPasted.text) === null || _lastContentPasted$te4 === void 0 ? void 0 : _lastContentPasted$te4.length) !== null && _lastContentPasted$te3 !== void 0 ? _lastContentPasted$te3 : 0, editorView.state, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.pasteStartPos, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.pasteEndPos, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.text, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.pastedSlice);
        }
        if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)) {
          return;
        }
        if (!lastContentPasted) {
          hideToolbar()(editorView.state, editorView.dispatch);
          return;
        }
        var selectedOption = ToolbarDropdownOption.None;
        if (!lastContentPasted.isPlainText) {
          selectedOption = ToolbarDropdownOption.RichText;
        } else if (lastContentPasted.isShiftPressed) {
          selectedOption = ToolbarDropdownOption.PlainText;
        } else {
          selectedOption = ToolbarDropdownOption.Markdown;
        }
        if (!isToolbarVisible(editorView.state, lastContentPasted)) {
          return;
        }
        showToolbar(lastContentPasted, selectedOption)(editorView.state, editorView.dispatch);
      }, [lastContentPasted, editorView]);
    }
  };
};