@seafile/sdoc-editor 1.0.202-test-0.0.4 → 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({
@@ -76,7 +77,6 @@ exports.generateEmptyMultiColumn = generateEmptyMultiColumn;
 const updateColumnWidth = (editor, element, column, newPath) => {
   const path = (0, _core.findPath)(editor, element, newPath);
   const gridTemplateColumns = column.map(column => `${column.width}px`).join(' ');
-  console.log(4, gridTemplateColumns);
   _slate.Transforms.setNodes(editor, {
     column: column,
     style: {
@@ -144,21 +144,21 @@ 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;
-  console.log(1, remainingColumn);
+  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) => ({
     ...column,
     left: index * columnWidth,
     width: columnWidth
   }));
-  console.log(2, newColumn);
   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,7 +29,6 @@
   box-sizing: border-box;
   word-wrap: break-word;
   white-space: pre-wrap;
-
 }
 
 .sdoc-multicolumn-container .column-resize-handler {
@@ -47,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,11 +8,13 @@ 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");
-var _slateReact = require("@seafile/slate-react");
 const MultiColumn = _ref => {
   let {
     className,
@@ -27,69 +29,75 @@ const MultiColumn = _ref => {
     ...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);
   };
 
   // useEffect(() => {
-  //   const columnWidthList = element.column.map(item => `${item.width}px`);
-  //   console.log(54, element.column);
-  //   setColumn(columnWidthList);
-  // }, [element.style]);
+  //   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)(() => {
-    let columnWidthList = element.column.map(item => `${item.width}px`);
+    console.log(3, column, element.column);
     const sdocEditorPage = document.getElementById('sdoc-editor');
     if (!sdocEditorPage) return;
     const resizeObserver = new ResizeObserver(entries => {
       var _entries$;
-      const realTimeWidth = ((_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width) || (0, _helper.realTimePageWidth)();
-      // Check if pageWidth changes
-      if (realTimeWidth !== pageWidth) {
-        console.log(4444);
-        const scaleFactor = realTimeWidth / pageWidth;
-        console.log(5553, column);
-        const updatedColumns = column.map(item => ({
+      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)
         }));
-        columnWidthList = updatedColumns.map(item => `${item.width}px`);
+        const columnWidthList = updatedColumns.map(item => `${item.width}px`);
         const newStyle = {
           ...element.style,
           gridTemplateColumns: columnWidthList.join(' ')
         };
         setStyle(newStyle);
-        console.log(5554, updatedColumns);
-        setColumn(updatedColumns);
-        setPageWidth(realTimeWidth);
+        // setColumn(updatedColumns);
+        setPageWidth(newPageWidth);
         (0, _helper.updateColumnWidth)(editor, element, updatedColumns);
       } else {
-        console.log(55555, columnWidthList);
+        console.log(0);
+        const columnWidthList = element.column.map(item => `${item.width}px`);
         const newStyle = {
           ...element.style,
           gridTemplateColumns: columnWidthList.join(' ')
         };
-        // setColumn(columnWidthList);
-        console.log(5556, newStyle, element.column);
-        setColumn(element.column);
         setStyle(newStyle);
+        // setColumn(element.column);
       }
     });
     resizeObserver.observe(sdocEditorPage);
     return () => {
       resizeObserver.disconnect();
     };
-  }, [pageWidth, element.style, element.column, column]);
-
-  // useEffect(() => {
-  //   const columnWidthList = element.column.map(item => `${item.width}px`);
-  //   console.log(55555, columnWidthList);
-  //   const newStyle = { ...element.style, gridTemplateColumns: columnWidthList.join(' ') };
-  //   setColumn(element.column);
-  //   setStyle(newStyle);
-  // }, [element.style, element.column, column]);
-
+  }, [pageWidth, element.style, element.column]);
   return /*#__PURE__*/_react.default.createElement(_multiColumnRoot.default, {
     attributes: attributes
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -100,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,19 +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)();
   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,
@@ -19,28 +18,9 @@ const Column = _ref => {
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
   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,15 +42,8 @@ const ResizeHandlers = _ref => {
 
   // Render when column element of multi_column node changes
   (0, _react.useEffect)(() => {
-    console.log(3, columnWidthList);
-    setColumn(columnWidthList);
-  }, [columnWidthList]);
-
-  // useEffect(() => {
-  //   console.log(44, element.column)
-  //   setColumn(element.column);
-  // }, [element.column]);
-
+    setColumnWidthList(newColumnWidthList);
+  }, [newColumnWidthList]);
   (0, _react.useEffect)(() => {
     const path = _slateReact.ReactEditor.findPath(editor, element);
     const [node] = _slate.Editor.node(editor, path);
@@ -60,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();
@@ -84,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,
@@ -98,12 +91,12 @@ 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
       }));
@@ -124,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.4",
+  "version": "1.0.202-test-0.0.5",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",