@seafile/sdoc-editor 0.4.11 → 0.4.12

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

@@ -1398,4 +1398,97 @@ export const getCellHighlightClassName = (primaryColorClassName, rowIndex) => {
     className = TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[primaryColorClassName];
   }
   return className;
+};
+export const getRowBottomPositions = (editor, rows) => {
+  const recorder = [];
+  let bottomPosition = 0;
+  rows.forEach(row => {
+    let cellHeight;
+    row.children.forEach(cell => {
+      const currentCellHeight = ReactEditor.toDOMNode(editor, cell).getBoundingClientRect().height;
+      if (!cellHeight || currentCellHeight < cellHeight) cellHeight = currentCellHeight;
+    });
+    bottomPosition += cellHeight;
+    recorder.push(bottomPosition);
+  });
+  return recorder;
+};
+export const focusClosestCellWhenJustifyCellSize = _ref => {
+  let {
+    editor,
+    rowIndex,
+    columnIndex,
+    table,
+    mouseDownInfo,
+    rowBottoms
+  } = _ref;
+  if (!editor) return;
+  const {
+    columns
+  } = table;
+  // Get cursor position in table, calculate columnIndex and rowIndex
+  const tableDom = ReactEditor.toDOMNode(editor, table);
+  const {
+    left,
+    top
+  } = tableDom.getBoundingClientRect();
+  const {
+    positionY,
+    positionX
+  } = mouseDownInfo;
+  const tableScrollWrapper = document.querySelector('.sdoc-table-scroll-wrapper');
+  const scrollX = tableScrollWrapper.scrollLeft;
+  const tableInnerX = positionX - left + scrollX;
+  const tableInnerY = positionY - top;
+  // Calculate columnIndex
+  if (columnIndex === undefined) {
+    let passedColumnsWidth = 0;
+    columns.some((_ref2, index) => {
+      let {
+        width
+      } = _ref2;
+      passedColumnsWidth += width;
+      if (passedColumnsWidth > tableInnerX) {
+        columnIndex = index;
+        return true;
+      }
+      return false;
+    });
+  }
+  // Calculate rowIndex
+  if (rowIndex === undefined) {
+    rowBottoms.some((bottom, index) => {
+      if (bottom >= tableInnerY) {
+        rowIndex = index;
+        return true;
+      }
+      return false;
+    });
+  }
+  // Correct focus position
+  const is_combined = table.children[rowIndex].children[columnIndex].is_combined;
+  if (is_combined) {
+    for (let i = columnIndex - 1; i >= 0; i--) {
+      const {
+        is_combined: ci_is_combined,
+        colspan: ci_colspan
+      } = table.children[rowIndex].children[i];
+      if (!ci_is_combined && ci_colspan && i + ci_colspan - 1 >= columnIndex) {
+        columnIndex = i;
+        break;
+      }
+    }
+    for (let j = rowIndex - 1; j >= 0; j--) {
+      const {
+        is_combined: ri_is_combined,
+        rowspan: ri_rowspan
+      } = table.children[j].children[columnIndex];
+      if (!ri_is_combined && ri_rowspan && j + ri_rowspan - 1 >= rowIndex) {
+        rowIndex = j;
+        break;
+      }
+    }
+  }
+  const focusPath = ReactEditor.findPath(editor, table.children[rowIndex].children[columnIndex]);
+  focusEditor(editor, Editor.end(editor, focusPath));
 };

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

@@ -4,14 +4,15 @@ 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 { getTableColumns, updateColumnWidth, focusClosestCellWhenJustifyCellSize } from '../../helpers';
 import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
 const ColumnResizeHandler = _ref => {
   let {
     column,
     left: initLeft,
     element,
-    index
+    index,
+    rowBottoms
   } = _ref;
   const editor = useSlateStatic();
   const resizeHandler = useRef(null);
@@ -85,6 +86,13 @@ const ColumnResizeHandler = _ref => {
         });
       }
       updateColumnWidth(editor, element, newColumns);
