@seafile/sdoc-editor 1.0.197 → 1.0.198-test0.2

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -158,6 +158,10 @@
   padding: 8px 0;
 }
 
+.sdoc-insert-whiteboard-menu-popover-container {
+  padding: 8px 0;
+}
+
 /* caret */
 .sdoc-editor__article .caret-item .caret-name::before {
   content: attr(name);

package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js

@@ -34,6 +34,7 @@ const InsertElementDialog = _ref => {
   const [insertLinkCallback, setInsertLinkCallback] = (0, _react.useState)(null);
   const [validEditor, setValidEditor] = (0, _react.useState)(editor);
   const [linkTitle, setLinkTitle] = (0, _react.useState)('');
+  const [insertWhiteboardFile, setInsertWhiteboardFile] = (0, _react.useState)(null);
   const [handleSubmit, setHandleSubmit] = (0, _react.useState)(() => void 0);
   const {
     t
@@ -90,6 +91,7 @@ const InsertElementDialog = _ref => {
       slateNode,
       insertFileLinkCallback,
       insertSdocFileLinkCallback,
+      insertWhiteboard,
       editor: paramEditor,
       linkTitle,
       // link shortcut wrapping link
@@ -103,6 +105,7 @@ const InsertElementDialog = _ref => {
       insertSdocFileLinkCallback,
       insertFileLinkCallback
     });
+    setInsertWhiteboardFile(insertWhiteboard);
     setLinkTitle(linkTitle);
     setHandleSubmit(handleSubmit);
     // Apply for comment editor, as it has a different editor instance
@@ -124,6 +127,7 @@ const InsertElementDialog = _ref => {
     setElement('');
     setDialogType('');
     setInsertLinkCallback(null);
+    setInsertWhiteboardFile(null);
     setValidEditor(null);
     setLinkTitle('');
   }, []);
@@ -169,6 +173,16 @@ const InsertElementDialog = _ref => {
         };
         return /*#__PURE__*/_react.default.createElement(_index.default, fileLinkProps);
       }
+    case _constants2.ELEMENT_TYPE.WHITEBOARD:
+      {
+        const whiteboardProps = {
+          editor: validEditor,
+          dialogType,
+          insertWhiteboardFile,
+          closeDialog
+        };
+        return /*#__PURE__*/_react.default.createElement(_index.default, whiteboardProps);
+      }
     case _constants2.LOCAL_IMAGE:
       {
         return /*#__PURE__*/_react.default.createElement("input", {

package/dist/basic-sdk/extension/commons/select-file-dialog/index.js

@@ -21,9 +21,9 @@ const SelectSdocFileDialog = _ref => {
     editor,
     dialogType,
     closeDialog,
-    insertLinkCallback
+    insertLinkCallback,
+    insertWhiteboardFile
   } = _ref;
-  const modalTitle = dialogType === _constants.ELEMENT_TYPE.FILE_LINK ? 'Select_file' : 'Select_sdoc_document';
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
@@ -31,6 +31,20 @@ const SelectSdocFileDialog = _ref => {
   const [temSearchContent, setTemSearchContent] = (0, _react.useState)('');
   const [searchContent, setSearchContent] = (0, _react.useState)('');
   const [isOpenSearch, setIsOpenSearch] = (0, _react.useState)(false);
+  let modalTitle;
+  switch (dialogType) {
+    case _constants.ELEMENT_TYPE.FILE_LINK:
+      modalTitle = 'Select_file';
+      break;
+    case _constants.ELEMENT_TYPE.SDOC_LINK:
+      modalTitle = 'Select_sdoc_document';
+      break;
+    case _constants.ELEMENT_TYPE.WHITEBOARD:
+      modalTitle = 'Select_whiteboard_document';
+      break;
+    default:
+      break;
+  }
   const onSelectedFile = (0, _react.useCallback)(fileInfo => {
     setCurrentSelectedFile(fileInfo);
   }, []);
@@ -44,7 +58,20 @@ const SelectSdocFileDialog = _ref => {
     } else {
       insertSdocFileLinkCallback && insertSdocFileLinkCallback(editor, fileInfo.name, fileInfo.file_uuid);
     }
-  }, [insertLinkCallback, dialogType, editor]);
+    switch (dialogType) {
+      case _constants.ELEMENT_TYPE.FILE_LINK:
+        insertFileLinkCallback && insertFileLinkCallback(editor, fileInfo.name, fileInfo.file_uuid);
+        break;
+      case _constants.ELEMENT_TYPE.SDOC_LINK:
+        insertSdocFileLinkCallback && insertSdocFileLinkCallback(editor, fileInfo.name, fileInfo.file_uuid);
+        break;
+      case _constants.ELEMENT_TYPE.WHITEBOARD:
+        insertWhiteboardFile && insertWhiteboardFile(editor, fileInfo.name, fileInfo.file_uuid);
+        break;
+      default:
+        break;
+    }
+  }, [insertLinkCallback, insertWhiteboardFile, dialogType, editor]);
   const onSubmit = (0, _react.useCallback)(() => {
     if (!currentSelectedFile) return;
     const {

package/dist/basic-sdk/extension/commons/select-file-dialog/local-files/index.js

@@ -46,6 +46,7 @@ const LocalFiles = _ref => {
   }, []);
   const getTreeData = (0, _react.useCallback)((p, indexId, treeData) => {
     return _context.default.getSdocLocalFiles(p, fileType).then(res => {
+      console.log(9, res);
       res.data.forEach(item => {
         item.indexId = _slugid.default.nice();
       });
@@ -155,7 +156,7 @@ const LocalFiles = _ref => {
         className: "sdoc-folder-children"
       }, ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) === 0 && /*#__PURE__*/_react.default.createElement("div", {
         className: "sdoc-folder-children-empty"
-      }, `(${t('Empty')})`), ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), type === 'file' && /*#__PURE__*/_react.default.createElement("div", {
+      }, `(${t('Empty')})`), ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), ['file', 'draw'].includes(type) && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)('sdoc-file-info', {
           'active': selected
         }),

package/dist/basic-sdk/extension/constants/element-type.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIKI_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
+exports.WIKI_LINK = exports.WHITEBOARD = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const TITLE = exports.TITLE = 'title';
 const SUBTITLE = exports.SUBTITLE = 'subtitle';
@@ -42,6 +42,7 @@ const MENTION = exports.MENTION = 'mention';
 const MENTION_TEMP = exports.MENTION_TEMP = 'mention_temp';
 const FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK_INSET_INPUT_TEMP = 'file_link_insert_input_temp';
 const QUICK_INSERT = exports.QUICK_INSERT = 'quick_insert';
+const WHITEBOARD = exports.WHITEBOARD = 'whiteboard';
 const SEATABLE_COLUMN = exports.SEATABLE_COLUMN = 'seatable_column';
 const SEATABLE_TABLE = exports.SEATABLE_TABLE = 'seatable_table';
 const ASK_AI = exports.ASK_AI = 'ask_ai';

package/dist/basic-sdk/extension/constants/index.js

@@ -484,6 +484,12 @@ Object.defineProperty(exports, "VIDEO", {
     return _elementType.VIDEO;
   }
 });
+Object.defineProperty(exports, "WHITEBOARD", {
+  enumerable: true,
+  get: function () {
+    return _elementType.WHITEBOARD;
+  }
+});
 Object.defineProperty(exports, "WIN_HOTKEYS", {
   enumerable: true,
   get: function () {
@@ -532,9 +538,10 @@ const LIST_ITEM_SUPPORTED_TRANSFORMATION = exports.LIST_ITEM_SUPPORTED_TRANSFORM
 const ADD_POSITION_OFFSET_TYPE = exports.ADD_POSITION_OFFSET_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.IMAGE_BLOCK];
 const FILE_TYPE = exports.FILE_TYPE = {
   [_elementType.FILE_LINK]: 'file',
-  [_elementType.SDOC_LINK]: 'sdoc'
+  [_elementType.SDOC_LINK]: 'sdoc',
+  [_elementType.WHITEBOARD]: 'draw'
 };
-const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.MULTI_COLUMN];
+const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.WHITEBOARD, _elementType.SEATABLE_TABLE, _elementType.MULTI_COLUMN];
 const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP = {
   [_elementType.PARAGRAPH]: [_elementType.CALL_OUT],
   [_elementType.TITLE]: [_elementType.CALL_OUT],
@@ -552,4 +559,4 @@ const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP =
   [_elementType.HEADER6]: [_elementType.CALL_OUT],
   [_elementType.CALL_OUT]: [_elementType.CALL_OUT]
 };
-const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE];
+const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.WHITEBOARD];

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -233,6 +233,11 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     iconClass: 'sdocfont sdoc-seatable-table',
     type: _elementType.SEATABLE_TABLE,
     text: 'SeaTable_table'
