@seafile/comment-editor 0.0.1-alpha.4 → 0.0.1-alpha.5

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

@@ -113,48 +113,4 @@
   margin: 0 auto;
   padding-top: 20px;
   padding-bottom: 20px;
-}
-
-/* article style --> ./sdoc-editor-article.css */
-
-.sdoc-editor-container .seafile-block-container {
-  position: relative;
-}
-
-.sdoc-editor-container .seafile-block-container .comment-count {
-  position: absolute;
-  right: -55px;
-  top: 0px;
-  border-radius: 4px;
-  width: 15px;
-  height: 15px;
-  line-height: 18px;
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  background: rgba(0, 0, 0, .3);
-}
-
-.sdoc-editor-container .seafile-block-container .comment-count__btn {
-  font-size: 12px;
-  transform: scale(.75);
-}
-
-.comment-editor-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 32px;
-  user-select: none;
-  border-top: 1px solid #e5e6e8;
-  z-index: 102;
-  margin: 0 8px;
-  margin-top: 5px;
-}
-
-.comment-editor-menu-group {
-  border-right: none;
-  padding-left: 0 !important;
-}
+}

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchCollaborators = void 0;
+var _helper = require("../extension/plugins/mention/helper");
+const searchCollaborators = (collaborators, searchValue, editor) => {
+  const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
+  const validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
+  if (!validSearchValue) return validCollaborators;
+
+  // The current character is '@' and the previous character is a null character
+  const beforeStr = (0, _helper.getPreCharacters)(editor);
+  const isEmptyStr = beforeStr.slice(-2, -1).trim().length === 0;
+  if (beforeStr.slice(-1) === '@' && isEmptyStr) {
+    return validCollaborators;
+  }
+  return validCollaborators.filter(collaborator => {
+    const {
+      name,
+      name_pinyin = ''
+    } = collaborator;
+    if (name.toString().toLowerCase().indexOf(validSearchValue) > -1) return true;
+    if (!name_pinyin) return false;
+    const validNamePinyin = name_pinyin.toString().toLowerCase();
+    const validSearchPinyinValue = validSearchValue.replace(/ |'/g, '');
+
+    // complete: For example, seatable can be retrieved when searching for sea.
+    if (validNamePinyin.indexOf(validSearchPinyinValue) > -1) return true;
+    if (validNamePinyin.replace(/'/g, '').indexOf(validSearchPinyinValue) > -1) return true;
+    const validNamePinyinList = validNamePinyin.split('\'');
+    // acronym: For example, sea table can be retrieved when searching for st.
+    const namePinyinAcronym = validNamePinyinList.map(item => item && item.trim() ? item.trim().slice(0, 1) : '');
+    if (namePinyinAcronym.join('').indexOf(validSearchPinyinValue) > -1) return true;
+    return false;
+  });
+};
+exports.searchCollaborators = searchCollaborators;

package/dist/basic-sdk/editor/comment-editor.css

@@ -0,0 +1,138 @@
+.comment-editor-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: text;
+}
+
+.comment-editor-wrapper .comment-editor-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.comment-editor-wrapper .comment-editor-content {
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  transition: border-color .3s ease;
+}
+
+.comment-editor-wrapper .comment-editor-content:focus-within {
+ border-color: #ff8e03;
+}
+
+/* comment-editor */
+.comment-editor-wrapper .comment-editor-content .article.comment-editor {
+  width: 100%;
+  padding: 8px;
+  padding-bottom: 0;
+  min-height: 60px;
+  max-height: 130px;
+  box-shadow: none;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: none;
+  background-color: transparent;
+}
+
+.comment-editor-wrapper .comment-editor-content .article.comment-editor :first-child {
+  margin-top: 0 !important;
+}
+
+.comment-editor-wrapper .comment-editor:empty:before {
+  content: attr(placeholder);
+  opacity: .6;
+}
+
+.comment-editor-wrapper .comment-editor:focus-visible {
+  outline: none;
+}
+
+.comment-editor-wrapper .comment-editor:focus {
+  border: 1px solid rgba(0, 0, 0, .12);
+}
+
+.comment-editor-wrapper .comment-editor-user-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.comment-editor-wrapper .comment-editor-user-info .comment-editor-user-img {
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 8px;
+}
+
+.comment-editor-wrapper .comment-editor-user-info .comment-editor-user-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.comment-editor-wrapper .comment-operations {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* comment-editor-toolbar */
+.comment-editor-wrapper .comment-editor-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  user-select: none;
+  z-index: 102;
+  margin: 0 8px;
+  margin-top: 5px;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .comment-editor-menu-group {
+  border-right: none !important;
+  padding-left: 0 !important;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group {
+  height: 100%;
+  padding: 6px 0 6px 8px;
+  font-size: 0.75rem;
+  border-right: 1px solid #e5e6e8;
+  border-radius: 0 !important;
+  color: #444;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  margin-right: 8px;
+  border: none !important;
+  color: #444;
+  background-color: transparent;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item:disabled {
+  color: #BDBDBD;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item:hover {
+  background-color: #F2F2F2;
+  border-radius: 2px;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item[data-active='true'] {
+  color: #eb8205;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item .sdocfont,
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon .sdocfont {
+  font-size: 12px;
+}

package/dist/basic-sdk/{comment/components → editor}/comment-editor.js

@@ -13,23 +13,24 @@ var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isHotkey = _interopRequireDefault(require("is-hotkey"));
 var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
-var _constants = require("../../constants");
-var _context = _interopRequireDefault(require("../../context"));
-var _useCursors = require("../../cursor/use-cursors");
-var _decorates = require("../../decorates");
-var _extension = require("../../extension");
-var _constants2 = require("../../extension/constants");
-var _core = require("../../extension/core");
-var _renderCommentEditorElement = _interopRequireDefault(require("../../extension/render/render-comment-editor-element"));
-var _commentEditorToolbar = _interopRequireDefault(require("../../extension/toolbar/comment-editor-toolbar"));
-var _useComment = require("../../hooks/use-comment");
-var _useScrollContext = require("../../hooks/use-scroll-context");
-var _layout = require("../../layout");
-var _nodeId = _interopRequireDefault(require("../../node-id"));
-var _mdToSlate = _interopRequireDefault(require("../../slate-convert/md-to-slate"));
-var _slateToMd = _interopRequireDefault(require("../../slate-convert/slate-to-md"));
-var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
-var _eventHandler = _interopRequireDefault(require("../../utils/event-handler"));
+var _constants = require("../constants");
+var _context = _interopRequireDefault(require("../context"));
+var _useCursors = require("../cursor/use-cursors");
+var _decorates = require("../decorates");
+var _extension = require("../extension");
+var _constants2 = require("../extension/constants");
+var _core = require("../extension/core");
+var _renderCommentEditorElement = _interopRequireDefault(require("../extension/render/render-comment-editor-element"));
+var _commentEditorToolbar = _interopRequireDefault(require("../extension/toolbar/comment-editor-toolbar"));
+var _useComment = require("../hooks/use-comment");
+var _useScrollContext = require("../hooks/use-scroll-context");
+var _layout = require("../layout");
+var _nodeId = _interopRequireDefault(require("../node-id"));
+var _mdToSlate = _interopRequireDefault(require("../slate-convert/md-to-slate"));
+var _slateToMd = _interopRequireDefault(require("../slate-convert/slate-to-md"));
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+var _eventHandler = _interopRequireDefault(require("../utils/event-handler"));
+require("./comment-editor.css");
 const getSubmitTip = (type, content) => {
   if (content) return 'Save';
   return type === 'comment' ? 'Comment' : 'Reply';
@@ -38,7 +39,6 @@ const DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_sen
 const CommentEditor = _ref => {
   let {
     type,
-    className,
     content,
     commentContent,
     placeholder = DEFAULT_PLACEHOLDER,
@@ -56,7 +56,8 @@ const CommentEditor = _ref => {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const {
-    addParticipants
+    addParticipants,
+    className
   } = (0, _useComment.useComment)();
   const submitTip = (0, _react.useMemo)(() => getSubmitTip(type, content), [content, type]);
   const userInfo = _context.default.getUserInfo();
@@ -112,6 +113,8 @@ const CommentEditor = _ref => {
     if (!_slateReact.ReactEditor.isFocused(editor)) return;
     onSubmit(event);
   }, [editor, onSubmit]);
+
+  // addEventListener
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     const unsubscribePostComment = eventBus.subscribe(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
@@ -148,6 +151,8 @@ const CommentEditor = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setIsEditing]);
+
+  // set editor children
   (0, _react.useEffect)(() => {
     let children = (0, _mdToSlate.default)(content);
     if (commentContent) {
@@ -239,7 +244,9 @@ const CommentEditor = _ref => {
     width: "100%"
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-editor-user-name"
-  }, userInfo.name)), /*#__PURE__*/_react.default.createElement(_layout.EditorContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, userInfo.name)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-editor-content"
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: commentEditorContainerRef,

package/dist/basic-sdk/hooks/use-comment.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,181 +7,32 @@ Object.defineProperty(exports, "__esModule", {
 exports.useComment = exports.CommentProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
-var _constants = require("../comment/constants");
-var _useCommentMount = require("../comment/hooks/comment-hooks/use-comment-mount");
-var _notificationHooks = require("../comment/hooks/notification-hooks");
-var _commentReducer = require("../comment/reducer/comment-reducer");
-var _notificationReducer = require("../comment/reducer/notification-reducer");
-var _utils = require("../comment/utils");
-var _toast = _interopRequireDefault(require("../components/toast"));
-var _constants2 = require("../constants");
-var _model = require("../model");
-var _commonUtils = require("../utils/common-utils");
-var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+require("../assets/css/layout.css");
+require("../assets/css/default.css");
+require("../assets/css/sdoc-editor-article.css");
+require("../assets/css/sdoc-editor-plugins.css");
+require("../assets/css/sdoc-comment-editor-plugin.css");
+require("../assets/css/dropdown-menu.css");
 const CommentContext = /*#__PURE__*/_react.default.createContext(null);
 const CommentProvider = _ref => {
   let {
     children,
-    editor,
     pluginName = '',
     className = '',
     pluginEventBus,
     pluginEvent,
-    api,
-    onCloseCommentPanel
+    api
   } = _ref;
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const [collaborators, setCollaborators] = (0, _react.useState)([]);
-  const [participants, setParticipants] = (0, _react.useState)([]);
-  const [commentType, setCommentType] = (0, _react.useState)(_constants.COMMENT_TYPES.ALL);
-  const [commentList, setCommentList] = (0, _react.useState)([]);
-  const [commentsInfo, dispatch] = (0, _react.useReducer)(_commentReducer.commentReducer, _commentReducer.initCommentsInfo);
-  (0, _useCommentMount.useCommentsMount)(dispatch, api);
-  const [notificationsInfo, notificationsDispatch] = (0, _react.useReducer)(_notificationReducer.notificationReducer, _notificationReducer.initNotificationsInfo);
-  (0, _notificationHooks.useNotificationsMount)(dispatch, api, collaborators);
-  (0, _react.useEffect)(() => {
-    if (Object.keys(commentsInfo.element_comments_map).length) {
-      editor.element_comments_map = commentsInfo.element_comments_map;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [commentsInfo.element_comments_map]);
-  (0, _react.useEffect)(() => {
-    editor.notifications_map = {
-      ...notificationsInfo.notifications_map
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [notificationsInfo]);
-  (0, _react.useEffect)(() => {
-    const {
-      comment_list
-    } = commentsInfo;
-    if (commentType === _constants.COMMENT_TYPES.ALL) {
-      const commentList = comment_list.map(item => {
-        item.replies = item.replies.filter(reply => !['True', 'False'].includes(reply.reply));
-        return item;
-      });
-      setCommentList(commentList);
-    } else if (commentType === _constants.COMMENT_TYPES.RESOLVED) {
-      const commentList = comment_list.filter(item => item.resolved);
-      setCommentList(commentList);
-    } else if (commentType === _constants.COMMENT_TYPES.UNRESOLVED) {
-      const commentList = comment_list.filter(item => !item.resolved);
-      setCommentList(commentList);
-    } else if (commentType === _constants.COMMENT_TYPES.DOC) {
-      const commentList = comment_list.filter(comment => comment.detail.element_id === _constants.DOC_COMMENT_ELEMENT_ID);
-      setCommentList(commentList);
-    }
-  }, [commentType, commentsInfo]);
-
-  // Participants
-  const updateLocalParticipants = (0, _react.useCallback)(function () {
-    let added = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    if (!Array.isArray(added) || added.length === 0) return;
-    let newParticipants = participants.slice(0);
-    added.forEach(participant => {
-      const newParticipant = new _model.User(participant);
-      if (!newParticipants.find(item => item.username === newParticipant.username)) {
-        newParticipants.push(newParticipant);
-      }
-    });
-    setParticipants(newParticipants);
-  }, [participants]);
-  const deleteLocalParticipant = (0, _react.useCallback)(email => {
-    if (!participants.find(participant => participant.username === email)) return;
-    let newParticipants = participants.slice(0);
-    newParticipants = newParticipants.filter(participant => participant.username !== email);
-    setParticipants(newParticipants);
-  }, [participants]);
-  const addParticipants = (0, _react.useCallback)(otherEmail => {
-    if (participants.find(participant => participant.username === otherEmail)) return;
-    api.addParticipants([otherEmail]).then(res => {
-      const {
-        success
-      } = res.data;
-      updateLocalParticipants(success);
-    }).catch(error => {
-      const errorMessage = (0, _commonUtils.getErrorMsg)(error);
-      _toast.default.danger(t(errorMessage));
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [updateLocalParticipants, participants]);
-  const deleteParticipant = (0, _react.useCallback)(email => {
-    if (!participants.find(participant => participant.username === email)) return;
-    api.deleteParticipants(email).then(res => {
-      let newParticipants = participants.slice(0);
-      newParticipants = newParticipants.filter(participant => participant.username !== email);
-      setParticipants(newParticipants);
-    }).catch(error => {
-      const errorMessage = (0, _commonUtils.getErrorMsg)(error);
-      _toast.default.danger(t(errorMessage));
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [participants]);
-
-  // Notifications
-  const deleteUnseenNotifications = (0, _react.useCallback)(comment => {
-    let unseenCommentIds = [];
-    let unseenNotificationKeys = [];
-    const commentNotificationKey = (0, _utils.generatorNotificationKey)(comment.id);
-    const commentNotification = notificationsInfo.notifications_map[commentNotificationKey];
-    if (commentNotification) {
-      unseenNotificationKeys.push(commentNotification.key);
-      unseenCommentIds.push(commentNotification.id);
-    }
-    Array.isArray(comment.replies) && comment.replies.forEach(reply => {
-      const replyNotificationKey = (0, _utils.generatorNotificationKey)(reply.comment_id, reply.id);
-      const replyNotification = notificationsInfo.notifications_map[replyNotificationKey];
-      if (replyNotification) {
-        unseenNotificationKeys.push(replyNotification.key);
-        unseenCommentIds.push(replyNotification.id);
-      }
-    });
-    api.deleteUnseenNotifications(unseenCommentIds).then(res => {
-      notificationsDispatch({
-        type: _constants.DOC_NOTIFICATION_REDUCER_TYPE.DEL,
-        payload: unseenNotificationKeys
-      });
-    }).catch(error => {
-      //
-    });
-  }, [api, notificationsInfo.notifications_map]);
 
   // Mount
   (0, _react.useEffect)(() => {
-    // get participants
-    api.listParticipants().then(res => {
-      const participants = res.data.participant_list;
-      updateLocalParticipants(participants);
-    }).catch(error => {
-      console.log(error);
-    });
 
-    // get collaborators
-    api.listRelatedUsers().then(res => {
-      const collaborators = [];
-      res.data.related_users.forEach(user => {
-        const collaborator = new _model.User(user);
-        collaborators.push(collaborator);
-      });
-      setCollaborators(collaborators);
-    }).catch(error => {
-      console.log(error);
-    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
-  // Listening
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    const unsubscribeParticipantAdded = eventBus.subscribe(_constants2.INTERNAL_EVENT.PARTICIPANT_ADDED, updateLocalParticipants);
-    const unsubscribeParticipantRemoved = eventBus.subscribe(_constants2.INTERNAL_EVENT.PARTICIPANT_REMOVED, deleteLocalParticipant);
-    return () => {
-      unsubscribeParticipantAdded();
-      unsubscribeParticipantRemoved();
-    };
-  }, [updateLocalParticipants, deleteLocalParticipant]);
   return /*#__PURE__*/_react.default.createElement(CommentContext.Provider, {
     value: {
       pluginName,
@@ -190,18 +40,7 @@ const CommentProvider = _ref => {
       api,
       pluginEventBus,
       pluginEvent,
-      commentsInfo,
-      commentType,
-      commentList,
-      dispatch,
-      setCommentType,
-      onCloseCommentPanel,
-      collaborators,
-      notificationsInfo,
-      deleteUnseenNotifications,
-      addParticipants,
-      deleteParticipant,
-      participants
+      collaborators
     }
   }, children);
 };

package/dist/basic-sdk/index.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CommentLayout", {
+Object.defineProperty(exports, "CommentEditor", {
   enumerable: true,
   get: function () {
-    return _commentLayout.default;
+    return _commentEditor.default;
   }
 });
 Object.defineProperty(exports, "CommentProvider", {
@@ -148,26 +148,19 @@ Object.defineProperty(exports, "withNodeId", {
     return _nodeId.default;
   }
 });
-Object.defineProperty(exports, "withSocketIO", {
-  enumerable: true,
-  get: function () {
-    return _socket.withSocketIO;
-  }
-});
 var _fileLoading = _interopRequireDefault(require("./components/file-loading"));
 var _loading = _interopRequireDefault(require("./components/loading"));
 var _toast = _interopRequireDefault(require("./components/toast"));
 var _tooltip = _interopRequireDefault(require("./components/tooltip"));
 var _constants = require("./constants");
 var _context = _interopRequireDefault(require("./context"));
+var _commentEditor = _interopRequireDefault(require("./editor/comment-editor"));
 var _extension = require("./extension");
 var _dropdownMenuItem = _interopRequireDefault(require("./extension/commons/dropdown-menu-item"));
 var _menuShortcutIndicator = _interopRequireDefault(require("./extension/commons/menu-shortcut-indicator"));
 var _useComment = require("./hooks/use-comment");
-var _commentLayout = _interopRequireDefault(require("./layout/comment-layout"));
 var _nodeId = _interopRequireDefault(require("./node-id"));
 var _slateConvert = require("./slate-convert");
-var _socket = require("./socket");
 var _commonUtils = require("./utils/common-utils");
 var _eventBus = _interopRequireDefault(require("./utils/event-bus"));
 var _localStorageUtils = _interopRequireDefault(require("./utils/local-storage-utils"));

package/dist/index.js

@@ -22,18 +22,6 @@ Object.defineProperty(exports, "SeafileCommentEditor", {
     return _seafileCommentEditor.default;
   }
 });
-Object.defineProperty(exports, "createCommentEditor", {
-  enumerable: true,
-  get: function () {
-    return _basicSdk.createCommentEditor;
-  }
-});
-Object.defineProperty(exports, "withNodeId", {
-  enumerable: true,
-  get: function () {
-    return _basicSdk.withNodeId;
-  }
-});
 var _basicSdk = require("./basic-sdk");
 var _constants = require("./constants");
 var _seafileCommentEditor = _interopRequireDefault(require("./pages/seafile-comment-editor"));

package/dist/pages/seafile-comment-editor.js

@@ -11,25 +11,32 @@ var _basicSdk = require("../basic-sdk");
 var _errorBoundary = _interopRequireDefault(require("../components/error-boundary"));
 const SeafileCommentEditor = _ref => {
   let {
-    editor,
     pluginName = '',
     className = '',
+    type,
+    commentContent,
+    hiddenUserInfo,
+    insertContent,
+    hiddenComment,
+    onContentChange,
     pluginEventBus,
     pluginEvent,
-    api,
-    onCloseCommentPanel
+    api
   } = _ref;
   _basicSdk.context.init();
   return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, /*#__PURE__*/_react.default.createElement(_basicSdk.CommentProvider, {
-    editor: editor,
     pluginName: pluginName,
     className: className,
     pluginEventBus: pluginEventBus,
     pluginEvent: pluginEvent,
-    api: api,
-    onCloseCommentPanel: onCloseCommentPanel
-  }, /*#__PURE__*/_react.default.createElement(_basicSdk.CommentLayout, {
-    editor: editor
+    api: api
+  }, /*#__PURE__*/_react.default.createElement(_basicSdk.CommentEditor, {
+    type: type,
+    commentContent: commentContent,
+    hiddenUserInfo: hiddenUserInfo,
+    insertContent: insertContent,
+    hiddenComment: hiddenComment,
+    onContentChange: onContentChange
   })));
 };
 var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(SeafileCommentEditor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/comment-editor",
-  "version": "0.0.1-alpha.4",
+  "version": "0.0.1-alpha.5",
   "private": false,
   "description": "This is a comment editor",
   "main": "dist/index.js",

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

@@ -1,7 +0,0 @@
-.sdoc-editor-container .sdoc-editor-content.no-outline .sdoc-article-container {
-  margin: 0 auto !important;
-}
-
-html {
-  scrollbar-width: none;
-}

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

@@ -1,6 +0,0 @@
-.sdoc-share-permission {
-  font-size: 12px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: solid 1px rgba(0, 0, 0, 0.12);
-}