@atlaskit/editor-plugin-quick-insert/dist/cjs/ui/ModalElementBrowser/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.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _hooks = require("@atlaskit/editor-common/hooks");
var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _commands = require("../../pm-plugins/commands");
var _ModalElementBrowser = _interopRequireDefault(require("./ModalElementBrowser"));
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); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Modal = function Modal(_ref) {
  var quickInsertState = _ref.quickInsertState,
    isOffline = _ref.isOffline,
    editorView = _ref.editorView,
    helpUrl = _ref.helpUrl,
    insertItem = _ref.insertItem,
    getSuggestions = _ref.getSuggestions,
    api = _ref.api;
  var getItems = (0, _react.useCallback)(function (query, category) {
    var _getSuggestions$map, _getSuggestions;
    return (_getSuggestions$map = getSuggestions === null || getSuggestions === void 0 || (_getSuggestions = getSuggestions({
      query: query,
      category: category
    })) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.map(function (item) {
      return isOffline && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
        isDisabled: true
      }) : item;
    })) !== null && _getSuggestions$map !== void 0 ? _getSuggestions$map : [];
  },
  // See: https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/157796/overview?commentId=8559952
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [getSuggestions, quickInsertState.lazyDefaultItems, quickInsertState.providedItems, isOffline]);
  var focusInEditor = (0, _react.useCallback)(function () {
    if (!editorView.hasFocus()) {
      editorView.focus();
    }
  }, [editorView]);

  // ED-19408 We not store the item ref in the state
  // Instead of adding the item immediately on insert item
  // We wait until modal close is complete, refocus the editor and then add the item
  var insertableItem = _react.default.useRef(null);
  var onInsertItem = (0, _react.useCallback)(function (item) {
    (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
    if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
      var _api$metrics;
      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
    }
    insertableItem.current = item;
  }, [editorView, api]);
  var onClose = (0, _react.useCallback)(function () {
    (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
    if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
      var _api$metrics2;
      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer());
    }
    focusInEditor();
  }, [editorView, focusInEditor, api]);
  var onCloseComplete = (0, _react.useCallback)(function () {
    if (!insertableItem.current) {
      focusInEditor();
      return;
    }
    var item = insertableItem.current;
    insertableItem.current = null;
    focusInEditor();
    insertItem === null || insertItem === void 0 || insertItem(item, _analytics.INPUT_METHOD.ELEMENT_BROWSER)(editorView.state, editorView.dispatch);
  }, [editorView, focusInEditor, insertItem]);
  return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
    getItems: getItems,
    onInsertItem: onInsertItem,
    helpUrl: helpUrl,
    isOpen: quickInsertState.isElementBrowserModalOpen || false,
    emptyStateHandler: quickInsertState.emptyStateHandler,
    onClose: onClose,
    onCloseComplete: onCloseComplete,
    shouldReturnFocus: false
  });
};
var _default = exports.default = function _default(_ref2) {
  var _pluginInjectionAPI$q, _pluginInjectionAPI$q2;
  var editorView = _ref2.editorView,
    helpUrl = _ref2.helpUrl,
    pluginInjectionAPI = _ref2.pluginInjectionAPI;
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionAPI, ['quickInsert', 'connectivity'], function (state) {
      var _state$quickInsertSta, _state$quickInsertSta2, _state$quickInsertSta3, _state$quickInsertSta4, _state$connectivitySt;
      return {
        lazyDefaultItems: (_state$quickInsertSta = state.quickInsertState) === null || _state$quickInsertSta === void 0 ? void 0 : _state$quickInsertSta.lazyDefaultItems,
        providedItems: (_state$quickInsertSta2 = state.quickInsertState) === null || _state$quickInsertSta2 === void 0 ? void 0 : _state$quickInsertSta2.providedItems,
        isElementBrowserModalOpen: (_state$quickInsertSta3 = state.quickInsertState) === null || _state$quickInsertSta3 === void 0 ? void 0 : _state$quickInsertSta3.isElementBrowserModalOpen,
        emptyStateHandler: (_state$quickInsertSta4 = state.quickInsertState) === null || _state$quickInsertSta4 === void 0 ? void 0 : _state$quickInsertSta4.emptyStateHandler,
        mode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode
      };
    }),
    lazyDefaultItems = _useSharedPluginState.lazyDefaultItems,
    providedItems = _useSharedPluginState.providedItems,
    isElementBrowserModalOpen = _useSharedPluginState.isElementBrowserModalOpen,
    emptyStateHandler = _useSharedPluginState.emptyStateHandler,
    mode = _useSharedPluginState.mode;
  return /*#__PURE__*/_react.default.createElement(Modal
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
  , {
    quickInsertState: {
      lazyDefaultItems: lazyDefaultItems,
      providedItems: providedItems,
      isElementBrowserModalOpen: isElementBrowserModalOpen,
      emptyStateHandler: emptyStateHandler
    },
    editorView: editorView,
    helpUrl: helpUrl,
    isOffline: (0, _editorPluginConnectivity.isOfflineMode)(mode),
    insertItem: pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$q = pluginInjectionAPI.quickInsert) === null || _pluginInjectionAPI$q === void 0 || (_pluginInjectionAPI$q = _pluginInjectionAPI$q.actions) === null || _pluginInjectionAPI$q === void 0 ? void 0 : _pluginInjectionAPI$q.insertItem,
    getSuggestions: pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$q2 = pluginInjectionAPI.quickInsert) === null || _pluginInjectionAPI$q2 === void 0 || (_pluginInjectionAPI$q2 = _pluginInjectionAPI$q2.actions) === null || _pluginInjectionAPI$q2 === void 0 ? void 0 : _pluginInjectionAPI$q2.getSuggestions,
    api: pluginInjectionAPI
  });
};