+  },
+  [_elementType.WHITEBOARD]: {
+    id: `sdoc_${_elementType.WHITEBOARD}`,
+    iconClass: 'sdocfont sdoc-document',
+    text: 'Whiteboard'
   }
 };
 

package/dist/basic-sdk/extension/plugins/video/menu/index.js

@@ -44,7 +44,7 @@ const VideoMenu = _ref => {
     hideArrow: true,
     fade: false
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-insert-video-menu-popover-container sdoc-dropdown-menu-container 333"
+    className: "sdoc-insert-video-menu-popover-container sdoc-dropdown-menu-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openLocalVideoDialog

package/dist/basic-sdk/extension/plugins/whiteboard/helpers.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onCreateWhiteboardFile = exports.isInsertWhiteboardMenuDisabled = exports.insertWhiteboard = void 0;
+var _slate = require("@seafile/slate");
+var _core = require("../../core");
+var _constants = require("../../constants");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants2 = require("../../../../constants");
+const isInsertWhiteboardMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  const {
+    selection
+  } = editor;
+  if (selection === null) return true;
+  if (!_slate.Range.isCollapsed(selection)) return true;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => {
+      let type = (0, _core.getNodeType)(n);
+      if (!type && (0, _core.isTextNode)(n) && n.id) {
+        const parentNode = (0, _core.getParentNode)(editor.children, n.id);
+        type = (0, _core.getNodeType)(parentNode);
+      }
+      if (type === _constants.CODE_BLOCK) return true;
+      if (type.startsWith('header')) return true;
+      if (type === _constants.TITLE) return true;
+      if (type === _constants.SUBTITLE) return true;
+      if (type === _constants.LIST_ITEM) return true;
+      if (type === _constants.CHECK_LIST_ITEM) return true;
+      if (type === _constants.MULTI_COLUMN) return true;
+      if (type === _constants.BLOCKQUOTE) return true;
+      if (type === _constants.CALL_OUT) return true;
+      if (_slate.Editor.isVoid(editor, n)) return true;
+      return false;
+    },
+    universal: true
+  });
+  if (match) return true;
+  return false;
+};
+exports.isInsertWhiteboardMenuDisabled = isInsertWhiteboardMenuDisabled;
+const insertWhiteboard = () => {};
+exports.insertWhiteboard = insertWhiteboard;
+const onCreateWhiteboardFile = editor => {
+  // e.stopPropagation();
+  const eventBus = _eventBus.default.getInstance();
+  const external_props = {
+    insertWhiteboard,
+    fileType: 'draw',
+    editor
+  };
+  console.log(2, external_props.insertWhiteboard);
+  eventBus.dispatch(_constants2.EXTERNAL_EVENT.CREATE_WHITEBOARD_FILE, {
+    ...external_props
+  });
+};
+exports.onCreateWhiteboardFile = onCreateWhiteboardFile;

