@seafile/comment-editor 0.0.1-alpha.75 → 0.0.1-alpha.76

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

@@ -30,11 +30,10 @@ 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';
-// };
-
+const getSubmitTip = (type, content) => {
+  if (content) return 'Save';
+  return type === 'comment' ? 'Comment' : 'Reply';
+};
 const DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
 const CommentEditor = _ref => {
   let {
@@ -47,223 +46,235 @@ const CommentEditor = _ref => {
     toolMenus = ['text_style', _constants2.BLOCKQUOTE, _constants2.UNORDERED_LIST, _constants2.ORDERED_LIST, _constants2.LINK, _constants2.IMAGE],
     closePanel
   } = _ref;
-  // const commentWrapperRef = useRef();
+  const commentWrapperRef = (0, _react.useRef)();
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
-  // const { className, userInfo, type, addParticipants } = useComment();
-  // const submitTip = useMemo(() => getSubmitTip(type, content), [content, type]);
-
-  // const document = useMemo(() => {
-  //   const cursor = {};
-  //   let elements = null;
-  //   elements = [generateEmptyElement(PARAGRAPH, { placeholder })];
-  //   return { elements, cursor };
-  // }, [placeholder]);
-
-  // const [slateValue, setSlateValue] = useState(document.elements);
-  // const commentEditorContainerRef = useRef(null);
-
-  // 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]);
-
-  // 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 onSubmit = useCallback((event) => {
-  //   event && event.stopPropagation();
-
-  //   const mdString = slateToMdString(editor.children);
-  //   if (mdString && mdString.trim()) insertContent(mdString);
-
-  //   addParticipants && addParticipants(userInfo.username);
-
-  //   editor.children = [generateEmptyElement(PARAGRAPH, { placeholder })];
-  //   Transforms.select(editor, Editor.start(editor, []));
-
-  //   onContentChange && onContentChange(null);
-  //   closePanel && closePanel();
-  // // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [editor, insertContent, addParticipants, placeholder, onContentChange, closePanel]);
-
-  // const onSubmitByEnterKey = useCallback((event) => {
-  //   if (!ReactEditor.isFocused(editor)) return;
-  //   onSubmit(event);
-  // }, [editor, onSubmit]);
-
-  // // addEventListener
-  // useEffect(() => {
-  //   const eventBus = EventBus.getInstance();
-  //   const unsubscribePostComment = eventBus.subscribe(INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
-
-  //   return () => {
-  //     unsubscribePostComment();
-  //   };
-  // }, [onSubmitByEnterKey]);
-
-  // const onCancel = useCallback((event) => {
-  //   event.stopPropagation();
-  //   const { type: eventType, keyCode, target } = event;
-  //   if (eventType === 'keydown' && keyCode !== KeyCodes.Esc) return;
-  //   if (eventType === 'click') {
-  //     const isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
-  //     const listContainer = window.document.querySelector('#global-comment-list-container');
-  //     const resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
-  //     const isClickOnListContainer = listContainer && listContainer.contains(target);
-  //     const isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
-  //     const isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
-  //     const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
-  //     if (isPreventCancel) return;
-  //   }
-  //   hiddenComment && hiddenComment(false);
-
-  //   if (onContentChange) {
-  //     if (editor.children.find(n => Node.string(n).trim())) {
-  //       onContentChange(slateToMdString(editor.children));
-  //     } else {
-  //       onContentChange(null);
-  //     }
-  //   }
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, []);
-
-  // // set editor children
-  // useEffect(() => {
-  //   let children = mdStringToSlate(content);
-  //   editor.children = children;
-  //   // Transforms.select(editor, Editor.end(editor, []));
-  // }, [editor, content]);
-
-  // // useMount: focus editor
-  // useEffect(() => {
-  //   const [firstNode] = editor.children;
-  //   if (firstNode) {
-  //     const [firstNodeFirstChild] = firstNode.children;
-
-  //     if (firstNodeFirstChild) {
-  //       const endOfFirstNode = Editor.end(editor, [0, 0]);
-  //       const range = {
-  //         anchor: endOfFirstNode,
-  //         focus: endOfFirstNode,
-  //       };
-  //       // focusEditor(editor, range);
-  //     }
-  //     // Force refresh to fix comment list
-  //     // setSlateValue([...editor.children]);
-  //   }
-  // // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, []);
-
-  // const handleFocusEditor = (e) => {
-  //   if (e.target === commentEditorContainerRef.current) {
-  //     const focusPoint = Editor.end(editor, []);
-  //     focusEditor(editor, focusPoint);
-  //   }
-  // };
-
-  // const handleScrollIntoView = useCallback((editor, domRange) => {
-  //   try {
-  //     const { selection } = editor;
-  //     // Do not scroll into view, when focus on image
-  //     const [imageNodeEntry] = Editor.nodes(editor, {
-  //       match: n => [IMAGE, IMAGE_BLOCK].includes(n.type),
-  //       at: selection
-  //     });
-  //     if (imageNodeEntry) return;
-  //     const focusedNode = Node.get(editor, selection.focus.path);
-  //     const domNode = ReactEditor.toDOMNode(editor, focusedNode);
-  //     if (!domNode) return;
-  //     scrollIntoView(domNode, { 'scrollMode': 'if-needed' });
-  //   } catch (error) {
-  //     //
-  //   }
-  // }, []);
-
-  // 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 onKeyDown = useCallback((event) => {
-  //   if (isHotkey('enter', event)) {
-  //     event.preventDefault();
-  //     const eventBus = EventBus.getInstance();
-  //     eventBus.dispatch(INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, event);
-  //     return;
-  //   }
-
-  //   if (isHotkey('shift+enter', event)) {
-  //     event.preventDefault();
-  //     Editor.insertBreak(editor);
-  //     return;
-  //   }
+  const {
+    className,
+    userInfo,
+    type,
+    addParticipants
+  } = (0, _useComment.useComment)();
+  const submitTip = (0, _react.useMemo)(() => getSubmitTip(type, content), [content, type]);
+  const document = (0, _react.useMemo)(() => {
+    const cursor = {};
+    let elements = null;
+    elements = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
+      placeholder
+    })];
+    return {
+      elements,
+      cursor
+    };
+  }, [placeholder]);
+  const [slateValue, setSlateValue] = (0, _react.useState)(document.elements);
+  const commentEditorContainerRef = (0, _react.useRef)(null);
+  const editor = (0, _react.useMemo)(() => {
+    const defaultEditor = (0, _extension.createCommentEditor)();
+    const newEditor = (0, _nodeId.default)(defaultEditor);
+    const {
+      cursors
+    } = document;
+    newEditor.cursors = cursors || {};
+    newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
+    newEditor.editorType = _constants.COMMENT_EDITOR;
+    return newEditor;
+  }, [document]);
+  const {
+    cursors
+  } = (0, _useCursors.useCursors)(editor);
+  const decorate = (0, _decorates.usePipDecorate)(editor);
+  // init eventHandler
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const eventProxy = (0, _react.useMemo)(() => new _eventHandler.default(editor), []);
+  const onSubmit = (0, _react.useCallback)(event => {
+    event && event.stopPropagation();
+    const mdString = (0, _slateToMd.default)(editor.children);
+    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);
+    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]);
 