+      focusClosestCellWhenJustifyCellSize({
+        editor,
+        columnIndex: index,
+        table: element,
+        mouseDownInfo,
+        rowBottoms
+      });
     };
     registerResizeEvents({
       'mousemove': onMouseMove,
@@ -98,7 +106,7 @@ const ColumnResizeHandler = _ref => {
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft]);
+  }, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft, rowBottoms]);
   return /*#__PURE__*/React.createElement("div", {
     className: classnames('table-cell-width-just ', {
       'resizing position-fixed': isResizing,

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

@@ -4,14 +4,15 @@ 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 { focusClosestCellWhenJustifyCellSize, getTableColumns, updateColumnWidth } from '../../helpers';
 import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
 const FirstColumnResizeHandler = _ref => {
   let {
     column,
     left: initLeft,
     element,
-    index
+    index,
+    rowBottoms
   } = _ref;
   const editor = useSlateStatic();
   const resizeHandler = useRef(null);
@@ -72,6 +73,13 @@ const FirstColumnResizeHandler = _ref => {
         width: newWidth
       });
       updateColumnWidth(editor, element, newColumns);
+      focusClosestCellWhenJustifyCellSize({
+        editor,
+        columnIndex: index,
+        table: element,
+        mouseDownInfo,
+        rowBottoms
+      });
     };
     registerResizeEvents({
       'mousemove': onMouseMove,
@@ -85,7 +93,7 @@ const FirstColumnResizeHandler = _ref => {
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft]);
+  }, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft, rowBottoms]);
   return /*#__PURE__*/React.createElement("div", {
     className: classnames('table-cell-width-just ', {
       'resizing position-fixed': isResizing,

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

@@ -1,31 +1,37 @@
-import React from 'react';
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useCallback, useEffect, useState } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import FirstColumnResizeHandler from './first-column-left-resize-handler';
 import ColumnResizeHandler from './column-resize-handler';
 import RowResizeHandler from './row-resize-handler';
 import { getNode, findPath } from '../../../../core';
 import { useResizeHandlersContext } from '../hooks';
-import { getRowHeight, getTableColumns } from '../../helpers';
-import { TABLE_ROW_STYLE } from '../../constants';
+import { getRowBottomPositions, getTableColumns } from '../../helpers';
 const ResizeHandlers = _ref => {
   let {
     element
   } = _ref;
   const editor = useSlateStatic();
   const tablePath = findPath(editor, element);
-  const columns = useResizeHandlersContext() || getTableColumns(editor, element);
   if (!tablePath) return null;
   const table = getNode(editor, tablePath);
   if (!table) return null;
+  const [rowBottoms, setRowBottoms] = useState([]);
+  const columns = useResizeHandlersContext() || getTableColumns(editor, element);
   const rows = element.children;
-  let rowBottom = 0;
+  const calculateRowBottom = useCallback(() => {
+    const rowBottomPositions = getRowBottomPositions(editor, rows);
+    setRowBottoms(rowBottomPositions);
+  }, [editor, rows]);
+  useEffect(() => {
+    calculateRowBottom();
+  }, [calculateRowBottom, element]);
   let columnLeft = 0;
   return /*#__PURE__*/React.createElement(React.Fragment, null, rows.map((row, index) => {
-    rowBottom += getRowHeight(row, index);
     return /*#__PURE__*/React.createElement(RowResizeHandler, {
       key: index,
       row: row,
-      rowBottom: rowBottom,
+      rowBottoms: rowBottoms[index],
       index: index,
       element: element
     });
@@ -34,10 +40,12 @@ const ResizeHandlers = _ref => {
     column: columns[0],
     left: 0,
     index: 0,
-    element: element
+    element: element,
+    rowBottoms: rowBottoms
   }), columns.map((column, columnIndex) => {
     columnLeft = columnLeft + column.width;
     return /*#__PURE__*/React.createElement(ColumnResizeHandler, {
+      rowBottoms: rowBottoms,
       key: columnIndex,
       column: column,
       left: columnLeft,

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/row-resize-handler.js

@@ -3,14 +3,14 @@ import classnames from 'classnames';
 import { useSlateStatic } from '@seafile/slate-react';
 import { ReactEditor } from '@seafile/slate-react';
 import { TABLE_ROW_MIN_HEIGHT } from '../../constants';
-import { getRowHeight, updateTableRowHeight } from '../../helpers';
+import { focusClosestCellWhenJustifyCellSize, getRowHeight, updateTableRowHeight } from '../../helpers';
 import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
 import { useScrollContext } from '../../../../../hooks/use-scroll-context';
 const RowResizeHandler = _ref => {
   let {
     row,
     index,
-    rowBottom: initRowBottom,
+    rowBottoms: initRowBottom = 0,
     element
   } = _ref;
   const editor = useSlateStatic();
@@ -27,12 +27,11 @@ const RowResizeHandler = _ref => {
     const mouseDownInfo = getMouseDownInfo(event, scrollContent.current);
     setMouseDownInfo(mouseDownInfo);
     setStyle({
-      top: initRowBottom - 2.5
+      top: rowBottom - 2.5
     });
     setIsResizing(true);
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [rowBottom]);
   useEffect(() => {
     if (!isResizing) return;
     const onMouseMove = event => {
@@ -50,6 +49,12 @@ const RowResizeHandler = _ref => {
       setIsResizing(false);
       tableRow.current = height;
       updateTableRowHeight(editor, row, height);
+      focusClosestCellWhenJustifyCellSize({
+        editor,
+        rowIndex: index,
+        table: element,
+        mouseDownInfo
+      });
     };
     registerResizeEvents({
       'mousemove': onMouseMove,
@@ -70,7 +75,7 @@ const RowResizeHandler = _ref => {
     const rowDom = ReactEditor.toDOMNode(editor, cell);
     if (!rowDom) return;
     tableRow.current = rowDom.clientHeight;
-    setRowBottom(initRowBottom - height + tableRow.current);
+    setRowBottom(initRowBottom);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [row, initRowBottom]);
   return /*#__PURE__*/React.createElement("div", {

package/package.json

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