confirmation when dropping project

Author: skhmt

src/FileDropHandler.tsx

@@ -1,10 +1,12 @@
-import {useEditor, useToasts} from "@tldraw/tldraw";
-import {parseDecompressBlob, parseString} from "./fileLoaderUtils.ts";
-import {useEffect} from "react";
+import { Editor, useDialogs, useEditor, useToasts } from "@tldraw/tldraw";
+import { parseDecompressBlob, parseString } from "./fileLoaderUtils.ts";
+import { useEffect } from "react";
+import { OpenDialog } from "./createOpenDialog.tsx";
 
 export default function FileDropHandler() {
     const editor = useEditor();
     const { addToast } = useToasts();
+    const { addDialog } = useDialogs();
 
     useEffect(() => {
         // @ts-expect-error editor.externalContentHandlers does actually exist
@@ -16,14 +18,10 @@ export default function FileDropHandler() {
             if (!file) return;
 
             if (file.name.endsWith('.tldr')) {
-                const json = await file.text();
-                parseString(json, editor, addToast);
-                addToast({ title: `"${file.name}" loaded`, severity: 'success' });
+                addDialog({ component: createTldrDialog(editor, file, addToast) });
             }
             else if (file.name.endsWith('.tldz')) {
-                const blob = new Blob([file]);
-                await parseDecompressBlob(blob, editor, addToast);
-                addToast({ title: `"${file.name}" loaded`, severity: 'success' });
+                addDialog({ component: createTldzDialog(editor, file, addToast) });
             }
             else {
                 defaultOnDrop?.(content);
@@ -32,4 +30,26 @@ export default function FileDropHandler() {
     }, [editor, addToast]);
 
     return null;
+}
+
+function createTldrDialog(editor: Editor, file: File, addToast: any) {
+    return ({ onClose }: { onClose(): void }) => {
+        return OpenDialog(onClose, async () => {
+            const json = await file.text();
+            parseString(json, editor, addToast);
+            addToast({ title: `"${file.name}" loaded`, severity: 'success' });
+            onClose();
+        })
+    }
+}
+
+function createTldzDialog(editor: Editor, file: File, addToast: any) {
+    return ({ onClose }: { onClose(): void }) => {
+        return OpenDialog(onClose, async () => {
+            const blob = new Blob([file]);
+            await parseDecompressBlob(blob, editor, addToast);
+            addToast({ title: `"${file.name}" loaded`, severity: 'success' });
+            onClose();
+        })
+    }
 }

src/createOpenDialog.tsx

@@ -8,7 +8,7 @@ import {
 	TldrawUiDialogHeader,
 	TldrawUiDialogTitle
 } from "@tldraw/tldraw";
-import {parseDecompressBlob, parseString} from "./fileLoaderUtils.ts";
+import { parseDecompressBlob, parseString } from "./fileLoaderUtils.ts";
 import { useToasts } from "@tldraw/tldraw";
 
 export function createOpenDialog(editor: Editor) {
@@ -59,28 +59,32 @@ export function createOpenDialog(editor: Editor) {
 			onClose();
 		}
 
-		return (
-			<>
-				<TldrawUiDialogHeader>
-					<TldrawUiDialogTitle>
-						<strong>Open new project ? </strong>
-					</TldrawUiDialogTitle>
-					< TldrawUiDialogCloseButton />
-				</TldrawUiDialogHeader>
-				< TldrawUiDialogBody style={{ maxWidth: 350 }}>
-					Opening a project will replace your current
-					project and any unsaved changes will be lost.
-					Are you sure you want to do this ?
-				</TldrawUiDialogBody>
-				< TldrawUiDialogFooter className="tlui-dialog__footer__actions" >
-					<TldrawUiButton type="normal" onClick={onClose} >
-						<TldrawUiButtonLabel>Cancel </TldrawUiButtonLabel>
-					</TldrawUiButton>
-					< TldrawUiButton type="primary" onClick={open} >
-						<TldrawUiButtonLabel>Open project </TldrawUiButtonLabel>
-					</TldrawUiButton>
-				</TldrawUiDialogFooter>
-			</>
-		)
+		return OpenDialog(onClose, open)
 	}
+}
+
+export function OpenDialog(onCancel: () => void, onOpen: () => void) {
+	return (
+		<>
+			<TldrawUiDialogHeader>
+				<TldrawUiDialogTitle>
+					<strong>Open new project ? </strong>
+				</TldrawUiDialogTitle>
+				< TldrawUiDialogCloseButton />
+			</TldrawUiDialogHeader>
+			< TldrawUiDialogBody style={{ maxWidth: 350 }}>
+				Opening a project will replace your current
+				project and any unsaved changes will be lost.
+				Are you sure you want to do this ?
+			</TldrawUiDialogBody>
+			< TldrawUiDialogFooter className="tlui-dialog__footer__actions" >
+				<TldrawUiButton type="normal" onClick={onCancel} >
+					<TldrawUiButtonLabel>Cancel </TldrawUiButtonLabel>
+				</TldrawUiButton>
+				< TldrawUiButton type="primary" onClick={onOpen} >
+					<TldrawUiButtonLabel>Open project </TldrawUiButtonLabel>
+				</TldrawUiButton>
+			</TldrawUiDialogFooter>
+		</>
+	)
 }

src/mainMenu.tsx

@@ -15,7 +15,7 @@ import { createSaveDialog } from './createSaveDialog';
 import { createNewDialog } from './createNewDialog';
 
 import welcomeProject from './welcomeProject'
-import {getTimestamp} from "./getTimestamp.ts";
+import { getTimestamp } from "./getTimestamp.ts";
 
 // override the MainMenu component with most of the defaults plus the local file menu
 export const MainMenuFileComponent: TLComponents = {
@@ -86,7 +86,7 @@ export const actionOverrides: TLUiOverrides = {
 					}
 				}
 				else {
-					addDialog({component: createSaveDialog(editor)});
+					addDialog({ component: createSaveDialog(editor) });
 				}
 			}
 		};