@seafile/sdoc-editor 1.0.200 → 1.0.202-test-0.1

package/dist/basic-sdk/extension/plugins/multi-column/helper.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = exports.insertMultiColumn = exports.handleInsertMultiColumn = exports.generateEmptyMultiColumn = void 0;
+exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = exports.realTimePageWidth = exports.insertMultiColumn = exports.handleInsertMultiColumn = exports.generateEmptyMultiColumn = void 0;
 var _slugid = _interopRequireDefault(require("slugid"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
@@ -40,7 +40,7 @@ const generateEmptyMultiColumn = (editor, MultiColumnType) => {
     default:
       break;
   }
-  const initialColumnWidth = editor.width ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(editor.width / multiColumnNumber)) : _constants2.COLUMN_MIN_WIDTH;
+  const initialColumnWidth = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / multiColumnNumber)) : _constants2.COLUMN_MIN_WIDTH;
   for (let i = 0; i < multiColumnNumber; i++) {
     const columnWidthKey = _slugid.default.nice();
     column.push({
@@ -143,7 +143,7 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
   const newMultiColumnNode = _slate.Node.get(editor, multiColumnPath);
   const targetColumnIndex = selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
   const remainingColumn = column.filter((_, index) => index !== targetColumnIndex);
-  const columnWidth = editor.width ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(editor.width / remainingColumn.length)) : _constants2.COLUMN_MIN_WIDTH;
+  const columnWidth = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / remainingColumn.length)) : _constants2.COLUMN_MIN_WIDTH;
 
   // Recalculate width of every left column
   const newColumn = remainingColumn.map((column, index) => ({
@@ -153,4 +153,10 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
   }));
   updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
 };
-exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
+exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
+const realTimePageWidth = () => {
+  const sdocEditorPage = document.getElementById('sdoc-editor');
+  const pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
+  return pageWidth;
+};
+exports.realTimePageWidth = realTimePageWidth;

package/dist/basic-sdk/extension/plugins/multi-column/render/index.css

@@ -11,6 +11,7 @@
   position: relative;
   display: grid;
   cursor: text;
+  /* border: 1px solid red; */
 }
 
 .sdoc-multicolumn-wrapper .column {
@@ -18,6 +19,7 @@
   left: 3px;
   line-height: 1.5;
   align-items: flex-start;
+  /* border: 1px solid red; */
 }
 
 .sdoc-column-container {
@@ -29,11 +31,13 @@
   box-sizing: border-box;
   word-wrap: break-word;
   white-space: pre-wrap;
+
 }
 
 .sdoc-multicolumn-container .column-resize-handler {
   height: 100%;
   position: absolute;
+  /* border: 1px solid red; */
 }
 
 .sdoc-multicolumn-container .column-resize-handler .column-width-just {
@@ -44,10 +48,12 @@
   margin-right: 1.5px;
   position: absolute;
   cursor: col-resize;
+  border: 1px solid red;
 }
 
 .sdoc-multicolumn-container .column-resize-handler .column-width-just.active,
 .sdoc-multicolumn-container .column-resize-handler .column-width-just:hover  {
   background-color: lightgray;
   cursor: col-resize;
+  /* border: 1px solid red; */
 }

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

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _multiColumnRoot = _interopRequireDefault(require("./multi-column-root"));
 var _resizeHandlers = _interopRequireDefault(require("../resize-handlers"));
