@seafile/sdoc-editor 2.0.65 → 2.0.67

package/dist/plugin-module/editor/plugin-editor.js

@@ -0,0 +1,213 @@
+"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 _slate = require("@seafile/slate");
+var _deepCopy = _interopRequireDefault(require("deep-copy"));
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _basicSdk = require("@/basic-sdk");
+var _constants = require("@/basic-sdk/constants");
+var _extension = require("@/basic-sdk/extension");
+var _core = require("@/basic-sdk/extension/core");
+var _helpers = require("@/basic-sdk/extension/plugins/ai/ai-module/helpers");
+var _useColorContext = require("@/basic-sdk/hooks/use-color-context");
+var _nodeId = _interopRequireDefault(require("@/basic-sdk/node-id"));
+var _socket = require("@/basic-sdk/socket");
+var _commonLoading = _interopRequireDefault(require("@/components/common-loading"));
+var _context = _interopRequireDefault(require("@/context"));
+var _constants2 = require("../../constants");
+var _insertElementDialog = _interopRequireDefault(require("../gloable-ui/insert-element-dialog"));
+var _layout = require("../layout");
+var _headerToolbar = _interopRequireDefault(require("../toolbar/header-toolbar"));
+var _editableArticle = _interopRequireDefault(require("./editable-article"));
+const PluginEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    editor: propsEditor,
+    document,
+    isReloading,
+    showComment,
+    isShowHeaderToolbar = true,
+    showOutline = true
+  } = _ref;
+  // eslint-disable-next-line no-unused-vars
+  const [showFullScreen, setShowFullScreen] = (0, _react.useState)(false);
+  const validEditor = (0, _react.useMemo)(() => {
+    if (propsEditor) return propsEditor;
+    const defaultEditor = (0, _extension.createDefaultEditor)();
+    const editorConfig = _context.default.getEditorConfig();
+    const newEditor = (0, _nodeId.default)((0, _socket.withSocketIO)(defaultEditor, {
+      document,
+      config: editorConfig
+    }));
+    const {
+      cursors
+    } = document;
+    newEditor.cursors = cursors || {};
+    newEditor.width = _constants.PAGE_EDIT_AREA_WIDTH; // default width
+    return newEditor;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const [slateValue, setSlateValue] = (0, _react.useState)(document.elements);
+
+  // Fix: The editor's children are not updated when the document is updated in revision
+  // In revision mode, the document is updated, but the editor's children are not updated,as onValueChange override the new document.elements. This unexpected action cause the editor to display the old content
+  (0, _react.useEffect)(() => {
+    setSlateValue(document.elements);
+  }, [document.elements]);
+  (0, _react.useEffect)(() => {
+    validEditor.readonly = false;
+    return () => {
+      validEditor.selection = null;
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // useMount: init socket connection
+  (0, _react.useEffect)(() => {
+    if (propsEditor) return;
+    validEditor.openConnection();
+    return () => {
+      validEditor.closeConnection();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // useMount: focus editor
+  (0, _react.useEffect)(() => {
+    const timer = setTimeout(() => {
+      const [firstNode] = validEditor.children;
+      if (firstNode) {
+        const [firstNodeFirstChild] = firstNode.children;
+        if (firstNodeFirstChild) {
+          const endOfFirstNode = _slate.Editor.end(validEditor, [0, 0]);
+          const range = {
+            anchor: endOfFirstNode,
+            focus: endOfFirstNode
+          };
+          (0, _core.focusEditor)(validEditor, range);
+        }
+      }
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onRefreshDocument = (0, _react.useCallback)(() => {
+    window.location.reload();
+  }, []);
+
+  // useMount: refresh document
+  (0, _react.useEffect)(() => {
+    const eventBus = _basicSdk.EventBus.getInstance();
+    eventBus.subscribe(_constants2.EXTERNAL_EVENT.REFRESH_DOCUMENT, onRefreshDocument);
+
+    // Remove aiMarks on special conditions like unexpected exit or refresh page using AI
+    const hasAIMark = !_slate.Editor.nodes(validEditor, {
+      at: [],
+      match: n => _slate.Text.isText(n) && n.sdoc_ai === true
+    }).next().done;
+    if (hasAIMark) {
+      (0, _helpers.removeMarks)(validEditor);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onRefreshDocument]);
+
+  // Handle presentation fullscreen mode
+  const handleFullScreenPresentation = (0, _react.useCallback)(_ref2 => {
+    let {
+      isShowFullScreen
+    } = _ref2;
+    if (isShowFullScreen) {
+      setShowFullScreen(true);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    const eventBus = _basicSdk.EventBus.getInstance();
+    const unsubscribePresentationFullScreen = eventBus.subscribe(_constants2.EXTERNAL_EVENT.TOGGLE_PRESENTATION_MODE, handleFullScreenPresentation);
+    return () => {
+      unsubscribePresentationFullScreen();
+    };
+  }, [handleFullScreenPresentation]);
+  (0, _react.useEffect)(() => {
+    const handleExit = e => {
+      if ((0, _isHotkey.default)('esc', e)) {
+        e.preventDefault();
+        if (window.document.fullscreenElement) {
+          window.document.exitFullscreen();
+        }
+      }
+    };
+    const onFullscreenChange = () => {
+      if (!window.document.fullscreenElement) {
+        setShowFullScreen(false);
+      }
+    };
+    window.addEventListener('keydown', handleExit);
+    window.document.addEventListener('fullscreenchange', onFullscreenChange);
+    return () => {
+      window.removeEventListener('keydown', handleExit);
+      window.document.removeEventListener('fullscreenchange', onFullscreenChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // The parent component can call the method of this component through ref
+  (0, _react.useImperativeHandle)(ref, () => ({
+    setSlateValue: document => {
+      // Force update of editor's child elements
+      validEditor.children = document.elements;
+      setSlateValue([...document.elements]);
+    },
+    updateDocumentVersion: document => {
+      validEditor.updateDocumentVersion(document);
+    },
+    // get value
+    getSlateValue: () => {
+      return (0, _deepCopy.default)({
+        ...document,
+        elements: slateValue
+      });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [document, validEditor, slateValue]);
+  const onValueChange = value => {
+    const eventBus = _basicSdk.EventBus.getInstance();
+    setSlateValue(value);
+    // After the content is updated, update the search content
+    setTimeout(() => {
+      eventBus.dispatch(_constants.INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT, value);
+    }, 0);
+  };
+  if (isReloading) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "h-100 w-100 d-flex align-items-center justify-content-center"
+    }, /*#__PURE__*/_react.default.createElement(_commonLoading.default, null));
+  }
+  const isShowComment = typeof showComment === 'boolean' ? showComment : true;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layout.EditorContainer, {
+    editor: validEditor
+  }, /*#__PURE__*/_react.default.createElement(_useColorContext.ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/_react.default.createElement(_headerToolbar.default, {
+    editor: validEditor
+  }), /*#__PURE__*/_react.default.createElement(_layout.EditorContent, {
+    docValue: slateValue,
+    showOutline: showOutline !== null && showOutline !== void 0 ? showOutline : true,
+    editor: validEditor,
+    showComment: isShowComment
+  }, /*#__PURE__*/_react.default.createElement(_editableArticle.default, {
+    editor: validEditor,
+    slateValue: slateValue,
+    updateSlateValue: onValueChange,
+    showComment: isShowComment
+  })))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
+    editor: validEditor
+  }));
+});
+var _default = exports.default = PluginEditor;

package/dist/plugin-module/error-boundary/error-page.css

@@ -0,0 +1,16 @@
+.error-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.error-page .error-tip {
+  color: red;
+}
+
+.error-page .error-button {
+  margin-top: 20px;
+}

package/dist/plugin-module/error-boundary/error-page.js

@@ -0,0 +1,37 @@
+"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 _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _context = _interopRequireDefault(require("@/context"));
+require("./error-page.css");
+function ErrorPage(_ref) {
+  let {
+    t
+  } = _ref;
+  const normalizeSdoc = (0, _react.useCallback)(async () => {
+    const res = await _context.default.normalizeSdocContent();
+    const {
+      success
+    } = res.data;
+    if (success) {
+      // eslint-disable-next-line no-restricted-globals
+      location.reload(true);
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "error-page"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "error-tip"
+  }, t('Sdoc_error_tip')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    className: "error-button",
+    onClick: () => normalizeSdoc()
+  }, t('Repair')));
+}
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ErrorPage);

package/dist/plugin-module/error-boundary/index.js

@@ -0,0 +1,33 @@
+"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 _errorPage = _interopRequireDefault(require("./error-page"));
+class ErrorBoundary extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.log(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /*#__PURE__*/_react.default.createElement(_errorPage.default, null);
+    }
+    return this.props.children;
+  }
+}
+exports.default = ErrorBoundary;

package/dist/plugin-module/gloable-ui/insert-element-dialog.js

@@ -0,0 +1,249 @@
+"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 _reactI18next = require("react-i18next");
+var _basicSdk = require("@/basic-sdk");
+var _constants = require("@/basic-sdk/constants");
+var _index = _interopRequireDefault(require("@/basic-sdk/extension/commons/file-insert-dialog/index.js"));
+var _index2 = _interopRequireDefault(require("@/basic-sdk/extension/commons/select-file-dialog/index.js"));
+var _constants2 = require("@/basic-sdk/extension/constants");
+var _index3 = _interopRequireDefault(require("@/basic-sdk/extension/plugins/ai/ai-module/index.js"));
+var _helpers = require("@/basic-sdk/extension/plugins/image/helpers");
+var _addLinkDialog = _interopRequireDefault(require("@/basic-sdk/extension/plugins/link/dialog/add-link-dialog"));
+var _dialogs = require("@/basic-sdk/extension/plugins/table/dialogs");
+var _constants3 = require("@/basic-sdk/extension/plugins/video/constants");
+var _addVideoLinkDialog = _interopRequireDefault(require("@/basic-sdk/extension/plugins/video/dialog/add-video-link-dialog"));
+var _helpers2 = require("@/basic-sdk/extension/plugins/video/helpers");
+var _toast = _interopRequireDefault(require("@/components/toast"));
+var _context = _interopRequireDefault(require("@/context.js"));
+var _constants4 = require("../constants");
+var _addSeatableRowDialog = _interopRequireDefault(require("../plugins/seatable-row/dialog/add-seatable-row-dialog"));
+const InsertElementDialog = _ref => {
+  let {
+    editor
+  } = _ref;
+  const [dialogType, setDialogType] = (0, _react.useState)('');
+  const [element, setElement] = (0, _react.useState)('');
+  const [insertPosition, setInsertPosition] = (0, _react.useState)(_constants2.INSERT_POSITION.CURRENT);
+  const [slateNode, setSlateNode] = (0, _react.useState)(null);
+  const [insertLinkCallback, setInsertLinkCallback] = (0, _react.useState)(null);
+  const [insertVideoCallback, setInsertVideoCallback] = (0, _react.useState)(null);
+  const [validEditor, setValidEditor] = (0, _react.useState)(editor);
+  const [linkTitle, setLinkTitle] = (0, _react.useState)('');
+  const [handleSubmit, setHandleSubmit] = (0, _react.useState)(() => void 0);
+  const [data, setData] = (0, _react.useState)({});
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const uploadLocalImageInputRef = (0, _react.useRef)();
+  const uploadLocalVideoInputRef = (0, _react.useRef)();
+  const onFileChanged = (0, _react.useCallback)(event => {
+    const imgInfos = (0, _helpers.generateImageInfos)(event.target.files);
+    (0, _helpers.insertImage)(validEditor, imgInfos, validEditor.selection, insertPosition);
+    if (uploadLocalImageInputRef.current) {
+      uploadLocalImageInputRef.current.value = '';
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validEditor, uploadLocalImageInputRef, insertPosition, slateNode]);
+  const handleDisplayAlert = (0, _react.useCallback)(() => {
+    setTimeout(() => {
+      _toast.default.warning(`${t('The_current_version_does_not_support_>5MB_video_file')}`, {
+        duration: 3
+      });
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onVideoFileChanged = (0, _react.useCallback)(event => {
+    const files = event.target.files;
+    // Show warning for 3s and no further insertion if video file is more than 5MB
+    if (files[0].size > _constants3.VIDEO_MAX_SIZE_5MB) {
+      handleDisplayAlert();
+      event.target.value = null;
+      return;
+    }
+    _context.default.uploadLocalVideo(files).then(fileUrl => {
+      (0, _helpers2.insertVideo)(validEditor, files, fileUrl, validEditor.selection, insertPosition);
+      if (uploadLocalVideoInputRef.current) {
+        uploadLocalVideoInputRef.current.value = '';
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validEditor, uploadLocalImageInputRef, insertPosition, slateNode]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _basicSdk.EventBus.getInstance();
+    const toggleDialogSubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.INSERT_ELEMENT, toggleDialog);
+    return () => {
+      toggleDialogSubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const toggleDialog = (0, _react.useCallback)(_ref2 => {
+    let {
+      type,
+      element,
+      insertPosition = _constants2.INSERT_POSITION.CURRENT,
+      slateNode,
+      insertFileLinkCallback,
+      insertSdocFileLinkCallback,
+      insertVideo,
+      editor: paramEditor,
+      linkTitle,
+      // link shortcut wrapping link
+      handleSubmit,
+      data
+    } = _ref2;
+    setInsertPosition(insertPosition);
+    setSlateNode(slateNode);
+    setElement(element);
+    setDialogType(type);
+    setInsertLinkCallback({
+      insertSdocFileLinkCallback,
+      insertFileLinkCallback
+    });
+    setInsertVideoCallback({
+      insertVideo
+    });
+    setLinkTitle(linkTitle);
+    setHandleSubmit(handleSubmit);
+    // Apply for comment editor, as it has a different editor instance
+    setValidEditor(paramEditor || editor);
+    setData(data);
+    if (type === _constants2.LOCAL_IMAGE) {
+      setTimeout(() => {
+        uploadLocalImageInputRef.current && uploadLocalImageInputRef.current.click();
+      }, 0);
+    }
+    if (type === _constants2.LOCAL_VIDEO) {
+      setTimeout(() => {
+        uploadLocalVideoInputRef.current && uploadLocalVideoInputRef.current.click();
+      }, 0);
+    }
+  }, [editor]);
+  const closeDialog = (0, _react.useCallback)(() => {
+    setInsertPosition(_constants2.INSERT_POSITION.CURRENT);
+    setSlateNode(null);
+    setElement('');
+    setDialogType('');
+    setInsertLinkCallback(null);
+    setInsertVideoCallback(null);
+    setValidEditor(null);
+    setLinkTitle('');
+    setData('');
+  }, []);
+  const props = {
+    insertPosition,
+    slateNode,
+    editor: validEditor,
+    element,
+    closeDialog,
+    linkTitle,
+    handleSubmit,
+    data
+  };
+  switch (dialogType) {
+    case _constants2.ELEMENT_TYPE.TABLE:
+      {
+        return /*#__PURE__*/_react.default.createElement(_dialogs.CustomTableSizeDialog, props);
+      }
+    case _constants2.ELEMENT_TYPE.TABLE_CELL:
+      {
+        return /*#__PURE__*/_react.default.createElement(_dialogs.SplitCellSettingDialog, props);
+      }
+    case _constants2.ELEMENT_TYPE.LINK:
+      {
+        return /*#__PURE__*/_react.default.createElement(_addLinkDialog.default, props);
+      }
+    case _constants2.ELEMENT_TYPE.SDOC_LINK:
+      {
+        const sdocLinkProps = {
+          editor: validEditor,
+          dialogType,
+          insertLinkCallback,
+          closeDialog
+        };
+        return /*#__PURE__*/_react.default.createElement(_index2.default, sdocLinkProps);
+      }
+    case _constants2.ELEMENT_TYPE.FILE_LINK:
+      {
+        const fileLinkProps = {
+          editor: validEditor,
+          dialogType,
+          insertLinkCallback,
+          closeDialog
+        };
+        return /*#__PURE__*/_react.default.createElement(_index2.default, fileLinkProps);
+      }
+    case _constants2.ELEMENT_TYPE.VIDEO:
+      {
+        const videoProps = {
+          editor: validEditor,
+          dialogType,
+          insertVideoCallback,
+          closeDialog
+        };
+        return /*#__PURE__*/_react.default.createElement(_index2.default, videoProps);
+      }
+    case _constants2.ELEMENT_TYPE.VIDEO_LINK:
+      {
+        return /*#__PURE__*/_react.default.createElement(_addVideoLinkDialog.default, props);
+      }
+    case _constants2.LOCAL_IMAGE:
+      {
+        return /*#__PURE__*/_react.default.createElement("input", {
+          onClick: e => e.stopPropagation(),
+          ref: uploadLocalImageInputRef,
+          type: "file",
+          multiple: true,
+          accept: "image/*",
+          style: {
+            display: 'none'
+          },
+          onChange: onFileChanged
+        });
+      }
+    case _constants2.LOCAL_VIDEO:
+      {
+        return /*#__PURE__*/_react.default.createElement("input", {
+          onClick: e => e.stopPropagation(),
+          ref: uploadLocalVideoInputRef,
+          type: "file",
+          accept: "video/*",
+          style: {
+            display: 'none'
+          },
+          onChange: onVideoFileChanged
+        });
+      }
+    case _constants2.ELEMENT_TYPE.FILE_LINK_INSET_INPUT_TEMP:
+      {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          element: slateNode,
+          editor: editor,
+          closeDialog: closeDialog
+        });
+      }
+    case _constants2.ELEMENT_TYPE.ASK_AI:
+      {
+        return /*#__PURE__*/_react.default.createElement(_index3.default, {
+          element: slateNode,
+          editor: editor,
+          closeModule: closeDialog
+        });
+      }
+    case _constants4.SEATABLE_ROW:
+      {
+        return /*#__PURE__*/_react.default.createElement(_addSeatableRowDialog.default, props);
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+var _default = exports.default = InsertElementDialog;

package/dist/plugin-module/index.js

@@ -0,0 +1,112 @@
+"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 _reactI18next = require("react-i18next");
+var _constants = require("@/basic-sdk/constants");
+var _extension = require("@/basic-sdk/extension");
+var _useForceUpdate = _interopRequireDefault(require("@/basic-sdk/hooks/use-force-update"));
+var _nodeId = _interopRequireDefault(require("@/basic-sdk/node-id"));
+var _socket = require("@/basic-sdk/socket");
+var _context = _interopRequireDefault(require("@/context"));
+var _hooks = require("@/hooks");
+var _pluginEditor = _interopRequireDefault(require("./editor/plugin-editor"));
+var _errorBoundary = _interopRequireDefault(require("./error-boundary"));
+var _plugins = require("./plugins");
+var _pluginViewer = _interopRequireDefault(require("./views/plugin-viewer"));
+require("@/assets/css/simple-editor.css");
+require("@/assets/css/plugin-editor.css");
+const DocumentPluginEditor = _ref => {
+  let {
+    isReadOnly,
+    docUuid,
+    document,
+    showOutline,
+    tableId,
+    columns,
+    getColumnCellValue,
+    currentRowIdx,
+    tables,
+    getTableById,
+    collaborators,
+    formulaRows,
+    getTableFormulaResults,
+    sqlQuery,
+    getArticleStyle
+  } = _ref;
+  _context.default.initApi();
+  const forceUpdate = (0, _useForceUpdate.default)();
+  const validEditor = (0, _react.useMemo)(() => {
+    const withColumnPlugin = _plugins.SeaTableColumnPlugin.editorPlugin;
+    const withRowPlugin = _plugins.SeaTableRowPlugin.editorPlugin;
+    const withViewsPlugin = _plugins.SeaTableTablesPlugin.editorPlugin;
+    const defaultEditor = withViewsPlugin(withRowPlugin(withColumnPlugin((0, _extension.createDefaultEditor)())));
+
+    // getEditorConfig cache the config, so we need to update the uuid,for plugin editor
+    docUuid && _context.default.updateConfigUuid(docUuid);
+    const editorConfig = _context.default.getEditorConfig();
+    const newEditor = (0, _nodeId.default)((0, _socket.withSocketIO)(defaultEditor, {
+      document,
+      config: editorConfig
+    }));
+    const {
+      cursors
+    } = document;
+
+    // insert column
+    newEditor.table_id = tableId;
+    newEditor.columns = columns || [];
+    newEditor.getColumnCellValue = getColumnCellValue;
+    newEditor.currentRowIdx = currentRowIdx;
+
+    // insert table
+    newEditor.tables = tables || [];
+    newEditor.getTableById = getTableById;
+    newEditor.collaborators = collaborators;
+    newEditor.formulaRows = formulaRows;
+    newEditor.getTableFormulaResults = getTableFormulaResults;
+    newEditor.sqlQuery = sqlQuery;
+    newEditor.cursors = cursors || {};
+    newEditor.width = _constants.PAGE_EDIT_AREA_WIDTH; // default width
+    newEditor.editorType = _constants.DOCUMENT_PLUGIN_EDITOR;
+    newEditor.topOffset = 201;
+
+    // article style
+    newEditor.getArticleStyle = getArticleStyle;
+    return newEditor;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [docUuid]);
+  (0, _react.useEffect)(() => {
+    validEditor.openConnection();
+    return () => {
+      validEditor.closeConnection();
+    };
+  }, [validEditor]);
+  (0, _react.useEffect)(() => {
+    validEditor.getColumnCellValue = getColumnCellValue ? getColumnCellValue : null;
+    validEditor.getArticleStyle = getArticleStyle;
+    validEditor.currentRowIdx = currentRowIdx;
+    forceUpdate();
+  }, [forceUpdate, getColumnCellValue, getArticleStyle, validEditor, currentRowIdx]);
+  return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, !isReadOnly && /*#__PURE__*/_react.default.createElement(_hooks.PluginsProvider, {
+    plugins: [],
+    showComment: false
+  }, /*#__PURE__*/_react.default.createElement(_pluginEditor.default, {
+    editor: validEditor,
+    document: document,
+    showComment: false,
+    showOutline: showOutline
+  })), isReadOnly && /*#__PURE__*/_react.default.createElement(_pluginViewer.default, {
+    editor: validEditor,
+    document: document,
+    showToolbar: false,
+    showComment: false,
+    showOutline: showOutline
+  }));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(DocumentPluginEditor);