package/dist/basic-sdk/extension/plugins/whiteboard/index.css

@@ -0,0 +1,5 @@
+.sdoc-whiteboard-container {
+  width: 670px;
+  height: auto;
+  border: 1px solid #ccc;
+}

package/dist/basic-sdk/extension/plugins/whiteboard/index.js

@@ -0,0 +1,20 @@
+"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 _menu = _interopRequireDefault(require("./menu"));
+var _renderElem = require("./render-elem");
+require("./index.css");
+const WhiteboardPlugin = {
+  type: _constants.WHITEBOARD,
+  nodeType: 'element',
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderWhiteboard]
+};
+var _default = exports.default = WhiteboardPlugin;

package/dist/basic-sdk/extension/plugins/whiteboard/menu/index.js

@@ -0,0 +1,63 @@
+"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 _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _helpers = require("../helpers");
+var _constants = require("../../../constants");
+var _constants2 = require("../../../../constants");
+const WhiteboardMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    eventBus,
+    toggle
+  } = _ref;
+  const disabled = (0, _helpers.isInsertWhiteboardMenuDisabled)(editor, readonly);
+  const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.WHITEBOARD];
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const onCreateFile = () => {
+    (0, _helpers.onCreateWhiteboardFile)(editor);
+  };
+  const openSelectSdocFileDialog = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.ELEMENT_TYPE.WHITEBOARD,
+      insertWhiteboard: _helpers.insertWhiteboard
+    });
+    toggle && toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggle, eventBus]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    className: "pr-2"
+  }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  })), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: menuConfig.id,
+    trigger: "hover",
+    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-whiteboard-menu-popover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-insert-whiteboard-menu-popover-container sdoc-dropdown-menu-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: openSelectSdocFileDialog
+  }, t('Upload_local_whiteboard')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: onCreateFile
+  }, t('Create_new_whiteboard')))));
+};
+var _default = exports.default = WhiteboardMenu;

