@seafile/sdoc-editor 1.0.203 → 1.0.204

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.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 = editor.width ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(editor.width / 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 = editor.width ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(editor.width / 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) => ({
@@ -153,4 +155,10 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
   }));
   updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
 };
-exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
+exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
+const getCurrentPageWidth = () => {
+  const sdocEditorPage = document.getElementById('sdoc-editor');
+  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

@@ -8,8 +8,10 @@ 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");
 require("./index.css");
 const MultiColumn = _ref => {
   let {
@@ -18,23 +20,53 @@ 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.getCurrentPageWidth)());
   const handleResizeColumn = newColumn => {
-    setColumn(newColumn);
+    (0, _helper.updateColumnWidth)(editor, element, newColumn);
   };
   (0, _react.useEffect)(() => {
-    const columnWidthList = element.column.map(item => `${item.width}px`);
-    const newStyle = {
-      ...element.style,
-      gridTemplateColumns: columnWidthList.join(' ')
+    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) {
+        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);
+        setPageWidth(newPageWidth);
+        (0, _helper.updateColumnWidth)(editor, element, updatedColumns);
+      } else {
+        const columnWidthList = element.column.map(item => `${item.width}px`);
+        const newStyle = {
+          ...element.style,
+          gridTemplateColumns: columnWidthList.join(' ')
+        };
+        setStyle(newStyle);
+      }
+    });
+    resizeObserver.observe(sdocEditorPage);
+    return () => {
+      resizeObserver.disconnect();
     };
-    setStyle(newStyle);
-  }, [element.style, element.column, column]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageWidth, element.style, element.column]);
   return /*#__PURE__*/_react.default.createElement(_multiColumnRoot.default, {
     attributes: attributes
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -7,18 +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");
 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: editor.width ? editor.width : '100%'
+      maxWidth: '100%'
     }
   }), children);
 };

package/package.json

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