@atlaskit/editor-plugin-mentions/dist/cjs/ui/InlineInvitePopupContainer.js

Mentions plugin for @atlaskit/editor-core

/* InlineInvitePopupContainer.tsx generated by @compiled/babel-plugin v2.0.0 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InlineInvitePopupContainer = void 0;
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
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 findMentionRange = function findMentionRange(doc, localId) {
  var range = null;
  doc.descendants(function (node, pos) {
    if (range) {
      return false;
    }
    if (node.type.name === 'mention' && node.attrs.localId === localId) {
      range = {
        from: pos,
        to: pos + node.nodeSize
      };
      return false;
    }
    return true;
  });
  return range;
};
var InlineInvitePopupContainer = exports.InlineInvitePopupContainer = function InlineInvitePopupContainer(_ref) {
  var _api$mention2, _api$core3;
  var mentionProvider = _ref.mentionProvider,
    api = _ref.api,
    editorView = _ref.editorView;
  var _useState = (0, _react.useState)(null),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    provider = _useState2[0],
    setProvider = _useState2[1];
  var _useState3 = (0, _react.useState)(null),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    anchorElement = _useState4[0],
    setAnchorElement = _useState4[1];
  var pendingMentionRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    if (!mentionProvider) {
      return;
    }
    var isMounted = true;
    var cleanupProvider;
    mentionProvider.then(function (resolvedProvider) {
      var _providerWithPopup$ge;
      if (!isMounted) {
        return;
      }
      var providerWithPopup = resolvedProvider;
      var originalGetMentionDisabledState = (_providerWithPopup$ge = providerWithPopup.getMentionDisabledState) === null || _providerWithPopup$ge === void 0 ? void 0 : _providerWithPopup$ge.bind(providerWithPopup);
      providerWithPopup.getMentionDisabledState = function (mention) {
        var _pendingMentionRef$cu;
        if (((_pendingMentionRef$cu = pendingMentionRef.current) === null || _pendingMentionRef$cu === void 0 ? void 0 : _pendingMentionRef$cu.localId) === mention.id) {
          return {
            disabled: true
          };
        }
        return originalGetMentionDisabledState === null || originalGetMentionDisabledState === void 0 ? void 0 : originalGetMentionDisabledState(mention);
      };
      cleanupProvider = function cleanupProvider() {
        if (originalGetMentionDisabledState) {
          providerWithPopup.getMentionDisabledState = originalGetMentionDisabledState;
        } else {
          delete providerWithPopup.getMentionDisabledState;
        }
      };
      setProvider(providerWithPopup);
    }).catch(function () {});
    return function () {
      var _cleanupProvider;
      isMounted = false;
      (_cleanupProvider = cleanupProvider) === null || _cleanupProvider === void 0 || _cleanupProvider();
      setProvider(null);
    };
  }, [mentionProvider]);
  var removePendingMention = (0, _react.useCallback)(function () {
    var _api$core;
    var pending = pendingMentionRef.current;
    if (pending && api !== null && api !== void 0 && (_api$core = api.core) !== null && _api$core !== void 0 && (_api$core = _api$core.actions) !== null && _api$core !== void 0 && _api$core.execute) {
      api.core.actions.execute(function (_ref2) {
        var tr = _ref2.tr;
        var range = findMentionRange(tr.doc, pending.localId);
        return range ? tr.delete(range.from, range.to) : null;
      });
    }
    pendingMentionRef.current = null;
    setAnchorElement(null);
  }, [api]);
  var handleDismiss = (0, _react.useCallback)(function () {
    removePendingMention();
  }, [removePendingMention]);
  var handleInviteComplete = (0, _react.useCallback)(function (result) {
    var _result$invited$, _api$core2, _api$mention;
    var pending = pendingMentionRef.current;
    if (!pending) {
      return;
    }
    var invitedUser = (_result$invited$ = result.invited[0]) !== null && _result$invited$ !== void 0 ? _result$invited$ : result.requested[0];
    if (!invitedUser || !(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2 = _api$core2.actions) !== null && _api$core2 !== void 0 && _api$core2.execute) || !(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention = _api$mention.commands) !== null && _api$mention !== void 0 && _api$mention.insertMention)) {
      return;
    }
    var userId = invitedUser.id,
      email = invitedUser.email;
    api.core.actions.execute(function (_ref3) {
      var tr = _ref3.tr;
      var range = findMentionRange(tr.doc, pending.localId);
      return range ? tr.delete(range.from, range.to) : null;
    });
    api.core.actions.execute(api.mention.commands.insertMention({
      id: userId,
      name: email,
      userType: 'DEFAULT',
      accessLevel: 'CONTAINER'
    }));
    pendingMentionRef.current = null;
    setAnchorElement(null);
  }, [api]);
  var handleReady = (0, _react.useCallback)(function (show) {
    if (!provider) {
      return;
    }
    if (show) {
      provider.showInlineInvitePopup = function (email, localId) {
        pendingMentionRef.current = {
          email: email,
          localId: localId
        };
        setTimeout(function () {
          var range = findMentionRange(editorView.state.doc, localId);
          var dom = range ? editorView.nodeDOM(range.from) : null;
          setAnchorElement(dom instanceof HTMLElement ? dom : null);
          show(email);
        }, 0);
      };
    } else {
      delete provider.showInlineInvitePopup;
    }
  }, [provider, editorView]);
  if (!(provider !== null && provider !== void 0 && provider.InlineInvitePopup) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2 = _api$mention2.commands) !== null && _api$mention2 !== void 0 && _api$mention2.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3 = _api$core3.actions) !== null && _api$core3 !== void 0 && _api$core3.execute)) {
    return null;
  }
  var PopupComponent = provider.InlineInvitePopup;
  return /*#__PURE__*/_react.default.createElement(PopupComponent, {
    anchorElement: anchorElement,
    onInviteComplete: handleInviteComplete,
    onDismiss: handleDismiss,
    onReady: handleReady
  });
};