@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/extension/plugins/mention/helper.js

@@ -0,0 +1,229 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+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");
+var generateMentionTempInput = function generateMentionTempInput() {
+  var id = _slugid["default"].nice();
+  var type = _elementType.MENTION_TEMP;
+  var children = [(0, _core.generateDefaultText)()];
+  return {
+    id: id,
+    type: type,
+    children: children
+  };
+};
+var insertTemporaryMentionInput = exports.insertTemporaryMentionInput = function insertTemporaryMentionInput(editor) {
+  var selection = editor.selection;
+  if (!selection) return;
+  if (!_slate.Range.isCollapsed(selection)) return;
+  var tempMentionInput = generateMentionTempInput();
+  _slate.Editor.insertNode(editor, tempMentionInput);
+};
+var getMentionTempIptEntry = exports.getMentionTempIptEntry = function getMentionTempIptEntry(editor) {
+  var selection = editor.selection;
+  if (!selection) return false;
+  if (!_slate.Range.isCollapsed(selection)) return false;
+  var _Editor$nodes = _slate.Editor.nodes(editor, {
+      match: function match(n) {
+        return n.type === _elementType.MENTION_TEMP;
+      },
+      mode: 'lowest'
+    }),
+    _Editor$nodes2 = (0, _slicedToArray2["default"])(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  return match;
+};
+var getMentionEntry = exports.getMentionEntry = function getMentionEntry(editor) {
+  var selection = editor.selection;
+  if (!selection) return false;
+  if (!_slate.Range.isCollapsed(selection)) return false;
+  var _Editor$nodes3 = _slate.Editor.nodes(editor, {
+      match: function match(n) {
+        return n.type === _elementType.MENTION;
+      },
+      mode: 'lowest'
+    }),
+    _Editor$nodes4 = (0, _slicedToArray2["default"])(_Editor$nodes3, 1),
+    match = _Editor$nodes4[0];
+  return match;
+};
+var generateMention = function generateMention(_ref) {
+  var name = _ref.name,
+    username = _ref.username;
+  var id = _slugid["default"].nice();
+  var type = _elementType.MENTION;
+  var children = [(0, _core.generateDefaultText)()];
+  children[0].text = '@' + name;
+  return {
+    id: id,
+    type: type,
+    children: children,
+    username: username
+  };
+};
+var insertMention = exports.insertMention = function insertMention(editor, collaborator) {
+  var selection = editor.selection;
+  if (!selection) return;
+  if (!_slate.Range.isCollapsed(selection)) return;
+  var mentionTempIptEntry = getMentionTempIptEntry(editor);
+  if (!mentionTempIptEntry) return;
+  var _mentionTempIptEntry = (0, _slicedToArray2["default"])(mentionTempIptEntry, 2),
+    path = _mentionTempIptEntry[1];
+  var _Editor$next = _slate.Editor.next(editor, {
+      at: path
+    }),
+    _Editor$next2 = (0, _slicedToArray2["default"])(_Editor$next, 2),
+    focusPath = _Editor$next2[1];
+  var name = collaborator.name,
+    username = collaborator.username;
+  var mention = generateMention({
+    name: name,
+    username: username
+  });
+  _slate.Transforms.insertNodes(editor, mention, {
+    at: focusPath,
+    select: true
+  });
+};
+
+// Sort collaborators by participants, move mentioned members to the top
+var sortCollaborators = exports.sortCollaborators = function sortCollaborators(collaborators) {
+  var participants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var loginEmail = _context["default"].getUserInfo().email;
+  var lastModifyUser = _context["default"].getSetting('last_modify_user');
+  var stickyCollaborator = null;
+  var participantsMap = {};
+  participants.forEach(function (item) {
+    if (item.email === loginEmail) return;
+    participantsMap[item.email] = item;
+  });
+  var newCollaborators = collaborators.filter(function (item) {
+    var isValidCollaborator = !participantsMap[item.email] && item.email !== loginEmail;
+    if (isValidCollaborator && lastModifyUser === item.email) {
+      stickyCollaborator = item;
+      return false;
+    }
+    return isValidCollaborator;
+  });
+  var newParticipants = Object.values(participantsMap);
+  var resCollaborators = stickyCollaborator ? [stickyCollaborator].concat(newParticipants, (0, _toConsumableArray2["default"])(newCollaborators)) : [].concat(newParticipants, (0, _toConsumableArray2["default"])(newCollaborators));
+  return resCollaborators;
+};
+var transformToText = exports.transformToText = function transformToText(editor) {
+  var isFocusEnd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var selection = editor.selection;
+  if (!selection) return;
+  if (!_slate.Range.isCollapsed(selection)) return;
+  var mentionTempIptEntry = getMentionTempIptEntry(editor);
+  if (!mentionTempIptEntry) return;
+  var _mentionTempIptEntry2 = (0, _slicedToArray2["default"])(mentionTempIptEntry, 2),
+    node = _mentionTempIptEntry2[0],
+    path = _mentionTempIptEntry2[1];
+  var _Editor$next3 = _slate.Editor.next(editor, {
+      at: path
+    }),
+    _Editor$next4 = (0, _slicedToArray2["default"])(_Editor$next3, 2),
+    insertPath = _Editor$next4[1];
+  var insertPoint = _slate.Editor.start(editor, insertPath);
+  var text = node.children[0].text;
+  var insertText = '@' + text;
+  var pointRef = _slate.Editor.pointRef(editor, insertPoint);
+  _slate.Transforms.insertText(editor, insertText, {
+    at: insertPoint
+  });
+  _slate.Transforms.removeNodes(editor, {
+    at: path
+  });
+  var focusPoint = pointRef.unref();
+  isFocusEnd && (0, _core.focusEditor)(editor, focusPoint);
+};
+var getPrevMentionIptEntry = exports.getPrevMentionIptEntry = function getPrevMentionIptEntry(editor) {
+  var prevNodeEntry = _slate.Editor.previous(editor);
+  if (prevNodeEntry) {
+    var aboveNodeEntry = _slate.Editor.above(editor, {
+      match: function match(n) {
+        return n.type === _elementType.MENTION_TEMP;
+      },
+      at: prevNodeEntry[1]
+    });
+    return aboveNodeEntry;
+  }
+  return;
+};
+var getPreCharacters = exports.getPreCharacters = function getPreCharacters(editor) {
+  var selection = editor.selection;
+  var anchor = selection.anchor,
+    focus = selection.focus;
+  var path = _slate.Editor.path(editor, anchor);
+  var startPoint = _slate.Editor.start(editor, path);
+  var beforeStr = _slate.Editor.string(editor, {
+    anchor: startPoint,
+    focus: focus
+  });
+  return beforeStr;
+};
+var getSelectionCoords = exports.getSelectionCoords = function getSelectionCoords() {
+  var doc = window.document;
+  var sel = doc.selection;
+  var range;
+  var rects;
+  var rect;
+  var x = 0;
+  var 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) {
+        var 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;
+          var spanParent = span.parentNode;
+          spanParent.removeChild(span);
+          // Glue any broken text nodes back together
+          spanParent.normalize();
+        }
+      }
+    }
+  }
+  return {
+    x: x,
+    y: y
+  };
+};