+var _helper = require("../helper");
 require("./index.css");
 const MultiColumn = _ref => {
   let {
@@ -24,17 +25,55 @@ const MultiColumn = _ref => {
     ...element.style
   } : {});
   const multiColumnContainerClassName = (0, _classnames.default)('sdoc-multicolumn-container', className);
+  const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.realTimePageWidth)());
   const handleResizeColumn = newColumn => {
     setColumn(newColumn);
   };
   (0, _react.useEffect)(() => {
-    const columnWidthList = element.column.map(item => `${item.width}px`);
-    const newStyle = {
-      ...element.style,
-      gridTemplateColumns: columnWidthList.join(' ')
-    };
-    setStyle(newStyle);
-  }, [element.style, element.column, column]);
+    console.log('real', column);
+    let columnWidthList = column.map(item => `${item.width}px`);
+    console.log(0, columnWidthList);
+    const sdocEditorPage = document.getElementById('sdoc-editor');
+    if (sdocEditorPage) {
+      const resizeObserver = new ResizeObserver(entries => {
+        const realTimeWidth = entries[0].contentRect.width;
+        if (realTimeWidth !== pageWidth) {
+          const scaleFactor = realTimeWidth / pageWidth;
+          const updatedColumns = column.map(item => ({
+            ...item,
+            width: Math.round(item.width * scaleFactor)
+          }));
+          columnWidthList = updatedColumns.map(item => `${item.width}px`);
+          console.log(22, columnWidthList);
+          const newStyle = {
+            ...element.style,
+            gridTemplateColumns: columnWidthList.join(' ')
+          };
+          setStyle(newStyle);
+          console.log(4, updatedColumns);
+          setColumn(updatedColumns);
+          setPageWidth(realTimeWidth);
+        }
+      });
+      resizeObserver.observe(sdocEditorPage);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    } else {
+      const newStyle = {
+        ...element.style,
+        gridTemplateColumns: columnWidthList.join(' ')
+      };
+      setStyle(newStyle);
+    }
+  }, [pageWidth, element.style, element.column, column]);
+
+  // useEffect(() => {
+  //   const columnWidthList = element.column.map(item => `${item.width}px`);
+  //   const newStyle = { ...element.style, gridTemplateColumns: columnWidthList.join(' ') };
+  //   setStyle(newStyle);
+  // }, [element.style, element.column, column]);
+
   return /*#__PURE__*/_react.default.createElement(_multiColumnRoot.default, {
     attributes: attributes
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -44,7 +83,8 @@ const MultiColumn = _ref => {
     "data-id": element.id
   }, children, /*#__PURE__*/_react.default.createElement(_resizeHandlers.default, {
     element: element,
-    handleResizeColumn: handleResizeColumn
+    handleResizeColumn: handleResizeColumn,
+    columnWidthList: column
   })));
 };
 function renderMultiColumn(props) {

package/dist/basic-sdk/extension/plugins/multi-column/render/multi-column-root.js

@@ -8,17 +8,19 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _slateReact = require("@seafile/slate-react");
+var _helper = require("../helper");
 const MultiColumnRoot = _ref => {
   let {
     attributes,
     children
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
+  console.log(33, (0, _helper.realTimePageWidth)());
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
     className: (0, _classnames.default)('sdoc-multicolumn-wrapper position-relative', attributes.className),
     style: {
       ...attributes.style,
-      maxWidth: editor.width ? editor.width : '100%'
+      maxWidth: (0, _helper.realTimePageWidth)() ? (0, _helper.realTimePageWidth)() : '100%'
     }
   }), children);
 };

package/dist/basic-sdk/extension/plugins/multi-column/render/render-column.js

@@ -22,11 +22,12 @@ const Column = _ref => {
   const parentPath = _slate.Path.parent(path);
   const [parentNode] = _slate.Editor.node(editor, parentPath);
   (0, _react.useEffect)(() => {
+    console.log(555, parentNode.column);
     const matchingColumn = parentNode.column.find(column => column.key === element.id);
     if (matchingColumn) {
       setColumnWidth(matchingColumn.width);
     }
-  }, [editor, element, parentNode.column]);
+  }, [editor, element, parentNode.column, columnWidth]);
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
     className: (0, _classnames.default)('column', attributes.className),
     "data-id": element.id,

package/dist/basic-sdk/extension/plugins/multi-column/resize-handlers/index.js