package/dist/basic-sdk/extension/plugins/whiteboard/plugin.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../constants");
+const withWhiteboard = editor => {
+  const {
+    isVoid
+  } = editor;
+  const newEditor = editor;
+
+  // Make whiteboard as void node
+  newEditor.isVoid = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants.WHITEBOARD) {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  return newEditor;
+};
+var _default = exports.default = withWhiteboard;

package/dist/basic-sdk/extension/plugins/whiteboard/render-elem.js

@@ -0,0 +1,39 @@
+"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.renderWhiteboard = renderWhiteboard;
+var _react = _interopRequireWildcard(require("react"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants = require("../../../../constants");
+require("./index.css");
+const Whiteboard = _ref => {
+  let {
+    editor
+  } = _ref;
+  // const whiteboardContainer = document.getElementById('sdoc-whiteboard-container');
+  const [tldraw, setTldraw] = (0, _react.useState)(null);
+  const renderWhiteboardEditor = Tldraw => {
+    console.log(4, Tldraw);
+    setTldraw( /*#__PURE__*/_react.default.createElement(Tldraw, null));
+  };
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeWhiteboardEditor = eventBus.subscribe(_constants.EXTERNAL_EVENT.TLDRAW_EDITOR, renderWhiteboardEditor);
+    console.log(3, renderWhiteboardEditor);
+    return () => {
+      unsubscribeWhiteboardEditor();
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "sdoc-whiteboard-container"
+  }, tldraw);
+};
+function renderWhiteboard(props, editor) {
+  return /*#__PURE__*/_react.default.createElement(Whiteboard, Object.assign({}, props, {
+    editor: editor
+  }));
+}

package/dist/basic-sdk/extension/render/custom-element.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,6 +13,7 @@ var _core = require("../core");
 var _helper = require("./helper");
 var _elementType = require("../constants/element-type");
 var _constants2 = require("../../constants");
+var _whiteboard = _interopRequireDefault(require("../plugins/whiteboard"));
 const CustomRenderElement = props => {
   const editor = (0, _slateReact.useSlateStatic)();
   const readonly = (0, _slateReact.useReadOnly)();
@@ -210,6 +212,11 @@ const CustomRenderElement = props => {
         const [renderSeaTableTable] = _plugins.SeaTableViewsPlugin.renderElements;
         return renderSeaTableTable(props, editor);
       }
+    case _elementType.WHITEBOARD:
+      {
+        const [renderWhiteboard] = _whiteboard.default.renderElements;
+        return renderWhiteboard(props, editor);
+      }
     default:
       {
         const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;

package/dist/basic-sdk/extension/render/render-comment-editor-element.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,6 +9,7 @@ var _slateReact = require("@seafile/slate-react");
 var _constants = require("../constants");
 var _plugins = require("../plugins");
 var _core = require("../core");
+var _whiteboard = _interopRequireDefault(require("../plugins/whiteboard"));
 const RenderCommentEditorCustomRenderElement = props => {
   const editor = (0, _slateReact.useSlateStatic)();
   const readonly = (0, _slateReact.useReadOnly)();
@@ -95,6 +97,13 @@ const RenderCommentEditorCustomRenderElement = props => {
         const [renderBlockquote] = _plugins.BlockquotePlugin.renderElements;
         return renderBlockquote(props, editor);
       }
+    case _constants.WHITEBOARD:
+      {
+        const [renderWhiteboard] = _whiteboard.default.renderElements;
+        return renderWhiteboard({
+          ...props
+        }, editor);
+      }
     default:
       {
         const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;

package/dist/basic-sdk/extension/toolbar/header-toolbar/insert-toolbar/index.js

@@ -19,6 +19,7 @@ var _menu5 = _interopRequireDefault(require("../../../plugins/sdoc-link/menu"));
 var _menu6 = _interopRequireDefault(require("../../../plugins/file-link/menu"));
 var _menu7 = _interopRequireDefault(require("../../../plugins/seatable-column/menu"));
 var _menu8 = _interopRequireDefault(require("../../../plugins/seatable-tables/menu"));
+var _menu9 = _interopRequireDefault(require("../../../plugins/whiteboard/menu"));
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _constants = require("../../../../constants");
 require("./index.css");
@@ -95,7 +96,7 @@ const InsertToolbar = _ref => {
     style: {
       maxHeight: window.innerHeight - bottom - 100
     }
-  }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), (editor === null || editor === void 0 ? void 0 : editor.editorType) !== _constants.DOCUMENT_PLUGIN_EDITOR && /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), (editor === null || editor === void 0 ? void 0 : editor.editorType) !== _constants.DOCUMENT_PLUGIN_EDITOR && /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu9.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-dropdown-menu-divider"
   }), editor.columns && /*#__PURE__*/_react.default.createElement(_menu7.default, props), editor.tables && /*#__PURE__*/_react.default.createElement(_menu8.default, props), !editor.tables && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_menu5.default, props), /*#__PURE__*/_react.default.createElement(_menu6.default, props)))));
 };

