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

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;
   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,11 @@ 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");
-var _slateReact = require("@seafile/slate-react");
 const MultiColumn = _ref => {
   let {
     className,
@@ -22,57 +22,41 @@ 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.realTimePageWidth)());
+  const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.getCurrentPageWidth)());
   const handleResizeColumn = newColumn => {
-    setColumn(newColumn);
+    (0, _helper.updateColumnWidth)(editor, element, newColumn);
   };
-
-  // useEffect(() => {
-  //   const columnWidthList = element.column.map(item => `${item.width}px`);
-  //   console.log(54, element.column);
-  //   setColumn(columnWidthList);
-  // }, [element.style]);
-
   (0, _react.useEffect)(() => {
-    let columnWidthList = element.column.map(item => `${item.width}px`);
     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) {
+        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);
+        setPageWidth(newPageWidth);
         (0, _helper.updateColumnWidth)(editor, element, updatedColumns);
       } else {
-        console.log(55555, columnWidthList);
+        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);
       }
     });
@@ -80,16 +64,9 @@ const MultiColumn = _ref => {
     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]);
 
+    // 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", {
@@ -99,8 +76,7 @@ const MultiColumn = _ref => {
     "data-id": element.id
   }, children, /*#__PURE__*/_react.default.createElement(_resizeHandlers.default, {
     element: element,
-    handleResizeColumn: handleResizeColumn,
-    columnWidthList: column
+    handleResizeColumn: handleResizeColumn
   })));
 };
 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

@@ -16,11 +16,10 @@ var _mouseEvent = require("../../../../utils/mouse-event");
 const ResizeHandlers = _ref => {
   let {
     element,
-    handleResizeColumn,
-    columnWidthList
+    handleResizeColumn
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
-  const [column, setColumn] = (0, _react.useState)(columnWidthList);
+  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)({
@@ -42,15 +41,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]);
-
+    setColumn(element.column);
+  }, [element.column]);
   (0, _react.useEffect)(() => {
     const path = _slateReact.ReactEditor.findPath(editor, element);
     const [node] = _slate.Editor.node(editor, path);

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.6",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",