@seafile/comment-editor 0.0.1-alpha.9 → 0.0.2-alpha.0

package/dist/basic-sdk/extension/plugins/html/rules/code-block.js

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slugid = _interopRequireDefault(require("slugid"));
-var _constants = require("../../../constants");
-var _prismjs = require("../../code-block/prismjs");
-const codeBlockRule = (element, parseChild) => {
-  const {
-    nodeName,
-    childNodes
-  } = element;
-  if (nodeName === 'PRE') {
-    const children = Array.from(childNodes).filter(item => item.nodeName === 'CODE');
-    let codeChild = children[0];
-    if (codeChild) {
-      let lang = codeChild.getAttribute('lang');
-      lang = (0, _prismjs.genCodeLangs)().find(item => item.value === lang) || 'plaintext';
-      return {
-        id: _slugid.default.nice(),
-        language: lang,
-        type: _constants.CODE_BLOCK,
-        children: parseChild(children)
-      };
-    } else {
-      const lang = 'plaintext';
-      const content = childNodes[0].textContent;
-      const children = content.split('\n').map(text => {
-        return {
-          id: _slugid.default.nice(),
-          type: _constants.CODE_LINE,
-          children: [{
-            id: _slugid.default.nice(),
-            text: text
-          }]
-        };
-      });
-      return {
-        id: _slugid.default.nice(),
-        language: lang,
-        type: _constants.CODE_BLOCK,
-        children: children
-      };
-    }
-  }
-  if (nodeName === 'CODE' && element.parentElement.nodeName === 'PRE') {
-    const childIsP = Array.from(childNodes).every(n => n.nodeName === 'P');
-    if (childIsP) {
-      return Array.from(childNodes).map(n => {
-        return {
-          id: _slugid.default.nice(),
-          type: _constants.CODE_LINE,
-          children: [{
-            id: _slugid.default.nice(),
-            text: n.textContent
-          }]
-        };
-      });
-    }
-    const content = element.textContent;
-    const hasNewLine = content.indexOf('\n') > -1;
-    if (!hasNewLine) {
-      return {
-        id: _slugid.default.nice(),
-        type: _constants.CODE_LINE,
-        children: [{
-          id: _slugid.default.nice(),
-          text: element.textContent
-        }]
-      };
-    }
-    const codes = content.split('\n');
-    return codes.map(item => {
-      return {
-        id: _slugid.default.nice(),
-        type: _constants.CODE_LINE,
-        children: [{
-          id: _slugid.default.nice(),
-          text: item
-        }]
-      };
-    });
-  }
-  return;
-};
-var _default = exports.default = codeBlockRule;

package/dist/basic-sdk/extension/plugins/html/rules/header.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slugid = _interopRequireDefault(require("slugid"));
-const HEADER_LIST = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
-const HEADER_TYPE_MAP = {
-  H1: 'header1',
-  H2: 'header2',
-  H3: 'header3',
-  H4: 'header4',
-  H5: 'header5',
-  H6: 'header6'
-};
-const headerRule = (element, parseChild) => {
-  const {
-    nodeName,
-    childNodes
-  } = element;
-  if (nodeName && HEADER_LIST.includes(nodeName)) {
-    return {
-      id: _slugid.default.nice(),
-      type: HEADER_TYPE_MAP[nodeName],
-      children: parseChild(childNodes)
-    };
-  }
-  return;
-};
-var _default = exports.default = headerRule;

package/dist/basic-sdk/extension/plugins/html/rules/table.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slugid = _interopRequireDefault(require("slugid"));
-var _constants = require("../../../constants");
-const tableRule = (element, parseChild) => {
-  const {
-    nodeName,
-    childNodes
-  } = element;
-  if (nodeName === 'TABLE') {
-    return {
-      id: _slugid.default.nice(),
-      type: _constants.TABLE,
-      children: parseChild(childNodes)
-    };
-  }
-  if (nodeName === 'THEAD' || nodeName === 'TBODY') {
-    return parseChild(childNodes);
-  }
-  if (nodeName === 'TR') {
-    return {
-      id: _slugid.default.nice(),
-      type: _constants.TABLE_ROW,
-      children: parseChild(childNodes)
-    };
-  }
-  if (nodeName === 'TH' || nodeName === 'TD') {
-    return {
-      id: _slugid.default.nice(),
-      type: _constants.TABLE_CELL,
-      children: parseChild(childNodes)
-    };
-  }
-  return;
-};
-var _default = exports.default = tableRule;

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

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.COLUMN_MIN_WIDTH = void 0;
-const COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 80;

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