package/dist/basic-sdk/extension/toolbar/insert-element-toolbar/index.js

@@ -168,7 +168,7 @@ const QuickInsertBlockMenu = _ref => {
       // eslint-disable-next-line react/jsx-indent
       _react.default.createElement(_dropdownMenuItem.default, {
         isHidden: !quickInsertMenuSearchMap[_constants.TABLE],
-        key: "sdoc-insert-menu-tabe",
+        key: "sdoc-insert-menu-table",
         menuConfig: {
           ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.TABLE]
         },

package/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js

@@ -138,7 +138,7 @@ const isVoidNode = node => {
 };
 exports.isVoidNode = isVoidNode;
 const isNotSupportTransform = node => {
-  if (node.type && [_constants.CODE_BLOCK, _constants.TABLE, _constants.CALL_OUT, _constants.VIDEO, _constants.SEATABLE_TABLE].includes(node.type)) {
+  if (node.type && [_constants.CODE_BLOCK, _constants.TABLE, _constants.CALL_OUT, _constants.VIDEO, _constants.SEATABLE_TABLE, _constants.WHITEBOARD].includes(node.type)) {
     return true;
   }
   return false;

package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -150,6 +150,7 @@ const InsertBlockMenu = _ref => {
     onClick: onInsertVideoToggle
   }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.TABLE],
+    key: "sdoc-insert-menu-table",
     menuConfig: {
       ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.TABLE]
     },
@@ -160,8 +161,8 @@ const InsertBlockMenu = _ref => {
     editor: editor,
     target: "sdoc-side-menu-item-table",
     trigger: "hover",
-    placement: "right-start",
-    popperClassName: "sdoc-side-menu-table-size",
+    placement: "left-start",
+    popperClassName: "sdoc-side-menu-table-size sdoc-insert-element-table-size-wrapper",
     createTable: createTable
   })), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.LINK],

package/dist/basic-sdk/extension/toolbar/side-toolbar/side-menu.css

@@ -23,6 +23,11 @@
   font-size: 14px;
 }
 
+.sdoc-side-menu .sdoc-side-menu-insert-wrapper {
+  max-height: 278px;
+  overflow-y: auto;
+}
+
 .sdoc-side-menu-insert-below-popover .popover {
   background-color: #fff;
   min-width: 150px;

package/dist/basic-sdk/extension/toolbar/side-toolbar/side-menu.js

@@ -150,11 +150,13 @@ const SideMenu = (_ref, ref) => {
     onChange: onChange,
     onCompositionStart: onCompositionStart,
     onCompositionEnd: onCompositionEnd
-  })), isNodeEmpty && /*#__PURE__*/_react.default.createElement(_insertBlockMenu.default, {
+  })), isNodeEmpty && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-side-menu-insert-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_insertBlockMenu.default, {
     isNodeEmpty: isNodeEmpty,
     slateNode: slateNode,
     insertMenuSearchMap: insertMenuSearchMap
-  }), !isNodeEmpty && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, transformMenuSearchMap['searching'] && isDisplayCategoryTitle(transformMenuSearchMap, insertBelowMenuSearchMap) && /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+  })), !isNodeEmpty && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, transformMenuSearchMap['searching'] && isDisplayCategoryTitle(transformMenuSearchMap, insertBelowMenuSearchMap) && /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     menuConfig: {
       text: 'Transform_to'
     },

package/dist/constants/index.js

@@ -36,6 +36,8 @@ const EXTERNAL_EVENT = exports.EXTERNAL_EVENT = {
   PARTICIPANT_REMOVED: 'participant-removed',
   CREATE_SDOC_FILE: 'create_sdoc_file',
   CREATE_WIKI_PAGE: 'create_wiki_page',
+  CREATE_WHITEBOARD_FILE: 'create_whiteboard_file',
+  TLDRAW_EDITOR: 'tldraw_editor',
   // wiki
   INSERT_LINK: 'insert_link',
   // document

package/package.json

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