Create canvas snapshot

packages/ui/src/components/canvas/index.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { Editor, Tldraw } from "@tldraw/tldraw";
+import "@tldraw/tldraw/tldraw.css";
+import { useState } from "react";
+import initialState from "./initial-state.json";
+
+/**
+ * Canvas wrapper for tldraw
+ */
+export default function Canvas() {
+  const [editor, setEditor] = useState<Editor>();
+
+  const onEditorMount = (editor: Editor) => {
+    setEditor(editor);
+  };
+
+  return (
+    <Tldraw
+      persistenceKey="doodle-canvas"
+      onMount={onEditorMount}
+      snapshot={initialState}
+    />
+  );
+}

packages/ui/src/components/canvas/initial-state.json

@@ -0,0 +1,62 @@
+{
+  "store": {
+    "document:document": {
+      "gridSize": 10,
+      "name": "",
+      "meta": {},
+      "id": "document:document",
+      "typeName": "document"
+    },
+    "page:sxx23_w7HrOAQADrZjg5g": {
+      "meta": {},
+      "id": "page:sxx23_w7HrOAQADrZjg5g",
+      "name": "Home",
+      "index": "a1",
+      "typeName": "page"
+    },
+    "page:Hxchw-VqUoH7qGN9g0d5f": {
+      "meta": {},
+      "id": "page:Hxchw-VqUoH7qGN9g0d5f",
+      "name": "Sign Up",
+      "index": "a2",
+      "typeName": "page"
+    }
+  },
+  "schema": {
+    "schemaVersion": 1,
+    "storeVersion": 4,
+    "recordVersions": {
+      "asset": {
+        "version": 1,
+        "subTypeKey": "type",
+        "subTypeVersions": { "image": 2, "video": 2, "bookmark": 0 }
+      },
+      "camera": { "version": 1 },
+      "document": { "version": 2 },
+      "instance": { "version": 22 },
+      "instance_page_state": { "version": 5 },
+      "page": { "version": 1 },
+      "shape": {
+        "version": 3,
+        "subTypeKey": "type",
+        "subTypeVersions": {
+          "group": 0,
+          "text": 1,
+          "bookmark": 1,
+          "draw": 1,
+          "geo": 7,
+          "note": 4,
+          "line": 1,
+          "frame": 0,
+          "arrow": 1,
+          "highlight": 0,
+          "embed": 4,
+          "image": 2,
+          "video": 1
+        }
+      },
+      "instance_presence": { "version": 5 },
+      "pointer": { "version": 1 }
+    }
+  }
+}