@@ -1,192 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = exports.insertMultiColumn = exports.hasImageInColumn = exports.handleInsertMultiColumn = exports.getCurrentPageWidth = exports.generateEmptyMultiColumn = void 0;
-var _slate = require("@seafile/slate");
-var _slateReact = require("@seafile/slate-react");
-var _slugid = _interopRequireDefault(require("slugid"));
-var _constants = require("../../../constants");
-var _fullWidthMode = require("../../../utils/full-width-mode");
-var _localStorageUtils = _interopRequireDefault(require("../../../utils/local-storage-utils"));
-var _constants2 = require("../../constants");
-var _core = require("../../core");
-var _constants3 = require("./constants");
-const insertMultiColumn = function (editor, selection) {
-  let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants2.INSERT_POSITION.CURRENT;
-  let type = arguments.length > 3 ? arguments[3] : undefined;
-  const multiColumnNode = generateEmptyMultiColumn(editor, type);
-  const validSelection = selection || editor.selection;
-  const path = _slate.Editor.path(editor, validSelection);
-  handleInsertMultiColumn(editor, position, path, multiColumnNode);
-};
-exports.insertMultiColumn = insertMultiColumn;
-const generateEmptyMultiColumn = (editor, MultiColumnType) => {
-  let columnNodes = [];
-  let column = [];
-  let multiColumnNumber;
-  switch (MultiColumnType) {
-    case _constants2.ELEMENT_TYPE.TWO_COLUMN:
-      multiColumnNumber = 2;
-      break;
-    case _constants2.ELEMENT_TYPE.THREE_COLUMN:
-      multiColumnNumber = 3;
-      break;
-    case _constants2.ELEMENT_TYPE.FOUR_COLUMN:
-      multiColumnNumber = 4;
-      break;
-    case _constants2.ELEMENT_TYPE.FIVE_COLUMN:
-      multiColumnNumber = 5;
-      break;
-    default:
-      break;
-  }
-  const currentPageWidth = getCurrentPageWidth(editor);
-  const initialColumnWidth = Math.max(_constants3.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / multiColumnNumber));
-  for (let i = 0; i < multiColumnNumber; i++) {
-    const columnWidthKey = _slugid.default.nice();
-    column.push({
-      key: columnWidthKey,
-      width: initialColumnWidth
-    });
-    const columnWidth = column.find(col => col.key === columnWidthKey).width;
-    columnNodes.push({
-      id: columnWidthKey,
-      type: _constants2.ELEMENT_TYPE.COLUMN,
-      width: columnWidth,
-      children: [{
-        id: _slugid.default.nice(),
-        type: _constants2.PARAGRAPH,
-        children: [{
-          text: '',
-          id: _slugid.default.nice()
-        }]
-      }]
-    });
-  }
-  return {
-    id: _slugid.default.nice(),
-    type: _constants2.ELEMENT_TYPE.MULTI_COLUMN,
-    children: columnNodes,
-    column,
-    style: {
-      gridTemplateColumns: `repeat(${multiColumnNumber}, ${initialColumnWidth}px)`
-    }
-  };
-};
-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(' ');
-  _slate.Transforms.setNodes(editor, {
-    column: column,
-    style: {
-      gridTemplateColumns
-    }
-  }, {
-    at: path
-  });
-};
-exports.updateColumnWidth = updateColumnWidth;
-const handleInsertMultiColumn = (editor, insertPosition, path, multiColumnNode) => {
-  const {
-    selection
-  } = editor;
-  if (!selection) return;
-  let insertPath;
-  if (insertPosition === _constants2.INSERT_POSITION.BEFORE) {
-    insertPath = [path[0]];
-    _slate.Transforms.insertNodes(editor, multiColumnNode, {
-      at: insertPath
-    });
-  } else if (insertPosition === _constants2.INSERT_POSITION.AFTER) {
-    insertPath = [path[0] + 1];
-    _slate.Transforms.insertNodes(editor, multiColumnNode, {
-      at: insertPath
-    });
-  } else if (insertPosition === _constants2.INSERT_POSITION.CURRENT) {
-    // Insert a new multi_column on the next line if insertion operation happens in existed multi_column
-    const currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants2.ELEMENT_TYPE.MULTI_COLUMN);
-    if (currentMultiColumnEntry) {
-      _slate.Transforms.splitNodes(editor, {
-        at: selection
-      });
-      insertPath = [selection.anchor.path[0] + 1];
-      _slate.Transforms.insertNodes(editor, multiColumnNode, {
-        at: insertPath
-      });
-    }
-    // If there are multiple children in the editor, insert the new multi-column node at the current selection
-    if (editor.children.length !== 1 && !currentMultiColumnEntry) {
-      _slate.Transforms.insertNodes(editor, multiColumnNode, {
-        at: selection
-      });
-      _slate.Transforms.removeNodes(editor, {
-        at: [path[0]]
-      });
-    }
-    // If there is only one children in the editor, insert the new multi-column node at the next line
-    if (editor.children.length === 1 && !currentMultiColumnEntry) {
-      _slate.Transforms.splitNodes(editor, {
-        at: selection
-      });
-      _slate.Transforms.insertNodes(editor, multiColumnNode, {
-        at: selection
-      });
-      insertPath = [selection.anchor.path[0] + 1];
-    }
-  }
-  _slate.Transforms.select(editor, _slate.Editor.start(editor, insertPath));
-  _slateReact.ReactEditor.focus(editor);
-};
-exports.handleInsertMultiColumn = handleInsertMultiColumn;
-const updateColumnWidthOnDeletion = function (editor, selection, column, deletionDirection) {
-  let isDragged = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  const multiColumnPath = !isDragged ? [selection.anchor.path[0]] : [selection[0]];
-  const newMultiColumnNode = _slate.Node.get(editor, multiColumnPath);
-  const targetColumnIndex = !isDragged ? selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0) : selection[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
-  const remainingColumn = column.filter((_, index) => index !== targetColumnIndex);
-  const currentPageWidth = getCurrentPageWidth(editor);
-  const columnWidth = Math.max(_constants3.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
-  }));
-  updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
-};
-exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
-const getCurrentPageWidth = editor => {
-  const sdocEditorPage = document.getElementById('sdoc-editor');
-  let pageWidth;
-  pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
-
-  // Get pageWidth if on is_full_width mode
-  if (_localStorageUtils.default.getItem(_constants.FULL_WIDTH_MODE)) {
-    var _getStyleByFullWidthM;
-    const sdocEditorPageContent = document.getElementsByClassName('sdoc-editor-page-content')[0];
-    const pageContentWidth = sdocEditorPageContent === null || sdocEditorPageContent === void 0 ? void 0 : sdocEditorPageContent.getBoundingClientRect().width;
-    const pageWidthString = (_getStyleByFullWidthM = (0, _fullWidthMode.getStyleByFullWidthMode)(undefined, editor)) === null || _getStyleByFullWidthM === void 0 ? void 0 : _getStyleByFullWidthM.width;
-    const numbers = pageWidthString.match(/\d+/g).map(Number);
-
-    // 120 is padding and 2 is border width of 'sdoc-editor' dom;
-    pageWidth = pageContentWidth - numbers.slice(1).reduce((sum, num) => sum + num, 0) - 120 - 2;
-  }
-  return pageWidth;
-};
-exports.getCurrentPageWidth = getCurrentPageWidth;
-const hasImageInColumn = (editor, columnPath) => {
-  for (const [node] of _slate.Editor.nodes(editor, {
-    at: columnPath
-  })) {
-    if ([_constants2.IMAGE_BLOCK, _constants2.IMAGE].includes(node === null || node === void 0 ? void 0 : node.type)) {
-      return true;
-    }
-  }
-  return false;
-};
-exports.hasImageInColumn = hasImageInColumn;

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

