@seafile/sdoc-editor 0.5.5 → 0.5.7

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

@@ -119,7 +119,7 @@
   display: flex;
   flex: 1;
   position: relative;
-  height: 44px;
+  height: 32px;
   align-items: center;
   user-select: none;
   position: relative;

package/dist/basic-sdk/assets/css/sdoc-comment-editor-plugin.css

@@ -0,0 +1,7 @@
+.sdoc-comment-editor-wrapper .sdoc-comment-editor .list-container {
+  padding-left: 1em !important;
+}
+
+.sdoc-comment-editor .list-container li p {
+  margin: 0 !important;
+}

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

@@ -117,6 +117,7 @@ const CommentEditor = _ref => {
     className: "comment-editor-user-name"
   }, userInfo.name)), /*#__PURE__*/React.createElement(SdocCommentEditor, {
     editor: editor,
+    type: type,
     document: document
   }), /*#__PURE__*/React.createElement("div", {
     className: "comment-operations"

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

@@ -85,6 +85,11 @@
   word-wrap: break-word;
 }
 
+.comment-item .comment-content ol,
+.comment-item .comment-content ul {
+  padding-left: 1em;
+}
+
 .sdoc-comment-list-container .comment-header .comment-author__avatar {
   display: flex;
   align-items: center;
@@ -212,8 +217,8 @@
 .comment-editor-wrapper .sdoc-comment-editor-wrapper .article.sdoc-comment-editor {
   width: 365px;
   padding: 0 5px;
-  min-height: 75px;
-  max-height: 80px;
+  min-height: 130px;
+  max-height: 130px;
   box-shadow: none;
   overflow-y: auto;
   overflow-x: hidden;

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

@@ -1,7 +1,8 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 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 { renderLeaf } from '../extension';
 import { getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from '../extension/core';
 import EventProxy from '../utils/event-handler';
 import { useCursors } from '../cursor/use-cursors';
@@ -11,11 +12,13 @@ import { getCursorPosition, getDomHeight, getDomMarginTop } from '../utils/dom-u
 import EventBus from '../utils/event-bus';
 import { useScrollContext } from '../hooks/use-scroll-context';
 import { IMAGE } from '../extension/constants';
+import RenderCommentEditorCustomRenderElement from '../extension/render/render-comment-editor-element';
 const CommentArticle = _ref => {
   let {
     editor,
     slateValue,
-    updateSlateValue
+    updateSlateValue,
+    type
   } = _ref;
   const {
     cursors
@@ -160,7 +163,9 @@ const CommentArticle = _ref => {
   }, /*#__PURE__*/React.createElement(Editable, {
     scrollSelectionIntoView: handleScrollIntoView,
     cursors: cursors,
-    renderElement: renderElement,
+    renderElement: props => RenderCommentEditorCustomRenderElement(_objectSpread(_objectSpread({}, props), {}, {
+      commentType: type
+    })),
     renderLeaf: renderLeaf,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,

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

@@ -19,7 +19,8 @@ const SdocCommentEditor = forwardRef((_ref, ref) => {
   let {
     editor: propsEditor,
     document,
-    isReloading
+    isReloading,
+    type
   } = _ref;
   const [slateValue, setSlateValue] = useState(document.children);
   const validEditor = propsEditor || useMemo(() => {
@@ -98,6 +99,7 @@ const SdocCommentEditor = forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "article sdoc-comment-editor"
   }, /*#__PURE__*/React.createElement(CommentArticle, {
+    type: type,
     editor: validEditor,
     slateValue: slateValue,
     updateSlateValue: setSlateValue

package/dist/basic-sdk/extension/core/utils/index.js

@@ -41,7 +41,8 @@ export const generateEmptyElement = function (type) {
 };
 export function Placeholder(props) {
   const {
-    title
+    title,
+    top = 5
   } = props;
   const {
     t
@@ -49,7 +50,7 @@ export function Placeholder(props) {
   return /*#__PURE__*/React.createElement("span", {
     style: {
       position: 'absolute',
-      top: '5px',
+      top: "".concat(top, "px"),
       color: 'rgba(191,191,191,1)',
       pointerEvents: 'none',
       width: '100%',

package/dist/basic-sdk/extension/plugins/blockquote/plugin.js

@@ -67,13 +67,13 @@ const withBlockquote = editor => {
       if (currentLineIndex === 0 && isBlockAboveEmpty(newEditor)) {
         const emptyParagraph = generateEmptyElement(PARAGRAPH);
         Transforms.removeNodes(editor, {
-          at: currentLineEntry[1]
+          at: blockQuoteEntry[1]
         });
         Transforms.insertNodes(newEditor, emptyParagraph, {
           at: blockQuoteEntry[1]
         });
-        const previous = Path.previous(blockQuoteEntry[1]);
-        focusEditor(newEditor, Path.next(previous).concat(0));
+        const focusPoint = Editor.end(newEditor, blockQuoteEntry[1]);
+        focusEditor(newEditor, focusPoint);
         return;
       }
       // Merge with previous line when Select at the beginning of the line

package/dist/basic-sdk/extension/plugins/callout/helper.js

@@ -1,5 +1,5 @@
 import { Editor, Node, Path, Transforms } from '@seafile/slate';
-import { CALL_OUT } from '../../constants/element-type';
+import { CALL_OUT, PARAGRAPH } from '../../constants/element-type';
 import { focusEditor, generateEmptyElement, getSelectedElems, isRangeAcrossBlocks } from '../../core';
 import { CALLOUT_ALLOWED_INSIDE_TYPES, CALLOUT_COLOR_MAP } from './constant';
 export const isMenuActive = editor => {
@@ -110,7 +110,10 @@ export const getCalloutEntry = function (editor) {
 export const isCalloutContentEmpty = calloutEntry => {
   const [calloutNode] = calloutEntry;
   const contentString = Node.string(calloutNode);
-  return calloutNode.children.length === 1 && contentString.length === 0;
+  const calloutChildren = calloutNode.children;
+  const isSingleParagraph = calloutChildren.length === 1 && calloutChildren[0].type === PARAGRAPH;
+  const isEmptyContent = contentString.length === 0;
+  return isSingleParagraph && isEmptyContent;
 };
 
 // Insert a new element at new line in callout after current path

package/dist/basic-sdk/extension/plugins/paragraph/index.css

@@ -0,0 +1,4 @@
+.sdoc-comment-editor-paragraph {
+  margin: 0.8em 0 !important;
+  padding: 0 !important;
+}

package/dist/basic-sdk/extension/plugins/paragraph/render-elem.js

@@ -4,19 +4,23 @@ import { Node } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
 import { Placeholder } from '../../core';
 import { isEmptyNode } from './helper';
+import { COMMENT_EDITOR } from '../../../constants';
+import './index.css';
 const PLACEHOLDER = 'Please_enter_text';
 const Paragraph = _ref => {
   let {
     isComposing,
     element,
     attributes,
-    children
+    children,
+    className,
+    placeholder = PLACEHOLDER
   } = _ref;
   const {
-    indent,
-    placeholder = PLACEHOLDER
+    indent
   } = element;
   const editor = useSlateStatic();
+  const isCommentEditor = editor.editorType === COMMENT_EDITOR;
   let isShowPlaceHolder = false;
   if (editor.children.length === 1) {
     const node = editor.children[0];
@@ -37,9 +41,11 @@ const Paragraph = _ref => {
   }, attributes, {
     style: _objectSpread({
       position: isShowPlaceHolder ? 'relative' : ''
-    }, style)
+    }, style),
+    className: className
   }), children, isShowPlaceHolder && /*#__PURE__*/React.createElement(Placeholder, {
-    title: placeholder
+    title: placeholder,
+    top: isCommentEditor ? 0 : 5
   }));
 };
 export const renderParagraph = props => {

package/dist/basic-sdk/extension/render/render-comment-editor-element.js

@@ -0,0 +1,83 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useReadOnly, useSlateStatic } from '@seafile/slate-react';
+import { LINK, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, IMAGE, IMAGE_BLOCK, MENTION, MENTION_TEMP } from '../constants';
+import { LinkPlugin, ListPlugin, ImagePlugin, ParagraphPlugin, MentionPlugin } from '../plugins';
+import { getParentNode } from '../core';
+const RenderCommentEditorCustomRenderElement = props => {
+  const editor = useSlateStatic();
+  const readonly = useReadOnly();
+  const {
+    element,
+    commentType
+  } = props;
+  switch (element.type) {
+    case PARAGRAPH:
+      {
+        const parentNode = getParentNode(editor.children, element.id);
+        const _props = _objectSpread(_objectSpread({}, props), {}, {
+          className: 'sdoc-comment-editor-paragraph'
+        });
+        if (parentNode && parentNode.type === LIST_ITEM) {
+          const [renderParagraph] = ParagraphPlugin.renderElements;
+          return renderParagraph(_props);
+        }
+        const placeholder = commentType === 'comment' ? 'Enter_a_comment' : 'Enter_a_reply';
+        const [renderParagraph] = ParagraphPlugin.renderElements;
+        return renderParagraph(_objectSpread(_objectSpread({}, _props), {}, {
+          placeholder
+        }));
+      }
+    case LINK:
+      {
+        const [renderLink] = LinkPlugin.renderElements;
+        return renderLink(props, editor, readonly);
+      }
+    case ORDERED_LIST:
+    case UNORDERED_LIST:
+      {
+        const [renderList] = ListPlugin.renderElements;
+        return renderList(props, editor);
+      }
+    case LIST_ITEM:
+      {
+        const [, renderListItem] = ListPlugin.renderElements;
+        return renderListItem(props, editor);
+      }
+    case IMAGE:
+      {
+        var _editor$element_comme;
+        const parentNode = getParentNode(editor.children, element.id);
+        const comments = ((_editor$element_comme = editor.element_comments_map) === null || _editor$element_comme === void 0 ? void 0 : _editor$element_comme[parentNode.id]) || [];
+        const unresolvedComments = comments && comments.filter(item => !item.resolved);
+        let leaf = {};
+        if (unresolvedComments && unresolvedComments.length > 0) {
+          leaf['computed_background_color'] = 'rgba(129, 237, 247, 0.5)';
+        }
+        const [renderImage] = ImagePlugin.renderElements;
+        return renderImage(_objectSpread(_objectSpread({}, props), {}, {
+          leaf
+        }), editor);
+      }
+    case IMAGE_BLOCK:
+      {
+        const [, renderImageBlock] = ImagePlugin.renderElements;
+        return renderImageBlock(_objectSpread({}, props), editor);
+      }
+    case MENTION:
+      {
+        const [renderMention] = MentionPlugin.renderElements;
+        return renderMention(props, editor);
+      }
+    case MENTION_TEMP:
+      {
+        const [, renderMentionTemporaryInput] = MentionPlugin.renderElements;
+        return renderMentionTemporaryInput(props, editor);
+      }
+    default:
+      {
+        const [renderParagraph] = ParagraphPlugin.renderElements;
+        return renderParagraph(props);
+      }
+  }
+};
+export default RenderCommentEditorCustomRenderElement;

package/dist/basic-sdk/layout/editor-container.js

@@ -4,6 +4,7 @@ import { isMobile } from '../../utils';
 import '../assets/css/default.css';
 import '../assets/css/layout.css';
 import '../assets/css/sdoc-editor-plugins.css';
+import '../assets/css/sdoc-comment-editor-plugin.css';
 import '../assets/css/dropdown-menu.css';
 const EditorContainer = _ref => {
   let {

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

@@ -17,6 +17,19 @@ const generatorDiffTextElement = function (textElement, diffType) {
     [diffType]: true
   }, style);
 };
+export const getTopLevelChanges = changes => {
+  const topLevelChanges = [];
+  changes.forEach(item => {
+    let dom = document.querySelectorAll("[data-id=".concat(item, "]"))[0];
+    while (((_dom = dom) === null || _dom === void 0 ? void 0 : (_dom$dataset = _dom.dataset) === null || _dom$dataset === void 0 ? void 0 : _dom$dataset.root) !== 'true') {
+      var _dom, _dom$dataset, _dom2;
+      if (!((_dom2 = dom) === null || _dom2 === void 0 ? void 0 : _dom2.parentNode)) break;
+      dom = dom.parentNode;
+    }
+    topLevelChanges.push(dom.dataset.id);
+  });
+  return Array.from(new Set(topLevelChanges));
+};
 
 // Depth facilitates each child node, adding diffType to each end node
 const generatorDiffElement = function (element, diffType) {

package/dist/components/doc-operations/revision-operations/changes-count/index.js

@@ -1,6 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '../../../tooltip';
+import { getTopLevelChanges } from '../../../../basic-sdk/utils/diff';
 import './index.css';
 const ChangesCount = _ref => {
   let {
@@ -10,9 +11,18 @@ const ChangesCount = _ref => {
     t
   } = useTranslation();
   const [currentDiffIndex, setDiffIndex] = useState(0);
+  const [topLevelChanges, setTopLevelChanges] = useState([]);
+  useEffect(() => {
+    if (changes.length !== 0) {
+      queueMicrotask(() => {
+        const topLevelChanges = getTopLevelChanges(changes);
+        setTopLevelChanges([...topLevelChanges]);
+      });
+    }
+  }, [changes]);
   const jumpToElement = useCallback(currentDiffIndex => {
     setDiffIndex(currentDiffIndex);
-    const change = changes[currentDiffIndex];
+    const change = topLevelChanges[currentDiffIndex];
     const changeElement = document.querySelectorAll("[data-id=".concat(change, "]"))[0];
     if (changeElement) {
       const scrollContainer = document.getElementById('sdoc-scroll-container');
@@ -22,31 +32,31 @@ const ChangesCount = _ref => {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [changes, currentDiffIndex]);
+  }, [topLevelChanges, currentDiffIndex]);
   const lastChange = useCallback(() => {
     if (currentDiffIndex === 0) {
-      jumpToElement(changes.length - 1);
+      jumpToElement(topLevelChanges.length - 1);
       return;
     }
     jumpToElement(currentDiffIndex - 1);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [changes, currentDiffIndex]);
+  }, [topLevelChanges, currentDiffIndex]);
   const nextChange = useCallback(() => {
-    if (currentDiffIndex === changes.length - 1) {
+    if (currentDiffIndex === topLevelChanges.length - 1) {
       jumpToElement(0);
       return;
     }
     jumpToElement(currentDiffIndex + 1);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [changes, currentDiffIndex]);
-  if (!Array.isArray(changes) || changes.length === 0) {
+  }, [topLevelChanges, currentDiffIndex]);
+  if (!Array.isArray(topLevelChanges) || topLevelChanges.length === 0) {
     return /*#__PURE__*/React.createElement("div", {
       className: "sdoc-revision-changes-container d-flex align-items-center pl-2 pr-2 ml-4"
     }, t('No_changes'));
   }
-  const changesCount = changes.length;
+  const changesCount = topLevelChanges.length;
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-revision-changes-container d-flex align-items-center ml-4"
   }, /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",