Fix images not displayed

janhq · Aug 16, 2024 · 46c2729 · 46c2729
1 parent 444c4d8
commit 46c2729
Showing 1 changed file with 45 additions and 43 deletions.
diff --git a/src/components/Diagram/index.tsx b/src/components/Diagram/index.tsx
@@ -6,51 +6,53 @@ interface DiagramProps {
 }
 
 export default function Diagram({ diagramPath }: DiagramProps) {
-  <BrowserOnly>
-    {() => {
-      const { Excalidraw, loadFromBlob } =
-        require("@excalidraw/excalidraw") as typeof import("@excalidraw/excalidraw");
-      const { useState, useEffect } =
-        require("react") as typeof import("react");
+  return (
+    <BrowserOnly>
+      {() => {
+        const { Excalidraw, loadFromBlob } =
+          require("@excalidraw/excalidraw") as typeof import("@excalidraw/excalidraw");
+        const { useState, useEffect } =
+          require("react") as typeof import("react");
 
-      function ExcalidrawDiagram({ diagramPath }: DiagramProps) {
-        const [excalidrawAPI, setExcalidrawAPI] =
-          useState<ExcalidrawImperativeAPI | null>(null);
+        function ExcalidrawDiagram({ diagramPath }: DiagramProps) {
+          const [excalidrawAPI, setExcalidrawAPI] =
+            useState<ExcalidrawImperativeAPI | null>(null);
 
-        useEffect(() => {
-          if (excalidrawAPI !== null) {
-            fetch(diagramPath)
-              .then((res) => res.blob())
-              .then((blob) =>
-                loadFromBlob(blob, excalidrawAPI.getAppState(), null)
-              )
-              .then((data) => {
-                excalidrawAPI.updateScene(data);
-              });
-          }
-        }, [excalidrawAPI]);
+          useEffect(() => {
+            if (excalidrawAPI !== null) {
+              fetch(diagramPath)
+                .then((res) => res.blob())
+                .then((blob) =>
+                  loadFromBlob(blob, excalidrawAPI.getAppState(), null)
+                )
+                .then((data) => {
+                  excalidrawAPI.updateScene(data);
+                });
+            }
+          }, [excalidrawAPI]);
 
-        return (
-          <div style={{ height: "400px" }}>
-            <Excalidraw
-              excalidrawAPI={(api) => setExcalidrawAPI(api)}
-              isCollaborating={false}
-              zenModeEnabled={false}
-              viewModeEnabled={true}
-              gridModeEnabled={false}
-              UIOptions={{
-                canvasActions: {
-                  export: false,
-                  loadScene: false,
-                  saveToActiveFile: false,
-                },
-              }}
-            />
-          </div>
-        );
-      }
+          return (
+            <div style={{ height: "600px" }}>
+              <Excalidraw
+                excalidrawAPI={(api) => setExcalidrawAPI(api)}
+                isCollaborating={false}
+                zenModeEnabled={false}
+                viewModeEnabled={true}
+                gridModeEnabled={false}
+                UIOptions={{
+                  canvasActions: {
+                    export: false,
+                    loadScene: false,
+                    saveToActiveFile: false,
+                  },
+                }}
+              />
+            </div>
+          );
+        }
 
-      return <ExcalidrawDiagram diagramPath={diagramPath} />;
-    }}
-  </BrowserOnly>;
+        return <ExcalidrawDiagram diagramPath={diagramPath} />;
+      }}
+    </BrowserOnly>
+  );
 }