@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/mention/helper.js

@@ -0,0 +1,239 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformToText = exports.sortCollaborators = exports.insertTemporaryMentionInput = exports.insertMention = exports.getSelectionCoords = exports.getPrevMentionIptEntry = exports.getPreCharacters = exports.getMentionTempIptEntry = exports.getMentionEntry = void 0;
+var _slate = require("@seafile/slate");
+var _slugid = _interopRequireDefault(require("slugid"));
+var _context = _interopRequireDefault(require("../../../context"));
+var _elementType = require("../../constants/element-type");
+var _core = require("../../core");
+const generateMentionTempInput = () => {
+  const id = _slugid.default.nice();
+  const type = _elementType.MENTION_TEMP;
+  const children = [(0, _core.generateDefaultText)()];
+  return {
+    id,
+    type,
+    children
+  };
+};
+const insertTemporaryMentionInput = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  if (!_slate.Range.isCollapsed(selection)) return;
+  const tempMentionInput = generateMentionTempInput();
+  _slate.Editor.insertNode(editor, tempMentionInput);
+};
+exports.insertTemporaryMentionInput = insertTemporaryMentionInput;
+const getMentionTempIptEntry = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  if (!_slate.Range.isCollapsed(selection)) return false;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => n.type === _elementType.MENTION_TEMP,
+    mode: 'lowest'
+  });
+  return match;
+};
+exports.getMentionTempIptEntry = getMentionTempIptEntry;
+const getMentionEntry = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  if (!_slate.Range.isCollapsed(selection)) return false;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => n.type === _elementType.MENTION,
+    mode: 'lowest'
+  });
+  return match;
+};
+exports.getMentionEntry = getMentionEntry;
+const generateMention = _ref => {
+  let {
+    name,
+    username
+  } = _ref;
+  const id = _slugid.default.nice();
+  const type = _elementType.MENTION;
+  const children = [(0, _core.generateDefaultText)()];
+  children[0].text = '@' + name;
+  return {
+    id,
+    type,
+    children,
+    username
+  };
+};
+const insertMention = (editor, collaborator) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  if (!_slate.Range.isCollapsed(selection)) return;
+  const mentionTempIptEntry = getMentionTempIptEntry(editor);
+  if (!mentionTempIptEntry) return;
+  const [, path] = mentionTempIptEntry;
+  const [, focusPath] = _slate.Editor.next(editor, {
+    at: path
+  });
+  const {
+    name,
+    username
+  } = collaborator;
+  const mention = generateMention({
+    name,
+    username
+  });
+  _slate.Transforms.insertNodes(editor, mention, {
+    at: focusPath,
+    select: true
+  });
+};
+
+// Sort collaborators by participants, move mentioned members to the top
+exports.insertMention = insertMention;
+const sortCollaborators = function (collaborators) {
+  let participants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const loginEmail = _context.default.getUserInfo().email;
+  const lastModifyUser = _context.default.getSetting('last_modify_user');
+  let stickyCollaborator = null;
+  const participantsMap = {};
+  participants.forEach(item => {
+    if (item.email === loginEmail) return;
+    participantsMap[item.email] = item;
+  });
+  const newCollaborators = collaborators.filter(item => {
+    const isValidCollaborator = !participantsMap[item.email] && item.email !== loginEmail;
+    if (isValidCollaborator && lastModifyUser === item.email) {
+      stickyCollaborator = item;
+      return false;
+    }
+    return isValidCollaborator;
+  });
+  const newParticipants = Object.values(participantsMap);
+  const resCollaborators = stickyCollaborator ? [stickyCollaborator, ...newParticipants, ...newCollaborators] : [...newParticipants, ...newCollaborators];
+  return resCollaborators;
+};
+exports.sortCollaborators = sortCollaborators;
+const transformToText = function (editor) {
+  let isFocusEnd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  if (!_slate.Range.isCollapsed(selection)) return;
+  const mentionTempIptEntry = getMentionTempIptEntry(editor);
+  if (!mentionTempIptEntry) return;
+  const [node, path] = mentionTempIptEntry;
+  const [, insertPath] = _slate.Editor.next(editor, {
+    at: path
+  });
+  const insertPoint = _slate.Editor.start(editor, insertPath);
+  const {
+    text
+  } = node.children[0];
+  const insertText = '@' + text;
+  const pointRef = _slate.Editor.pointRef(editor, insertPoint);
+  _slate.Transforms.insertText(editor, insertText, {
+    at: insertPoint
+  });
+  _slate.Transforms.removeNodes(editor, {
+    at: path
+  });
+  const focusPoint = pointRef.unref();
+  isFocusEnd && (0, _core.focusEditor)(editor, focusPoint);
+};
+exports.transformToText = transformToText;
+const getPrevMentionIptEntry = editor => {
+  const prevNodeEntry = _slate.Editor.previous(editor);
+  if (prevNodeEntry) {
+    const aboveNodeEntry = _slate.Editor.above(editor, {
+      match: n => n.type === _elementType.MENTION_TEMP,
+      at: prevNodeEntry[1]
+    });
+    return aboveNodeEntry;
+  }
+  return;
+};
+exports.getPrevMentionIptEntry = getPrevMentionIptEntry;
+const getPreCharacters = editor => {
+  const {
+    selection
+  } = editor;
+  const {
+    anchor,
+    focus
+  } = selection;
+  const path = _slate.Editor.path(editor, anchor);
+  const startPoint = _slate.Editor.start(editor, path);
+  const beforeStr = _slate.Editor.string(editor, {
+    anchor: startPoint,
+    focus
+  });
+  return beforeStr;
+};
+exports.getPreCharacters = getPreCharacters;
+const getSelectionCoords = () => {
+  let doc = window.document;
+  let sel = doc.selection;
+  let range;
+  let rects;
+  let rect;
+  let x = 0;
+  let y = 0;
+  if (sel) {
+    if (sel.type !== 'Control') {
+      range = sel.createRange();
+      range.collapse(true);
+      x = range.boundingLeft;
+      y = range.boundingTop;
+    }
+  } else if (window.getSelection) {
+    sel = window.getSelection();
+    if (sel.rangeCount) {
+      range = sel.getRangeAt(0).cloneRange();
+      if (range.getClientRects) {
+        range.collapse(true);
+        rects = range.getClientRects();
+        if (rects.length > 0) {
+          rect = rects[0];
+        }
+        // When the cursor is at the beginning of the line, rect is undefined
+        if (rect) {
+          x = rect.left;
+          y = rect.top;
+        }
+      }
+      // Fall back to inserting a temporary element
+      if (x === 0 && y === 0 || rect === undefined) {
+        let span = doc.createElement('span');
+        if (span.getClientRects) {
+          // Ensure span has dimensions and position by
+          // adding a zero-width space character
+          span.appendChild(doc.createTextNode('\u200b'));
+          range.insertNode(span);
+          rect = span.getClientRects()[0];
+          x = rect.left;
+          y = rect.top;
+          let spanParent = span.parentNode;
+          spanParent.removeChild(span);
+          // Glue any broken text nodes back together
+          spanParent.normalize();
+        }
+      }
+    }
+  }
+  return {
+    x: x,
+    y: y
+  };
+};
+exports.getSelectionCoords = getSelectionCoords;

