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

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/context.js

@@ -11,12 +11,12 @@ var _sdocServerApi = _interopRequireDefault(require("./api/sdoc-server-api"));
 var _seafileApi = _interopRequireDefault(require("./api/seafile-api"));
 class Context {
   constructor() {
-    (0, _defineProperty2.default)(this, "initSettings", () => {
-      this.settings = window.seafile ? window.seafile : window.seafileConfig;
+    (0, _defineProperty2.default)(this, "initSettings", settings => {
+      this.settings = settings ? settings : window.seafile ? window.seafile : window.seafileConfig;
       const {
-        name,
-        username,
-        avatarURL
+        name = '',
+        username = '',
+        avatarURL = ''
       } = this.settings;
       const userInfo = {
         name,
@@ -24,13 +24,6 @@ class Context {
         avatar_url: avatarURL
       };
       this.user = userInfo;
-      if (this.settings['isSdocRevision']) {
-        const repoID = this.getSetting('repoID');
-        const siteRoot = this.getSetting('siteRoot');
-        const originFilePath = this.getSetting('originFilePath');
-        const originFileURL = `${siteRoot}lib/${repoID}/file${originFilePath}`;
-        this.settings['originFileURL'] = originFileURL;
-      }
     });
     (0, _defineProperty2.default)(this, "uploadLocalImage", imageFiles => {
       const docUuid = this.getSetting('docUuid');
@@ -55,15 +48,9 @@ class Context {
     this.api = null;
     this.config = null;
   }
-  init() {
-    this.initSettings(); // lazy init context class
-    // const server = this.getSetting('serviceUrl');
-    // const token = this.getSetting('accessToken');
-    // this.api = new SeafileAPI(server, token);
-    // const isOpenSocket = this.getSetting('isOpenSocket');
-    // if (isOpenSocket) {
-    //   this.sdocServerApi = new SDocServerApi(this.settings);
-    // }
+  init(settings, api) {
+    this.initSettings(settings);
+    this.api = api;
   }
   getSettings() {
     return this.settings;

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,23 @@ 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 _useCursors = require("../cursor/use-cursors");
+var _decorates = require("../decorates");
+var _extension = require("../extension");
+var _insertElementDialog = _interopRequireDefault(require("../extension/commons/insert-element-dialog"));
+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 _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';
@@ -37,29 +37,26 @@ const getSubmitTip = (type, content) => {
 const DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
 const CommentEditor = _ref => {
   let {
-    type,
-    className,
     content,
-    commentContent,
     placeholder = DEFAULT_PLACEHOLDER,
     insertContent,
-    updateContent,
-    setIsEditing,
+    onContentChange,
     hiddenComment,
     hiddenUserInfo,
-    onContentChange,
-    isContextComment,
-    closeComment
+    toolMenus = ['text_style', _constants2.BLOCKQUOTE, _constants2.UNORDERED_LIST, _constants2.ORDERED_LIST, _constants2.LINK, _constants2.IMAGE],
+    closePanel
   } = _ref;
   const commentWrapperRef = (0, _react.useRef)();
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const {
+    className,
+    userInfo,
+    type,
     addParticipants
   } = (0, _useComment.useComment)();
   const submitTip = (0, _react.useMemo)(() => getSubmitTip(type, content), [content, type]);
-  const userInfo = _context.default.getUserInfo();
   const document = (0, _react.useMemo)(() => {
     const cursor = {};
     let elements = null;
@@ -91,27 +88,25 @@ const CommentEditor = _ref => {
   // init eventHandler
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const eventProxy = (0, _react.useMemo)(() => new _eventHandler.default(editor), []);
-  const updateValue = (0, _react.useCallback)(value => {
-    if (!value || value.trim() === '') return;
-    if (!content) return insertContent(value);
-    updateContent && updateContent(value);
-  }, [content, insertContent, updateContent]);
   const onSubmit = (0, _react.useCallback)(event => {
     event && event.stopPropagation();
     const mdString = (0, _slateToMd.default)(editor.children);
-    updateValue(mdString);
-    addParticipants(userInfo.username);
+    if (mdString && mdString.trim()) insertContent(mdString);
+    addParticipants && addParticipants(userInfo.username);
     editor.children = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
       placeholder
     })];
     _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
     onContentChange && onContentChange(null);
-    closeComment && closeComment();
-  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange, closeComment]);
+    closePanel && closePanel();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertContent, addParticipants, placeholder, onContentChange, closePanel]);
   const onSubmitByEnterKey = (0, _react.useCallback)(event => {
     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);
@@ -137,7 +132,6 @@ const CommentEditor = _ref => {
       const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
       if (isPreventCancel) return;
     }
-    setIsEditing && setIsEditing(false);
     hiddenComment && hiddenComment(false);
     if (onContentChange) {
       if (editor.children.find(n => _slate.Node.string(n).trim())) {
@@ -147,15 +141,14 @@ 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) {
-      children = (0, _mdToSlate.default)(commentContent);
-    }
     editor.children = children;
     _slate.Transforms.select(editor, _slate.Editor.end(editor, []));
-  }, [editor, content, commentContent]);
+  }, [editor, content]);
 
   // useMount: focus editor
   (0, _react.useEffect)(() => {
@@ -225,6 +218,7 @@ const CommentEditor = _ref => {
     }
     eventProxy.onKeyDown(event);
   }, [eventProxy, editor]);
+  console.log('toolMenus', toolMenus);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('comment-editor-wrapper', className),
     ref: commentWrapperRef
@@ -239,7 +233,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,
@@ -273,9 +269,12 @@ const CommentEditor = _ref => {
     onBeforeInput: eventProxy.onBeforeInput
   })))), /*#__PURE__*/_react.default.createElement(_commentEditorToolbar.default, {
     editor: editor,
+    toolMenus: toolMenus,
     onSubmit: onSubmit,
     submitBtnText: t(submitTip),
     onCancel: onCancel
-  }))));
+  }))), toolMenus.includes(_constants2.IMAGE) && /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
+    editor: editor
+  }));
 };
 var _default = exports.default = CommentEditor;

