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

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

@@ -52,6 +52,7 @@ const generateEmptyMultiColumn = (editor, MultiColumnType) => {
       id: columnWidthKey,
       type: _constants.ELEMENT_TYPE.COLUMN,
       width: columnWidth,
+      initialPageWith: realTimePageWidth(),
       children: [{
         id: _slugid.default.nice(),
         type: _constants.PARAGRAPH,

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

@@ -10,6 +10,7 @@ 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,
@@ -17,17 +18,46 @@ 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)(() => {
-    console.log(555, parentNode.column);
-    const matchingColumn = parentNode.column.find(column => column.key === element.id);
-    if (matchingColumn) {
-      setColumnWidth(matchingColumn.width);
+    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 matchingColumn = parentNode.column.find(column => column.key === element.id);
+          if (matchingColumn) {
+            console.log(444444, matchingColumn.width, scaleFactor);
+            setColumnWidth(matchingColumn.width * scaleFactor);
+          }
+          setPageWidth(realTimeWidth);
+        }
+      });
+      resizeObserver.observe(sdocEditorPage);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    } else {
+      const matchingColumn = parentNode.column.find(column => column.key === element.id);
+      if (matchingColumn) {
+        setColumnWidth(matchingColumn.width);
+      }
     }
-  }, [editor, element, parentNode.column, columnWidth]);
+  }, [editor, element, parentNode.column, pageWidth]);
+
+  // useEffect(() => {
+  //   const matchingColumn = parentNode.column.find(column => column.key === element.id);
+  //   if (matchingColumn) {
+  //     setColumnWidth(matchingColumn.width);
+  //   }
+  // }, [editor, element, parentNode.column]);
+
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
     className: (0, _classnames.default)('column', attributes.className),
     "data-id": element.id,

package/package.json

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