package/dist/basic-sdk/extension/plugins/mention/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _elementType = require("../../constants/element-type");
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = require("./render-elem");
+const MentionPlugin = {
+  type: _elementType.MENTION,
+  nodeType: 'element',
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderMention, _renderElem.renderMentionTemporaryInput]
+};
+var _default = exports.default = MentionPlugin;

package/dist/basic-sdk/extension/plugins/mention/plugin.js

@@ -0,0 +1,269 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _elementType = require("../../constants/element-type");
+var _core = require("../../core");
+var _helper = require("./helper");
+const withMention = editor => {
+  const {
+    insertText,
+    onHotKeyDown,
+    isInline,
+    deleteBackward,
+    deleteForward,
+    normalizeNode
+  } = editor;
+  const newEditor = editor;
+  const eventBus = _eventBus.default.getInstance();
+  newEditor.insertText = text => {
+    const {
+      selection
+    } = editor;
+    if (text === '@') {
+      const beforeStr = (0, _helper.getPreCharacters)(editor);
+      const isEmptyStr = beforeStr.slice(-1).trim().length === 0;
+      if (!(0, _helper.getMentionTempIptEntry)(editor) && isEmptyStr) {
+        const {
+          anchor
+        } = selection;
+        const path = _slate.Editor.path(editor, anchor);
+        (0, _helper.insertTemporaryMentionInput)(newEditor);
+        const abovePath = path.slice(0, path.length - 1);
+        const focusPath = abovePath.concat(path.at(-1) + 1);
+        (0, _core.focusEditor)(editor, focusPath);
+        return;
+      }
+    }
+    const prevNodeEntry = _slate.Editor.previous(editor);
+    if (prevNodeEntry) {
+      const aboveNodeEntry = _slate.Editor.above(editor, {
+        match: n => n.type === _elementType.MENTION_TEMP,
+        at: prevNodeEntry[1]
+      });
+      if (aboveNodeEntry) {
+        var _text$match;
+        const inputCnCharacter = (_text$match = text.match(/^[\u4e00-\u9fa5]+$/)) === null || _text$match === void 0 ? void 0 : _text$match.input;
+        if (inputCnCharacter) {
+          const insertPoint = _slate.Editor.end(editor, aboveNodeEntry[1]);
+          const nextNodeEntry = _slate.Editor.next(editor, {
+            at: aboveNodeEntry[1]
+          });
+          _slate.Transforms.insertText(editor, text, {
+            at: insertPoint
+          });
+          if (nextNodeEntry) {
+            const [nextNode, nextPath] = nextNodeEntry;
+            if (_slate.Text.isText(nextNode) && nextNode.text === '') {
+              _slate.Transforms.removeNodes(editor, {
+                at: nextPath
+              });
+            }
+          }
+          return (0, _core.focusEditor)(editor, {
+            ...insertPoint,
+            offset: insertPoint.offset + text.length
+          });
+        }
+      }
+    }
+    return insertText(text);
+  };
+  newEditor.deleteBackward = unit => {
+    const mentionTempInputEntry = (0, _helper.getMentionTempIptEntry)(editor);
+    if (mentionTempInputEntry) {
+      const {
+        selection
+      } = editor;
+      if (selection && _slate.Range.isCollapsed(selection)) {
+        const [node, path] = mentionTempInputEntry;
+        const contentString = _slate.Node.string(node);
+        if (!contentString) {
+          return _slate.Transforms.delete(editor, {
+            at: path
+          });
+        }
+      }
+    }
+
+    // Delete mention, when in mention
+    const prevNodeEntry = _slate.Editor.previous(editor);
+    if (prevNodeEntry) {
+      const aboveNodeEntry = _slate.Editor.above(editor, {
+        match: n => n.type === _elementType.MENTION,
+        at: prevNodeEntry[1]
+      });
+      const mentionEntry = (0, _helper.getMentionEntry)(editor);
+      if (mentionEntry || aboveNodeEntry) {
+        const {
+          selection
+        } = editor;
+        if (selection && _slate.Range.isCollapsed(selection)) {
+          const [, mentionPath] = mentionEntry || aboveNodeEntry;
+          return _slate.Transforms.removeNodes(editor, {
+            at: mentionPath
+          });
+        }
+      }
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.deleteForward = unit => {
+    const mentionEntry = _slate.Editor.next(editor, {
+      match: n => n.type === _elementType.MENTION
+    });
+    if (mentionEntry) {
+      const [, mentionPath] = mentionEntry;
+      return _slate.Transforms.removeNodes(editor, {
+        at: mentionPath
+      });
+    }
+    return deleteForward(unit);
+  };
+  newEditor.onHotKeyDown = event => {
+    const mentionTempIptEntry = (0, _helper.getMentionTempIptEntry)(editor);
+    if (mentionTempIptEntry) {
+      const [, mentionTempIptPath] = mentionTempIptEntry;
+      const {
+        DownArrow,
+        UpArrow,
+        Enter,
+        Esc,
+        RightArrow,
+        LeftArrow
+      } = _constants.KeyCodes;
+      const {
+        keyCode
+      } = event;
+      if (keyCode === RightArrow || keyCode === LeftArrow) {
+        const {
+          selection
+        } = editor;
+        if (!selection) return;
+        if (!_slate.Range.isCollapsed(selection)) return;
+        if (keyCode === RightArrow) {
+          if (_slate.Editor.isEnd(editor, selection.focus, mentionTempIptPath)) return (0, _helper.transformToText)(newEditor);
+        }
+        if (keyCode === LeftArrow) {
+          if (_slate.Editor.isStart(editor, selection.focus, mentionTempIptPath)) {
+            event.preventDefault();
+            return (0, _helper.transformToText)(newEditor, false);
+          }
+        }
+      }
+
+      // Handle by collaborators list
+      const interceptorKeyCodes = [DownArrow, UpArrow, Enter, Esc];
+      if (interceptorKeyCodes.includes(keyCode)) {
+        event.preventDefault();
+        eventBus.dispatch(_constants.INTERNAL_EVENT.HANDLE_MENTION_TEMP_CHOSEN, {
+          event
+        });
+        return;
+      }
+    }
+    const mentionEntry = (0, _helper.getMentionEntry)(editor);
+    if (mentionEntry) {
+      const [, mentionPath] = mentionEntry;
+      const {
+        RightArrow,
+        LeftArrow
+      } = _constants.KeyCodes;
+      const {
+        keyCode
+      } = event;
+      if (keyCode === RightArrow || keyCode === LeftArrow) {
+        event.preventDefault();
+        if (keyCode === LeftArrow) {
+          const beginPoint = _slate.Editor.start(editor, mentionPath);
+          const focusPoint = _slate.Editor.before(editor, beginPoint, {
+            distance: 1
+          });
+          (0, _core.focusEditor)(newEditor, focusPoint);
+        } else {
+          const endPoint = _slate.Editor.end(editor, mentionPath);
+          const focusPoint = _slate.Editor.after(editor, endPoint, {
+            distance: 1
+          });
+          (0, _core.focusEditor)(newEditor, focusPoint);
+        }
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  newEditor.onCompositionUpdate = event => {
+    const mentionTempIptEntry = (0, _helper.getMentionTempIptEntry)(newEditor);
+    if (mentionTempIptEntry) {
+      const {
+        data
+      } = event;
+      const compositionText = data.replace(/\'/g, '');
+      eventBus.dispatch(_constants.INTERNAL_EVENT.UPDATE_MENTION_TEMP_CONTENT, {
+        compositionText
+      });
+      return true;
+    }
+  };
+  newEditor.onCompositionStart = event => {
+    const mentionTempIptEntry = (0, _helper.getMentionTempIptEntry)(editor);
+    if (mentionTempIptEntry) {
+      event.preventDefault();
+      return true;
+    }
+  };
+  newEditor.onCompositionEnd = event => {
+    const PrevMentionIptEntry = (0, _helper.getPrevMentionIptEntry)(newEditor);
+    if (PrevMentionIptEntry) {
+      const {
+        data
+      } = event;
+      const insertPoint = _slate.Editor.end(editor, PrevMentionIptEntry[1]);
+      const nextNodeEntry = _slate.Editor.next(editor, {
+        at: PrevMentionIptEntry[1]
+      });
+      _slate.Transforms.insertText(editor, data, {
+        at: insertPoint
+      });
+      event.preventDefault();
+      (0, _core.focusEditor)(editor, {
+        ...insertPoint,
+        offset: insertPoint.offset + data.length
+      });
+      if (nextNodeEntry) {
+        const [nextNode, nextPath] = nextNodeEntry;
+        if (_slate.Text.isText(nextNode) && nextNode.text === '') {
+          _slate.Transforms.removeNodes(editor, {
+            at: nextPath
+          });
+        }
+      }
+      return true;
+    }
+  };
+  newEditor.isInline = element => {
+    if ([_elementType.MENTION, _elementType.MENTION_TEMP].includes(element.type)) {
+      return true;
+    }
+    return isInline(element);
+  };
+  newEditor.normalizeNode = _ref => {
+    let [node, path] = _ref;
+    const mentionEntry = (0, _helper.getMentionEntry)(editor);
+    if (mentionEntry) {
+      const nextEntry = _slate.Editor.next(editor, {
+        at: mentionEntry[1]
+      });
+      const focusPoint = _slate.Editor.start(editor, nextEntry[1]);
+      (0, _core.focusEditor)(editor, focusPoint);
+    }
+    return normalizeNode([node, path]);
+  };
+  return newEditor;
+};
+var _default = exports.default = withMention;

package/dist/basic-sdk/extension/plugins/mention/render-elem/comment-participant-item.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _mouseEvent = require("../../../../utils/mouse-event");
+const CommentParticipantItem = _ref => {
+  let {
+    participant,
+    setScrollTop,
+    onSelectParticipant,
+    participantIndex,
+    activeParticipantIndex
+  } = _ref;
+  const ref = (0, _react.useRef)(null);
+  const oldValueRef = (0, _react.useRef)({});
+  (0, _react.useEffect)(() => {
+    oldValueRef.current.participantIndex = participantIndex;
+    oldValueRef.current.activeParticipantIndex = activeParticipantIndex;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (activeParticipantIndex === participantIndex && activeParticipantIndex !== oldValueRef.current.activeParticipantIndex) {
+      const offsetHeight = ref.current.offsetHeight;
+      const offsetTop = ref.current.offsetTop;
+      if (activeParticipantIndex > oldValueRef.current.activeParticipantIndex) {
+        setScrollTop(offsetTop, offsetHeight, 'down');
+      } else {
+        setScrollTop(offsetTop, offsetHeight, 'up');
+      }
+    }
+    oldValueRef.current.activeParticipantIndex = activeParticipantIndex;
+  }, [setScrollTop, participantIndex, activeParticipantIndex, ref, oldValueRef]);
+  const selectParticipant = (0, _react.useCallback)(event => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    onSelectParticipant(participant);
+  }, [participant, onSelectParticipant]);
+  const active = participantIndex === activeParticipantIndex;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `comment-participant-item ${active ? 'active' : ''}`,
+    ref: ref,
+    onClick: selectParticipant
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-participant-container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "comment-participant-avatar",
+    alt: participant.name,
+    src: participant.avatar_url
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-participant-name"
+  }, participant.name)));
+};
+var _default = exports.default = CommentParticipantItem;

package/dist/basic-sdk/extension/plugins/mention/render-elem/index.css

@@ -0,0 +1,60 @@
+.sdoc-comment-caret-list {
+  background: #fff;
+  position: absolute;
+  padding: 10px 0;
+  max-height: 200px;
+  overflow: auto;
+  min-width: 150px;
+  z-index: 1049;
+  border-radius: 5px;
+  border: 1px solid #ededed;
+  max-width: 200px;
+}
+
+.sdoc-comment-caret-list .comment-participant-item {
+  padding: 5px 0;
+}
+
+.sdoc-comment-caret-list .comment-participant-item.active,
+.sdoc-comment-caret-list .comment-participant-item:hover {
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+.sdoc-comment-caret-list .comment-participant-item .comment-participant-container {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+}
+
+.sdoc-comment-caret-list .comment-participant-item .comment-participant-avatar {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.sdoc-comment-caret-list .comment-participant-item .comment-participant-name {
+  margin-left: 4px;
+  font-size: 14px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sdoc-mention-temp-ipt {
+  padding: 0 5px;
+  display: inline-block;
+  border-radius: 5px;
+  margin: 0 1px;
+}
+
+.sdoc-mention {
+  display: inline-block;
+  margin: 0 2px;
+  padding: 0 2px;
+  border: none;
+  background-color: transparent;
+  cursor: default;
+}

package/dist/basic-sdk/extension/plugins/mention/render-elem/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderMentionTemporaryInput = exports.renderMention = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _participantPopover = _interopRequireDefault(require("./participant-popover"));
+require("./index.css");
+/* eslint-disable react-hooks/rules-of-hooks */
+
+const renderMention = _ref => {
+  let {
+    attributes,
+    children,
+    element,
+    editor,
+    readonly
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
+    contentEditable: "false",
+    key: element.id
+  }), /*#__PURE__*/_react.default.createElement("button", {
+    className: "sdoc-mention"
+  }, children));
+};
+exports.renderMention = renderMention;
+const renderMentionTemporaryInput = (_ref2, editor) => {
+  let {
+    attributes,
+    children,
+    element,
+    readonly
+  } = _ref2;
+  const [searchText, setSearchText] = (0, _react.useState)('');
+  const updateSearchText = (0, _react.useCallback)(_ref3 => {
+    let {
+      compositionText
+    } = _ref3;
+    setSearchText(_slate.Node.string(element) + compositionText);
+  }, [element]);
+  (0, _react.useEffect)(() => {
+    setSearchText(_slate.Node.string(element));
+  }, [element]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.subscribe(_constants.INTERNAL_EVENT.UPDATE_MENTION_TEMP_CONTENT, updateSearchText);
+  }, [updateSearchText]);
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
+    className: "sdoc-mention-temp-ipt"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "@"), /*#__PURE__*/_react.default.createElement("span", null, children), /*#__PURE__*/_react.default.createElement(_participantPopover.default, {
+    searchText: searchText,
+    editor: editor
+  }));
+};
+exports.renderMentionTemporaryInput = renderMentionTemporaryInput;