@@ -1,17 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _constants = require("../../constants");
-var _plugin = _interopRequireDefault(require("./plugin"));
-var _renderElem = require("./render-elem");
-const MultiColumnPlugin = {
-  type: _constants.MULTI_COLUMN,
-  nodeType: 'element',
-  editorPlugin: _plugin.default,
-  renderElements: [_renderElem.renderMultiColumn, _renderElem.renderColumn]
-};
-var _default = exports.default = MultiColumnPlugin;

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

@@ -1,153 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slate = require("@seafile/slate");
-var _constants = require("../../constants");
-var _core = require("../../core");
-var _unwrapList = require("../list/transforms/unwrap-list");
-var _helper = require("./helper");
-const withMultiColumn = editor => {
-  const {
-    normalizeNode,
-    deleteBackward,
-    deleteForward
-  } = editor;
-  const newEditor = editor;
-  newEditor.normalizeNode = _ref => {
-    let [node, path] = _ref;
-    const type = (0, _core.getNodeType)(node);
-    if (node.type === _constants.ELEMENT_TYPE.COLUMN) {
-      const parentEntry = _slate.Editor.parent(newEditor, path);
-      if (parentEntry && parentEntry[0].type !== _constants.ELEMENT_TYPE.MULTI_COLUMN) {
-        _slate.Transforms.unwrapNodes(newEditor, {
-          at: path
-        });
-        return;
-      }
-    }
-    if (type !== _constants.ELEMENT_TYPE.MULTI_COLUMN) {
-      return normalizeNode([node, path]);
-    }
-
-    // Insert empty node，continue newEditor
-    const isLast = (0, _core.isLastNode)(newEditor, node);
-    if (isLast) {
-      const p = (0, _core.generateEmptyElement)(_constants.ELEMENT_TYPE.PARAGRAPH);
-      _slate.Transforms.insertNodes(newEditor, p, {
-        at: [path[0] + 1]
-      });
-    }
-  };
-  newEditor.deleteBackward = unit => {
-    const {
-      selection
-    } = editor;
-    if (!selection) return;
-    const currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.MULTI_COLUMN);
-    if (!currentMultiColumnEntry) return deleteBackward(unit);
-    const {
-      column,
-      children: childColumn
-    } = currentMultiColumnEntry[0];
-    const currentColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.COLUMN);
-    const isOnlyOneChild = currentColumnEntry[0].children.length === 1;
-    const isAtStart = _slate.Editor.isStart(editor, selection.focus, selection.anchor.path.slice(0, 2));
-    const currentNodeInColumn = currentColumnEntry[0].children[0];
-    const currentNodePathInColumn = (0, _core.findPath)(editor, currentNodeInColumn);
-    // Only one child inline-image in current column
-    // Return if cursor is at the start of only one child image
-    if (isOnlyOneChild && currentNodeInColumn.children.length === 3) {
-      const isImageType = currentNodeInColumn.children[1].type === _constants.IMAGE;
-      if (isImageType && selection.anchor.path[3] === 0 && selection.anchor.offset === 0) {
-        return;
-      }
-    }
-
-    // When selection is at start of the only one existed child nodes in current column node, delete column node
-    if (isOnlyOneChild && isAtStart) {
-      // Transform non-paragraph elements without callout element to paragraph elements
-      if (currentNodeInColumn.type !== _constants.PARAGRAPH) {
-        var _currentNodeInColumn$;
-        // Unwrap list if list-item exists in the current column node
-        if ([_constants.UNORDERED_LIST, _constants.ORDERED_LIST].includes(currentNodeInColumn.type)) {
-          (0, _unwrapList.unwrapList)(editor);
-          return;
-        }
-        if ([_constants.UNORDERED_LIST, _constants.ORDERED_LIST].includes(currentNodeInColumn === null || currentNodeInColumn === void 0 ? void 0 : (_currentNodeInColumn$ = currentNodeInColumn.children[0]) === null || _currentNodeInColumn$ === void 0 ? void 0 : _currentNodeInColumn$.type)) {
-          _slate.Transforms.unwrapNodes(editor, {
-            at: currentNodePathInColumn
-          });
-        } else {
-          _slate.Transforms.setNodes(editor, {
-            type: _constants.PARAGRAPH
-          }, {
-            at: currentNodePathInColumn
-          });
-        }
-        return;
-      }
-
-      // Delete multi_column and column wrap when only one child column node exists
-      if (childColumn.length <= 2) {
-        deleteBackward();
-        _slate.Transforms.unwrapNodes(editor, {
-          at: [selection.anchor.path[0]]
-        });
-        return;
-      }
-      // Delete current child column node every time when number of child column node is more than 2
-      if (childColumn.length > 2) {
-        deleteBackward();
-        (0, _helper.updateColumnWidthOnDeletion)(newEditor, selection, column, 'deleteBackward');
-        return;
-      }
-    }
-    deleteBackward(unit);
-  };
-  newEditor.deleteForward = unit => {
-    const {
-      selection
-    } = editor;
-    if (!selection) return;
-    const nextNode = _slate.Editor.next(newEditor);
-    const nextColumnIndex = nextNode[1][1];
-    const currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.MULTI_COLUMN);
-    if (!currentMultiColumnEntry) return deleteForward(unit);
-    const {
-      column,
-      children: childColumn
-    } = currentMultiColumnEntry[0];
-    const isOnlyOneChild = childColumn[nextColumnIndex].children.length === 1;
-    const isAtEnd = _slate.Editor.isEnd(editor, selection.focus, selection.anchor.path.slice(0, 2));
-
-    // When deleteForwarding only one child including image or image-block in next column, return
-    const hasImageInOnlyOneChild = isOnlyOneChild && (0, _helper.hasImageInColumn)(editor, nextNode[1].slice(0, 2));
-    if (isOnlyOneChild && isAtEnd && hasImageInOnlyOneChild) {
-      return;
-    }
-
-    // When selection is at end and the only one existed child nodes in next column node, delete column node
-    if (isOnlyOneChild && isAtEnd) {
-      // Delete multi_column and column wrap when only one child column node exists and selection is on the first column node
-      if (childColumn.length === 2 && selection.anchor.path.slice(0, 2)[1] === 0) {
-        deleteForward();
-        _slate.Transforms.unwrapNodes(editor, {
-          at: [selection.anchor.path[0]]
-        });
-        return;
-      }
-      // Delete next child column node every time when number of child column node is more than 2
-      if (childColumn.length > 2) {
-        deleteForward();
-        (0, _helper.updateColumnWidthOnDeletion)(newEditor, selection, column, 'deleteForward');
-        return;
-      }
-    }
-    deleteForward(unit);
-  };
-  return newEditor;
-};
-var _default = exports.default = withMultiColumn;

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

