@seafile/sdoc-editor 0.5.30 → 0.5.31

package/dist/basic-sdk/comment/components/global-comment/index.js

@@ -1,8 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import dayjs from 'dayjs';
-import { useSlateStatic, ReactEditor } from '@seafile/slate-react';
-import { ElementPopover } from '../../../extension/commons';
 import EventBus from '../../../utils/event-bus';
 import useCommentList from '../../hooks/comment-hooks/use-comment-list';
 import CommentItemWrapper from '../comment-item-wrapper';
@@ -14,25 +12,37 @@ import { useCommentContext } from '../../hooks/comment-hooks/use-comment-context
 import GlobalCommentEditor from './global-comment-editor';
 import { INTERNAL_EVENT } from '../../../constants';
 import { getNodeById } from '../../../extension/core';
-import { useScrollContext } from '../../../hooks/use-scroll-context';
-import { focusToCommentElement } from '../../utils';
 import './index.css';
 const GlobalComment = _ref => {
   let {
-    deleteUnseenNotifications
+    deleteUnseenNotifications,
+    editor
   } = _ref;
   const [activeComment, setActiveComment] = useState(null);
+  const [isShowCommentList, setShowCommentList] = useState(false);
+  const [showEditor, setShowEditor] = useState(false);
+  const [draggerStyle, setDraggerStyle] = useState({});
   const commentRef = useRef(null);
   const contentRef = useRef(null);
+  const commentDrawerRef = useRef(null);
+  const isResizingRef = useRef(false);
+  const commentResizeHandler = useRef(null);
   const {
     commentList,
     commentType,
     setCommentType
   } = useCommentList();
-  const [isShowCommentList, setShowCommentList] = useState(false);
-  const [showEditor, setShowEditor] = useState(false);
-  const editor = useSlateStatic();
-  const scrollRef = useScrollContext();
+  const setArticleContainerStyle = useCallback(() => {
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENT.OUTLINE_STATE_CHANGED, {
+      scrollIntoArticle: true
+    });
+  }, []);
+  useEffect(() => {
+    if (isShowCommentList) {
+      setArticleContainerStyle();
+    }
+  }, [isShowCommentList, setArticleContainerStyle]);
   const toggle = useCallback(() => {
     if (isShowCommentList) {
       setActiveComment(null);
@@ -42,26 +52,52 @@ const GlobalComment = _ref => {
     }
     setShowCommentList(true);
   }, [isShowCommentList]);
-  useEffect(() => {
-    if (!isShowCommentList) return;
-    const toggleOuterSide = e => {
-      const commentWrapper = commentRef.current;
-      const clickIsInComment = commentWrapper && commentWrapper.contains(e.target) && commentWrapper !== e.target;
-      if (clickIsInComment) return;
-      toggle();
-    };
-    document.addEventListener('click', toggleOuterSide);
-    return () => {
-      document.removeEventListener('click', toggleOuterSide);
-    };
-  }, [isShowCommentList, toggle]);
+  const handleHideDragger = useCallback(event => {
+    if (isResizingRef.current) return;
+    setDraggerStyle({
+      display: 'none'
+    });
+  }, []);
+  const handleResizeEnd = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    isResizingRef.current = false;
+    document.removeEventListener('mouseup', handleResizeEnd);
+    handleHideDragger();
+  }, [handleHideDragger]);
+  const handleResizing = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const commentDrawer = commentDrawerRef.current;
+    if (isResizingRef.current && commentDrawer) {
+      let width = commentDrawer.offsetWidth - e.movementX;
+      // Limit the width of the comment drawer
+      width = Math.min(width, 620);
+      width = Math.max(width, 360);
+      commentDrawer.style.width = "".concat(width, "px");
+      const isShrink = e.movementX > 0;
+      setArticleContainerStyle({
+        width,
+        isShrink
+      });
+    }
+  }, [setArticleContainerStyle]);
+  const handleResizeStart = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    isResizingRef.current = true;
+    document.addEventListener('mouseup', handleResizeEnd);
+    document.addEventListener('mousemove', handleResizing);
+  }, [handleResizeEnd, handleResizing]);
   useEffect(() => {
     const eventBus = EventBus.getInstance();
     const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.COMMENT_LIST_CLICK, toggle);
     return () => {
       unsubscribe();
+      document.removeEventListener('mousemove', handleResizing);
+      eventBus.dispatch(INTERNAL_EVENT.OUTLINE_STATE_CHANGED);
     };
-  }, [toggle]);
+  }, [handleResizing, toggle]);
   const updateScrollPosition = useCallback(() => {
     const resolvedDom = document.querySelector('.sdoc-resolved');
     contentRef.current.scrollTo({
@@ -78,10 +114,7 @@ const GlobalComment = _ref => {
     deleteUnseenNotifications && deleteUnseenNotifications(comment);
     if (comment.detail.element_id === DOC_COMMENT_ELEMENT_ID) return;
     if (!element) return;
-    const elementDom = ReactEditor.toDOMNode(editor, element, scrollRef);
-    scrollRef.current.scrollTop = elementDom.offsetTop - scrollRef.current.clientHeight / 3;
-    focusToCommentElement(editor, element);
-  }, [activeComment, deleteUnseenNotifications, editor, scrollRef]);
+  }, [activeComment, deleteUnseenNotifications]);
   const {
     dispatch
   } = useCommentContext();
@@ -127,10 +160,40 @@ const GlobalComment = _ref => {
   const hiddenCommentEditor = useCallback(() => {
     setShowEditor(false);
   }, []);
+  const handleDisplayDragger = useCallback(event => {
+    if (isShowCommentList) {
+      const {
+        pageY
+      } = event;
+      const {
+        top
+      } = commentResizeHandler.current.getBoundingClientRect();
+      // 15 is the half height of the dragger
+      const topSize = pageY - top - 15;
+      setDraggerStyle({
+        top: "".concat(topSize, "px"),
+        display: 'block'
+      });
+    }
+  }, [isShowCommentList]);
+  const isClickCommentPanelBody = useCallback(event => {
+    if (contentRef.current && contentRef.current.contains(event.target)) return true;
+    return false;
+  }, []);
   if (!isShowCommentList) return null;
-  return /*#__PURE__*/React.createElement(ElementPopover, {
-    className: "global-comments-popover"
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-comment-drawer",
+    ref: commentDrawerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: commentResizeHandler,
+    className: "sdoc-comment-resize-handler",
+    onMouseDown: handleResizeStart,
+    onMouseLeave: handleHideDragger,
+    onMouseMove: handleDisplayDragger
   }, /*#__PURE__*/React.createElement("div", {
+    style: draggerStyle,
+    className: "sdoc-comment-move-dragger"
+  })), /*#__PURE__*/React.createElement("div", {
     ref: commentRef,
     className: "comments-panel-wrapper"
   }, /*#__PURE__*/React.createElement(GlobalCommentHeader, {
@@ -160,9 +223,11 @@ const GlobalComment = _ref => {
       isActive: isActive,
       onCommentClick: comment => onCommentClick(comment, element),
       hiddenComment: hiddenComment,
-      updateScrollPosition: updateScrollPosition
+      updateScrollPosition: updateScrollPosition,
+      isClickCommentPanelBody: isClickCommentPanelBody
     });
   }))), showEditor && /*#__PURE__*/React.createElement(GlobalCommentEditor, {
+    isClickCommentPanelBody: isClickCommentPanelBody,
     hiddenCommentEditor: hiddenCommentEditor,
     insertDocComment: insertDocComment
   }))));

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

