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

Mentions plugin for @atlaskit/editor-core

/* InlineInvitePopupContainer.tsx generated by @compiled/babel-plugin v2.0.0 */
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useEffect, useRef, useState } from 'react';
const findMentionRange = (doc, localId) => {
  let range = null;
  doc.descendants((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;
};
export const InlineInvitePopupContainer = ({
  mentionProvider,
  api,
  editorView
}) => {
  var _api$mention2, _api$mention2$command, _api$core3, _api$core3$actions;
  const [provider, setProvider] = useState(null);
  const [anchorElement, setAnchorElement] = useState(null);
  const pendingMentionRef = useRef(null);
  useEffect(() => {
    if (!mentionProvider) {
      return;
    }
    let isMounted = true;
    let cleanupProvider;
    mentionProvider.then(resolvedProvider => {
      var _providerWithPopup$ge;
      if (!isMounted) {
        return;
      }
      const providerWithPopup = resolvedProvider;
      const originalGetMentionDisabledState = (_providerWithPopup$ge = providerWithPopup.getMentionDisabledState) === null || _providerWithPopup$ge === void 0 ? void 0 : _providerWithPopup$ge.bind(providerWithPopup);
      providerWithPopup.getMentionDisabledState = 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 = () => {
        if (originalGetMentionDisabledState) {
          providerWithPopup.getMentionDisabledState = originalGetMentionDisabledState;
        } else {
          delete providerWithPopup.getMentionDisabledState;
        }
      };
      setProvider(providerWithPopup);
    }).catch(() => {});
    return () => {
      var _cleanupProvider;
      isMounted = false;
      (_cleanupProvider = cleanupProvider) === null || _cleanupProvider === void 0 ? void 0 : _cleanupProvider();
      setProvider(null);
    };
  }, [mentionProvider]);
  const removePendingMention = useCallback(() => {
    var _api$core, _api$core$actions;
    const pending = pendingMentionRef.current;
    if (pending && api !== null && api !== void 0 && (_api$core = api.core) !== null && _api$core !== void 0 && (_api$core$actions = _api$core.actions) !== null && _api$core$actions !== void 0 && _api$core$actions.execute) {
      api.core.actions.execute(({
        tr
      }) => {
        const range = findMentionRange(tr.doc, pending.localId);
        return range ? tr.delete(range.from, range.to) : null;
      });
    }
    pendingMentionRef.current = null;
    setAnchorElement(null);
  }, [api]);
  const handleDismiss = useCallback(() => {
    removePendingMention();
  }, [removePendingMention]);
  const handleInviteComplete = useCallback(result => {
    var _result$invited$, _api$core2, _api$core2$actions, _api$mention, _api$mention$commands;
    const pending = pendingMentionRef.current;
    if (!pending) {
      return;
    }
    const 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$actions = _api$core2.actions) !== null && _api$core2$actions !== void 0 && _api$core2$actions.execute) || !(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention$commands = _api$mention.commands) !== null && _api$mention$commands !== void 0 && _api$mention$commands.insertMention)) {
      return;
    }
    const {
      id: userId,
      email
    } = invitedUser;
    api.core.actions.execute(({
      tr
    }) => {
      const 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]);
  const handleReady = useCallback(show => {
    if (!provider) {
      return;
    }
    if (show) {
      provider.showInlineInvitePopup = (email, localId) => {
        pendingMentionRef.current = {
          email,
          localId
        };
        setTimeout(() => {
          const range = findMentionRange(editorView.state.doc, localId);
          const 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$command = _api$mention2.commands) !== null && _api$mention2$command !== void 0 && _api$mention2$command.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3$actions = _api$core3.actions) !== null && _api$core3$actions !== void 0 && _api$core3$actions.execute)) {
    return null;
  }
  const PopupComponent = provider.InlineInvitePopup;
  return /*#__PURE__*/React.createElement(PopupComponent, {
    anchorElement: anchorElement,
    onInviteComplete: handleInviteComplete,
    onDismiss: handleDismiss,
    onReady: handleReady
  });
};