From 375f69b365073f1f06cf152b64669de12fc10581 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
Date: Fri, 18 Oct 2024 23:54:28 -0400
Subject: [PATCH] CustomMainMenu

---
 src/components/CustomMainMenu.tsx | 59 +++++++++++++++++++++++++++++++
 src/ui-overrides.tsx              |  2 ++
 2 files changed, 61 insertions(+)
 create mode 100644 src/components/CustomMainMenu.tsx

diff --git a/src/components/CustomMainMenu.tsx b/src/components/CustomMainMenu.tsx
new file mode 100644
index 0000000..0cfb914
--- /dev/null
+++ b/src/components/CustomMainMenu.tsx
@@ -0,0 +1,59 @@
+import {
+    DefaultMainMenu,
+    TldrawUiMenuItem,
+    Editor,
+    TLContent,
+    DefaultMainMenuContent,
+    useEditor,
+    useExportAs,
+} from "tldraw";
+
+export function CustomMainMenu() {
+    const editor = useEditor()
+    const exportAs = useExportAs()
+
+    const importJSON = (editor: Editor) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = ".json";
+        input.onchange = (event) => {
+            const file = (event.target as HTMLInputElement).files?.[0];
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                if (typeof event.target?.result !== 'string') {
+                    return
+                }
+                const jsonData = JSON.parse(event.target.result) as TLContent
+                editor.putContentOntoCurrentPage(jsonData, { select: true })
+            };
+            if (file) {
+                reader.readAsText(file);
+            }
+        };
+        input.click();
+    };
+    const exportJSON = (editor: Editor) => {
+        const exportName = `props-${Math.round(+new Date() / 1000).toString().slice(5)}`
+        exportAs(Array.from(editor.getCurrentPageShapeIds()), 'json', exportName)
+    };
+
+    return (
+        <DefaultMainMenu>
+            <DefaultMainMenuContent />
+            <TldrawUiMenuItem
+                id="export"
+                label="Export JSON"
+                icon="external-link"
+                readonlyOk
+                onSelect={() => exportJSON(editor)}
+            />
+            <TldrawUiMenuItem
+                id="import"
+                label="Import JSON"
+                icon="external-link"
+                readonlyOk
+                onSelect={() => importJSON(editor)}
+            />
+        </DefaultMainMenu>
+    )
+}
\ No newline at end of file
diff --git a/src/ui-overrides.tsx b/src/ui-overrides.tsx
index 0bddd0b..6986f7d 100644
--- a/src/ui-overrides.tsx
+++ b/src/ui-overrides.tsx
@@ -7,6 +7,7 @@ import {
 	useIsToolSelected,
 	useTools,
 } from 'tldraw'
+import { CustomMainMenu } from './components/CustomMainMenu'
 
 export const uiOverrides: TLUiOverrides = {
 	tools(editor, tools) {
@@ -45,4 +46,5 @@ export const components: TLComponents = {
 			</DefaultToolbar>
 		)
 	},
+	MainMenu: CustomMainMenu,
 }
\ No newline at end of file