@@ -2,12 +2,14 @@ import React, { useCallback } from 'react';
 import { useCommentContext } from './hooks/comment-hooks/use-comment-context';
 import { useNotificationContext } from './hooks/notification-hooks';
 import { EditorComment, GlobalComment } from './components';
-import { ParticipantsProvider } from './hooks/use-participants';
-import Provider from './provider';
 import { generatorNotificationKey } from './utils';
 import context from '../../context';
 import { DOC_NOTIFICATION_REDUCER_TYPE } from './constants';
-const CommentWrapperContainer = () => {
+const CommentWrapper = _ref => {
+  let {
+    type,
+    editor
+  } = _ref;
   const {
     commentsInfo
   } = useCommentContext();
@@ -45,13 +47,12 @@ const CommentWrapperContainer = () => {
     isFreezed
   } = context.getSettings('isFreezed');
   if (commentsInfo.isFetching) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isFreezed && /*#__PURE__*/React.createElement(EditorComment, {
-    deleteUnseenNotifications: deleteUnseenNotifications
-  }), /*#__PURE__*/React.createElement(GlobalComment, {
-    deleteUnseenNotifications: deleteUnseenNotifications
+  return /*#__PURE__*/React.createElement(React.Fragment, null, type === 'editor' && !isFreezed && /*#__PURE__*/React.createElement(EditorComment, {
+    deleteUnseenNotifications: deleteUnseenNotifications,
+    editor: editor
+  }), type === 'global' && /*#__PURE__*/React.createElement(GlobalComment, {
+    deleteUnseenNotifications: deleteUnseenNotifications,
+    editor: editor
   }));
 };
-const CommentWrapper = () => {
-  return /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement(ParticipantsProvider, null, /*#__PURE__*/React.createElement(CommentWrapperContainer, null)));
-};
 export default CommentWrapper;

package/dist/basic-sdk/comment/provider/comment-context-provider.js

@@ -1,16 +1,15 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useEffect, useReducer } from 'react';
-import { useSlateStatic } from '@seafile/slate-react';
 import { commentReducer, initCommentsInfo } from '../reducer/comment-reducer';
 import { useCommentsMount } from '../hooks/comment-hooks/use-comment-mount';
 import { CommentContext } from '../hooks/comment-hooks/use-comment-context';
 const CommentContextProvider = _ref => {
   let {
-    children
+    children,
+    editor
   } = _ref;
   const [commentsInfo, dispatch] = useReducer(commentReducer, initCommentsInfo);
   useCommentsMount(dispatch);
-  const editor = useSlateStatic();
   useEffect(() => {
     editor.element_comments_map = _objectSpread({}, commentsInfo.element_comments_map);
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/basic-sdk/comment/provider/index.js

@@ -3,8 +3,13 @@ import CommentContextProvider from './comment-context-provider';
 import NotificationContextProvider from './notification-context-provider';
 const Provider = _ref => {
   let {
-    children
+    children,
+    editor
   } = _ref;
-  return /*#__PURE__*/React.createElement(NotificationContextProvider, null, /*#__PURE__*/React.createElement(CommentContextProvider, null, children));
+  return /*#__PURE__*/React.createElement(NotificationContextProvider, {
+    editor: editor
+  }, /*#__PURE__*/React.createElement(CommentContextProvider, {
+    editor: editor
+  }, children));
 };
 export default Provider;

package/dist/basic-sdk/comment/provider/notification-context-provider.js

@@ -1,15 +1,14 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useEffect, useReducer } from 'react';
-import { useSlateStatic } from '@seafile/slate-react';
 import { notificationReducer, initNotificationsInfo } from '../reducer/notification-reducer';
 import { useNotificationsMount, NotificationContext } from '../hooks/notification-hooks';
 const NotificationContextProvider = _ref => {
   let {
-    children
+    children,
+    editor
   } = _ref;
   const [notificationsInfo, dispatch] = useReducer(notificationReducer, initNotificationsInfo);
   useNotificationsMount(dispatch);
-  const editor = useSlateStatic();
   useEffect(() => {
     editor.notifications_map = _objectSpread({}, notificationsInfo.notifications_map);
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -3,14 +3,11 @@ import React, { useCallback, useMemo } from 'react';
 import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
 import { Editor, Node, Range } from '@seafile/slate';
 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';
 import { INTERNAL_EVENT } from '../constants';
 import { usePipDecorate } from '../decorates';
-import { getCursorPosition, getDomHeight, getDomMarginTop } from '../utils/dom-utils';
 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 => {
@@ -36,103 +33,6 @@ const CommentArticle = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const scrollRef = useScrollContext();
-  const onKeyDown = useCallback(event => {
-    const {
-      scrollTop,
-      clientHeight
-    } = scrollRef.current;
-    eventProxy.onKeyDown(event);
-    if (event.key === 'ArrowLeft') {
-      if (!isSelectionAtBlockStart(editor)) return;
-    }
-    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-      if (scrollTop === 0) return;
-      let prevNode = getPrevNode(editor);
-      if (!prevNode) return;
-      const domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
-      const domHeight = getDomHeight(domNode);
-      const isScrollUp = true;
-      const {
-        y
-      } = getCursorPosition(isScrollUp);
-      if (y >= domHeight) return;
-      scrollRef.current.scroll(0, Math.max(0, scrollTop - domHeight));
-      return;
-    }
-    if (event.key === 'ArrowRight') {
-      if (!isSelectionAtBlockEnd(editor)) return;
-    }
-    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      let nextNode = getNextNode(editor);
-      if (!nextNode) return;
-      const domNode = ReactEditor.toDOMNode(editor, nextNode[0]);
-      const domHeight = getDomHeight(domNode);
-      const isScrollUp = false;
-      const {
-        y
-      } = getCursorPosition(isScrollUp);
-      if (clientHeight - y >= domHeight) return;
-      scrollRef.current.scroll(0, Math.max(0, scrollTop + domHeight));
-      return;
-    }
-    if (event.key === 'Backspace') {
-      const {
-        y
-      } = getCursorPosition();
-
-      // above viewport
-      if (y < 0) {
-        const newY = Math.abs(y);
-        if (isSelectionAtBlockStart(editor)) {
-          const prevNode = getPrevNode(editor);
-          if (!prevNode) return;
-          const domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
-          const domHeight = getDomHeight(domNode);
-          const node = getAboveBlockNode(editor);
-          if (!node) return;
-          const currentDomNode = ReactEditor.toDOMNode(editor, node[0]);
-          const marginTop = getDomMarginTop(currentDomNode);
-          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + domHeight + marginTop)));
-        } else {
-          scrollRef.current.scroll(0, Math.max(0, scrollTop - newY));
-        }
-        return;
-      }
-
-      // insider viewport
-      if (y >= 0 && y <= clientHeight) {
-        if (isSelectionAtBlockStart(editor)) {
-          const prevNode = getPrevNode(editor);
-          if (!prevNode) return;
-          const domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
-          const domHeight = getDomHeight(domNode);
-          if (y >= domHeight) return;
-          // Scroll up the height of the previous block
-          scrollRef.current.scroll(0, Math.max(0, scrollTop - domHeight));
-          return;
-        }
-      }
-
-      // below viewport
-      if (y > clientHeight) {
-        if (isSelectionAtBlockStart(editor)) {
-          // y: text top border
-          scrollRef.current.scroll(0, Math.max(0, scrollTop + (y - clientHeight)));
-        } else {
-          const marginBottom = 11.2;
-          const {
-            y: newY
-          } = getCursorPosition(false);
-          const rectBottom = newY + marginBottom; // text bottom border
-          scrollRef.current.scroll(0, Math.max(0, scrollTop + (rectBottom - clientHeight)));
-        }
-        return;
-      }
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scrollRef]);
   const handleScrollIntoView = useCallback((editor, domRange) => {
     try {
       const {
@@ -167,7 +67,6 @@ const CommentArticle = _ref => {
       commentType: type
     })),
     renderLeaf: renderLeaf,
-    onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     decorate: decorate,
     onCut: eventProxy.onCut,

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

@@ -177,7 +177,10 @@ const EditableArticle = _ref => {
     decorate: decorate,
     onCut: eventProxy.onCut,
     onCopy: eventProxy.onCopy
-  })), /*#__PURE__*/React.createElement(SideToolbar, null), isShowComment && /*#__PURE__*/React.createElement(CommentWrapper, null)));
+  })), /*#__PURE__*/React.createElement(SideToolbar, null), isShowComment && /*#__PURE__*/React.createElement(CommentWrapper, {
+    editor: editor,
+    type: "editor"
+  })));
 };
 EditableArticle.defaultProps = {
   isShowComment: true

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

@@ -128,7 +128,8 @@ const SdocEditor = forwardRef((_ref, ref) => {
     }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(EditorContent, {
       docValue: slateValue,
       readonly: true,
-      showOutline: false
+      showOutline: false,
+      editor: validEditor
     }, /*#__PURE__*/React.createElement(ReadOnlyArticle, {
       editor: validEditor,
       slateValue: slateValue
@@ -144,7 +145,8 @@ const SdocEditor = forwardRef((_ref, ref) => {
     }), /*#__PURE__*/React.createElement(EditorContent, {
       docValue: slateValue,
       showOutline: true,
-      readonly: isFreezed
+      readonly: isFreezed,
+      editor: validEditor
     }, /*#__PURE__*/React.createElement(ReadOnlyArticle, {
       editor: validEditor,
       slateValue: slateValue,
@@ -162,7 +164,8 @@ const SdocEditor = forwardRef((_ref, ref) => {
     editor: validEditor
   }), /*#__PURE__*/React.createElement(EditorContent, {
     docValue: slateValue,
-    showOutline: true
+    showOutline: true,
+    editor: validEditor
   }, /*#__PURE__*/React.createElement(EditableArticle, {
     editor: validEditor,
     slateValue: slateValue,

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

@@ -114,7 +114,7 @@ const withImage = editor => {
     const point = Editor.before(editor, selection, {
       distance: 1
     });
-    if (!point) return;
+    if (!point) return deleteBackward(unit);
     const [node, path] = Editor.node(editor, [point.path[0], point.path[1]]);
     const isPerviousNodeImage = node.type === IMAGE;
     if (isPerviousNodeImage && Range.isCollapsed(selection) && isBlockAboveEmpty(editor) && !Path.isCommon(path, selection.anchor.path)) {

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

@@ -1,12 +1,13 @@
-import { Editor, Transforms } from '@seafile/slate';
+import { Editor, Range } from '@seafile/slate';
 import { insertBreakList } from './insert-break-list';
 import { onTabHandle } from './on-tab-handle';
 import { normalizeList } from './normalize-list';
 import { insertFragmentList } from './insert-fragment-list';
 import { handleShortcut } from './shortcut';
-import { getSelectedNodeEntryByType } from '../../../core';
-import { BLOCKQUOTE, LIST_ITEM } from '../../../constants';
+import { focusEditor, getSelectedNodeEntryByType } from '../../../core';
+import { LIST_ITEM } from '../../../constants';
 import { isList } from '../../../toolbar/side-toolbar/helpers';
+import { unwrapList } from '../transforms';
 const withList = editor => {
   const {
     insertBreak,
@@ -31,15 +32,21 @@ const withList = editor => {
     const listItemEntry = getSelectedNodeEntryByType(editor, LIST_ITEM);
     if (listItemEntry) {
       const [, listItemPath] = listItemEntry;
-      const blockQuoteEntry = getSelectedNodeEntryByType(editor, BLOCKQUOTE);
-      if (blockQuoteEntry) {
-        const isStart = Editor.isStart(editor, editor.selection.anchor, listItemPath);
-        if (isStart) {
-          // This is a tricky way to delete the blockquote and create a new paragraph
-          Transforms.removeNodes(editor, {
+
+      // Transforms to paragraph when press backspace at the start of the list item, and the list item is the first child of the list
+      const isAtStartOfListItem = Editor.isStart(editor, selection.anchor, listItemPath);
+      const isCollapsed = Range.isCollapsed(selection);
+      if (isCollapsed && isAtStartOfListItem) {
+        const previous = Editor.previous(editor, {
+          at: listItemPath
+        });
+        // previous is undefined when the list item is the first child of the list
+        if (!previous) {
+          unwrapList(newEditor, {
             at: listItemPath
           });
-          insertBreak();
+          const focusPoint = Editor.start(newEditor, listItemPath);
+          focusEditor(newEditor, focusPoint);
           return;
         }
       }

package/dist/basic-sdk/hooks/use-selection-element.js

@@ -1,8 +1,9 @@
 import { Editor, Element } from '@seafile/slate';
-import { useSlateStatic } from '@seafile/slate-react';
 import { useMemo } from 'react';
-export const useSelectionElement = () => {
-  const editor = useSlateStatic();
+export const useSelectionElement = _ref => {
+  let {
+    editor
+  } = _ref;
   const nodeEntry = useMemo(() => {
     const nodeEntry = Editor.above(editor, {
       mode: 'lowest',

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

@@ -15,7 +15,10 @@ export default function ArticleContainer(_ref) {
   }, []);
   const scrollRef = useScrollContext();
   const [containerStyle, setContainerStyle] = useState({});
-  const handleWindowResize = useCallback(() => {
+  const handleWindowResize = useCallback(function () {
+    let {
+      scrollIntoArticle = false
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const rect = scrollRef.current.getBoundingClientRect();
     const articleRect = articleRef.current.getBoundingClientRect();
     // get state from local storage
@@ -27,6 +30,12 @@ export default function ArticleContainer(_ref) {
     } else {
       setContainerStyle({});
     }
+    if (scrollIntoArticle) {
+      articleRef.current.scrollIntoView({
+        inline: 'start',
+        block: 'nearest'
+      });
+    }
   }, [scrollRef]);
   const handelArticleClick = useCallback(event => {
     if (!articleRef.current.contains(event.target)) return;

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

@@ -2,12 +2,16 @@ import React, { useRef, useState, useCallback } from 'react';
 import { ScrollContext } from '../hooks/use-scroll-context';
 import SDocOutline from '../outline';
 import classNames from 'classnames';
+import CommentWrapper from '../comment';
+import CommentProvider from '../comment/provider';
+import { ParticipantsProvider } from '../comment/hooks/use-participants';
 const EditorContent = _ref => {
   let {
     readonly,
     showOutline,
     children,
-    docValue
+    docValue,
+    editor
   } = _ref;
   const scrollRef = useRef(null);
   const [scrollLeft, setScrollLeft] = useState(0);
@@ -22,15 +26,10 @@ const EditorContent = _ref => {
     'no-outline': !showOutline
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, showOutline && /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-absolute-wrapper"
-  }, /*#__PURE__*/React.createElement(SDocOutline, {
-    scrollLeft: scrollLeft,
-    doc: docValue
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-absolute-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-content-wrapper"
+  }, /*#__PURE__*/React.createElement(CommentProvider, {
+    editor: editor
+  }, /*#__PURE__*/React.createElement(ParticipantsProvider, null, /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,
     className: "sdoc-scroll-container",
     onScroll: onWrapperScroll,
@@ -39,7 +38,15 @@ const EditorContent = _ref => {
     value: {
       scrollRef
     }
-  }, children))));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, showOutline && /*#__PURE__*/React.createElement(SDocOutline, {
+    scrollLeft: scrollLeft,
+    doc: docValue
+  }), children))), /*#__PURE__*/React.createElement(CommentWrapper, {
+    editor: editor,
+    type: "global"
+  }))));
 };
 EditorContent.defaultProps = {
   readonly: false,

package/dist/basic-sdk/outline/index.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 import { INTERNAL_EVENT } from '../constants';
 import EventBus from '../utils/event-bus';
@@ -43,7 +44,9 @@ const SDocOutline = _ref => {
     return doc.filter(item => ['header1', 'header2', 'header3'].includes(item.type));
   }, [doc]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-outline-wrapper",
+    className: classNames('sdoc-outline-wrapper', {
+      active: isShown
+    }),
     style: {
       left: -scrollLeft
     }

package/dist/basic-sdk/outline/style.css

@@ -1,16 +1,21 @@
 .sdoc-outline-wrapper {
-  position: absolute;
-  top: 0;
+  position: fixed;
+  top: 100px;
   bottom: 0;
   display: flex;
   margin: 20px 30px 20px 16px;
   min-height: 0;
   z-index: 101;
+  pointer-events: none;
+}
+
+.sdoc-outline-wrapper.active {
+  pointer-events: all;
 }
 
 .sdoc-outline {
   flex: 1;
-  width: 220px; 
+  width: 220px;
   display: flex;
   min-height: 0;
   flex-direction: column;
@@ -18,7 +23,7 @@
   position: relative;
 }
 
-.sdoc-outline-header  {
+.sdoc-outline-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -74,13 +79,14 @@
   height: 28px;
   background: #fff;
   border-radius: 0 50% 50% 0;
-  box-shadow: 0 0 6px rgba(0,0,0, 0.12);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 20px;
-  left: -16px;
+  left: -15px;
+  pointer-events: all;
 }
 
 .sdoc-outline-menu.disabled {