-  //   eventProxy.onKeyDown(event);
+  // addEventListener
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribePostComment = eventBus.subscribe(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
+    return () => {
+      unsubscribePostComment();
+    };
+  }, [onSubmitByEnterKey]);
+  const onCancel = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    const {
+      type: eventType,
+      keyCode,
+      target
+    } = event;
+    if (eventType === 'keydown' && keyCode !== _constants.KeyCodes.Esc) return;
+    if (eventType === 'click') {
+      const isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
+      const listContainer = window.document.querySelector('#global-comment-list-container');
+      const resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
+      const isClickOnListContainer = listContainer && listContainer.contains(target);
+      const isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
+      const isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
+      const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
+      if (isPreventCancel) return;
+    }
+    hiddenComment && hiddenComment(false);
+    if (onContentChange) {
+      if (editor.children.find(n => _slate.Node.string(n).trim())) {
+        onContentChange((0, _slateToMd.default)(editor.children));
+      } else {
+        onContentChange(null);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  // }, [eventProxy, editor]);
+  // set editor children
+  (0, _react.useEffect)(() => {
+    let children = (0, _mdToSlate.default)(content);
+    editor.children = children;
+    // Transforms.select(editor, Editor.end(editor, []));
+  }, [editor, content]);
 
+  // useMount: focus editor
+  (0, _react.useEffect)(() => {
+    const [firstNode] = editor.children;
+    if (firstNode) {
+      const [firstNodeFirstChild] = firstNode.children;
+      if (firstNodeFirstChild) {
+        const endOfFirstNode = _slate.Editor.end(editor, [0, 0]);
+        const range = {
+          anchor: endOfFirstNode,
+          focus: endOfFirstNode
+        };
+        // focusEditor(editor, range);
+      }
+      // Force refresh to fix comment list
+      // setSlateValue([...editor.children]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleFocusEditor = e => {
+    if (e.target === commentEditorContainerRef.current) {
+      const focusPoint = _slate.Editor.end(editor, []);
+      (0, _core.focusEditor)(editor, focusPoint);
+    }
+  };
+  const handleScrollIntoView = (0, _react.useCallback)((editor, domRange) => {
+    try {
+      const {
+        selection
+      } = editor;
+      // Do not scroll into view, when focus on image
+      const [imageNodeEntry] = _slate.Editor.nodes(editor, {
+        match: n => [_constants2.IMAGE, _constants2.IMAGE_BLOCK].includes(n.type),
+        at: selection
+      });
+      if (imageNodeEntry) return;
+      const focusedNode = _slate.Node.get(editor, selection.focus.path);
+      const domNode = _slateReact.ReactEditor.toDOMNode(editor, focusedNode);
+      if (!domNode) return;
+      (0, _scrollIntoViewIfNeeded.default)(domNode, {
+        'scrollMode': 'if-needed'
+      });
+    } catch (error) {
+      //
+    }
+  }, []);
+  const onMouseDown = (0, _react.useCallback)(event => {
+    if (event.button === 0) {
+      // Compatible with the editor which unload table plugin
+      editor.reSetTableSelectedRange && editor.reSetTableSelectedRange();
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if ((0, _isHotkey.default)('enter', event)) {
+      event.preventDefault();
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, event);
+      return;
+    }
+    if ((0, _isHotkey.default)('shift+enter', event)) {
+      event.preventDefault();
+      _slate.Editor.insertBreak(editor);
+      return;
+    }
+    eventProxy.onKeyDown(event);
+  }, [eventProxy, editor]);
   console.log('toolMenus', toolMenus);
-  return /*#__PURE__*/_react.default.createElement("div", null, "123")
-  // <div className={classNames('comment-editor-wrapper', className)} ref={commentWrapperRef}>
-  //   {type === 'comment' && !hiddenUserInfo && (
-  //     <div className="comment-editor-user-info">
-  //       <div className="comment-editor-user-img">
-  //         <img src={userInfo.avatar_url} alt="" height="100%" width="100%" />
-  //       </div>
-  //       <div className="comment-editor-user-name">{userInfo.name}</div>
-  //     </div>
-  //   )}
-  //   <div className='comment-editor-container'>
-  //     <div className="comment-editor-content">
-  //       <div ref={commentEditorContainerRef} className='article comment-editor' onClick={handleFocusEditor} >
-  //         <ScrollContext.Provider value={{ scrollRef: commentEditorContainerRef }}>
-  //           <Slate editor={editor} value={slateValue} onChange={setSlateValue}>
-  //             <Editable
-  //               id='sdoc-editor'
-  //               scrollSelectionIntoView={handleScrollIntoView}
-  //               cursors={cursors}
-  //               renderElement={(props) => RenderCommentEditorCustomRenderElement({ ...props, commentType: type })}
-  //               renderLeaf={renderLeaf}
-  //               onMouseDown={onMouseDown}
-  //               decorate={decorate}
-  //               onCut={eventProxy.onCut}
-  //               onCopy={eventProxy.onCopy}
-  //               onCompositionStart={eventProxy.onCompositionStart}
-  //               onCompositionUpdate={eventProxy.onCompositionUpdate}
-  //               onCompositionEnd={eventProxy.onCompositionEnd}
-  //               onKeyDown={onKeyDown}
-  //               onBeforeInput={eventProxy.onBeforeInput}
-  //             />
-  //           </Slate>
-  //         </ScrollContext.Provider>
-  //       </div>
-  //       <CommentEditorToolbar
-  //         editor={editor}
-  //         toolMenus={toolMenus}
-  //         onSubmit={onSubmit}
-  //         submitBtnText={t(submitTip)}
-  //         onCancel={onCancel}
-  //       />
-  //     </div>
-  //   </div>
-  //   {toolMenus.includes(IMAGE) && <InsertElementDialog editor={editor} />}
-  // </div>
-  ;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('comment-editor-wrapper', className),
+    ref: commentWrapperRef
+  }, type === 'comment' && !hiddenUserInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-user-info"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-user-img"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: userInfo.avatar_url,
+    alt: "",
+    height: "100%",
+    width: "100%"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-user-name"
+  }, 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,
+    className: "article comment-editor",
+    onClick: handleFocusEditor
+  }, /*#__PURE__*/_react.default.createElement(_useScrollContext.ScrollContext.Provider, {
+    value: {
+      scrollRef: commentEditorContainerRef
+    }
+  }, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
+    editor: editor,
+    value: slateValue,
+    onChange: setSlateValue
+  }, /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
+    id: "sdoc-editor",
+    scrollSelectionIntoView: handleScrollIntoView,
+    cursors: cursors,
+    renderElement: props => (0, _renderCommentEditorElement.default)({
+      ...props,
+      commentType: type
+    }),
+    renderLeaf: _extension.renderLeaf,
+    onMouseDown: onMouseDown,
+    decorate: decorate,
+    onCut: eventProxy.onCut,
+    onCopy: eventProxy.onCopy,
+    onCompositionStart: eventProxy.onCompositionStart,
+    onCompositionUpdate: eventProxy.onCompositionUpdate,
+    onCompositionEnd: eventProxy.onCompositionEnd,
+    onKeyDown: onKeyDown,
+    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/package.json

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