@seafile/sdoc-editor 0.1.70 → 0.1.72

package/dist/basic-sdk/editor.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Editable, Slate } from '@seafile/slate-react';
+import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
 import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextMenu } from './extension';
-import { focusEditor } from './extension/core';
+import { focusEditor, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
 import SDocOutline from './outline';
@@ -16,6 +16,7 @@ import { ScrollContext } from './hooks/use-scroll-context';
 import CommentContextProvider from './comment/comment-context-provider';
 import CommentWrapper from './comment';
 import { usePipDecorate } from './decorates';
+import { getCursorPosition, getDomHeight } from './utils/dom-utils';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = function SDocEditor(_ref) {
@@ -100,6 +101,44 @@ var SDocEditor = function SDocEditor(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var onKeyDown = useCallback(function (event) {
+    var _scrollRef$current = scrollRef.current,
+      scrollTop = _scrollRef$current.scrollTop,
+      clientHeight = _scrollRef$current.clientHeight;
+    if (event.key === 'ArrowLeft') {
+      if (!isSelectionAtBlockStart(editor)) return;
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      if (scrollTop === 0) return;
+      var prevNode = getPrevNode(editor);
+      if (!prevNode) return;
+      var domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
+      var domHeight = getDomHeight(domNode);
+      var isScrollUp = true;
+      var _getCursorPosition = getCursorPosition(isScrollUp),
+        y = _getCursorPosition.y;
+      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') {
+      var nextNode = getNextNode(editor);
+      if (!nextNode) return;
+      var _domNode = ReactEditor.toDOMNode(editor, nextNode[0]);
+      var _domHeight = getDomHeight(_domNode);
+      var _isScrollUp = false;
+      var _getCursorPosition2 = getCursorPosition(_isScrollUp),
+        _y = _getCursorPosition2.y;
+      if (clientHeight - _y >= _domHeight) return;
+      scrollRef.current.scroll(0, Math.max(0, scrollTop + _domHeight));
+      return;
+    }
+    eventProxy.onKeyDown(event);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -111,8 +150,7 @@ var SDocEditor = function SDocEditor(_ref) {
     docUuid: config.docUuid
   }), /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,
-    className: "sdoc-editor-article-container",
-    id: "sdoc-editor-article-container"
+    className: "sdoc-editor-article-container"
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: {
       scrollRef: scrollRef
@@ -125,10 +163,10 @@ var SDocEditor = function SDocEditor(_ref) {
     className: "article",
     ref: articleRef
   }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
+    cursors: cursors,
     renderElement: renderElement,
     renderLeaf: renderLeaf,
-    onKeyDown: eventProxy.onKeyDown,
-    cursors: cursors,
+    onKeyDown: onKeyDown,
     onContextMenu: onContextMenu,
     onMouseDown: onMouseDown,
     decorate: decorate

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

@@ -216,6 +216,94 @@ export var getAboveBlockNode = function getAboveBlockNode(editor, options) {
     block: true
   }));
 };
+export var getPrevNode = function getPrevNode(editor) {
+  var _getAboveNode = getAboveNode(editor, {
+      mode: 'lowest',
+      match: function match(n) {
+        return Element.isElement(n) && Editor.isBlock(editor, n);
+      }
+    }),
+    _getAboveNode2 = _slicedToArray(_getAboveNode, 2),
+    lowerNode = _getAboveNode2[0],
+    lowerPath = _getAboveNode2[1];
+  var _getAboveNode3 = getAboveNode(editor, {
+      mode: 'highest',
+      match: function match(n) {
+        return Element.isElement(n) && Editor.isBlock(editor, n);
+      }
+    }),
+    _getAboveNode4 = _slicedToArray(_getAboveNode3, 2),
+    heightNode = _getAboveNode4[0],
+    heightPath = _getAboveNode4[1];
+  var prevNode = null;
+  try {
+    prevNode = Editor.previous(editor, {
+      at: lowerPath,
+      match: function match(n) {
+        return Element.isElement(n) && Editor.isBlock(editor, n);
+      }
+    });
+  } catch (error) {
+    prevNode = null;
+  }
+  if (lowerNode.id !== heightNode.id && !prevNode) {
+    try {
+      prevNode = Editor.previous(editor, {
+        at: heightPath,
+        match: function match(n) {
+          return Element.isElement(n) && Editor.isBlock(editor, n);
+        }
+      });
+    } catch (error) {
+      prevNode = null;
+    }
+  }
+  return prevNode;
+};
+export var getNextNode = function getNextNode(editor) {
+  var _getAboveNode5 = getAboveNode(editor, {
+      mode: 'lowest',
+      match: function match(n) {
+        return Element.isElement(n) && Editor.isBlock(editor, n);
+      }
+    }),
+    _getAboveNode6 = _slicedToArray(_getAboveNode5, 2),
+    lowerNode = _getAboveNode6[0],
+    lowerPath = _getAboveNode6[1];
+  var _getAboveNode7 = getAboveNode(editor, {
+      mode: 'highest',
+      match: function match(n) {
+        return Element.isElement(n) && Editor.isBlock(editor, n);
+      }
+    }),
+    _getAboveNode8 = _slicedToArray(_getAboveNode7, 2),
+    heightNode = _getAboveNode8[0],
+    heightPath = _getAboveNode8[1];
+  var nextNode = null;
+  try {
+    nextNode = Editor.next(editor, {
+      at: lowerPath,
+      match: function match(n) {
+        return Element.isElement(n) && Editor.isBlock(editor, n);
+      }
+    });
+  } catch (error) {
+    nextNode = null;
+  }
+  if (lowerNode.id !== heightNode.id && !nextNode) {
+    try {
+      nextNode = Editor.next(editor, {
+        at: heightPath,
+        match: function match(n) {
+          return Element.isElement(n) && Editor.isBlock(editor, n);
+        }
+      });
+    } catch (error) {
+      nextNode = null;
+    }
+  }
+  return nextNode;
+};
 
 // find node
 export var findNode = function findNode(editor, options) {
@@ -362,6 +450,11 @@ export var isSelectionAtBlockStart = function isSelectionAtBlockStart(editor, op
   if (!path) return false;
   return isStartPoint(editor, selection.focus, path) || Range.isExpanded(editor.selection) && isStartPoint(editor, selection.anchor, path);
 };
+export var isSelectionAtBlockEnd = function isSelectionAtBlockEnd(editor, options) {
+  var _getAboveBlockNode3, _editor$selection;
+  var path = (_getAboveBlockNode3 = getAboveBlockNode(editor, options)) === null || _getAboveBlockNode3 === void 0 ? void 0 : _getAboveBlockNode3[1];
+  return !!path && isEndPoint(editor, (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.focus, path);
+};
 export var isLastNode = function isLastNode(editor, node) {
   var editorChildren = editor.children || [];
   var editorChildrenLength = editorChildren.length;

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

@@ -3,12 +3,15 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { ReactEditor, useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Transforms } from '@seafile/slate';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
 import CodeBlockHoverMenu from '../../../../components/code-block-hover-menu';
 import '../../../assets/css/code-block.css';
 var CodeBlock = function CodeBlock(_ref) {
   var codeBlockProps = _ref.codeBlockProps;
   var readOnly = useReadOnly();
+  var editor = useSlateStatic();
   var codeBlockRef = useRef();
+  var scrollRef = useScrollContext();
   var attributes = codeBlockProps.attributes,
     children = codeBlockProps.children,
     element = codeBlockProps.element;
@@ -17,7 +20,6 @@ var CodeBlock = function CodeBlock(_ref) {
       white_space: 'nowrap'
     } : _element$style;
   var white_space = style.white_space;
-  var editor = useSlateStatic();
   var _useState = useState({
       top: '',
       left: ''
@@ -97,15 +99,12 @@ var CodeBlock = function CodeBlock(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(function () {
+    if (readOnly) return;
     if (showHoverMenu) {
-      document.getElementById('sdoc-editor-article-container').addEventListener('scroll', onScroll);
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
     } else {
-      document.getElementById('sdoc-editor-article-container').removeEventListener('scroll', onScroll);
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
     }
-    return function () {
-      var articleContainer = document.getElementById('sdoc-editor-article-container');
-      articleContainer && articleContainer.removeEventListener('scroll', onScroll);
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showHoverMenu]);
   return /*#__PURE__*/React.createElement("div", {

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

@@ -1,27 +1,54 @@
 import slugid from 'slugid';
 import { CODE_BLOCK, CODE_LINE } from '../../../constants';
+import { genCodeLangs } from '../../../../utils/prismjs';
 var codeBlockRule = function codeBlockRule(element, parseChild) {
   var nodeName = element.nodeName,
     childNodes = element.childNodes;
   if (nodeName === 'PRE') {
+    var children = Array.from(childNodes).filter(function (item) {
+      return item.nodeName === 'CODE';
+    });
+    var codeChild = children[0];
+    var lang = codeChild.getAttribute('lang');
+    lang = genCodeLangs().find(function (item) {
+      return item.value === lang;
+    }) || 'plaintext';
     return {
       level: 'level1',
       id: slugid.nice(),
+      language: lang,
       type: CODE_BLOCK,
-      children: parseChild(childNodes)
+      children: parseChild(children)
     };
   }
   if (nodeName === 'CODE' && element.parentElement.nodeName === 'PRE') {
-    return {
-      level: 'level2',
-      id: slugid.nice(),
-      type: CODE_LINE,
-      children: [{
-        level: 'level3',
+    var content = element.textContent;
+    var hasNewLine = content.indexOf('\n') > -1;
+    if (!hasNewLine) {
+      return {
+        level: 'level2',
         id: slugid.nice(),
-        text: element.textContent
-      }]
-    };
+        type: CODE_LINE,
+        children: [{
+          level: 'level3',
+          id: slugid.nice(),
+          text: element.textContent
+        }]
+      };
+    }
+    var codes = content.split('\n');
+    return codes.map(function (item) {
+      return {
+        level: 'level2',
+        id: slugid.nice(),
+        type: CODE_LINE,
+        children: [{
+          level: 'level3',
+          id: slugid.nice(),
+          text: item
+        }]
+      };
+    });
   }
   return;
 };

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

@@ -34,6 +34,7 @@ var listRule = function listRule(element, parseChild) {
       id: slugid.nice(),
       type: LIST_ITEM,
       children: [{
+        id: slugid.nice(),
         level: 'level3',
         type: LIST_LIC,
         children: parseChild(childNodes)

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/first-column-left-resize-handler.js

@@ -0,0 +1,116 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { Transforms } from '@seafile/slate';
+import { useSlateStatic } from '@seafile/slate-react';
+import classnames from 'classnames';
+import { useTableRootContext } from '../hooks';
+import { TABLE_CELL_MIN_WIDTH } from '../../constants';
+import { getTableColumns, updateColumnWidth } from '../../helpers';
+import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
+var FirstColumnResizeHandler = function FirstColumnResizeHandler(_ref) {
+  var column = _ref.column,
+    initLeft = _ref.left,
+    element = _ref.element,
+    index = _ref.index;
+  var editor = useSlateStatic();
+  var resizeHandler = useRef(null);
+  var _useState = useState(initLeft),
+    _useState2 = _slicedToArray(_useState, 2),
+    left = _useState2[0],
+    setLeft = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isResizing = _useState4[0],
+    setIsResizing = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mouseDownInfo = _useState6[0],
+    setMouseDownInfo = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    style = _useState8[0],
+    setStyle = _useState8[1];
+  var width = column.width;
+  var tableRootScrollContainer = useTableRootContext();
+  var onMouseDown = useCallback(function (event) {
+    eventStopPropagation(event);
+    Transforms.deselect(editor);
+    var mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
+    var _tableRootScrollConta = tableRootScrollContainer.getBoundingClientRect(),
+      top = _tableRootScrollConta.top;
+    setStyle({
+      left: mouseDownInfo.positionX - 2,
+      height: tableRootScrollContainer.clientHeight,
+      top: top
+    });
+    setMouseDownInfo(mouseDownInfo);
+    setIsResizing(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableRootScrollContainer]);
+  useEffect(function () {
+    if (!isResizing) {
+      if (initLeft !== left) {
+        setLeft(initLeft);
+      }
+      return;
+    }
+    var onMouseMove = function onMouseMove(event) {
+      eventStopPropagation(event);
+      var mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, tableRootScrollContainer);
+      var newWidth = width - mouseMoveInfo.displacementX;
+      if (newWidth < TABLE_CELL_MIN_WIDTH) return;
+      var left = initLeft - mouseMoveInfo.displacementX;
+      var _tableRootScrollConta2 = tableRootScrollContainer.getBoundingClientRect(),
+        top = _tableRootScrollConta2.top;
+      setStyle({
+        left: event.clientX - 2,
+        height: tableRootScrollContainer.clientHeight,
+        top: top
+      });
+      setLeft(left);
+    };
+    var onMouseUp = function onMouseUp(event) {
+      eventStopPropagation(event);
+      setIsResizing(false);
+      setStyle({});
+      var columns = getTableColumns(editor, element);
+      var newColumns = columns.slice(0);
+      var column = newColumns[index];
+      var newWidth = width + left - initLeft;
+      newColumns[index] = _objectSpread(_objectSpread({}, column), {}, {
+        width: newWidth
+      });
+      updateColumnWidth(editor, element, newColumns);
+    };
+    registerResizeEvents({
+      'mousemove': onMouseMove,
+      'mouseup': onMouseUp
+    });
+    return function () {
+      unregisterResizeEvents({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('table-cell-width-just ', {
+      'resizing position-fixed': isResizing,
+      'position-absolute': !isResizing
+    }),
+    contentEditable: false,
+    style: isResizing ? style : {
+      left: -3.5,
+      top: 0
+    },
+    onMouseDown: onMouseDown,
+    ref: resizeHandler
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-cell-width-just-color-tip"
+  }));
+};
+export default FirstColumnResizeHandler;

package/dist/basic-sdk/extension/plugins/table/render/{resize-handlers.js → resize-handlers/index.js}

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
+import FirstColumnResizeHandler from './first-column-left-resize-handler';
 import ResizeHandler from './resize-handler';
-import { getNode, findPath } from '../../../core';
-import { useResizeHandlersContext } from './hooks';
-import { getTableColumns } from '../helpers';
+import { getNode, findPath } from '../../../../core';
+import { useResizeHandlersContext } from '../hooks';
+import { getTableColumns } from '../../helpers';
 var ResizeHandlers = function ResizeHandlers(props) {
   var element = props.element;
   var editor = useSlateStatic();
@@ -13,7 +14,13 @@ var ResizeHandlers = function ResizeHandlers(props) {
   var table = getNode(editor, tablePath);
   if (!table) return null;
   var columnLeft = 0;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, columnIndex) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstColumnResizeHandler, {
+    key: "column-0-left",
+    column: columns[0],
+    left: 0,
+    index: 0,
+    element: element
+  }), columns.map(function (column, columnIndex) {
     columnLeft = columnLeft + column.width;
     return /*#__PURE__*/React.createElement(ResizeHandler, {
       key: columnIndex,

package/dist/basic-sdk/extension/plugins/table/render/{resize-handler.js → resize-handlers/resize-handler.js}

@@ -4,10 +4,10 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { Transforms } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
 import classnames from 'classnames';
-import { useTableRootContext } from './hooks';
-import { TABLE_CELL_MIN_WIDTH } from '../constants';
-import { getTableColumns, updateColumnWidth } from '../helpers';
-import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
+import { useTableRootContext } from '../hooks';
+import { TABLE_CELL_MIN_WIDTH } from '../../constants';
+import { getTableColumns, updateColumnWidth } from '../../helpers';
+import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
 var ResizeHandler = function ResizeHandler(_ref) {
   var column = _ref.column,
     initLeft = _ref.left,
@@ -27,17 +27,28 @@ var ResizeHandler = function ResizeHandler(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     mouseDownInfo = _useState6[0],
     setMouseDownInfo = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    style = _useState8[0],
+    setStyle = _useState8[1];
   var width = column.width;
   var tableRootScrollContainer = useTableRootContext();
   var onMouseDown = useCallback(function (event) {
     eventStopPropagation(event);
     Transforms.deselect(editor);
     var mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
+    var _tableRootScrollConta = tableRootScrollContainer.getBoundingClientRect(),
+      top = _tableRootScrollConta.top;
+    setStyle({
+      left: mouseDownInfo.positionX - 2,
+      height: tableRootScrollContainer.clientHeight,
+      top: top
+    });
     setMouseDownInfo(mouseDownInfo);
     setIsResizing(true);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [tableRootScrollContainer]);
   useEffect(function () {
     if (!isResizing) {
       if (initLeft !== left) {
@@ -49,19 +60,27 @@ var ResizeHandler = function ResizeHandler(_ref) {
       eventStopPropagation(event);
       var mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, tableRootScrollContainer);
       var newWidth = width + mouseMoveInfo.displacementX;
-      if (newWidth < TABLE_CELL_MIN_WIDTH) return;
       var columns = getTableColumns(editor, element);
+      if (newWidth < TABLE_CELL_MIN_WIDTH) return;
       var nextColumn = columns[index + 1];
       if (nextColumn) {
         var nextColumnWidth = nextColumn.width - mouseMoveInfo.displacementX;
         if (nextColumnWidth < TABLE_CELL_MIN_WIDTH) return;
       }
       var left = initLeft + mouseMoveInfo.displacementX;
+      var _tableRootScrollConta2 = tableRootScrollContainer.getBoundingClientRect(),
+        top = _tableRootScrollConta2.top;
+      setStyle({
+        left: event.clientX - 2,
+        height: tableRootScrollContainer.clientHeight,
+        top: top
+      });
       setLeft(left);
     };
     var onMouseUp = function onMouseUp(event) {
       eventStopPropagation(event);
       setIsResizing(false);
+      setStyle({});
       var columns = getTableColumns(editor, element);
       var newColumns = columns.slice(0);
       var column = newColumns[index];
@@ -92,11 +111,12 @@ var ResizeHandler = function ResizeHandler(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('table-cell-width-just position-absolute', {
-      'resizing': isResizing
+    className: classnames('table-cell-width-just ', {
+      'resizing position-fixed': isResizing,
+      'position-absolute': !isResizing
     }),
     contentEditable: false,
-    style: {
+    style: isResizing ? style : {
       left: left - 3.5,
       top: 0
     },

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

@@ -0,0 +1,40 @@
+export var getDomHeight = function getDomHeight(dom) {
+  var styles = window.getComputedStyle(dom);
+  var rect = dom.getBoundingClientRect();
+  var marginTop = styles['marginTop'];
+  // margin-bottom overlaps margin-top
+  // const marginBottom = styles['marginBottom'];
+  var height = rect.height;
+  return height + parseInt(marginTop);
+};
+export var getSelectionRange = function getSelectionRange() {
+  if (window.getSelection) {
+    var sel = window.getSelection();
+    if (sel.getRangeAt && sel.rangeCount) {
+      return sel.getRangeAt(0);
+    }
+  } else if (document.selection && document.selection.createRange) {
+    return document.selection.createRange();
+  }
+  return null;
+};
+export var getCursorPosition = function getCursorPosition() {
+  var isScrollUp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var x = 0,
+    y = 0;
+  var range = getSelectionRange();
+  if (range) {
+    var rect = range.getBoundingClientRect();
+    var headerHeight = 100;
+    x = rect.x || 0;
+    if (isScrollUp) {
+      y = rect.y - headerHeight;
+    } else {
+      y = rect.y - headerHeight + rect.height;
+    }
+  }
+  return {
+    x: x,
+    y: y
+  };
+};

package/dist/basic-sdk/utils/mouse-event.js

@@ -47,8 +47,8 @@ export var getMouseMoveInfo = function getMouseMoveInfo(event, mouseDownInfo, sc
   var scrollLeft = 0;
   var scrollTop = 0;
   if (scrollContainer) {
-    scrollLeft = scrollContainer.scrollLeft;
-    scrollTop = scrollContainer.scrollTop;
+    scrollLeft = scrollContainer.scrollLeft || 0;
+    scrollTop = scrollContainer.scrollTop || 0;
   }
   displacementX = currPositionX - mouseDownInfo.positionX + scrollLeft - (mouseDownInfo.scrollLeft || 0);
   displacementY = currPositionY - mouseDownInfo.positionY + scrollTop - (mouseDownInfo.scrollTop || 0);

package/dist/basic-sdk/views/viewer.js

@@ -1,30 +1,21 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Editable, Slate } from '@seafile/slate-react';
 import defaultEditor, { renderLeaf as _renderLeaf, renderElement as _renderElement } from '../extension';
-import { withSocketIO } from '../socket';
 import withNodeId from '../node-id';
+import { ScrollContext } from '../hooks/use-scroll-context';
+import { generateDefaultDocContent } from '../../utils';
 import '../assets/css/layout.css';
 import '../assets/css/sdoc-editor-plugins.css';
-import { generateDefaultDocContent } from '../../utils';
 var SDocViewer = function SDocViewer(_ref) {
-  var isOpenSocket = _ref.isOpenSocket,
-    document = _ref.document,
-    config = _ref.config,
+  var document = _ref.document,
     customRenderLeaf = _ref.renderLeaf,
     customRenderElement = _ref.renderElement;
-  var editor = !isOpenSocket ? withNodeId(defaultEditor) : withSocketIO(withNodeId(defaultEditor, {
-    document: document,
-    config: config
-  }));
+  var editor = withNodeId(defaultEditor);
   var slateValue = (document || generateDefaultDocContent()).children;
   var articleRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    setUpdate = _useState2[1];
+  var scrollRef = useRef(null);
   useEffect(function () {
     editor.width = articleRef.current.children[0].clientWidth;
-    setUpdate(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -32,12 +23,15 @@ var SDocViewer = function SDocViewer(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-content"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-fill o-auto sdoc-editor-article-container",
-    id: "sdoc-editor-article-container"
+    ref: scrollRef,
+    className: "sdoc-editor-article-container"
+  }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
+    value: {
+      scrollRef: scrollRef
+    }
   }, /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
-    value: slateValue,
-    onChange: function onChange() {}
+    value: slateValue
   }, /*#__PURE__*/React.createElement("div", {
     className: "article mx-auto",
     ref: articleRef
@@ -51,6 +45,6 @@ var SDocViewer = function SDocViewer(_ref) {
       return (customRenderLeaf || _renderLeaf)(props, editor);
     },
     onDOMBeforeInput: function onDOMBeforeInput(event) {}
-  }))))));
+  })))))));
 };
 export default SDocViewer;

package/package.json

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