package/dist/basic-sdk/extension/plugins/image/helpers.js

@@ -291,7 +291,7 @@ const handleBase64Image = (editor, path, imgData) => {
   const file = new File([blob], `${_slugid.default.nice()}.jpg`, {
     type: unit8Array.mime
   });
-  _context.default.uploadLocalImage([file]).then(res => {
+  _context.default.api.uploadLocalImage([file]).then(res => {
     const _data = {
       ...imgData,
       src: res[0]

package/dist/basic-sdk/extension/plugins/image/use-copy-image.js

@@ -51,7 +51,7 @@ const useCopyImage = _ref => {
           const file = new File([blob], 'downloaded_image.png', {
             type: blob.type
           });
-          const imageUrl = await _context.default.uploadLocalImage([file]);
+          const imageUrl = await _context.default.api.uploadLocalImage([file]);
           if (imageUrl && imageUrl[0]) {
             updateImageNode(editor, element, imageUrl[0]);
           }

package/dist/basic-sdk/extension/plugins/image/use-upload-image.js

@@ -42,7 +42,7 @@ const useUploadImage = _ref => {
     const uploadCurrentImage = async () => {
       try {
         const fileItem = _imageCache.default.getImage(file_uuid);
-        const imageUrl = await _context.default.uploadLocalImage([fileItem]);
+        const imageUrl = await _context.default.api.uploadLocalImage([fileItem]);
         if (imageUrl && imageUrl[0]) {
           updateImageNode(editor, element, imageUrl[0]);
         }

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/index.js

@@ -22,33 +22,37 @@ const CommentEditorToolbar = _ref => {
     readonly = false,
     onSubmit,
     submitBtnText,
-    onCancel
+    onCancel,
+    toolMenus
   } = _ref;
   (0, _useSelectionUpdate.default)();
   const eventBus = _eventBus.default.getInstance();
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-editor-toolbar"
-  }, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
+    className: "comment-editor-toolbar",
+    style: {
+      justifyContent: toolMenus.length === 0 ? 'end' : ''
+    }
+  }, toolMenus.length !== 0 && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
     className: "menu-group comment-editor-menu-group"
-  }, /*#__PURE__*/_react.default.createElement(_comemntEditorMenu.default, {
+  }, toolMenus.includes('text_style') && /*#__PURE__*/_react.default.createElement(_comemntEditorMenu.default, {
     editor: editor,
     readonly: readonly
-  }), /*#__PURE__*/_react.default.createElement(_menu.default, {
+  }), toolMenus.includes(_constants.BLOCKQUOTE) && /*#__PURE__*/_react.default.createElement(_menu.default, {
     editor: editor,
     readonly: readonly
-  }), /*#__PURE__*/_react.default.createElement(_menu4.default, {
+  }), toolMenus.includes(_constants.UNORDERED_LIST) && /*#__PURE__*/_react.default.createElement(_menu4.default, {
     editor: editor,
     type: _constants.UNORDERED_LIST,
     readonly: readonly
-  }), /*#__PURE__*/_react.default.createElement(_menu4.default, {
+  }), toolMenus.includes(_constants.ORDERED_LIST) && /*#__PURE__*/_react.default.createElement(_menu4.default, {
     editor: editor,
     type: _constants.ORDERED_LIST,
     readonly: readonly
-  }), /*#__PURE__*/_react.default.createElement(_menu3.default, {
+  }), toolMenus.includes(_constants.LINK) && /*#__PURE__*/_react.default.createElement(_menu3.default, {
     editor: editor,
     readonly: readonly,
     eventBus: eventBus
-  }), /*#__PURE__*/_react.default.createElement(_menu2.default, {
+  }), toolMenus.includes(_constants.IMAGE) && /*#__PURE__*/_react.default.createElement(_menu2.default, {
     editor: editor,
     readonly: readonly,
     eventBus: eventBus