@seafile/sdoc-editor 1.0.202-test-0.0.5 → 1.0.202-test-0.0.6

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

@@ -158,7 +158,7 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
 exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
 const getCurrentPageWidth = () => {
   const sdocEditorPage = document.getElementById('sdoc-editor');
-  const pageWidth = sdocEditorPage.getBoundingClientRect().width;
+  const pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
   return pageWidth;
 };
 exports.getCurrentPageWidth = getCurrentPageWidth;

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

@@ -12,8 +12,6 @@ var _slateReact = require("@seafile/slate-react");
 var _multiColumnRoot = _interopRequireDefault(require("./multi-column-root"));
 var _resizeHandlers = _interopRequireDefault(require("../resize-handlers"));
 var _helper = require("../helper");
-var _localStorageUtils = _interopRequireDefault(require("../../../../../utils/local-storage-utils"));
-var _constants = require("../../../../constants");
 require("./index.css");
 const MultiColumn = _ref => {
   let {
@@ -24,42 +22,15 @@ const MultiColumn = _ref => {
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
   const multiColumn = (0, _react.useRef)(null);
-  const [column, setColumn] = (0, _react.useState)(element.column || []);
   const [style, setStyle] = (0, _react.useState)(element.style ? {
     ...element.style
   } : {});
   const multiColumnContainerClassName = (0, _classnames.default)('sdoc-multicolumn-container', className);
   const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.getCurrentPageWidth)());
-  // const [isChangedPageWidth, setIsChangedPageWidth] = useState(false);
-  // const [fullPageWidthState, setFullPageWidthState] = useState(null);
-
   const handleResizeColumn = newColumn => {
-    setColumn(newColumn);
+    (0, _helper.updateColumnWidth)(editor, element, newColumn);
   };
-
-  // useEffect(() => {
-  //   const fullPageWidthStorage = LocalStorage.getItem(FULL_WIDTH_MODE);
-  //   setFullPageWidthState(fullPageWidthStorage);
-  //   console.log(666)
-  // }, []);
-
-  // useEffect(() => {
-  //   const handleStorageChange = (event) => {
-  //     if (event.key === FULL_WIDTH_MODE && LocalStorage.getItem(FULL_WIDTH_MODE) !== fullPageWidthState) {
-  //       setIsChangedPageWidth(true);
-  //       console.log(555)
-  //     }
-  //   };
-
-  //   window.addEventListener('storage', handleStorageChange);
-
-  //   return () => {
-  //     window.removeEventListener('storage', handleStorageChange);
-  //   };
-  // }, [fullPageWidthState]);
-
   (0, _react.useEffect)(() => {
-    console.log(3, column, element.column);
     const sdocEditorPage = document.getElementById('sdoc-editor');
     if (!sdocEditorPage) return;
     const resizeObserver = new ResizeObserver(entries => {
@@ -67,7 +38,6 @@ const MultiColumn = _ref => {
       const newPageWidth = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width;
       // Check if sdocPageWidth changes
       if (newPageWidth !== pageWidth) {
-        console.log('change');
         const scaleFactor = newPageWidth / pageWidth;
         const updatedColumns = element.column.map(item => ({
           ...item,
@@ -79,24 +49,23 @@ const MultiColumn = _ref => {
           gridTemplateColumns: columnWidthList.join(' ')
         };
         setStyle(newStyle);
-        // setColumn(updatedColumns);
         setPageWidth(newPageWidth);
         (0, _helper.updateColumnWidth)(editor, element, updatedColumns);
       } else {
-        console.log(0);
         const columnWidthList = element.column.map(item => `${item.width}px`);
         const newStyle = {
           ...element.style,
           gridTemplateColumns: columnWidthList.join(' ')
         };
         setStyle(newStyle);
-        // setColumn(element.column);
       }
     });
     resizeObserver.observe(sdocEditorPage);
     return () => {
       resizeObserver.disconnect();
     };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageWidth, element.style, element.column]);
   return /*#__PURE__*/_react.default.createElement(_multiColumnRoot.default, {
     attributes: attributes
@@ -107,8 +76,7 @@ const MultiColumn = _ref => {
     "data-id": element.id
   }, children, /*#__PURE__*/_react.default.createElement(_resizeHandlers.default, {
     element: element,
-    handleResizeColumn: handleResizeColumn,
-    newColumnWidthList: element.column
+    handleResizeColumn: handleResizeColumn
   })));
 };
 function renderMultiColumn(props) {

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

@@ -16,21 +16,20 @@ var _mouseEvent = require("../../../../utils/mouse-event");
 const ResizeHandlers = _ref => {
   let {
     element,
-    handleResizeColumn,
-    newColumnWidthList
+    handleResizeColumn
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
-  const [columnWidthList, setColumnWidthList] = (0, _react.useState)(newColumnWidthList);
+  const [column, setColumn] = (0, _react.useState)(element.column);
   const [isDraggingResizeHandler, setIsDraggingResizeHandler] = (0, _react.useState)(false);
   const [adjustingCell, setAdjustingCell] = (0, _react.useState)(null);
   const [resizeInfo, setResizeInfo] = (0, _react.useState)({
     initialX: 0,
     cellWidths: []
   });
-  const [isMouseNearBorder, setIsMouseNearBorder] = (0, _react.useState)(columnWidthList.map(() => false));
+  const [isMouseNearBorder, setIsMouseNearBorder] = (0, _react.useState)(column.map(() => false));
   const handleMouseDown = (index, event) => {
     event.preventDefault();
-    const cellWidths = columnWidthList.map(col => col.width);
+    const cellWidths = column.map(col => col.width);
     setResizeInfo({
       initialX: event.clientX,
       cellWidths,
@@ -42,8 +41,8 @@ const ResizeHandlers = _ref => {
 
   // Render when column element of multi_column node changes
   (0, _react.useEffect)(() => {
-    setColumnWidthList(newColumnWidthList);
-  }, [newColumnWidthList]);
+    setColumn(element.column);
+  }, [element.column]);
   (0, _react.useEffect)(() => {
     const path = _slateReact.ReactEditor.findPath(editor, element);
     const [node] = _slate.Editor.node(editor, path);
@@ -53,7 +52,7 @@ const ResizeHandlers = _ref => {
     const onMouseMove = event => {
       event.preventDefault();
       // Let resize handler show when mouse is close to right edge of column at range of 20 px
-      const nearBorder = columnWidthList.map((col, colIndex) => {
+      const nearBorder = column.map((col, colIndex) => {
         const child = childNodes[colIndex];
         if (!child) return false;
         const childRect = child.getBoundingClientRect();
@@ -77,7 +76,7 @@ const ResizeHandlers = _ref => {
       const deltaX = Math.min(event.clientX - initialX, cellWidths[index + 1] - _constants.COLUMN_MIN_WIDTH);
       const newWidth = Math.max(cellWidths[index] + deltaX, _constants.COLUMN_MIN_WIDTH);
       if (cellWidths[index] === _constants.COLUMN_MIN_WIDTH && deltaX < 0) return;
-      const updatedColumnWidthList = columnWidthList.map((column, colIndex) => {
+      const updatedColumn = column.map((column, colIndex) => {
         if (colIndex === index) {
           return {
             ...column,
@@ -91,12 +90,12 @@ const ResizeHandlers = _ref => {
         }
         return column;
       });
-      setColumnWidthList(updatedColumnWidthList);
+      setColumn(updatedColumn);
     };
     const onMouseUp = event => {
       event.preventDefault();
       if (adjustingCell === null) return;
-      const newColumn = columnWidthList.map(column => ({
+      const newColumn = column.map(column => ({
         ...column,
         left: column.width
       }));
@@ -117,12 +116,12 @@ const ResizeHandlers = _ref => {
         'mouseleave': onMouseUp
       });
     };
-  }, [handleResizeColumn, columnWidthList, isDraggingResizeHandler, isMouseNearBorder]);
+  }, [handleResizeColumn, column, isDraggingResizeHandler, isMouseNearBorder]);
   let leftAccumulator = 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "column-resize-handler",
     contentEditable: false
-  }, columnWidthList.map((column, index) => {
+  }, column.map((column, index) => {
     leftAccumulator += column.width;
     const left = leftAccumulator;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {

package/package.json

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