@@ -1,51 +0,0 @@
-.sdoc-multicolumn-wrapper {
-  width: 100%;
-  max-width: 100%;
-  margin: 16px 0;
-  display: grid;
-  height: auto;
-}
-
-.sdoc-multicolumn-wrapper .sdoc-multicolumn-container {
-  min-height: 43px;
-  position: relative;
-  display: grid;
-  cursor: text;
-}
-
-.sdoc-multicolumn-wrapper .column {
-  display: flex;
-  left: 3px;
-  align-items: flex-start;
-}
-
-.sdoc-column-container {
-  width: calc(100% - 50px);
-  max-width: 100%;
-  position: relative;
-  padding: 5px 5px 5px 0px;
-  box-sizing: border-box;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.sdoc-multicolumn-container .column-resize-handler {
-  height: 100%;
-  position: absolute;
-}
-
-.sdoc-multicolumn-container .column-resize-handler .column-width-just {
-  height: 100%;
-  width: 4px;
-  top: 0;
-  z-index: 1;
-  margin-right: 1.5px;
-  position: absolute;
-  cursor: col-resize;
-}
-
-.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;
-}

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

@@ -1,91 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _slateReact = require("@seafile/slate-react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _helper = require("../helper");
-var _resizeHandlers = _interopRequireDefault(require("../resize-handlers"));
-var _multiColumnRoot = _interopRequireDefault(require("./multi-column-root"));
-require("./index.css");
-const MultiColumn = _ref => {
-  let {
-    className,
-    attributes,
-    children,
-    element
-  } = _ref;
-  const editor = (0, _slateReact.useSlateStatic)();
-  const multiColumn = (0, _react.useRef)(null);
-  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)(editor));
-  const readOnly = (0, _slateReact.useReadOnly)();
-  const handleResizeColumn = newColumn => {
-    (0, _helper.updateColumnWidth)(editor, element, newColumn);
-  };
-  (0, _react.useEffect)(() => {
-    setPageWidth((0, _helper.getCurrentPageWidth)(editor));
-  }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  , []);
-  (0, _react.useEffect)(() => {
-    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 (pageWidth && 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();
-    };
-
-    // 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", {
-    className: multiColumnContainerClassName,
-    style: style,
-    ref: multiColumn,
-    "data-id": element.id
-  }, children, !readOnly && /*#__PURE__*/_react.default.createElement(_resizeHandlers.default, {
-    element: element,
-    handleResizeColumn: handleResizeColumn
-  })));
-};
-function renderMultiColumn(props) {
-  return /*#__PURE__*/_react.default.createElement(MultiColumn, props);
-}
-var _default = exports.default = renderMultiColumn;