@seafile/sdoc-editor 0.5.3 → 0.5.5

package/dist/assets/css/simple-editor.css

@@ -7,3 +7,18 @@
 .sdoc-context-menu .dropdown-item:hover {
   color: #fff;
 }
+
+/* Used in mention editor, to modify `mention` node */
+a[title^='__sdoc_mention__username'] {
+  display: inline-block;
+  padding: 0 2px;
+  border: none;
+  background-color: transparent;
+  color: #1677ff !important;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+a[title^='__sdoc_mention__username']:hover {
+  background-color: rgb(221, 236, 253);
+}

package/dist/basic-sdk/assets/css/layout.css

@@ -114,3 +114,18 @@
   font-size: 12px;
   transform: scale(.75);
 }
+
+.sdoc-comment-editor-toolbar {
+  display: flex;
+  flex: 1;
+  position: relative;
+  height: 44px;
+  align-items: center;
+  user-select: none;
+  position: relative;
+  z-index: 102;
+}
+
+.sdoc-comment-editor-menu-group {
+  border-right: none;
+}

package/dist/basic-sdk/comment/components/comment-editor.js

@@ -2,12 +2,18 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'reactstrap';
 import classNames from 'classnames';
+import { Editor, Transforms } from '@seafile/slate';
 import { useScrollContext } from '../../hooks/use-scroll-context';
 import context from '../../../context';
-import EventBus from '../../utils/event-bus';
-import { INTERNAL_EVENT } from '../../constants';
 import { useParticipantsContext } from '../hooks/use-participants';
