@seafile/sdoc-editor 0.5.14 → 0.5.16

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

@@ -19,7 +19,10 @@ export const INTERNAL_EVENT = {
   UPDATE_SEARCH_REPLACE_HIGHLIGHT: 'update_search_replace_highlight',
   TABLE_CELL_MOUSE_ENTER: 'table_cell_mouse_enter',
   HANDLE_MENTION_TEMP_CHOSEN: 'handle_mention_temp_chosen',
-  UPDATE_MENTION_TEMP_CONTENT: 'update_mention_temp_content'
+  UPDATE_MENTION_TEMP_CONTENT: 'update_mention_temp_content',
+  TABLE_COLUMN_START_DRAG: 'table_column_start_drag',
+  TABLE_SHOW_DRAG_HANDLER: 'table_show_drag_handler',
+  TABLE_HIDE_DRAG_HANDLER: 'table_show_drag_handler'
 };
 export const REVISION_DIFF_KEY = 'diff';
 export const REVISION_DIFF_VALUE = '1';

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

@@ -14,6 +14,7 @@ import { ArticleContainer } from '../layout';
 import { useScrollContext } from '../hooks/use-scroll-context';
 import { SetNodeToDecorations } from '../highlight';
 import { IMAGE } from '../extension/constants';
+import { isPreventResetTableSelectedRange } from '../extension/plugins/table/helpers';
 const EditableArticle = _ref => {
   let {
     isShowComment,
@@ -31,10 +32,12 @@ const EditableArticle = _ref => {
   const eventProxy = useMemo(() => new EventProxy(editor), []);
   const onMouseDown = useCallback(event => {
     if (event.button === 0) {
-      // Compatible with the editor which unload table plugin
-      editor.reSetTableSelectedRange && editor.reSetTableSelectedRange();
-      const eventBus = EventBus.getInstance();
-      eventBus.dispatch(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+      const isPreventReset = isPreventResetTableSelectedRange(event);
+      if (!isPreventReset) {
+        editor.reSetTableSelectedRange();
+        const eventBus = EventBus.getInstance();
+        eventBus.dispatch(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

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

@@ -21,6 +21,7 @@ export const HEADER_TITLE_MAP = {
 };
 export const TRANSPARENT = 'transparent';
 export const CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';
+export const TABLE_DRAG_KEY = 'drag-table/json';
 export const CLIPBOARD_ORIGIN_SDOC_KEY = 'origin-sdoc-uuid';
 export const INSERT_FILE_DISPLAY_TYPE = ['text_link', 'icon_link', 'card_link'];
 export const INSERT_POSITION = {

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

@@ -46,4 +46,7 @@ export const RESIZE_MASK_BOTTOM = 'bottom';
 export const RESIZE_MASK_LEFT = 'left';
 export const RESIZE_HANDLER_ROW = 'row';
 export const RESIZE_HANDLER_COLUMN = 'column';
-export const RESIZE_HANDLER_FIRST_COLUMN = 'first_column';
+export const RESIZE_HANDLER_FIRST_COLUMN = 'first_column';
+export const DRAG_HANDLER_ROW = 'row';
+export const DRAG_HANDLER_COLUMN = 'column';
+export const CELL_SELECTED = 'cell-selected';

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

@@ -5,7 +5,7 @@ import { ReactEditor } from '@seafile/slate-react';
 import deepCopy from 'deep-copy';
 import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, focusEditor, getNode, findPath, replaceNodeChildren, replaceNode, getSelectedNodeEntryByType, getAboveBlockNode } from '../../core';
 import { ELEMENT_TYPE, KEYBOARD, CLIPBOARD_FORMAT_KEY, INSERT_POSITION } from '../../constants';
-import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, TABLE_ROW_STYLE, INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE, INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from './constants';
+import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, TABLE_ROW_STYLE, INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE, INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP, CELL_SELECTED, DRAG_HANDLER_COLUMN, DRAG_HANDLER_ROW } from './constants';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
@@ -1426,6 +1426,8 @@ export const focusClosestCellWhenJustifyCellSize = (editor, adjustingCell) => {
   const cellPath = ReactEditor.findPath(editor, adjustingCell);
   focusEditor(editor, Editor.end(editor, cellPath));
 };
+
+// Search main cell of combined cell
 const searchCombinedMainCell = (table, startRowIndex, startColIndex) => {
   for (let rowIndex = startRowIndex; rowIndex >= 0; rowIndex--) {
     const row = table.children[rowIndex];
@@ -1534,4 +1536,313 @@ export const adjustCombinedCellRange = (table, range) => {
     if (isRowCombined && isColCombined) return EMPTY_SELECTED_RANGE;
   }
   return range;
+};
+
+/**
+ *  Do not reset table selected range, when drag table column / row
+ * @param {MouseEvent} event
+ * @returns {Boolean}
+ */
+export const isPreventResetTableSelectedRange = event => {
+  const {
+    target
+  } = event;
+  const draggable = target.getAttribute('draggable');
+  const isColumnHeader = target.classList.contains('sdoc-table-column-header');
+  const isRowHeader = target.classList.contains('sdoc-table-row-header');
+  const isHeader = isColumnHeader || isRowHeader;
+  const isPreventReset = isHeader || draggable === 'true';
+  return isPreventReset;
+};
+
+/**
+ * Check drag type, column or row
+ */
+export const getTableDragType = (table, selectedRange) => {
+  const rowCount = table.children.length;
+  const {
+    minRowIndex,
+    maxRowIndex
+  } = selectedRange;
+  const isSelectColumn = minRowIndex === 0 && maxRowIndex === rowCount - 1;
+  return isSelectColumn ? DRAG_HANDLER_COLUMN : DRAG_HANDLER_ROW;
+};
+const updateTableColumns = (editor, table, targetColIndex, startColIndex, endColIndex) => {
+  const columns = [...table.columns];
+  const deleteCount = endColIndex - startColIndex + 1;
+  const newColumns = columns.splice(startColIndex, deleteCount);
+  columns.splice(targetColIndex, 0, ...newColumns);
+  updateColumnWidth(editor, table, columns);
+};
+export const moveColumns = (editor, targetColIndex, startColIndex, endColIndex) => {
+  // Get selected table information
+  const {
+    table,
+    tablePath
+  } = getSelectedInfo(editor);
+  // Check if moving columns forward or backward
+  const isMoveToFroward = targetColIndex < startColIndex;
+
+  // Iterate over each row in the table
+  table.children.forEach((row, rowIndex) => {
+    if (isMoveToFroward) {
+      // Calculate target and source paths for moving columns forward
+      const targetPath = [...tablePath, rowIndex, targetColIndex];
+      const sourcePath = [...tablePath, rowIndex, endColIndex];
+
+      // Move columns forward by inserting nodes
+      for (let insertIndex = endColIndex; insertIndex >= startColIndex; insertIndex--) {
+        const insertNode = row.children[insertIndex];
+        Transforms.removeNodes(editor, {
+          at: sourcePath
+        });
+        Transforms.insertNodes(editor, insertNode, {
+          at: targetPath
+        });
+      }
+    } else {
+      // Calculate target and source paths for moving columns backward
+      const targetPath = [...tablePath, rowIndex, targetColIndex - 1];
+      const sourcePath = [...tablePath, rowIndex, startColIndex];
+
+      // Move columns backward by inserting nodes
+      for (let insertIndex = startColIndex; insertIndex <= endColIndex; insertIndex++) {
+        const insertNode = row.children[insertIndex];
+        Transforms.removeNodes(editor, {
+          at: sourcePath
+        });
+        Transforms.insertNodes(editor, insertNode, {
+          at: targetPath
+        });
+      }
+    }
+  });
+
+  // Update table columns after moving
+  updateTableColumns(editor, table, targetColIndex, startColIndex, endColIndex);
+
+  // Set new selected range after moving columns
+  const newSelectRange = {
+    minRowIndex: 0,
+    maxRowIndex: table.children.length - 1,
+    minColIndex: targetColIndex,
+    maxColIndex: targetColIndex + endColIndex - startColIndex
+  };
+  setTableSelectedRange(editor, newSelectRange);
+};
+
+/**
+ * Calculate the new selected range after dragging a column or row in the table.
+ * @param {Object} table - The table object containing columns and rows.
+ * @param {string} moveType - The type of drag operation (DRAG_HANDLER_COLUMN for column, DRAG_HANDLER_ROW for row).
+ * @param {number} targetIndex - The index of the target column or row after dragging.
+ * @param {number} startIndex - The index of the starting column or row before dragging.
+ * @param {number} endIndex - The index of the ending column or row before dragging.
+ * @returns {Object} - The new selected range after the drag operation.
+ */
+export const getTableSelectedRangeAfterDrag = (table, moveType, targetIndex, startIndex, endIndex) => {
+  // Calculate the total number of columns and rows in the table
+  const colCount = table.columns.length;
+  const rowCount = table.children.length;
+
+  // Initialize the new selected range with full table range
+  const newSelectRange = {
+    minRowIndex: 0,
+    maxRowIndex: rowCount - 1,
+    minColIndex: 0,
+    maxColIndex: colCount - 1
+  };
+
+  // Determine if the drag movement is forward or backward
+  const isMoveToFroward = targetIndex < startIndex;
+
+  // Adjust selected range based on the type of drag operation
+  if (moveType === DRAG_HANDLER_COLUMN) {
+    if (isMoveToFroward) {
+      newSelectRange.minColIndex = targetIndex;
+      newSelectRange.maxColIndex = targetIndex + endIndex - startIndex;
+    } else {
+      const moveCount = endIndex - startIndex + 1;
+      newSelectRange.minColIndex = targetIndex - moveCount;
+      newSelectRange.maxColIndex = targetIndex - 1;
+    }
+  } else {
+    if (isMoveToFroward) {
+      newSelectRange.minRowIndex = targetIndex;
+      newSelectRange.maxRowIndex = targetIndex + endIndex - startIndex;
+    } else {
+      const moveCount = endIndex - startIndex + 1;
+      newSelectRange.minRowIndex = targetIndex - moveCount;
+      newSelectRange.maxRowIndex = targetIndex - 1;
+    }
+  }
+  return newSelectRange;
+};
+export const moveRows = (editor, targetRowIndex, startRowIndex, endRowIndex) => {
+  const {
+    table,
+    tablePath
+  } = getSelectedInfo(editor);
+  const isMoveToFroward = targetRowIndex < startRowIndex;
+  const targetPath = [...tablePath, isMoveToFroward ? targetRowIndex : targetRowIndex - 1];
+  const sourcePath = [...tablePath, isMoveToFroward ? endRowIndex : startRowIndex];
+  if (isMoveToFroward) {
+    for (let insertIndex = endRowIndex; insertIndex >= startRowIndex; insertIndex--) {
+      const insertNode = table.children[insertIndex];
+      Transforms.removeNodes(editor, {
+        at: sourcePath
+      });
+      Transforms.insertNodes(editor, insertNode, {
+        at: targetPath
+      });
+    }
+  } else {
+    for (let insertIndex = startRowIndex; insertIndex <= endRowIndex; insertIndex++) {
+      const insertNode = table.children[insertIndex];
+      Transforms.removeNodes(editor, {
+        at: sourcePath
+      });
+      Transforms.insertNodes(editor, insertNode, {
+        at: targetPath
+      });
+    }
+  }
+  const newSelectRange = {
+    minRowIndex: targetRowIndex,
+    maxRowIndex: targetRowIndex + endRowIndex - startRowIndex,
+    minColIndex: 0,
+    maxColIndex: table.children.length - 1
+  };
+  setTableSelectedRange(editor, newSelectRange);
+};
+export const generateDragMoveElement = tipText => {
+  const canvasId = 'sdoc-drag-image';
+  let canvas = document.getElementById(canvasId);
+  if (!canvas) {
+    canvas = document.createElement('canvas');
+    canvas.width = 150;
+    canvas.height = 30;
+    canvas.id = canvasId;
+    document.body.appendChild(canvas);
+  }
+  canvas.style.display = 'block';
+  canvas.style.position = 'fixed';
+  const context = canvas.getContext('2d');
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.textAlign = 'center';
+  context.fillStyle = 'rgb(66, 129, 219)';
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.font = '12px';
+  context.textBaseline = 'middle';
+  context.fillStyle = 'white';
+  context.fillText(tipText, canvas.width / 2, canvas.height / 2);
+  return canvas;
+};
+export const isHideDragHandlerLine = (editor, displayType, table, cellPath) => {
+  const pathLength = cellPath.length;
+  const rowIndex = cellPath[pathLength - 2];
+  const cellIndex = cellPath[pathLength - 1];
+  let preCellDom = null;
+  if (displayType === DRAG_HANDLER_COLUMN && cellIndex > 1) {
+    const prevCell = table.children[rowIndex].children[cellIndex - 1];
+    preCellDom = ReactEditor.toDOMNode(editor, prevCell);
+  } else if (displayType === DRAG_HANDLER_ROW && rowIndex > 1) {
+    const prevCell = table.children[rowIndex - 1].children[cellIndex];
+    preCellDom = ReactEditor.toDOMNode(editor, prevCell);
+  }
+  const isPrevCellSelected = preCellDom ? preCellDom.classList.contains(CELL_SELECTED) : false;
+
+  // Check if the previous cell is selected
+  if (isPrevCellSelected) return true;
+
+  // Check if the combined cell
+  if (displayType === DRAG_HANDLER_COLUMN) {
+    const isCombined = table.children.some(row => row.children[cellIndex].is_combined);
+    return isCombined;
+  } else {
+    const isCombined = table.children[rowIndex].children.some(cell => cell.is_combined);
+    return isCombined;
+  }
+};
+export const getTableRowSelectedRange = (table, rowIndex) => {
+  const row = table.children[rowIndex];
+  const columnCount = row.children.length;
+  let minRowIndex = rowIndex;
+  let maxRowIndex = rowIndex;
+  let minColIndex = 0;
+  let maxColIndex = columnCount - 1;
+  const findRowRange = findRowIndex => {
+    let checkRow = table.children[findRowIndex];
+    const combinedIndexes = checkRow.children.reduce((acc, cell, index) => {
+      if (cell.is_combined) acc.push(index);
+      if (cell.rowspan > 1) {
+        maxRowIndex = Math.max(maxRowIndex, findRowIndex + cell.rowspan - 1);
+        findRowRange(maxRowIndex);
+      }
+      return acc;
+    }, []);
+    combinedIndexes.some(combinedIndex => {
+      const {
+        rowIndex: mainCellRowIndex,
+        currentCell
+      } = searchCombinedMainCell(table, findRowIndex, combinedIndex);
+      if (minRowIndex > mainCellRowIndex) {
+        minRowIndex = mainCellRowIndex;
+        findRowRange(minRowIndex, 0);
+        return false;
+      } else if (maxRowIndex < mainCellRowIndex + currentCell.rowspan - 1) {
+        maxRowIndex = mainCellRowIndex + currentCell.rowspan - 1;
+        findRowRange(maxRowIndex, 0);
+        return false;
+      }
+      return false;
+    });
+  };
+  findRowRange(rowIndex);
+  return {
+    minRowIndex,
+    maxRowIndex,
+    minColIndex,
+    maxColIndex
+  };
+};
+export const getTableColumnSelectedRange = (table, columnIndex) => {
+  let minRowIndex = 0;
+  let maxRowIndex = table.children.length - 1;
+  let minColIndex = columnIndex;
+  let maxColIndex = columnIndex;
+  const findColRange = findColIndex => {
+    let combinedIndexes = [];
+    table.children.forEach((row, rowIndex) => {
+      const cell = row.children[findColIndex];
+      if (cell.is_combined) combinedIndexes.push(rowIndex);
+      if (cell.colspan > 1) {
+        maxColIndex = Math.max(maxColIndex, findColIndex + cell.colspan - 1);
+        findColRange(maxColIndex);
+      }
+    });
+    combinedIndexes.some(combinedIndex => {
+      const {
+        cellIndex: mainCellColIndex,
+        currentCell
+      } = searchCombinedMainCell(table, combinedIndex, findColIndex);
+      if (minColIndex > mainCellColIndex) {
+        minColIndex = mainCellColIndex;
+        findColRange(minColIndex, 0);
+        return false;
+      } else if (maxColIndex < mainCellColIndex + currentCell.colspan - 1) {
+        maxColIndex = mainCellColIndex + currentCell.colspan - 1;
+        findColRange(maxColIndex, 0);
+        return false;
+      }
+      return false;
+    });
+  };
+  findColRange(columnIndex);
+  return {
+    minRowIndex,
+    maxRowIndex,
+    minColIndex,
+    maxColIndex
+  };
 };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import '../../render/index.css';
+const ColumnDragHandler = _ref => {
+  let {
+    left
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "table-cell-width-just position-absolute resizing",
+    contentEditable: false,
+    style: {
+      left
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-cell-width-just-color-tip"
+  }));
+};
+export default ColumnDragHandler;

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

@@ -0,0 +1,45 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import RowDragHandler from './row-drag-handler';
+import ColumnDragHandler from './column-drag-handler';
+import EventBus from '../../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../../constants';
+import { DRAG_HANDLER_ROW, DRAG_HANDLER_COLUMN } from '../../constants';
+const DragHandlers = _ref => {
+  let {
+    table
+  } = _ref;
+  const [linePosition, setLinePosition] = useState({
+    top: 0,
+    left: 0
+  });
+  const [displayType, setDisplayType] = useState('');
+  const tableID = table.id;
+  const handleShowResizeHandler = useCallback(_ref2 => {
+    let {
+      displayType,
+      left,
+      top,
+      tableId
+    } = _ref2;
+    if (tableId !== tableID) return;
+    const maskOffset = 2;
+    setLinePosition({
+      top,
+      left: left - maskOffset
+    });
+    setDisplayType(displayType);
+  }, [tableID]);
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.TABLE_SHOW_DRAG_HANDLER, handleShowResizeHandler);
+    return () => {
+      unsubscribe();
+    };
+  }, [handleShowResizeHandler]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, displayType === DRAG_HANDLER_ROW && /*#__PURE__*/React.createElement(RowDragHandler, {
+    top: linePosition.top
+  }), displayType === DRAG_HANDLER_COLUMN && /*#__PURE__*/React.createElement(ColumnDragHandler, {
+    left: linePosition.left
+  }));
+};
+export default DragHandlers;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import '../../render/index.css';
+const RowDragHandler = _ref => {
+  let {
+    top
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "table-row-height-just position-absolute resizing",
+    contentEditable: false,
+    style: {
+      top
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-row-height-just-color-tip"
+  }));
+};
+export default RowDragHandler;

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

@@ -16,6 +16,7 @@ import TableRoot from './table-root';
 import TableHeader from './table-header';
 import { findPath } from '../../../core';
 import ResizeMask from './resize-mask';
+import DragHandlers from './drag-handlers';
 import './index.css';
 import './alternate-color.css';
 const Table = _ref => {
@@ -40,6 +41,7 @@ const Table = _ref => {
   const [resizeCellMaskInfo, setResizeCellMaskInfo] = useState({});
   const [isShowResizeHandlers, setIsShowResizeHandlers] = useState(false);
   const [isDraggingResizeHandler, setIsDraggingResizeHandler] = useState(false);
+  const [isDragMove, setIsDragMove] = useState(false);
   const onMouseDown = useCallback(event => {
     if (event.button !== 0) return; // right click not deal
     setIsSettingSelectRange(true);
@@ -68,12 +70,12 @@ const Table = _ref => {
     setSelectedRange(range);
     setTableSelectedRange(editor, range);
     const {
-      maxRowIndex,
-      maxColIndex
+      minRowIndex,
+      minColIndex
     } = range;
     const selection = {
       offset: 0,
-      path: [...path, maxRowIndex, maxColIndex, 0]
+      path: [...path, minRowIndex, minColIndex, 0]
     };
     Transforms.setSelection(editor, {
       anchor: selection,
@@ -200,8 +202,10 @@ const Table = _ref => {
     columns: columns,
     attributes: attributes
   }, isSelected && /*#__PURE__*/React.createElement(TableHeader, {
+    editor: editor,
     table: element,
-    setSelectedRange: setSelectedRangeByClick
+    setSelectedRange: setSelectedRangeByClick,
+    setIsDragMove: setIsDragMove
   }), /*#__PURE__*/React.createElement("div", {
     className: classnames(tableContainerClassName),
     style: style,
@@ -220,6 +224,8 @@ const Table = _ref => {
     element: element,
     resizeCellMaskInfo: resizeCellMaskInfo,
     isDraggingResizeHandler: isDraggingResizeHandler
+  }), isDragMove && /*#__PURE__*/React.createElement(DragHandlers, {
+    table: element
   }))))));
 };
 function renderTable(props) {

package/dist/basic-sdk/extension/plugins/table/render/render-cell.js

@@ -1,15 +1,16 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Editor, Transforms } from '@seafile/slate';
 import ObjectUtils from '../../../../utils/object-utils';
 import { findPath, focusEditor } from '../../../core';
 import { useTableSelectedRangeContext } from './hooks';
-import { EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BACKGROUND_COLOR, TABLE_CELL_STYLE } from '../constants';
-import { colorBlend, getHighlightClass } from '../helpers';
+import { CELL_SELECTED, DRAG_HANDLER_COLUMN, EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BACKGROUND_COLOR, TABLE_CELL_STYLE } from '../constants';
+import { colorBlend, getHighlightClass, getResizeMaskCellInfo, getTableDragType, moveColumns, moveRows, isHideDragHandlerLine, getTableSelectedRangeAfterDrag } from '../helpers';
 import EventBus from '../../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../../constants';
+import { TABLE_DRAG_KEY } from '../../../constants';
 const TableCell = _ref => {
   let {
     attributes,
@@ -36,6 +37,9 @@ const TableCell = _ref => {
   const isSelectedLastCell = isSelected && cellIndex === maxColIndex;
   const isSelectedFirstRow = isSelected && rowIndex === minRowIndex;
   const isSelectedLastRow = isSelected && rowIndex === maxRowIndex;
+  const eventBus = EventBus.getInstance();
+  const tableId = tableEntry[0].id;
+  const canDrop = useRef(false);
   const onContextMenu = useCallback(event => {
     const path = findPath(editor, element);
     focusEditor(editor, path);
@@ -74,8 +78,6 @@ const TableCell = _ref => {
     style = _objectSpread(_objectSpread({}, element.style), style);
   }
   const onMouseMove = mouseDownEvent => {
-    const eventBus = EventBus.getInstance();
-    const tableId = tableEntry[0].id;
     eventBus.dispatch(INTERNAL_EVENT.TABLE_CELL_MOUSE_ENTER, {
       mouseDownEvent,
       cell: element,
@@ -86,10 +88,54 @@ const TableCell = _ref => {
   };
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const highlightClass = useMemo(() => getHighlightClass(editor, cellPath), []);
+  const onDragOver = useCallback(event => {
+    const {
+      target
+    } = event;
+    const table = tableEntry[0];
+    const displayType = getTableDragType(table, selectedRange);
+    const resizeMaskCellInfo = getResizeMaskCellInfo(editor, table, rowIndex, cellIndex);
+    const cellInfo = _objectSpread(_objectSpread({}, resizeMaskCellInfo), {}, {
+      displayType,
+      mouseDownEvent: event,
+      tableId
+    });
+    const isHideHandleLine = isHideDragHandlerLine(editor, displayType, table, cellPath);
+    canDrop.current = !isHideHandleLine;
+    if (target.classList.contains(CELL_SELECTED) || isHideHandleLine) {
+      cellInfo.top = -9999;
+      cellInfo.left = -9999;
+    }
+    eventBus.dispatch(INTERNAL_EVENT.TABLE_SHOW_DRAG_HANDLER, cellInfo);
+  }, [cellIndex, cellPath, editor, eventBus, rowIndex, selectedRange, tableEntry, tableId]);
+  const handleDrop = useCallback(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (!canDrop.current) return;
+    const {
+      target
+    } = event;
+    if (target.classList.contains(CELL_SELECTED)) return;
+    const dragDataJson = event.dataTransfer.getData(TABLE_DRAG_KEY);
+    if (!dragDataJson) return;
+    const dragData = JSON.parse(dragDataJson);
+    if (dragData) {
+      const {
+        tableId: dragTableId,
+        startIndex,
+        endIndex,
+        dragType
+      } = dragData;
+      if (dragTableId !== tableId) return;
+      dragType === DRAG_HANDLER_COLUMN ? moveColumns(editor, cellIndex, startIndex, endIndex) : moveRows(editor, rowIndex, startIndex, endIndex);
+      const range = dragType === DRAG_HANDLER_COLUMN ? getTableSelectedRangeAfterDrag(tableEntry[0], dragType, cellIndex, startIndex, endIndex) : getTableSelectedRangeAfterDrag(tableEntry[0], dragType, rowIndex, startIndex, endIndex);
+      eventBus.dispatch(INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, tableEntry[0], range);
+    }
+  }, [cellIndex, editor, eventBus, rowIndex, tableEntry, tableId]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
     style: _objectSpread(_objectSpread({}, element.style), style),
     className: classnames('table-cell', attributes.className, highlightClass, {
-      'cell-selected': isSelected,
+      [CELL_SELECTED]: isSelected,
       'cell-light-height-left-border': isSelectedFirstCell,
       'cell-light-height-right-border': isSelectedLastCell,
       'cell-light-height-top-border': isSelectedFirstRow,
@@ -99,7 +145,9 @@ const TableCell = _ref => {
     "row-index": rowIndex,
     "cell-index": cellIndex,
     onContextMenu: onContextMenu,
-    onMouseMove: onMouseMove
+    onMouseMove: onMouseMove,
+    onDragOver: onDragOver,
+    onDrop: handleDrop
   }), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-cell-container"
   }, children));

package/dist/basic-sdk/extension/plugins/table/render/table-header/columns-header/column-header.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useMemo } from 'react';
 import classnames from 'classnames';
 import { useSlateStatic } from '@seafile/slate-react';
 import ObjectUtils from '../../../../../../utils/object-utils';
@@ -13,15 +13,35 @@ const ColumnHeader = _ref => {
     setAddIconPosition,
     setInsertColumnIndex,
     selectRange,
-    tableSize
+    tableSize,
+    handleDragStart,
+    handleDragEnd
   } = _ref;
   const editor = useSlateStatic();
+  const {
+    tableSelectedRange
+  } = editor;
   const columnHeaderRef = useRef(null);
   const tableRoot = useTableRootContext();
   const selectedRange = useTableSelectedRangeContext();
   const currentCell = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_CELL);
   const currentCellPath = currentCell ? findPath(editor, currentCell, [-1, -1]) : [-1, -1];
   const pathLength = currentCellPath.length;
+  const canDrag = useMemo(() => {
+    const {
+      minRowIndex,
+      maxRowIndex,
+      minColIndex,
+      maxColIndex
+    } = tableSelectedRange;
+    const [rowNum] = tableSize;
+    const isSelectColumn = minRowIndex === 0 && maxRowIndex === rowNum - 1;
+    const isSelectRangeColumn = minColIndex <= index && index <= maxColIndex;
+    const isSelectAllColumn = minColIndex === 0 && maxColIndex === tableSize[1] - 1;
+    if (tableSize[1] === 1 || isSelectAllColumn) return false;
+    if (isSelectColumn && isSelectRangeColumn) return true;
+    return false;
+  }, [index, tableSelectedRange, tableSize]);
   const onMouseMove = useCallback(event => {
     const {
       left,
@@ -58,15 +78,19 @@ const ColumnHeader = _ref => {
   return /*#__PURE__*/React.createElement("div", {
     className: classnames('sdoc-table-column-header h-100', {
       'range-selected': isSelectedAColumn && isSelectedRangeColumn,
-      'range-selected-tip': !isSelectedAColumn && isSelectedRangeColumn || currentCellPath[pathLength - 1] === index
+      'range-selected-tip': !isSelectedAColumn && isSelectedRangeColumn || currentCellPath[pathLength - 1] === index,
+      'drag': canDrag
     }),
     ref: columnHeaderRef,
     onMouseMove: onMouseMove,
     onMouseLeave: onMouseLeave,
     onClick: () => selectRange(index),
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
     style: {
       width: column.width
-    }
+    },
+    draggable: canDrag
   });
 };
 export default ColumnHeader;

package/dist/basic-sdk/extension/plugins/table/render/table-header/columns-header/index.js

@@ -9,7 +9,9 @@ const ColumnsHeader = _ref => {
   let {
     table,
     selectRange,
-    tableSize
+    tableSize,
+    handleDragStart,
+    handleDragEnd
   } = _ref;
   const editor = useSlateStatic();
   const [insertColumnIndex, setInsertColumnIndex] = useState(0);
@@ -55,7 +57,9 @@ const ColumnsHeader = _ref => {
       tableSize: tableSize,
       setAddIconPosition: setAddIconPosition,
       setInsertColumnIndex: setInsertColumnIndex,
-      selectRange: selectRange
+      selectRange: selectRange,
+      handleDragStart: handleDragStart,
+      handleDragEnd: handleDragEnd
     });
   }))), addIconPosition && /*#__PURE__*/React.createElement("div", {
     className: classnames('position-fixed sdoc-table-add-element-icon-content', {

package/dist/basic-sdk/extension/plugins/table/render/table-header/index.css

@@ -10,6 +10,11 @@
   flex-shrink: 0;
   border-right: 1px solid rgba(0, 0, 0, .08);
   background-color: rgb(243, 245, 247);
+  cursor: pointer;
+}
+
+.sdoc-table-wrapper .sdoc-table-columns-header .sdoc-table-column-header.drag {
+  cursor: move;
 }
 
 /* row-header */
@@ -28,6 +33,11 @@
   width: 100%;
   background-color: rgb(243, 245, 247);
   border-bottom: 1px solid rgba(0, 0, 0, .08);
+  cursor: pointer;
+}
+
+.sdoc-table-wrapper .sdoc-table-rows-header .sdoc-table-row-header.drag {
+  cursor: move;
 }
 
 .sdoc-table-wrapper .sdoc-table-rows-columns-header {
@@ -71,3 +81,4 @@
 .sdoc-table-wrapper .sdoc-table-add-element-icon-content:hover {
   cursor: pointer;
 }
+

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

@@ -1,36 +1,34 @@
 import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import ColumnsHeader from './columns-header';
 import RowsHeader from './rows-header';
-import { useResizeHandlersContext } from '../hooks';
+import { useResizeHandlersContext, useTableSelectedRangeContext } from '../hooks';
 import RowsColumnsHeader from './rows-columns-header';
+import { generateDragMoveElement, getTableDragType, getTableRowSelectedRange, getTableColumnSelectedRange } from '../../helpers';
+import { DRAG_HANDLER_COLUMN, DRAG_HANDLER_ROW, EMPTY_SELECTED_RANGE } from '../../constants';
+import { TABLE_DRAG_KEY } from '../../../../constants';
 import './index.css';
 const TableHeader = _ref => {
   let {
+    editor,
     table,
-    setSelectedRange
+    setSelectedRange,
+    setIsDragMove
   } = _ref;
+  const {
+    t
+  } = useTranslation();
   const columns = useResizeHandlersContext();
+  const selectedRange = useTableSelectedRangeContext() || EMPTY_SELECTED_RANGE;
   const selectColumn = useCallback(columnIndex => {
-    const rowsCount = table.children.length;
-    const range = {
-      minRowIndex: 0,
-      maxRowIndex: rowsCount - 1,
-      minColIndex: columnIndex,
-      maxColIndex: columnIndex
-    };
-    setSelectedRange(range);
+    const selectedRange = getTableColumnSelectedRange(table, columnIndex);
+    setSelectedRange(selectedRange);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table, columns]);
   const selectRow = useCallback(rowIndex => {
-    const columnsCount = columns.length;
-    const range = {
-      minRowIndex: rowIndex,
-      maxRowIndex: rowIndex,
-      minColIndex: 0,
-      maxColIndex: columnsCount - 1
-    };
-    setSelectedRange(range);
+    const selectedRange = getTableRowSelectedRange(table, rowIndex);
+    setSelectedRange(selectedRange);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table, columns]);
@@ -48,17 +46,62 @@ const TableHeader = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table, columns]);
   const tableSize = [table.children.length, columns.length];
+  const handleDragStart = event => {
+    event.stopPropagation();
+    const {
+      tableSelectedRange
+    } = editor;
+    const tableId = table.id;
+    const {
+      minColIndex,
+      maxColIndex,
+      minRowIndex,
+      maxRowIndex
+    } = tableSelectedRange;
+    const dragType = getTableDragType(table, selectedRange);
+    const startIndex = dragType === DRAG_HANDLER_COLUMN ? minColIndex : minRowIndex;
+    const endIndex = dragType === DRAG_HANDLER_ROW ? maxRowIndex : maxColIndex;
+    const data = {
+      tableId,
+      dragType,
+      startIndex,
+      endIndex
+    };
+    const dragData = JSON.stringify(data);
+    event.dataTransfer.setData(TABLE_DRAG_KEY, dragData);
+    event.dataTransfer.effectAllowed = 'move';
+    const moveCount = endIndex - startIndex + 1;
+    const tipText = dragType === DRAG_HANDLER_COLUMN ? t('Move_column_count', {
+      count: moveCount
+    }) : t('Move_row_count', {
+      count: moveCount
+    });
+    const dragImage = generateDragMoveElement(tipText);
+    event.dataTransfer.setDragImage(dragImage, 0, 0);
+    setIsDragMove(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  };
+
+  const handleDragEnd = event => {
+    setIsDragMove(false);
+    const indicator = document.getElementById('sdoc-drag-image');
+    indicator.style.display = 'none';
+  };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ColumnsHeader, {
     table: table,
     selectRange: selectColumn,
-    tableSize: tableSize
+    tableSize: tableSize,
+    handleDragStart: handleDragStart,
+    handleDragEnd: handleDragEnd
   }), /*#__PURE__*/React.createElement(RowsColumnsHeader, {
     selectRange: selectTable,
     tableSize: tableSize
   }), /*#__PURE__*/React.createElement(RowsHeader, {
     table: table,
     selectRange: selectRow,
-    tableSize: tableSize
+    tableSize: tableSize,
+    handleDragStart: handleDragStart,
+    handleDragEnd: handleDragEnd
   }));
 };
 export default TableHeader;

package/dist/basic-sdk/extension/plugins/table/render/table-header/rows-header/index.js

@@ -9,7 +9,9 @@ const RowsHeader = _ref => {
   let {
     table,
     selectRange,
-    tableSize
+    tableSize,
+    handleDragStart,
+    handleDragEnd
   } = _ref;
   const editor = useSlateStatic();
   const {
@@ -54,7 +56,9 @@ const RowsHeader = _ref => {
       tableSize: tableSize,
       setAddIconPosition: setAddIconPosition,
       setInsertRowIndex: setInsertRowIndex,
-      selectRange: selectRange
+      selectRange: selectRange,
+      handleDragStart: handleDragStart,
+      handleDragEnd: handleDragEnd
     });
   })), addIconPosition && /*#__PURE__*/React.createElement("div", {
     className: classnames('position-fixed sdoc-table-add-element-icon-content', {

package/dist/basic-sdk/extension/plugins/table/render/table-header/rows-header/row-header.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useState, useEffect } from 'react';
+import React, { useRef, useCallback, useState, useEffect, useMemo } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import classnames from 'classnames';
 import ObjectUtils from '../../../../../../utils/object-utils';
@@ -15,9 +15,14 @@ const RowHeader = _ref => {
     setAddIconPosition,
     setInsertRowIndex,
     selectRange,
-    tableSize
+    tableSize,
+    handleDragStart,
+    handleDragEnd
   } = _ref;
   const editor = useSlateStatic();
+  const {
+    tableSelectedRange
+  } = editor;
   useEffect(() => {
     setRowHeight(getRowDomHeight(editor, row));
   }, [editor, row, tableSize]);
@@ -30,6 +35,21 @@ const RowHeader = _ref => {
   const currentCell = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_CELL);
   const currentCellPath = currentCell ? findPath(editor, currentCell, [-1, -1]) : [-1, -1];
   const pathLength = currentCellPath.length;
+  const canDrag = useMemo(() => {
+    const {
+      minRowIndex,
+      maxRowIndex,
+      minColIndex,
+      maxColIndex
+    } = tableSelectedRange;
+    const [, colNum] = tableSize;
+    const isSelectRow = minColIndex === 0 && maxColIndex === colNum - 1;
+    const isSelectRangeRow = minRowIndex <= index && index <= maxRowIndex;
+    const isSelectAllRows = minRowIndex === 0 && maxRowIndex === tableSize[0] - 1;
+    if (tableSize[0] === 1 || isSelectAllRows) return false;
+    if (isSelectRow && isSelectRangeRow) return true;
+    return false;
+  }, [index, tableSelectedRange, tableSize]);
   useEffect(() => {
     if (elementHasImage(row)) {
       // There is a delay in image loading
@@ -80,7 +100,8 @@ const RowHeader = _ref => {
   return /*#__PURE__*/React.createElement("div", {
     className: classnames('sdoc-table-row-header', {
       'range-selected': isSelectedARow && isSelectedSomeRow,
-      'range-selected-tip': !isSelectedARow && isSelectedSomeRow || currentCellPath[pathLength - 2] === index
+      'range-selected-tip': !isSelectedARow && isSelectedSomeRow || currentCellPath[pathLength - 2] === index,
+      'drag': canDrag
     }),
     style: {
       height: rowHeight
@@ -88,7 +109,10 @@ const RowHeader = _ref => {
     ref: rowHeaderRef,
     onClick: () => selectRange(index),
     onMouseMove: onMouseMove,
-    onMouseLeave: onMouseLeave
+    onMouseLeave: onMouseLeave,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    draggable: canDrag
   });
 };
 export default RowHeader;

package/dist/basic-sdk/extension/toolbar/side-toolbar/event.js

@@ -1,5 +1,6 @@
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
+import { TABLE_DRAG_KEY } from '../../constants';
 export const onMouseEnter = (event, element) => {
   event.stopPropagation();
   const eventBus = EventBus.getInstance();
@@ -8,6 +9,8 @@ export const onMouseEnter = (event, element) => {
 export const onDragOver = event => {
   event.stopPropagation();
   event.preventDefault();
+  const dragTypes = event.dataTransfer.types;
+  if (dragTypes.includes(TABLE_DRAG_KEY)) return;
   const eventBus = EventBus.getInstance();
   eventBus.dispatch(INTERNAL_EVENT.ON_DRAG_OVER_BLOCK, event);
 };

package/dist/basic-sdk/extension/toolbar/side-toolbar/index.js

@@ -9,7 +9,7 @@ import { focusEditor } from '../../core';
 import { getDomTopHeight, setSelection, isVoidNode, getNodeEntry, isBlockquote, isList, onWrapListItem } from './helpers';
 import { insertImageFiles } from '../../plugins/image/helpers';
 import { INTERNAL_EVENT } from '../../../constants';
-import { CODE_BLOCK, TABLE, BLOCKQUOTE, CHECK_LIST_ITEM, CALL_OUT } from '../../constants';
+import { CODE_BLOCK, TABLE, BLOCKQUOTE, CHECK_LIST_ITEM, CALL_OUT, TABLE_DRAG_KEY } from '../../constants';
 import { getCalloutEntry } from '../../plugins/callout/helper';
 import './index.css';
 let sourceElement = null;
@@ -105,9 +105,11 @@ const SideToolbar = () => {
     leaveElement.classList.remove('sdoc-draging');
   }, []);
   const drop = useCallback(event => {
+    const dragTypes = event.dataTransfer.types;
     targetElement = event.currentTarget;
     targetElement.classList.remove('sdoc-draging');
-
+    // Prevent dragging table data to the editor
+    if (dragTypes.includes(TABLE_DRAG_KEY)) return;
     // Drag local image files to sdoc
     if (event.dataTransfer.files.length > 0) {
       const [, targetPath] = getNodeEntry(editor, targetElement);

package/package.json

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

package/public/locales/en/sdoc-editor.json

@@ -448,5 +448,7 @@
   "Create": "Create",
   "Top_align": "Top",
   "Center_align": "Middle",
-  "Bottom_align": "Bottom"
+  "Bottom_align": "Bottom",
+  "Move_column_count": "Moving {{count}} column(s)",
+  "Move_row_count": "Moving {{count}} row(s)"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -448,5 +448,7 @@
   "Create": "创建",
   "Top_align": "顶端对齐",
   "Center_align": "居中对齐",
-  "Bottom_align": "底端对齐"
+  "Bottom_align": "底端对齐",
+  "Move_column_count": "正在移动{{count}}列",
+  "Move_row_count": "正在移动{{count}}行"
 }

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,15 +14,12 @@
     />
       <missing-glyph />
       
-<<<<<<< HEAD
       <glyph glyph-name="sdoc-center-alignment" unicode="&#58984;" d="M560 896v-128H832v-320h-272v-128H928v-320H560v-128h-96v128H96V320h368v128H192V768h272V896h96zM832 224H192v-128h640v128zM736 672H288v-128h448V672z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-bottom-alignment" unicode="&#58985;" d="M0-64v96h1024v-96H0z m448 192V832H128v-704h320z m-96 96H224V736h128v-512z m544-96V640H576v-512h320z m-96 96h-128V544h128v-320z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-top-alignment" unicode="&#58986;" d="M0 832v-96h1024V832H0z m448-192v-704H128V640h320z m-96-96H224v-512h128V544z m544 96v-512H576V640h320z m-96-96h-128v-320h128V544z"  horiz-adv-x="1024" />
       
-=======
->>>>>>> 6ce93a64 (feat: read all)
       <glyph glyph-name="sdoc-all-read" unicode="&#58973;" d="M883.2 768h121.6c9.6 0 19.2-9.6 19.2-19.2v-60.8c0-6.4-9.6-16-19.2-16h-121.6c-9.6 0-19.2 9.6-19.2 19.2V748.8c0 9.6 9.6 19.2 19.2 19.2z m-284.8-704h406.4c12.8 0 22.4-9.6 22.4-19.2v-60.8c0-9.6-9.6-19.2-22.4-19.2H598.4c-12.8 0-22.4 9.6-22.4 19.2v60.8c0 9.6 9.6 19.2 22.4 19.2z m403.2 352c12.8 0 22.4-9.6 22.4-19.2v-60.8c0-9.6-9.6-19.2-22.4-19.2h-246.4c-12.8 0-22.4 9.6-22.4 19.2v60.8c0 9.6 9.6 19.2 22.4 19.2h246.4zM761.6 860.8c-3.2 3.2-9.6 3.2-12.8 3.2-6.4 0-9.6-3.2-12.8-9.6L304 70.4 67.2 256c-9.6 6.4-22.4 3.2-28.8-6.4L0 188.8c-3.2-9.6 0-22.4 9.6-28.8l336-256L819.2 803.2c6.4 9.6 3.2 22.4-6.4 28.8l-51.2 28.8z"  horiz-adv-x="1027" />
       
       <glyph glyph-name="sdoc-freezed" unicode="&#58983;" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM316.8 716.8c118.4 70.4 265.6 70.4 384 3.2s192-195.2 192-332.8c0-137.6-73.6-265.6-195.2-332.8-182.4-105.6-416-41.6-521.6 140.8S134.4 608 316.8 716.8z m348.8-604.8c137.6 80 195.2 249.6 131.2 396.8L259.2 195.20000000000005c92.8-124.8 268.8-163.2 406.4-83.2zM352 652.8c-137.6-80-192-249.6-128-393.6l537.6 310.4c-96 128-272 163.2-409.6 83.2z"  horiz-adv-x="1024" />