@seafile/sdoc-editor 0.1.71 → 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, {
@@ -124,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/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/package.json

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