-import CommentInput from './comment-input';
+import SdocCommentEditor from '../../editor/sdoc-comment-editor';
+import { createCommentEditor } from '../../extension';
+import withNodeId from '../../node-id';
+import { generateEmptyElement } from '../../extension/core';
+import { PARAGRAPH } from '../../extension/constants';
+import slateToMdString from '../../../slate-convert/slate-to-md';
+import mdStringToSlate from '../../../slate-convert/md-to-slate';
+import { COMMENT_EDITOR, COMMENT_EDITOR_EDIT_AREA_WIDTH } from '../../constants';
 const getSubmitTip = (type, content) => {
   if (content) return 'Save';
   return type === 'comment' ? 'Comment' : 'Reply';
@@ -23,7 +29,6 @@ const CommentEditor = _ref => {
     setIsEditing,
     hiddenComment
   } = _ref;
-  const commentInputRef = useRef();
   const commentWrapperRef = useRef();
   const {
     t
@@ -32,6 +37,30 @@ const CommentEditor = _ref => {
   const {
     addParticipants
   } = useParticipantsContext();
+  const submitTip = useMemo(() => getSubmitTip(type, content), [content, type]);
+  const userInfo = context.getUserInfo();
+  const document = useMemo(() => {
+    const cursor = {};
+    let children = null;
+    children = [generateEmptyElement(PARAGRAPH, {
+      placeholder
+    })];
+    return {
+      children,
+      cursor
+    };
+  }, [placeholder]);
+  const editor = useMemo(() => {
+    const defaultEditor = createCommentEditor();
+    const newEditor = withNodeId(defaultEditor);
+    const {
+      cursors
+    } = document;
+    newEditor.cursors = cursors || {};
+    newEditor.width = COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
+    newEditor.editorType = COMMENT_EDITOR;
+    return newEditor;
+  }, [document]);
 
   // onMount: set scrollLeft
   useEffect(() => {
@@ -45,42 +74,33 @@ const CommentEditor = _ref => {
     scrollRef.current.scrollLeft = scrollRef.current.scrollLeft + width;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
-  // onMount: hidden comment
-  useEffect(() => {
-    const eventBus = EventBus.getInstance();
-    const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.ARTICLE_CLICK, hiddenComment);
-    return () => {
-      unsubscribe();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   const updateValue = useCallback(value => {
     if (!value || value.trim() === '') return;
-    if (!content) {
-      insertContent(value);
-      return;
-    }
+    if (!content) return insertContent(value);
     updateContent(value);
   }, [content, insertContent, updateContent]);
   const onSubmit = useCallback(event => {
     event && event.stopPropagation();
-    const value = commentInputRef.current.getValue();
-    updateValue(value);
-    const userInfo = context.getUserInfo();
+    const mdString = slateToMdString(editor.children);
+    updateValue(mdString);
     addParticipants(userInfo.username);
-    commentInputRef.current.setValue('');
-  }, [updateValue, addParticipants, commentInputRef]);
+    editor.children = [generateEmptyElement(PARAGRAPH, {
+      placeholder
+    })];
+    Transforms.select(editor, Editor.start(editor, []));
+  }, [editor, updateValue, addParticipants, userInfo.username, placeholder]);
   const onCancel = useCallback(event => {
     event.stopPropagation();
-    commentInputRef.current.setValue('');
     setIsEditing && setIsEditing(false);
     hiddenComment && hiddenComment(false);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setIsEditing]);
-  const submitTip = useMemo(() => getSubmitTip(type, content), [content, type]);
-  const userInfo = context.getUserInfo();
+  useEffect(() => {
+    const children = mdStringToSlate(content);
+    editor.children = children;
+    Transforms.select(editor, Editor.end(editor, []));
+  }, [editor, content]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('comment-editor-wrapper', className),
     ref: commentWrapperRef
@@ -95,13 +115,9 @@ const CommentEditor = _ref => {
     width: "100%"
   })), /*#__PURE__*/React.createElement("div", {
     className: "comment-editor-user-name"
-  }, userInfo.name)), /*#__PURE__*/React.createElement(CommentInput, {
-    ref: commentInputRef,
-    type: type,
-    placeholder: placeholder,
-    content: content,
-    onCancel: onCancel,
-    onSubmit: onSubmit
+  }, userInfo.name)), /*#__PURE__*/React.createElement(SdocCommentEditor, {
+    editor: editor,
+    document: document
   }), /*#__PURE__*/React.createElement("div", {
     className: "comment-operations"
   }, /*#__PURE__*/React.createElement(Button, {

package/dist/basic-sdk/comment/components/comment-item-content.js

@@ -1,12 +1,12 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import dayjs from 'dayjs';
 import CommentEditor from './comment-editor';
 import Tooltip from '../../../components/tooltip';
-import { textToHtml } from '../utils';
 import { useNotificationContext } from '../hooks/notification-hooks';
+import processor from '../../../slate-convert/md-to-html';
 const CommentItem = _ref => {
   let {
     isActive,
@@ -23,11 +23,19 @@ const CommentItem = _ref => {
   const {
     notificationsInfo
   } = useNotificationContext();
+  const [editorContent, setEditorContent] = useState('');
   const onEditToggle = useCallback(event => {
     event.stopPropagation();
     setIsEditing(true);
   }, []);
   const isUnseen = notificationsInfo.notifications_map["sdoc_notification_".concat(comment.id)] ? true : false;
+  useEffect(() => {
+    transferHtml(comment.comment);
+  }, [comment.comment]);
+  const transferHtml = async mdString => {
+    const htmlString = await processor.process(mdString);
+    setEditorContent(String(htmlString));
+  };
   const onDeleteToggle = useCallback(event => {
     event.stopPropagation();
     onDeleteComment(true);
@@ -126,7 +134,7 @@ const CommentItem = _ref => {
     className: "comment-content"
   }, !isEditing && /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
-      __html: textToHtml(comment.comment)
+      __html: editorContent
     }
   })), isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
     className: "pb-3",

package/dist/basic-sdk/comment/components/comment-item-reply.js

@@ -1,12 +1,12 @@
-import React, { useCallback, useState, useRef } from 'react';
+import React, { useCallback, useState, useRef, useEffect } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import dayjs from 'dayjs';
 import context from '../../../context';
 import CommentEditor from './comment-editor';
-import { textToHtml } from '../utils';
 import { useNotificationContext } from '../hooks/notification-hooks';
 import CommentDeletePopover from './comment-delete-popover';
+import processor from '../../../slate-convert/md-to-html';
 const CommentItemReply = _ref => {
   let {
     isActive,
@@ -23,6 +23,7 @@ const CommentItemReply = _ref => {
   const liRef = useRef(null);
   const isUnseen = notificationsInfo.notifications_map["sdoc_notification_".concat(reply.comment_id, "_").concat(reply.id)] ? true : false;
   const [isEditing, setIsEditing] = useState(false);
+  const [editorContent, setEditorContent] = useState('');
   const replyOpToolsId = "replyOpTools_".concat(reply.id);
   const onEditToggle = useCallback(event => {
     event.stopPropagation();
@@ -33,6 +34,13 @@ const CommentItemReply = _ref => {
     event.stopPropagation();
     setIsShowDeleteDialog(true);
   }, []);
+  const transferHtml = async mdString => {
+    const htmlString = await processor.process(mdString);
+    setEditorContent(String(htmlString));
+  };
+  useEffect(() => {
+    transferHtml(reply.reply);
+  }, [reply.reply]);
   const _deleteReply = useCallback(() => {
     deleteReply(reply.id);
     setIsShowDeleteDialog(false);
@@ -95,12 +103,12 @@ const CommentItemReply = _ref => {
     className: "comment-content"
   }, !isEditing && /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
-      __html: textToHtml(reply.reply)
+      __html: editorContent
     }
   })), isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
-    className: 'pb-3',
+    className: "pb-3",
     type: "reply",
-    content: reply.reply,
+    content: editorContent,
     updateContent: updateContent,
     setIsEditing: setIsEditing
   }), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeletePopover, {

package/dist/basic-sdk/comment/components/comment-item-wrapper.js

@@ -278,7 +278,7 @@ const CommentItemWrapper = _ref => {
       reply: reply
     });
   })), isActive && /*#__PURE__*/React.createElement(CommentEditor, {
-    className: "mt-4",
+    className: "p-3",
     type: "reply",
     placeholder: tip,
     insertContent: insertContent,

package/dist/basic-sdk/comment/components/comment-list.css

@@ -3,6 +3,8 @@
 }
 
 .sdoc-comment-list-container .comment-ui-container {
+  min-width: 330px;
+  max-width: 400px;
   background-color: #edf2fa;
   border-radius: 8px;
   box-shadow: 0 0 2px rgba(0, 0, 0, .04);
@@ -42,7 +44,6 @@
 }
 
 .sdoc-comment-list-container .comment-item-list {
-  max-height: 350px;
   min-width: 280px;
   overflow-x: hidden;
   overflow-y: auto;
@@ -51,7 +52,7 @@
 
 .sdoc-comment-list-container .comment-item {
   position: relative;
-  padding: 16px 16px 0;
+  padding: 16px 10px 0;
   cursor: pointer;
 }
 
@@ -79,9 +80,9 @@
 .sdoc-comment-list-container .comment-item .comment-content {
   padding-bottom: 10px;
   margin-top: 10px;
-  margin-left: 30px;
-  width: 222px;
-  word-break: break-all;
+  margin-left: 41px;
+  word-break: keep-all;
+  word-wrap: break-word;
 }
 
 .sdoc-comment-list-container .comment-header .comment-author__avatar {
@@ -200,27 +201,34 @@
   color: #fff;
 }
 
+.sdoc-comment-editor-wrapper {
+  border: 1px solid #ececec;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  margin-bottom: 15px;
+  border-radius: 3px;
+}
+
+.comment-editor-wrapper .sdoc-comment-editor-wrapper .article.sdoc-comment-editor {
+  width: 365px;
+  padding: 0 5px;
+  min-height: 75px;
+  max-height: 80px;
+  box-shadow: none;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: none;
+  background-color: transparent;
+}
+
 .sdoc-comment-list-container .comment-editor-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 16px;
+  padding: 0 10px;
   cursor: text;
 }
 
-.sdoc-comment-list-container .comment-editor-wrapper .comment-editor {
-  margin-bottom: 10px;
-  min-height: 40px;
-  max-height: 120px;
-  min-width: 240px;
-  overflow: auto;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, .12);
-  border-radius: 4px;
-  padding: 8px;
-  word-break: break-all;
-}
-
 .sdoc-comment-list-container .comment-editor-wrapper .comment-editor:empty:before {
   content: attr(placeholder);
   opacity: .6;

package/dist/basic-sdk/comment/components/comment-list.js

@@ -112,7 +112,6 @@ const CommentList = _ref => {
   }, /*#__PURE__*/React.createElement(CommentEditor, {
     type: "comment",
     insertContent: insertContent,
-    selectionElement: selectionElement,
     hiddenComment: hiddenComment
   })));
 };

package/dist/basic-sdk/comment/components/global-comment/index.css

@@ -3,7 +3,7 @@
   right: 10px;
   top: 50px;
   z-index: 103;
-  width: 340px;
+  width: 432px;
   height: 540px;
 }
 
@@ -87,7 +87,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 16px;
+  padding: 10px;
   overflow: auto;
 }
 
