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

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.realTimePageWidth = exports.insertMultiColumn = exports.handleInsertMultiColumn = exports.generateEmptyMultiColumn = void 0;
+exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = exports.insertMultiColumn = exports.handleInsertMultiColumn = exports.getCurrentPageWidth = exports.generateEmptyMultiColumn = void 0;
 var _slugid = _interopRequireDefault(require("slugid"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
@@ -40,7 +40,8 @@ const generateEmptyMultiColumn = (editor, MultiColumnType) => {
     default:
       break;
   }
-  const initialColumnWidth = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / multiColumnNumber)) : _constants2.COLUMN_MIN_WIDTH;
+  const currentPageWidth = getCurrentPageWidth();
+  const initialColumnWidth = Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / multiColumnNumber));
   for (let i = 0; i < multiColumnNumber; i++) {
     const columnWidthKey = _slugid.default.nice();
     column.push({
@@ -143,7 +144,8 @@ 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 = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / remainingColumn.length)) : _constants2.COLUMN_MIN_WIDTH;
+  const currentPageWidth = getCurrentPageWidth();
+  const columnWidth = Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / remainingColumn.length));
 
   // Recalculate width of every left column
   const newColumn = remainingColumn.map((column, index) => ({
@@ -154,9 +156,9 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
   updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
 };
 exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
-const realTimePageWidth = () => {
+const getCurrentPageWidth = () => {
   const sdocEditorPage = document.getElementById('sdoc-editor');
-  const pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
+  const pageWidth = sdocEditorPage.getBoundingClientRect().width;
   return pageWidth;
 };
-exports.realTimePageWidth = realTimePageWidth;
+exports.getCurrentPageWidth = getCurrentPageWidth;

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

@@ -11,7 +11,6 @@
   position: relative;
   display: grid;
   cursor: text;
-  /* border: 1px solid red; */
 }
 
 .sdoc-multicolumn-wrapper .column {
@@ -19,7 +18,6 @@
   left: 3px;
   line-height: 1.5;
   align-items: flex-start;
-  /* border: 1px solid red; */
 }
 
 .sdoc-column-container {
@@ -31,13 +29,11 @@
   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 {
@@ -48,12 +44,10 @@
   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

@@ -8,9 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+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 {
@@ -19,62 +22,82 @@ const MultiColumn = _ref => {
     children,
     element
   } = _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.realTimePageWidth)());
+  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, _react.useEffect)(() => {
-    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);
-        } else {
-          const newStyle = {
-            ...element.style,
-            gridTemplateColumns: columnWidthList.join(' ')
-          };
-          console.log(100, newStyle);
-          setStyle(newStyle);
-        }
-      });
-      resizeObserver.observe(sdocEditorPage);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [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]);
+  //   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 => {
+      var _entries$;
+      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,
+          width: Math.round(item.width * scaleFactor)
+        }));
+        const columnWidthList = updatedColumns.map(item => `${item.width}px`);
+        const newStyle = {
+          ...element.style,
+          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();
+    };
+  }, [pageWidth, element.style, element.column]);
   return /*#__PURE__*/_react.default.createElement(_multiColumnRoot.default, {
     attributes: attributes
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -85,7 +108,7 @@ const MultiColumn = _ref => {
   }, children, /*#__PURE__*/_react.default.createElement(_resizeHandlers.default, {
     element: element,
     handleResizeColumn: handleResizeColumn,
-    columnWidthList: column
+    newColumnWidthList: element.column
   })));
 };
 function renderMultiColumn(props) {

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

@@ -7,20 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 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: (0, _helper.realTimePageWidth)() ? (0, _helper.realTimePageWidth)() : '100%'
+      maxWidth: '100%'
     }
   }), children);
 };

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

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
-var _helper = require("../helper");
 const Column = _ref => {
   let {
     attributes,
@@ -18,30 +17,10 @@ const Column = _ref => {
     children
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
-  console.log(1, attributes, element, children);
   const [columnWidth, setColumnWidth] = (0, _react.useState)(element.width || 0);
-  const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.realTimePageWidth)());
   const path = _slateReact.ReactEditor.findPath(editor, element);
   const parentPath = _slate.Path.parent(path);
   const [parentNode] = _slate.Editor.node(editor, parentPath);
-  (0, _react.useEffect)(() => {
-    const sdocEditorPage = document.getElementById('sdoc-editor');
-    if (sdocEditorPage) {
-      const resizeObserver = new ResizeObserver(entries => {
-        const realTimeWidth = entries[0].contentRect.width;
-        if (realTimeWidth !== pageWidth) {
-          console.log(55, realTimeWidth, pageWidth);
-          const scaleFactor = realTimeWidth / pageWidth;
-          setColumnWidth(preColumnwidth => preColumnwidth * scaleFactor);
-          setPageWidth(realTimeWidth);
-        }
-      });
-      resizeObserver.observe(sdocEditorPage);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [editor, element, parentNode.column, pageWidth]);
   (0, _react.useEffect)(() => {
     const matchingColumn = parentNode.column.find(column => column.key === element.id);
     if (matchingColumn) {

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

@@ -17,20 +17,20 @@ const ResizeHandlers = _ref => {
   let {
     element,
     handleResizeColumn,
-    columnWidthList
+    newColumnWidthList
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
-  const [column, setColumn] = (0, _react.useState)(columnWidthList);
+  const [columnWidthList, setColumnWidthList] = (0, _react.useState)(newColumnWidthList);
   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)(column.map(() => false));
+  const [isMouseNearBorder, setIsMouseNearBorder] = (0, _react.useState)(columnWidthList.map(() => false));
   const handleMouseDown = (index, event) => {
     event.preventDefault();
-    const cellWidths = column.map(col => col.width);
+    const cellWidths = columnWidthList.map(col => col.width);
     setResizeInfo({
       initialX: event.clientX,
       cellWidths,
@@ -42,8 +42,8 @@ const ResizeHandlers = _ref => {
 
   // Render when column element of multi_column node changes
   (0, _react.useEffect)(() => {
-    setColumn(columnWidthList);
-  }, [columnWidthList]);
+    setColumnWidthList(newColumnWidthList);
+  }, [newColumnWidthList]);
   (0, _react.useEffect)(() => {
     const path = _slateReact.ReactEditor.findPath(editor, element);
     const [node] = _slate.Editor.node(editor, path);
@@ -53,7 +53,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 = column.map((col, colIndex) => {
+      const nearBorder = columnWidthList.map((col, colIndex) => {
         const child = childNodes[colIndex];
         if (!child) return false;
         const childRect = child.getBoundingClientRect();
@@ -77,7 +77,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 updatedColumn = column.map((column, colIndex) => {
+      const updatedColumnWidthList = columnWidthList.map((column, colIndex) => {
         if (colIndex === index) {
           return {
             ...column,
@@ -91,16 +91,15 @@ const ResizeHandlers = _ref => {
         }
         return column;
       });
-      setColumn(updatedColumn);
+      setColumnWidthList(updatedColumnWidthList);
     };
     const onMouseUp = event => {
       event.preventDefault();
       if (adjustingCell === null) return;
-      const newColumn = column.map(column => ({
+      const newColumn = columnWidthList.map(column => ({
         ...column,
         left: column.width
       }));
-      console.log(3333, newColumn);
       handleResizeColumn(newColumn);
       (0, _helper.updateColumnWidth)(editor, element, newColumn);
       setIsDraggingResizeHandler(false);
@@ -118,12 +117,12 @@ const ResizeHandlers = _ref => {
         'mouseleave': onMouseUp
       });
     };
-  }, [handleResizeColumn, column, isDraggingResizeHandler, isMouseNearBorder]);
+  }, [handleResizeColumn, columnWidthList, isDraggingResizeHandler, isMouseNearBorder]);
   let leftAccumulator = 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "column-resize-handler",
     contentEditable: false
-  }, column.map((column, index) => {
+  }, columnWidthList.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.3",
+  "version": "1.0.202-test-0.0.5",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",