@seafile/sdoc-editor 0.5.47 → 0.5.49

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -28,7 +28,7 @@
   padding-left: 1.2em !important;
 }
 
-.sdoc-editor-container .article .list-container .sdoc-li-blod::marker {
+.sdoc-editor-container .article .list-container .sdoc-li-bold::marker {
   font-weight: bold;
 }
 
@@ -48,7 +48,7 @@
 }
 
 .sdoc-editor-container .article .sdoc-checkbox-container .sdoc-checkbox-input-wrapper .sdoc-checkbox-content-container {
-  word-break:normal;
+  word-break: normal;
   width: calc(100% - 1em);
 }
 
@@ -57,6 +57,7 @@
   position: relative;
   display: inline-block;
   padding: 6px 6px 6px 0;
+  margin: 0 0.15em;
 }
 
 .sdoc-editor-container .article .sdoc-image-inner {

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

@@ -71,7 +71,7 @@ const CommentItem = _ref => {
     updateCommentResolved(false);
   }, [updateCommentResolved]);
   const menuId = useMemo(() => "comment_".concat(comment.id), [comment]);
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "comment-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "comment-header"

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

@@ -20,7 +20,7 @@ const CommentItemReply = _ref => {
   const {
     notificationsInfo
   } = useNotificationContext();
-  const liRef = useRef(null);
+  const itemRef = 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('');
@@ -36,7 +36,8 @@ const CommentItemReply = _ref => {
   }, []);
   const transferHtml = async mdString => {
     const htmlString = await processor.process(mdString);
-    setEditorContent(String(htmlString));
+    const formatHtml = String(htmlString).replace(/\n */g, '');
+    setEditorContent(formatHtml);
   };
   useEffect(() => {
     transferHtml(reply.reply);
@@ -57,9 +58,9 @@ const CommentItemReply = _ref => {
     setIsEditing(false);
   }, [reply, updateReply]);
   const user = context.getUserInfo();
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "comment-item",
-    ref: liRef
+    ref: itemRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "comment-header"
   }, /*#__PURE__*/React.createElement("div", {
@@ -112,7 +113,7 @@ const CommentItemReply = _ref => {
     updateContent: updateContent,
     setIsEditing: setIsEditing
   }), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeletePopover, {
-    parentDom: liRef.current,
+    parentDom: itemRef.current,
     type: "reply",
     deleteConfirm: _deleteReply,
     setIsShowDeleteModal: setIsShowDeleteDialog,

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

@@ -6,7 +6,7 @@ const CommentItemResolvedReply = _ref => {
     reply,
     t
   } = _ref;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "comment-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "comment-header"

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

@@ -244,7 +244,7 @@ const CommentItemWrapper = _ref => {
     className: "sdocfont sdoc-comment-quote mr-2"
   }), /*#__PURE__*/React.createElement("div", {
     className: "comment-item-selected-text"
-  }, Node.string(element))), /*#__PURE__*/React.createElement("ul", {
+  }, Node.string(element))), /*#__PURE__*/React.createElement("div", {
     ref: listRef,
     className: "comment-item-list"
   }, /*#__PURE__*/React.createElement(CommentItemContent, {

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

@@ -3,7 +3,7 @@
   margin-top: 5px;
 }
 
-.sdoc-comment-list-container  .article.sdoc-comment-editor {
+.sdoc-comment-list-container .article.sdoc-comment-editor {
   font-size: 14px;
 }
 
@@ -57,12 +57,11 @@
   overflow-y: auto;
   margin: 0;
   padding: 0;
-  list-style: none;
 }
 
 .sdoc-comment-list-container .comment-item {
   position: relative;
-  padding: 16px 10px 0;
+  padding: 16px 16px 0;
   cursor: pointer;
 }
 
@@ -369,3 +368,11 @@
 .sdoc-article-container .sdoc-comment-list-container .comment-ui-container.active {
   padding: 16px;
 }
+
+/* Override seafile ui */
+.sdoc-comment-list-container .btn {
+  height: 30px;
+  line-height: 15px;
+  font-size: 14px;
+  font-weight: 500;
+}

package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js

@@ -4,6 +4,7 @@ import { getElementCommentCountTop } from '../../helper';
 import { eventStopPropagation } from '../../../utils/mouse-event';
 import { focusToCommentElement } from '../../utils';
 import { Z_INDEX } from '../../../constants';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
 const ElementCommentCount = _ref => {
   let {
     elementId,
@@ -13,16 +14,17 @@ const ElementCommentCount = _ref => {
   } = _ref;
   const element = getNodeById(editor.children, elementId);
   const [top, setTop] = useState(-9999);
+  const scrollRef = useScrollContext();
   const onClick = useCallback(event => {
     eventStopPropagation(event);
     focusToCommentElement(editor, element);
   }, [editor, element]);
   useEffect(() => {
     if (!element) return;
-    const scrollTop = 0;
+    const scrollTop = scrollRef.current.scrollTop || 0;
     const newTop = getElementCommentCountTop(editor, element, scrollTop);
     setTop(newTop);
-  }, [editor, elementId, element, isElementSelected]);
+  }, [editor, elementId, element, isElementSelected, scrollRef]);
   if (!element) return null;
   let style = {
     top

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

@@ -18,7 +18,7 @@ export const getCursorPosition = () => {
   let range = getSelectionRange();
   if (range) {
     const rect = range.getBoundingClientRect();
-    const headerHeight = 100;
+    const headerHeight = 93;
     x = rect.x || 0;
     y = rect.y - headerHeight + (rect.height - 24) / 2 || 0;
   }
@@ -59,5 +59,5 @@ export const getElementCommentCountTop = (editor, element, scrollTop) => {
     if (!minY) minY = y;
     minY = Math.min(minY, y);
   });
-  return minY - 100 + scrollTop; // 100: header height(56) + toolbar height(44)
+  return minY - 93 + scrollTop; // 100: header height(56) + toolbar height(37)
 };

package/dist/basic-sdk/extension/plugins/file-link/helpers.js

@@ -53,16 +53,8 @@ export const insertFileLink = (editor, text, uuid) => {
   if (selection == null) return;
   const isCollapsed = Range.isCollapsed(selection);
   if (isCollapsed) {
-    // Insert Spaces before and after filelinks for easy operation
-    editor.insertText(' ');
     const fileNode = generateFileNode(uuid, text);
     Transforms.insertNodes(editor, fileNode);
-
-    // Not being able to use insertText directly causes the added Spaces to be added to the linked text, as in the issue above, replaced by insertFragment
-    editor.insertFragment([{
-      id: slugid.nice(),
-      text: ' '
-    }]);
   } else {
     const selectedText = Editor.string(editor, selection); // Selected text
     if (selectedText !== text) {

package/dist/basic-sdk/extension/plugins/html/rules/text.js

@@ -2,8 +2,11 @@ import slugid from 'slugid';
 const textRule = (element, parseChild) => {
   const {
     nodeName,
-    nodeType
+    nodeType,
+    childNodes
   } = element;
+  // If the child node is not a text node, it is processed by the child node
+  if (childNodes.length && !((childNodes === null || childNodes === void 0 ? void 0 : childNodes[0]) instanceof Text)) return parseChild(childNodes);
   if (nodeName === 'SPAN') {
     return {
       id: slugid.nice(),

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

@@ -2,12 +2,14 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import urlJoin from 'url-join';
 import { Editor, Range, Transforms, Path, Node } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
+import slugId from 'slugid';
 import context from '../../../../context';
 import EventBus from '../../../utils/event-bus';
-import { generateEmptyElement, getNodeType, isTextNode, getParentNode, focusEditor, getSelectedElems } from '../../core';
+import { generateEmptyElement, getNodeType, isTextNode, getParentNode, focusEditor } from '../../core';
 import { isList } from '../../toolbar/side-toolbar/helpers';
 import { COMMENT_EDITOR, INTERNAL_EVENT } from '../../../constants';
 import { CODE_BLOCK, ELEMENT_TYPE, IMAGE, IMAGE_BLOCK, INSERT_POSITION } from '../../constants';
+import base64ToUnit8Array from '../../../../utils/base64-to-unit8array';
 export const isInsertImageMenuDisabled = (editor, readonly) => {
   if (readonly) return true;
   const {
@@ -178,4 +180,25 @@ export const selectImageWhenSelectPartial = (event, editor, imageNode, isImageSe
     }
   });
   focusEditor(editor, focusRange);
+};
+
+// Upload image when the image is pasted from the clipboard in base64
+export const handleBase64Image = (editor, path, imgData) => {
+  const unit8Array = base64ToUnit8Array(imgData.src);
+  const blob = new Blob([unit8Array.u8arr], {
+    type: unit8Array.mime
+  });
+  const file = new File([blob], "".concat(slugId.nice(), ".jpg"), {
+    type: unit8Array.mime
+  });
+  context.uploadLocalImage([file]).then(res => {
+    const _data = _objectSpread(_objectSpread({}, imgData), {}, {
+      src: res[0]
+    });
+    Transforms.setNodes(editor, {
+      data: _data
+    }, {
+      at: path
+    });
+  });
 };

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

@@ -4,7 +4,7 @@ import { ReactEditor, useSelected, useReadOnly } from '@seafile/slate-react';
 import { Transforms, Editor } from '@seafile/slate';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
-import { getImageURL, selectImageWhenSelectPartial, updateImage } from './helpers';
+import { getImageURL, handleBase64Image, selectImageWhenSelectPartial, updateImage } from './helpers';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
 import ImageHoverMenu from './hover-menu';
@@ -171,6 +171,10 @@ const Image = _ref => {
     }
   }, [data.src]);
   const onImageLoadError = useCallback(() => {
+    // Check is due to the image is pasted from the clipboard in base64
+    if (data.src.startsWith('data:image/jpeg;base64')) {
+      return handleBase64Image(editor, path, data);
+    }
     setIsShowImagePlaceholder(true);
     // External network images do not reload after failure to load
     if (!data.src.startsWith('http')) {

package/dist/basic-sdk/extension/plugins/index.js

@@ -18,6 +18,6 @@ import CalloutPlugin from './callout';
 import SearchReplacePlugin from './search-replace';
 import MentionPlugin from './mention';
 const Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin];
-const CommentPlugins = [TextPlugin, MarkDownPlugin, HtmlPlugin, ListPlugin, ImagePlugin, LinkPlugin, MentionPlugin];
+const CommentPlugins = [MarkDownPlugin, HtmlPlugin, ParagraphPlugin, TextPlugin, ListPlugin, ImagePlugin, LinkPlugin, MentionPlugin, BlockquotePlugin];
 export default Plugins;
 export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin, MentionPlugin, CommentPlugins };

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

@@ -33,12 +33,12 @@ const renderListItem = (props, editor) => {
     default:
       className = '';
   }
-  const isBlod = element.children[0].children.every(item => item.bold === true);
+  const isBold = element.children[0].children.every(item => item.bold === true);
   return /*#__PURE__*/React.createElement("li", Object.assign({
     "data-id": element.id
   }, attributes, {
     className: classnames(className, {
-      'sdoc-li-blod': isBlod
+      'sdoc-li-bold': isBold
     })
   }), children);
 };

package/dist/basic-sdk/extension/plugins/sdoc-link/helpers.js

@@ -60,14 +60,7 @@ export const insertSdocFileLink = (editor, text, uuid) => {
   removeShortCutSymbol(editor);
   const sdocFileNode = generateSdocFileNode(uuid, text);
   if (isCollapsed) {
-    // Insert Spaces before and after sdoclinks for easy operation
-    editor.insertText(' ');
     Transforms.insertNodes(editor, sdocFileNode);
-    // Not being able to use insertText directly causes the added Spaces to be added to the linked text, as in the issue above, replaced by insertFragment
-    editor.insertFragment([{
-      id: slugid.nice(),
-      text: ' '
-    }]);
   } else {
     const selectedText = Editor.string(editor, selection); // Selected text
     if (selectedText !== text) {

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

@@ -1,7 +1,7 @@
 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 { LINK, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, IMAGE, IMAGE_BLOCK, MENTION, MENTION_TEMP, BLOCKQUOTE } from '../constants';
+import { LinkPlugin, ListPlugin, ImagePlugin, ParagraphPlugin, MentionPlugin, BlockquotePlugin } from '../plugins';
 import { getParentNode } from '../core';
 const RenderCommentEditorCustomRenderElement = props => {
   const editor = useSlateStatic();
@@ -73,6 +73,11 @@ const RenderCommentEditorCustomRenderElement = props => {
         const [, renderMentionTemporaryInput] = MentionPlugin.renderElements;
         return renderMentionTemporaryInput(props, editor);
       }
+    case BLOCKQUOTE:
+      {
+        const [renderBlockquote] = BlockquotePlugin.renderElements;
+        return renderBlockquote(props, editor);
+      }
     default:
       {
         const [renderParagraph] = ParagraphPlugin.renderElements;

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

@@ -8,6 +8,7 @@ import ImageMenu from '../../plugins/image/menu';
 import EventBus from '../../../utils/event-bus';
 import LinkMenu from '../../plugins/link/menu';
 import PostCommentBtn from './post-comment';
+import QuoteMenu from '../../plugins/blockquote/menu';
 const CommentEditorToolbar = _ref => {
   let {
     editor,
@@ -25,6 +26,9 @@ const CommentEditorToolbar = _ref => {
   }, /*#__PURE__*/React.createElement(CommentEditorTextStyleMenuList, {
     editor: editor,
     readonly: readonly
+  }), /*#__PURE__*/React.createElement(QuoteMenu, {
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(ListMenu, {
     editor: editor,
     type: UNORDERED_LIST,

package/dist/utils/base64-to-unit8array.js

@@ -0,0 +1,15 @@
+const base64ToUnit8Array = base64 => {
+  const arr = base64.split(',');
+  const mime = arr[0].match(/:(.*?);/)[1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return {
+    u8arr,
+    mime
+  };
+};
+export default base64ToUnit8Array;

package/package.json

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