BC-6499 - Fix tldraw board exporting/importing functionality (#55)

* fix board exporting to support externally stored assets * fix board importing to support base64 stored assets * fix cors problem * add assets synchronization before exporting --------- Co-authored-by: blazejpass <[email protected]>
hpi-schul-cloud · Feb 9, 2024 · a0a581a · a0a581a
1 parent 8efa399
commit a0a581a
Show file tree

Hide file tree

Showing 8 changed files with 323 additions and 111 deletions.
diff --git a/nginx.conf.template b/nginx.conf.template
@@ -2,7 +2,7 @@ server {
     listen 3046;
     server_name localhost;
 
-    set $csp "default-src 'self'; base-uri 'self'; script-src 'nonce-$request_id' 'strict-dynamic' https:; object-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'self' 'unsafe-inline';";
+    set $csp "default-src 'self'; connect-src 'self' data:; base-uri 'self'; script-src 'nonce-$request_id' 'strict-dynamic' https:; object-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'self' 'unsafe-inline';";
 
     location /tldraw-client-runtime.config.json {
         return 200 '{ "tldrawServerURL" : "${TLDRAW_SERVER_URL}" }';

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@tldraw/tldraw": "^1.29.2",
     "@y-presence/client": "^2.0.1",
     "browser-fs-access": "^0.35.0",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-cookie": "^6.1.3",
     "react-dom": "^18.2.0",
@@ -30,6 +31,7 @@
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
+    "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -15,13 +15,20 @@ function Editor({
   darkModeHandler: (isDarkMode: boolean) => void;
   focusModeHandler: (isFocusMode: boolean) => void;
 }) {
-  const { onSaveProjectAs, onSaveProject, onOpenMedia } = useFileSystem();
-  const { onMount, onOpen, onAssetCreate, onAssetDelete, onPatch, ...events } =
-    useMultiplayerState({
-      roomId,
-      setIsDarkMode: darkModeHandler,
-      setIsFocusMode: focusModeHandler,
-    });
+  const { onOpenMedia, onOpenProject } = useFileSystem();
+  const {
+    onMount,
+    onSave,
+    onSaveAs,
+    onAssetCreate,
+    onAssetDelete,
+    onPatch,
+    ...events
+  } = useMultiplayerState({
+    roomId,
+    setIsDarkMode: darkModeHandler,
+    setIsFocusMode: focusModeHandler,
+  });
   const containerRef = useRef<HTMLDivElement | null>(null);
   useTldrawUiSanitizer(containerRef);
   const { isDarkMode } = useTldrawSettings();
@@ -44,9 +51,9 @@ function Editor({
         onPatch={onPatch}
         darkMode={isDarkMode}
         {...events}
-        onOpenProject={onOpen}
-        onSaveProject={onSaveProject}
-        onSaveProjectAs={onSaveProjectAs}
+        onOpenProject={onOpenProject}
+        onSaveProject={onSave}
+        onSaveProjectAs={onSave}
         onOpenMedia={onOpenMedia}
         onAssetCreate={onAssetCreate}
         onAssetDelete={onAssetDelete}

diff --git a/src/hooks/useMultiplayerState.test.ts b/src/hooks/useMultiplayerState.test.ts
@@ -226,16 +226,4 @@ describe("useMultiplayerState hook", () => {
       tdUser: user,
     });
   });
-
-  it("should handle onOpen correctly", () => {
-    const { app, mockOpenDialog, mockOpenProject } = setup();
-    const { result } = renderHook(() => useMultiplayerState(multiPlayerProps));
-
-    act(() => {
-      result.current.onOpen(app, mockOpenDialog);
-    });
-
-    expect(mockOpenProject).toHaveBeenCalled();
-    expect(app.openProject).toBeDefined();
-  });
 });