@atlaskit/editor-plugin-quick-insert/dist/cjs/ui/RegistryElementBrowser/index.js

Quick insert plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RegistryElementBrowserContainer = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _isOfflineMode = require("@atlaskit/editor-common/connectivity/isOfflineMode");
var _hooks = require("@atlaskit/editor-common/hooks");
var _insert = require("@atlaskit/editor-common/insert");
var _keys = require("@atlaskit/editor-common/quick-insert/keys");
var _commands = require("../../pm-plugins/commands");
var _pluginKey = require("../../pm-plugins/plugin-key");
var _RegistryElementBrowser = require("./RegistryElementBrowser");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var RegistryElementBrowserContainer = exports.RegistryElementBrowserContainer = function RegistryElementBrowserContainer(_ref) {
  var _pluginKey$getState;
  var editorView = _ref.editorView,
    pluginInjectionAPI = _ref.pluginInjectionAPI,
    helpUrl = _ref.helpUrl;
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionAPI, ['quickInsert', 'connectivity'], function (state) {
      var _state$quickInsertSta, _state$quickInsertSta2, _state$quickInsertSta3, _state$connectivitySt;
      return {
        isElementBrowserOpen: (_state$quickInsertSta = (_state$quickInsertSta2 = state.quickInsertState) === null || _state$quickInsertSta2 === void 0 ? void 0 : _state$quickInsertSta2.isElementBrowserOpen) !== null && _state$quickInsertSta !== void 0 ? _state$quickInsertSta : false,
        emptyStateHandler: (_state$quickInsertSta3 = state.quickInsertState) === null || _state$quickInsertSta3 === void 0 ? void 0 : _state$quickInsertSta3.emptyStateHandler,
        mode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode
      };
    }),
    currentEmptyStateHandler = _useSharedPluginState.emptyStateHandler,
    isElementBrowserOpen = _useSharedPluginState.isElementBrowserOpen,
    mode = _useSharedPluginState.mode;
  var _useState = (0, _react.useState)([]),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    snapshot = _useState2[0],
    setSnapshot = _useState2[1];
  var _useState3 = (0, _react.useState)(false),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    hasInitialized = _useState4[0],
    setHasInitialized = _useState4[1];
  var _useState5 = (0, _react.useState)(),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    emptyStateHandler = _useState6[0],
    setEmptyStateHandler = _useState6[1];
  var wasOpen = (0, _react.useRef)(false);
  var selectionHandler = (0, _react.useRef)(undefined);
  var isInsertConfirmed = (0, _react.useRef)(false);
  var lifecycleOpen = (0, _react.useRef)(false);
  var fireLifecycleEvent = (0, _react.useCallback)(function (action) {
    var _pluginInjectionAPI$a;
    pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$a = pluginInjectionAPI.analytics) === null || _pluginInjectionAPI$a === void 0 || _pluginInjectionAPI$a.actions.fireAnalyticsEvent({
      action: action,
      actionSubject: _analytics.ACTION_SUBJECT.ELEMENT_BROWSER,
      attributes: {
        mode: 'full'
      },
      eventType: _analytics.EVENT_TYPE.UI
    });
  }, [pluginInjectionAPI]);
  (0, _react.useEffect)(function () {
    if (isElementBrowserOpen && !wasOpen.current) {
      var _pluginInjectionAPI$u, _pluginInjectionAPI$u2;
      setSnapshot((_pluginInjectionAPI$u = pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$u2 = pluginInjectionAPI.uiControlRegistry) === null || _pluginInjectionAPI$u2 === void 0 ? void 0 : _pluginInjectionAPI$u2.actions.getComponents(_keys.MENU.key)) !== null && _pluginInjectionAPI$u !== void 0 ? _pluginInjectionAPI$u : []);
      setHasInitialized(true);
      selectionHandler.current = undefined;
      setEmptyStateHandler(function () {
        return currentEmptyStateHandler;
      });
      isInsertConfirmed.current = false;
      lifecycleOpen.current = true;
      fireLifecycleEvent(_analytics.ACTION.OPENED);
    } else if (!isElementBrowserOpen && wasOpen.current && lifecycleOpen.current) {
      lifecycleOpen.current = false;
      fireLifecycleEvent(_analytics.ACTION.CLOSED);
    }
    wasOpen.current = isElementBrowserOpen;
  }, [currentEmptyStateHandler, fireLifecycleEvent, isElementBrowserOpen, pluginInjectionAPI]);
  (0, _react.useEffect)(function () {
    return function () {
      if (lifecycleOpen.current) {
        lifecycleOpen.current = false;
        fireLifecycleEvent(_analytics.ACTION.CLOSED);
      }
    };
  }, [fireLifecycleEvent]);
  var focusInEditor = (0, _react.useCallback)(function () {
    if (!editorView.hasFocus()) {
      editorView.focus();
    }
  }, [editorView]);
  var onClose = (0, _react.useCallback)(function () {
    if (!isInsertConfirmed.current) {
      selectionHandler.current = undefined;
    }
    (0, _commands.closeElementBrowser)()(editorView.state, editorView.dispatch);
    focusInEditor();
  }, [editorView, focusInEditor]);
  var onCloseComplete = (0, _react.useCallback)(function () {
    var handler = isInsertConfirmed.current ? selectionHandler.current : undefined;
    selectionHandler.current = undefined;
    isInsertConfirmed.current = false;
    focusInEditor();
    if (!handler) {
      return;
    }
    var insert = function insert(maybeNode) {
      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      return (0, _insert.insertSelectedItem)(maybeNode, options)(editorView.state, editorView.state.tr, editorView.state.selection.head);
    };
    var transaction = handler({
      insert: insert,
      source: _analytics.INPUT_METHOD.ELEMENT_BROWSER
    });
    if (transaction) {
      editorView.dispatch(transaction);
    }
  }, [editorView, focusInEditor]);
  var onSelect = (0, _react.useCallback)(function (handler) {
    selectionHandler.current = handler;
  }, []);
  var onClearSelection = (0, _react.useCallback)(function () {
    selectionHandler.current = undefined;
    isInsertConfirmed.current = false;
  }, []);
  var onConfirmInsert = (0, _react.useCallback)(function () {
    if (!selectionHandler.current) {
      return;
    }
    isInsertConfirmed.current = true;
    onClose();
  }, [onClose]);
  return /*#__PURE__*/_react.default.createElement(_RegistryElementBrowser.RegistryElementBrowser, {
    components: snapshot,
    emptyStateHandler: emptyStateHandler,
    helpUrl: helpUrl,
    defaultSection: (_pluginKey$getState = _pluginKey.pluginKey.getState(editorView.state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.elementBrowserInitialCategory,
    editorView: editorView,
    isOffline: (0, _isOfflineMode.isOfflineMode)(mode),
    isLoading: !hasInitialized,
    isOpen: isElementBrowserOpen,
    onClearSelection: onClearSelection,
    onClose: onClose,
    onCloseComplete: onCloseComplete,
    onConfirmInsert: onConfirmInsert,
    onSelect: onSelect
  });
};