@@ -95,10 +95,6 @@
   position: relative;
 }
 
-.global-comments-popover .comments-panel-body__content .comment-item-list {
-  max-width: 308px;
-}
-
 .global-comments-popover .comments-panel-body__content .comment-ui-container.active {
   left: 0;
 }

package/dist/basic-sdk/comment/utils/index.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Editor } from '@seafile/slate';
 import { getEventTransfer } from '../../../utils';
-import { COMMENT_URL_CLASSNAME } from '../constants';
 import { KeyCodes } from '../../../constants';
 import { createNotify, generatorNotificationKey } from './notification-utils';
 import { focusEditor, findPath } from '../../extension/core';
@@ -33,10 +32,11 @@ export const searchCollaborators = (collaborators, searchValue) => {
 
 // Mailto, file, tel, callto, sms, cid, xmpp, etc. are not support
 const ALLOWED_URL_REG = /((http|https):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
-export const textToHtml = text => {
-  if (!text) return '';
-  return text.replace(ALLOWED_URL_REG, '<a href="$1" target="_blank" class=' + COMMENT_URL_CLASSNAME + '>$1</a>');
-};
+// export const textToHtml = (text) => {
+//   if (!text) return '';
+//   return text.replace(ALLOWED_URL_REG, '<a href="$1" target="_blank" class=' + COMMENT_URL_CLASSNAME + '>$1</a>');
+// };
+
 export const convertComment = value => {
   return value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
 };

package/dist/basic-sdk/constants/index.js

@@ -17,12 +17,15 @@ export const INTERNAL_EVENT = {
   CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker',
   OPEN_SEARCH_REPLACE_MODAL: 'open_search_replace_modal',
   UPDATE_SEARCH_REPLACE_HIGHLIGHT: 'update_search_replace_highlight',
-  TABLE_CELL_MOUSE_ENTER: 'table_cell_mouse_enter'
+  TABLE_CELL_MOUSE_ENTER: 'table_cell_mouse_enter',
+  HANDLE_MENTION_TEMP_CHOSEN: 'handle_mention_temp_chosen',
+  UPDATE_MENTION_TEMP_CONTENT: 'update_mention_temp_content'
 };
 export const REVISION_DIFF_KEY = 'diff';
 export const REVISION_DIFF_VALUE = '1';
 export const PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
-
+export const COMMENT_EDITOR_EDIT_AREA_WIDTH = 364;
+export const COMMENT_EDITOR = 'comment_editor';
 export const MODIFY_TYPE = {
   ADD: 'add',
   DELETE: 'delete',

package/dist/basic-sdk/editor/comment-article.js

@@ -0,0 +1,175 @@
+import React, { useCallback, useMemo } from 'react';
+import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
+import { Editor, Node, Range } from '@seafile/slate';
+import { renderLeaf, renderElement } from '../extension';
+import { getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from '../extension/core';
+import EventProxy from '../utils/event-handler';
+import { useCursors } from '../cursor/use-cursors';
+import { INTERNAL_EVENT } from '../constants';
+import { usePipDecorate } from '../decorates';
+import { getCursorPosition, getDomHeight, getDomMarginTop } from '../utils/dom-utils';
+import EventBus from '../utils/event-bus';
+import { useScrollContext } from '../hooks/use-scroll-context';
+import { IMAGE } from '../extension/constants';
+const CommentArticle = _ref => {
+  let {
+    editor,
+    slateValue,
+    updateSlateValue
+  } = _ref;
+  const {
+    cursors
+  } = useCursors(editor);
+  const decorate = usePipDecorate(editor);
+  // init eventHandler
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const eventProxy = useMemo(() => new EventProxy(editor), []);
+  const onMouseDown = useCallback(event => {
+    if (event.button === 0) {
+      // Compatible with the editor which unload table plugin
+      editor.reSetTableSelectedRange && editor.reSetTableSelectedRange();
+      const eventBus = EventBus.getInstance();
+      eventBus.dispatch(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const scrollRef = useScrollContext();
+  const onKeyDown = useCallback(event => {
+    const {
+      scrollTop,
+      clientHeight
+    } = scrollRef.current;
+    eventProxy.onKeyDown(event);
+    if (event.key === 'ArrowLeft') {
+      if (!isSelectionAtBlockStart(editor)) return;
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      if (scrollTop === 0) return;
+      let prevNode = getPrevNode(editor);
+      if (!prevNode) return;
+      const domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
+      const domHeight = getDomHeight(domNode);
+      const isScrollUp = true;
+      const {
+        y
+      } = getCursorPosition(isScrollUp);
+      if (y >= domHeight) return;
+      scrollRef.current.scroll(0, Math.max(0, scrollTop - domHeight));
+      return;
+    }
+    if (event.key === 'ArrowRight') {
+      if (!isSelectionAtBlockEnd(editor)) return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      let nextNode = getNextNode(editor);
+      if (!nextNode) return;
+      const domNode = ReactEditor.toDOMNode(editor, nextNode[0]);
+      const domHeight = getDomHeight(domNode);
+      const isScrollUp = false;
+      const {
+        y
+      } = getCursorPosition(isScrollUp);
+      if (clientHeight - y >= domHeight) return;
+      scrollRef.current.scroll(0, Math.max(0, scrollTop + domHeight));
+      return;
+    }
+    if (event.key === 'Backspace') {
+      const {
+        y
+      } = getCursorPosition();
+
+      // above viewport
+      if (y < 0) {
+        const newY = Math.abs(y);
+        if (isSelectionAtBlockStart(editor)) {
+          const prevNode = getPrevNode(editor);
+          if (!prevNode) return;
+          const domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
+          const domHeight = getDomHeight(domNode);
+          const node = getAboveBlockNode(editor);
+          if (!node) return;
+          const currentDomNode = ReactEditor.toDOMNode(editor, node[0]);
+          const marginTop = getDomMarginTop(currentDomNode);
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + domHeight + marginTop)));
+        } else {
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - newY));
+        }
+        return;
+      }
+
+      // insider viewport
+      if (y >= 0 && y <= clientHeight) {
+        if (isSelectionAtBlockStart(editor)) {
+          const prevNode = getPrevNode(editor);
+          if (!prevNode) return;
+          const domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
+          const domHeight = getDomHeight(domNode);
+          if (y >= domHeight) return;
+          // Scroll up the height of the previous block
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - domHeight));
+          return;
+        }
+      }
+
+      // below viewport
+      if (y > clientHeight) {
+        if (isSelectionAtBlockStart(editor)) {
+          // y: text top border
+          scrollRef.current.scroll(0, Math.max(0, scrollTop + (y - clientHeight)));
+        } else {
+          const marginBottom = 11.2;
+          const {
+            y: newY
+          } = getCursorPosition(false);
+          const rectBottom = newY + marginBottom; // text bottom border
+          scrollRef.current.scroll(0, Math.max(0, scrollTop + (rectBottom - clientHeight)));
+        }
+        return;
+      }
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollRef]);
+  const handleScrollIntoView = useCallback((editor, domRange) => {
+    try {
+      const {
+        selection
+      } = editor;
+      if (Range.isCollapsed(selection)) {
+        // Do not scroll into view, when focus on image
+        const [imageNodeEntry] = Editor.nodes(editor, {
+          match: n => n.type === IMAGE,
+          at: selection
+        });
+        if (imageNodeEntry) return;
+      }
+      const focusedNode = Node.get(editor, selection.focus.path);
+      const domNode = ReactEditor.toDOMNode(editor, focusedNode);
+      if (!domNode) return;
+      domNode.scrollIntoView({
+        block: 'nearest'
+      });
+    } catch (error) {
+      //
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: slateValue,
+    onChange: updateSlateValue
+  }, /*#__PURE__*/React.createElement(Editable, {
+    scrollSelectionIntoView: handleScrollIntoView,
+    cursors: cursors,
+    renderElement: renderElement,
+    renderLeaf: renderLeaf,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    decorate: decorate,
+    onCut: eventProxy.onCut,
+    onCopy: eventProxy.onCopy,
+    onCompositionStart: eventProxy.onCompositionStart,
+    onCompositionUpdate: eventProxy.onCompositionUpdate,
+    onCompositionEnd: eventProxy.onCompositionEnd
+  }));
+};
+export default CommentArticle;

package/dist/basic-sdk/editor/editable-article.js

@@ -31,7 +31,8 @@ const EditableArticle = _ref => {
   const eventProxy = useMemo(() => new EventProxy(editor), []);
   const onMouseDown = useCallback(event => {
     if (event.button === 0) {
-      editor.reSetTableSelectedRange();
+      // Compatible with the editor which unload table plugin
+      editor.reSetTableSelectedRange && editor.reSetTableSelectedRange();
       const eventBus = EventBus.getInstance();
       eventBus.dispatch(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
     }