feature/add-whiteboard-element

frontend/src/pages/sdoc/sdoc-editor/external-operations.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ReactDom from 'react-dom';
 import { EventBus, EXTERNAL_EVENT } from '@seafile/sdoc-editor';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import InternalLinkDialog from '../../../components/dialog/internal-link-dialog';
 import ShareDialog from '../../../components/dialog/share-dialog';
 import CreateFile from '../../../components/dialog/create-file-dialog';
+import TldrawEditor from '../../tldraw-editor';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -33,6 +35,7 @@ class ExternalOperations extends React.Component {
       fileType: '.sdoc',
       editor: null,
       insertSdocFileLink: null,
+      insertWhiteboard: null,
     };
   }
 
@@ -46,6 +49,8 @@ class ExternalOperations extends React.Component {
     this.unsubscribeNewNotification = eventBus.subscribe(EXTERNAL_EVENT.NEW_NOTIFICATION, this.onNewNotification);
     this.unsubscribeClearNotification = eventBus.subscribe(EXTERNAL_EVENT.CLEAR_NOTIFICATION, this.onClearNotification);
     this.unsubscribeCreateSdocFile = eventBus.subscribe(EXTERNAL_EVENT.CREATE_SDOC_FILE, this.onCreateSdocFile);
+    this.unsubscribeCreateWhiteboardFile = eventBus.subscribe(EXTERNAL_EVENT.CREATE_WHITEBOARD_FILE, this.onCreateWhiteboardFile);
+    this.unsubscribeWhiteboardEditor = eventBus.subscribe(EXTERNAL_EVENT.TLDRAW_EDITOR, this.renderWhiteboard);
   }
 
   componentWillUnmount() {
@@ -58,8 +63,17 @@ class ExternalOperations extends React.Component {
     this.unsubscribeNewNotification();
     this.unsubscribeCreateSdocFile();
     this.unsubscribeClearNotification();
+    this.unsubscribeCreateWhiteboardFile();
+    this.unsubscribeWhiteboardEditor();
   }
 
+  renderWhiteboard = ({ containerId, props }) => {
+    const container = containerId && document.getElementById(containerId);
+    if (container) {
+      ReactDom.render(<TldrawEditor {...props} />, container);
+    }
+  };
+
   onInternalLinkToggle = (options) => {
     if (options && options.internalLink) {
       this.setState({ internalLink: options.internalLink });
@@ -143,6 +157,18 @@ class ExternalOperations extends React.Component {
     });
   };
 
+  onCreateWhiteboardFile = (params) => {
+    if (params?.editor && params?.insertWhiteboard) {
+      this.setState({ editor: params.editor, insertWhiteboard: params.insertWhiteboard });
+    }
+    if (params?.fileType) {
+      this.setState({ fileType: '.draw' });
+    }
+    this.setState({
+      isShowCreateFileDialog: !this.state.isShowCreateFileDialog
+    });
+  };
+
   checkDuplicatedName = (newName) => {
     let direntList = this.props.direntList;
     let isDuplicated = direntList.some(object => {
@@ -153,11 +179,15 @@ class ExternalOperations extends React.Component {
 
   onAddFile = (filePath) => {
     let repoID = this.props.repoID;
-    const { insertSdocFileLink, editor } = this.state;
+    const { insertWhiteboard, insertSdocFileLink, editor } = this.state;
     seafileAPI.createFile(repoID, filePath).then((res) => {
       if (insertSdocFileLink && editor) {
         insertSdocFileLink(editor, res.data.obj_name, res.data.doc_uuid);
       }
+      if (insertWhiteboard && editor) {
+        const whiteboardFilePath = '/' + res.data.obj_name;
+        insertWhiteboard(editor, res.data.obj_name, whiteboardFilePath);
+      }
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -193,7 +223,7 @@ class ExternalOperations extends React.Component {
             fileType={fileType}
             onAddFile={this.onAddFile}
             checkDuplicatedName={this.checkDuplicatedName}
-            toggleDialog={this.onCreateSdocFile}
+            toggleDialog={this.onCreateSdocFile || this.onCreateWhiteboardFile}
           />
         )}
       </>

frontend/src/pages/tldraw-editor/editor-api.js

@@ -13,8 +13,8 @@ class EditorApi {
     });
   }
 
-  getFileContent = () => {
-    return seafileAPI.getFileDownloadLink(repoID, filePath).then(res => {
+  getFileContent = (transferredRepoID = repoID, transferredFilePath = filePath) => {
+    return seafileAPI.getFileDownloadLink(transferredRepoID, transferredFilePath).then(res => {
       const downLoadUrl = res.data;
       return seafileAPI.getFileContent(downLoadUrl);
     });

frontend/src/pages/tldraw-editor/index.js

@@ -6,18 +6,19 @@ import { gettext } from '../../utils/constants';
 import toaster from '../../components/toast';
 import { SAVE_INTERVAL_TIME } from './constants';
 
-const TldrawEditor = () => {
+const TldrawEditor = (props) => {
+  const { repoID, filePath, readOnly } = props;
   const editorRef = useRef(null);
   const isChangedRef = useRef(false);
   const [fileContent, setFileContent] = useState({});
   const [isFetching, setIsFetching] = useState(true);
 
   useEffect(() => {
-    editorApi.getFileContent().then(res => {
+    editorApi.getFileContent(repoID, filePath).then(res => {
       setFileContent(res.data);
       setIsFetching(false);
     });
-  }, []);
+  }, [repoID, filePath]);
 
   const saveDocument = useCallback(async () => {
     if (isChangedRef.current) {
@@ -32,6 +33,7 @@ const TldrawEditor = () => {
   }, []);
 
   useEffect(() => {
+    if (readOnly) return;
     const handleHotkeySave = (event) => {
       if (isHotkey('mod+s')(event)) {
         event.preventDefault();
@@ -42,9 +44,10 @@ const TldrawEditor = () => {
     return () => {
       document.removeEventListener('keydown', handleHotkeySave);
     };
-  }, [saveDocument]);
+  }, [saveDocument, readOnly]);
 
   useEffect(() => {
+    if (readOnly) return;
     const saveInterval = setInterval(() => {
       if (isChangedRef.current) {
         editorApi.saveContent(JSON.stringify(editorRef.current)).then(res => {
@@ -65,7 +68,7 @@ const TldrawEditor = () => {
       clearInterval(saveInterval);
       window.removeEventListener('beforeunload', handleBeforeUnload);
     };
-  }, [saveDocument]);
+  }, [saveDocument, readOnly]);
 
   const onContentChanged = useCallback((docContent) => {
     editorRef.current = docContent;
@@ -79,6 +82,7 @@ const TldrawEditor = () => {
   return (
     <SimpleEditor
       isFetching={isFetching}
+      readOnly={readOnly}
       document={fileContent}
       onContentChanged={onContentChanged}
       onSave={onSave}

seahub/seadoc/apis.py

@@ -43,7 +43,7 @@
     gen_seadoc_image_parent_path, get_seadoc_asset_upload_link, get_seadoc_asset_download_link, \
     can_access_seadoc_asset, is_seadoc_revision, ZSDOC, export_sdoc
 from seahub.seadoc.settings import SDOC_REVISIONS_DIR, SDOC_IMAGES_DIR
-from seahub.utils.file_types import SEADOC, IMAGE, VIDEO
+from seahub.utils.file_types import SEADOC, IMAGE, VIDEO, TLDRAW
 from seahub.utils.file_op import if_locked_by_online_office
 from seahub.utils import get_file_type_and_ext, normalize_file_path, \
         normalize_dir_path, PREVIEW_FILEEXT, \
@@ -2533,6 +2533,8 @@ def get(self, request, file_uuid):
                     entry["file_uuid"] = dirent_file_uuid
                 elif file_type == 'file' and filetype not in (SEADOC, IMAGE):
                     entry["file_uuid"] = dirent_file_uuid
+                elif file_type == 'draw' and filetype == TLDRAW:
+                    entry["file_uuid"] = dirent_file_uuid
                 else:
                     continue
             entry["type"] = dtype
@@ -2925,6 +2927,8 @@ def get(self, request, file_uuid):
             suffixes = ['sdoc',]
         if search_type == 'file':
             suffixes = get_non_sdoc_file_exts()
+        if search_type == 'draw':
+            suffixes = ['draw',]
         if not suffixes:
             error_msg = 'search_type is not valid.'
             return api_error(status.HTTP_400_BAD_REQUEST, error_msg)