@@ -16,10 +16,11 @@ var _mouseEvent = require("../../../../utils/mouse-event");
 const ResizeHandlers = _ref => {
   let {
     element,
-    handleResizeColumn
+    handleResizeColumn,
+    columnWidthList
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
-  const [column, setColumn] = (0, _react.useState)(element.column);
+  const [column, setColumn] = (0, _react.useState)(columnWidthList);
   const [isDraggingResizeHandler, setIsDraggingResizeHandler] = (0, _react.useState)(false);
   const [adjustingCell, setAdjustingCell] = (0, _react.useState)(null);
   const [resizeInfo, setResizeInfo] = (0, _react.useState)({
@@ -41,8 +42,8 @@ const ResizeHandlers = _ref => {
 
   // Render when column element of multi_column node changes
   (0, _react.useEffect)(() => {
-    setColumn(element.column);
-  }, [element.column]);
+    setColumn(columnWidthList);
+  }, [columnWidthList]);
   (0, _react.useEffect)(() => {
     const path = _slateReact.ReactEditor.findPath(editor, element);
     const [node] = _slate.Editor.node(editor, path);

package/dist/basic-sdk/extension/plugins/seatable-tables/helpers.js

@@ -80,9 +80,9 @@ const insertSeaTableTable = function (editor, item) {
   _slate.Transforms.setNodes(editor, node);
 };
 exports.insertSeaTableTable = insertSeaTableTable;
-const updateSeaTableTable = (editor, props) => {
+const updateSeaTableTable = (editor, props, options) => {
   _slate.Transforms.setNodes(editor, {
     ...props
-  });
+  }, options);
 };
 exports.updateSeaTableTable = updateSeaTableTable;

package/dist/basic-sdk/extension/plugins/seatable-tables/op-menu/index.js

@@ -107,14 +107,32 @@ function OpMenu(_ref3) {
   const [isShowHideColumn, setIsShowHideColumn] = (0, _react.useState)(false);
   const [isShowSeaTableSetting, setIsShowSeaTableSetting] = (0, _react.useState)(false);
   const onCloseOther = (0, _react.useCallback)(closeList => {
+    const {
+      filterData,
+      sortsData
+    } = seaTableRef.current;
     closeList.forEach(item => {
       item === 'tableList' && setIsShowTablesList(false);
-      item === 'tableFilter' && setIsShowFilter(false);
-      item === 'tableSort' && setIsShowSort(false);
+      if (item === 'tableFilter') {
+        if (filterData && Object.keys(filterData).length > 0) {
+          (0, _helpers.updateSeaTableTable)(editor, filterData);
+          seaTableRef.current['filterData'] = {};
+        }
+        setTimeout(() => {
+          setIsShowFilter(false);
+        }, 1000);
+      }
+      if (item === 'tableSort') {
+        if (sortsData && Object.keys(sortsData).length > 0) {
+          (0, _helpers.updateSeaTableTable)(editor, sortsData);
+          seaTableRef.current['sortsData'] = {};
+        }
+        setIsShowSort(false);
+      }
       item === 'tableColumnHidden' && setIsShowHideColumn(false);
       item === 'tableSetting' && setIsShowSeaTableSetting(false);
     });
-  }, []);
+  }, [editor, seaTableRef]);
   const onClickOutside = (0, _react.useCallback)(e => {
     if (seaTableRef !== null && seaTableRef !== void 0 && seaTableRef.current.contains(e.target)) {
       onCloseOther(['tableList', 'tableFilter', 'tableSort', 'tableColumnHidden', 'tableSetting']);
@@ -190,21 +208,25 @@ function OpMenu(_ref3) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowFilter]);
   const onFiltersChange = (0, _react.useCallback)((filters, filter_conjunction) => {
-    updatePageSettings({
-      filters,
-      filter_conjunction
-    });
-  }, [updatePageSettings]);
+    if (seaTableRef.current) {
+      seaTableRef.current['filterData'] = {
+        filters,
+        filter_conjunction
+      };
+    }
+  }, [seaTableRef]);
   const onSort = (0, _react.useCallback)(() => {
     setIsShowSort(!isShowSort);
     onCloseOther(['tableList', 'tableFilter', 'tableColumnHidden', 'tableSetting']);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowSort]);
   const onSortsChange = (0, _react.useCallback)(sorts => {
-    updatePageSettings({
-      sorts
-    });
-  }, [updatePageSettings]);
+    if (seaTableRef.current) {
+      seaTableRef.current['sortsData'] = {
+        sorts
+      };
+    }
+  }, [seaTableRef]);
   const onHiddenColumn = (0, _react.useCallback)(() => {
     setIsShowHideColumn(!isShowHideColumn);
     onCloseOther(['tableList', 'tableSort', 'tableFilter', 'tableSetting']);

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/seatable-table.js

@@ -18,6 +18,7 @@ var _recordList = _interopRequireDefault(require("./record-list"));
 var _opMenu = _interopRequireDefault(require("../op-menu"));
 var _useScrollContext = require("../../../../hooks/use-scroll-context");
 var _helpers = require("../../seatable-column/helpers");
+var _helpers2 = require("../helpers");
 require("./index.css");
 function SeaTableTable(_ref) {
   var _tableInfoRef$current, _tableInfoRef$current2;
@@ -218,13 +219,54 @@ function SeaTableTable(_ref) {
       observerRefValue.removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll, readOnly, scrollRef]);
+  const handleSaveData = (0, _react.useCallback)(() => {
+    const {
+      filterData,
+      sortsData
+    } = seaTableRef.current;
+    if (filterData && Object.keys(filterData).length > 0) {
+      const path = _slateReact.ReactEditor.findPath(editor, element);
+      (0, _helpers2.updateSeaTableTable)(editor, filterData, {
+        at: {
+          anchor: {
+            offset: 0,
+            path
+          },
+          focus: {
+            offset: 0,
+            path
+          }
+        }
+      });
+      seaTableRef.current['filterData'] = {};
+    }
+    if (sortsData && Object.keys(sortsData).length > 0) {
+      const path = _slateReact.ReactEditor.findPath(editor, element);
+      (0, _helpers2.updateSeaTableTable)(editor, sortsData, {
+        at: {
+          anchor: {
+            offset: 0,
+            path
+          },
+          focus: {
+            offset: 0,
+            path
+          }
+        }
+      });
+      seaTableRef.current['sortsData'] = {};
+    }
+  }, [editor, element]);
   (0, _react.useEffect)(() => {
     if (!isSelected) {
-      setIsShowMenu(false);
-      setIsShowColumnWidth(false);
-      setIsCanModifyColumnWidth(false);
+      handleSaveData();
+      queueMicrotask(() => {
+        setIsShowMenu(false);
+        setIsShowColumnWidth(false);
+        setIsCanModifyColumnWidth(false);
+      });
     }
-  }, [isSelected]);
+  }, [editor, element, handleSaveData, isSelected]);
   const onTableClick = (0, _react.useCallback)(event => {
     if (readOnly) return;
     const {
@@ -254,7 +296,8 @@ function SeaTableTable(_ref) {
   });
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
     className: "seatable-table-wrapper",
-    contentEditable: true
+    contentEditable: true,
+    suppressContentEditableWarning: true
   }), /*#__PURE__*/_react.default.createElement("div", {
     ref: seaTableRef,
     className: containerClass,

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateTableRowHeight = exports.updateColumnWidth = exports.splitCell = exports.setTableSelectedRange = exports.setTableFragmentData = exports.setCellStyle = exports.removeTableElement = exports.removeTable = exports.normalizeTableELement = exports.moveRows = exports.moveColumns = exports.isTableWidthFitScreen = exports.isTableMenuDisabled = exports.isTableLocation = exports.isSelectedAllCell = exports.isPreventResetTableSelectedRange = exports.isLastTableCell = exports.isInTableSameCell = exports.isInTable = exports.isHideDragHandlerLine = exports.isCursorAtCellStart = exports.isCursorAtCellEnd = exports.isCombineCellsDisabled = exports.isAllInTable = exports.insertTableRow = exports.insertTableElement = exports.insertTableColumn = exports.insertTableByTemplate = exports.insertTable = exports.insertMultipleRowsAndColumns = exports.handleInsertTable = exports.handleCombinedCellsBeforeDeleteTableRow = exports.handleCombinedCellsBeforeDeleteTableColumn = exports.handleCombinedCellsAfterInsertTableRow = exports.handleCombinedCellsAfterInsertTableColumn = exports.getTableSelectedRangeAfterDrag = exports.getTableRowSelectedRange = exports.getTableDragType = exports.getTableColumnsWidth = exports.getTableColumnsAfterInsertColumn = exports.getTableColumns = exports.getTableColumnSelectedRange = exports.getSelectedInfo = exports.getRowHeight = exports.getRowDomHeight = exports.getResizeMaskCellInfo = exports.getInsertPosition = exports.getHighlightClass = exports.getFirstTableCell = exports.getCellInheritStyles = exports.getCellHighlightClassName = exports.getCellColumn = exports.generateTableRow = exports.generateTableCell = exports.generateInheritStyle = exports.generateEmptyTable = exports.generateDragMoveElement = exports.focusClosestCellWhenJustifyCellSize = exports.focusCell = exports.fitTableColumnToScreen = exports.elementHasImage = exports.deleteTableSelectCells = exports.deleteTableRangeData = exports.deleteHandler = exports.combineCells = exports.colorBlend = exports.adjustCombinedCellRange = void 0;
+exports.updateTableRowHeight = exports.updateColumnWidth = exports.syncRemoveTable = exports.splitCell = exports.setTableSelectedRange = exports.setTableFragmentData = exports.setCellStyle = exports.removeTableElement = exports.removeTable = exports.normalizeTableELement = exports.moveRows = exports.moveColumns = exports.isTableWidthFitScreen = exports.isTableMenuDisabled = exports.isTableLocation = exports.isSelectedAllCell = exports.isPreventResetTableSelectedRange = exports.isLastTableCell = exports.isInTableSameCell = exports.isInTable = exports.isHideDragHandlerLine = exports.isCursorAtCellStart = exports.isCursorAtCellEnd = exports.isCombineCellsDisabled = exports.isAllInTable = exports.insertTableRow = exports.insertTableElement = exports.insertTableColumn = exports.insertTableByTemplate = exports.insertTable = exports.insertMultipleRowsAndColumns = exports.handleInsertTable = exports.handleCombinedCellsBeforeDeleteTableRow = exports.handleCombinedCellsBeforeDeleteTableColumn = exports.handleCombinedCellsAfterInsertTableRow = exports.handleCombinedCellsAfterInsertTableColumn = exports.getTableSelectedRangeAfterDrag = exports.getTableRowSelectedRange = exports.getTableDragType = exports.getTableColumnsWidth = exports.getTableColumnsAfterInsertColumn = exports.getTableColumns = exports.getTableColumnSelectedRange = exports.getSelectedInfo = exports.getRowHeight = exports.getRowDomHeight = exports.getResizeMaskCellInfo = exports.getInsertPosition = exports.getHighlightClass = exports.getFirstTableCell = exports.getCellInheritStyles = exports.getCellHighlightClassName = exports.getCellColumn = exports.generateTableRow = exports.generateTableCell = exports.generateInheritStyle = exports.generateEmptyTable = exports.generateDragMoveElement = exports.focusClosestCellWhenJustifyCellSize = exports.focusCell = exports.fitTableColumnToScreen = exports.elementHasImage = exports.deleteTableSelectCells = exports.deleteTableRangeData = exports.deleteHandler = exports.combineCells = exports.colorBlend = exports.adjustCombinedCellRange = void 0;
 var _slugid = _interopRequireDefault(require("slugid"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
@@ -580,7 +580,7 @@ const splitCell = (editor, rowNumber, columnNumber) => {
   });
 };
 exports.splitCell = splitCell;
-const removeTable = (editor, path) => {
+const syncRemoveTable = (editor, path) => {
   let validPath = path;
   if (!validPath) {
     const {
@@ -593,6 +593,32 @@ const removeTable = (editor, path) => {
     at: validPath
   });
 };
+exports.syncRemoveTable = syncRemoveTable;
+const removeTable = (editor, path) => {
+  let validPath = path;
+  if (!validPath) {
+    const {
+      tablePath
+    } = getSelectedInfo(editor);
+    validPath = tablePath;
+  }
+  editor.reSetTableSelectedRange();
+
+  // Clicking the menu causes the table to be re-rendered, and the deletion operation is performed synchronously. When rendering, it is found that the data is lost and an error is reported.
+  setTimeout(() => {
+    _slate.Transforms.removeNodes(editor, {
+      at: validPath
+    });
+    if (_slate.Editor.hasPath(editor, validPath)) {
+      const endOfLastNodePoint = _slate.Editor.end(editor, validPath);
+      const range = {
+        anchor: endOfLastNodePoint,
+        focus: endOfLastNodePoint
+      };
+      (0, _core.focusEditor)(editor, range);
+    }
+  }, 0);
+};
 exports.removeTable = removeTable;
 const removeTableElement = (editor, type) => {
   const {

package/package.json

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