package/dist/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");
+var MentionPlugin = {
+  type: _elementType.MENTION,
+  nodeType: 'element',
+  editorPlugin: _plugin["default"],
+  renderElements: [_renderElem.renderMention, _renderElem.renderMentionTemporaryInput]
+};
+var _default = exports["default"] = MentionPlugin;

package/dist/extension/plugins/mention/plugin.js

@@ -0,0 +1,264 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+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");
+var withMention = function withMention(editor) {
+  var insertText = editor.insertText,
+    onHotKeyDown = editor.onHotKeyDown,
+    isInline = editor.isInline,
+    deleteBackward = editor.deleteBackward,
+    deleteForward = editor.deleteForward,
+    normalizeNode = editor.normalizeNode;
+  var newEditor = editor;
+  var eventBus = _eventBus["default"].getInstance();
+  newEditor.insertText = function (text) {
+    var selection = editor.selection;
+    if (text === '@') {
+      var beforeStr = (0, _helper.getPreCharacters)(editor);
+      var isEmptyStr = beforeStr.slice(-1).trim().length === 0;
+      if (!(0, _helper.getMentionTempIptEntry)(editor) && isEmptyStr) {
+        var anchor = selection.anchor;
+        var path = _slate.Editor.path(editor, anchor);
+        (0, _helper.insertTemporaryMentionInput)(newEditor);
+        var abovePath = path.slice(0, path.length - 1);
+        var focusPath = abovePath.concat(path.at(-1) + 1);
+        (0, _core.focusEditor)(editor, focusPath);
+        return;
+      }
+    }
+    var prevNodeEntry = _slate.Editor.previous(editor);
+    if (prevNodeEntry) {
+      var aboveNodeEntry = _slate.Editor.above(editor, {
+        match: function match(n) {
+          return n.type === _elementType.MENTION_TEMP;
+        },
+        at: prevNodeEntry[1]
+      });
+      if (aboveNodeEntry) {
+        var _text$match;
+        var inputCnCharacter = (_text$match = text.match(/^[\u4e00-\u9fa5]+$/)) === null || _text$match === void 0 ? void 0 : _text$match.input;
+        if (inputCnCharacter) {
+          var insertPoint = _slate.Editor.end(editor, aboveNodeEntry[1]);
+          var nextNodeEntry = _slate.Editor.next(editor, {
+            at: aboveNodeEntry[1]
+          });
+          _slate.Transforms.insertText(editor, text, {
+            at: insertPoint
+          });
+          if (nextNodeEntry) {
+            var _nextNodeEntry = (0, _slicedToArray2["default"])(nextNodeEntry, 2),
+              nextNode = _nextNodeEntry[0],
+              nextPath = _nextNodeEntry[1];
+            if (_slate.Text.isText(nextNode) && nextNode.text === '') {
+              _slate.Transforms.removeNodes(editor, {
+                at: nextPath
+              });
+            }
+          }
+          return (0, _core.focusEditor)(editor, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, insertPoint), {}, {
+            offset: insertPoint.offset + text.length
+          }));
+        }
+      }
+    }
+    return insertText(text);
+  };
+  newEditor.deleteBackward = function (unit) {
+    var mentionTempInputEntry = (0, _helper.getMentionTempIptEntry)(editor);
+    if (mentionTempInputEntry) {
+      var selection = editor.selection;
+      if (selection && _slate.Range.isCollapsed(selection)) {
+        var _mentionTempInputEntr = (0, _slicedToArray2["default"])(mentionTempInputEntry, 2),
+          node = _mentionTempInputEntr[0],
+          path = _mentionTempInputEntr[1];
+        var contentString = _slate.Node.string(node);
+        if (!contentString) {
+          return _slate.Transforms["delete"](editor, {
+            at: path
+          });
+        }
+      }
+    }
+
+    // Delete mention, when in mention
+    var prevNodeEntry = _slate.Editor.previous(editor);
+    if (prevNodeEntry) {
+      var aboveNodeEntry = _slate.Editor.above(editor, {
+        match: function match(n) {
+          return n.type === _elementType.MENTION;
+        },
+        at: prevNodeEntry[1]
+      });
+      var mentionEntry = (0, _helper.getMentionEntry)(editor);
+      if (mentionEntry || aboveNodeEntry) {
+        var _selection = editor.selection;
+        if (_selection && _slate.Range.isCollapsed(_selection)) {
+          var _ref = mentionEntry || aboveNodeEntry,
+            _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+            mentionPath = _ref2[1];
+          return _slate.Transforms.removeNodes(editor, {
+            at: mentionPath
+          });
+        }
+      }
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.deleteForward = function (unit) {
+    var mentionEntry = _slate.Editor.next(editor, {
+      match: function match(n) {
+        return n.type === _elementType.MENTION;
+      }
+    });
+    if (mentionEntry) {
+      var _mentionEntry = (0, _slicedToArray2["default"])(mentionEntry, 2),
+        mentionPath = _mentionEntry[1];
+      return _slate.Transforms.removeNodes(editor, {
+        at: mentionPath
+      });
+    }
+    return deleteForward(unit);
+  };
+  newEditor.onHotKeyDown = function (event) {
+    var mentionTempIptEntry = (0, _helper.getMentionTempIptEntry)(editor);
+    if (mentionTempIptEntry) {
+      var _mentionTempIptEntry = (0, _slicedToArray2["default"])(mentionTempIptEntry, 2),
+        mentionTempIptPath = _mentionTempIptEntry[1];
+      var DownArrow = _constants.KeyCodes.DownArrow,
+        UpArrow = _constants.KeyCodes.UpArrow,
+        Enter = _constants.KeyCodes.Enter,
+        Esc = _constants.KeyCodes.Esc,
+        RightArrow = _constants.KeyCodes.RightArrow,
+        LeftArrow = _constants.KeyCodes.LeftArrow;
+      var keyCode = event.keyCode;
+      if (keyCode === RightArrow || keyCode === LeftArrow) {
+        var selection = editor.selection;
+        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
+      var interceptorKeyCodes = [DownArrow, UpArrow, Enter, Esc];
+      if (interceptorKeyCodes.includes(keyCode)) {
+        event.preventDefault();
+        eventBus.dispatch(_constants.INTERNAL_EVENT.HANDLE_MENTION_TEMP_CHOSEN, {
+          event: event
+        });
+        return;
+      }
+    }
+    var mentionEntry = (0, _helper.getMentionEntry)(editor);
+    if (mentionEntry) {
+      var _mentionEntry2 = (0, _slicedToArray2["default"])(mentionEntry, 2),
+        mentionPath = _mentionEntry2[1];
+      var _RightArrow = _constants.KeyCodes.RightArrow,
+        _LeftArrow = _constants.KeyCodes.LeftArrow;
+      var _keyCode = event.keyCode;
+      if (_keyCode === _RightArrow || _keyCode === _LeftArrow) {
+        event.preventDefault();
+        if (_keyCode === _LeftArrow) {
+          var beginPoint = _slate.Editor.start(editor, mentionPath);
+          var focusPoint = _slate.Editor.before(editor, beginPoint, {
+            distance: 1
+          });
+          (0, _core.focusEditor)(newEditor, focusPoint);
+        } else {
+          var endPoint = _slate.Editor.end(editor, mentionPath);
+          var _focusPoint = _slate.Editor.after(editor, endPoint, {
+            distance: 1
+          });
+          (0, _core.focusEditor)(newEditor, _focusPoint);
+        }
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  newEditor.onCompositionUpdate = function (event) {
+    var mentionTempIptEntry = (0, _helper.getMentionTempIptEntry)(newEditor);
+    if (mentionTempIptEntry) {
+      var data = event.data;
+      var compositionText = data.replace(/\'/g, '');
+      eventBus.dispatch(_constants.INTERNAL_EVENT.UPDATE_MENTION_TEMP_CONTENT, {
+        compositionText: compositionText
+      });
+      return true;
+    }
+  };
+  newEditor.onCompositionStart = function (event) {
+    var mentionTempIptEntry = (0, _helper.getMentionTempIptEntry)(editor);
+    if (mentionTempIptEntry) {
+      event.preventDefault();
+      return true;
+    }
+  };
+  newEditor.onCompositionEnd = function (event) {
+    var PrevMentionIptEntry = (0, _helper.getPrevMentionIptEntry)(newEditor);
+    if (PrevMentionIptEntry) {
+      var data = event.data;
+      var insertPoint = _slate.Editor.end(editor, PrevMentionIptEntry[1]);
+      var nextNodeEntry = _slate.Editor.next(editor, {
+        at: PrevMentionIptEntry[1]
+      });
+      _slate.Transforms.insertText(editor, data, {
+        at: insertPoint
+      });
+      event.preventDefault();
+      (0, _core.focusEditor)(editor, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, insertPoint), {}, {
+        offset: insertPoint.offset + data.length
+      }));
+      if (nextNodeEntry) {
+        var _nextNodeEntry2 = (0, _slicedToArray2["default"])(nextNodeEntry, 2),
+          nextNode = _nextNodeEntry2[0],
+          nextPath = _nextNodeEntry2[1];
+        if (_slate.Text.isText(nextNode) && nextNode.text === '') {
+          _slate.Transforms.removeNodes(editor, {
+            at: nextPath
+          });
+        }
+      }
+      return true;
+    }
+  };
+  newEditor.isInline = function (element) {
+    if ([_elementType.MENTION, _elementType.MENTION_TEMP].includes(element.type)) {
+      return true;
+    }
+    return isInline(element);
+  };
+  newEditor.normalizeNode = function (_ref3) {
+    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+      node = _ref4[0],
+      path = _ref4[1];
+    var mentionEntry = (0, _helper.getMentionEntry)(editor);
+    if (mentionEntry) {
+      var nextEntry = _slate.Editor.next(editor, {
+        at: mentionEntry[1]
+      });
+      var 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/extension/plugins/mention/render-elem/comment-participant-item.js

@@ -0,0 +1,54 @@
+"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");
+var CommentParticipantItem = function CommentParticipantItem(_ref) {
+  var participant = _ref.participant,
+    setScrollTop = _ref.setScrollTop,
+    onSelectParticipant = _ref.onSelectParticipant,
+    participantIndex = _ref.participantIndex,
+    activeParticipantIndex = _ref.activeParticipantIndex;
+  var ref = (0, _react.useRef)(null);
+  var oldValueRef = (0, _react.useRef)({});
+  (0, _react.useEffect)(function () {
+    oldValueRef.current.participantIndex = participantIndex;
+    oldValueRef.current.activeParticipantIndex = activeParticipantIndex;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (activeParticipantIndex === participantIndex && activeParticipantIndex !== oldValueRef.current.activeParticipantIndex) {
+      var offsetHeight = ref.current.offsetHeight;
+      var 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]);
+  var selectParticipant = (0, _react.useCallback)(function (event) {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    onSelectParticipant(participant);
+  }, [participant, onSelectParticipant]);
+  var active = participantIndex === activeParticipantIndex;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-participant-item ".concat(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/extension/plugins/mention/render-elem/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderMentionTemporaryInput = exports.renderMention = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+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 */
+
+var renderMention = exports.renderMention = function renderMention(_ref) {
+  var attributes = _ref.attributes,
+    children = _ref.children,
+    element = _ref.element,
+    editor = _ref.editor,
+    readonly = _ref.readonly;
+  return /*#__PURE__*/_react["default"].createElement("span", Object.assign({}, attributes, {
+    contentEditable: "false",
+    key: element.id
+  }), /*#__PURE__*/_react["default"].createElement("button", {
+    className: "sdoc-mention"
+  }, children));
+};
+var renderMentionTemporaryInput = exports.renderMentionTemporaryInput = function renderMentionTemporaryInput(_ref2, editor) {
+  var attributes = _ref2.attributes,
+    children = _ref2.children,
+    element = _ref2.element,
+    readonly = _ref2.readonly;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    searchText = _useState2[0],
+    setSearchText = _useState2[1];
+  var updateSearchText = (0, _react.useCallback)(function (_ref3) {
+    var compositionText = _ref3.compositionText;
+    setSearchText(_slate.Node.string(element) + compositionText);
+  }, [element]);
+  (0, _react.useEffect)(function () {
+    setSearchText(_slate.Node.string(element));
+  }, [element]);
+  (0, _react.useEffect)(function () {
+    var 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
+  }));
+};