fixed lockCameraToFrame selection

src/tools/MarkdownTool.ts

@@ -1,7 +1,7 @@
 import { BaseBoxShapeTool } from "tldraw"
 
 export class MarkdownTool extends BaseBoxShapeTool {
-  static override id = "MarkdownTool"
+  static override id = "Markdown"
-  shapeType = "MarkdownTool"
+  shapeType = "Markdown"
   override initial = "idle"
 }

src/ui/CustomContextMenu.tsx

@@ -10,24 +10,32 @@ import {
   revertCamera,
   zoomToSelection,
 } from "./cameraUtils"
+import { useState, useEffect } from "react"
 
 export function CustomContextMenu(props: TLUiContextMenuProps) {
   const editor = useEditor()
-  const selectedShapes = editor.getSelectedShapes()
+  const [selectedShapes, setSelectedShapes] = useState<TLShape[]>([])
-  const selectedIds = editor.getSelectedShapeIds()
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
 
-  // Add debug logs
+  // Update selection state more frequently
-  console.log(
+  useEffect(() => {
-    "Selected Shapes:",
+    const updateSelection = () => {
-    selectedShapes.map((shape) => ({
+      setSelectedShapes(editor.getSelectedShapes())
-      id: shape.id,
+      setSelectedIds(editor.getSelectedShapeIds())
-      type: shape.type,
+    }
-    })),
+
-  )
+    // Initial update
-  console.log(
+    updateSelection()
-    "Selected Frame:",
+
-    selectedShapes.length === 1 && selectedShapes[0].type === "frame",
+    // Subscribe to selection changes
-  )
+    const unsubscribe = editor.addListener("change", updateSelection)
+
+    return () => {
+      if (typeof unsubscribe === "function") {
+        ;(unsubscribe as () => void)()
+      }
+    }
+  }, [editor])
 
   const hasSelection = selectedIds.length > 0
   const hasCameraHistory = cameraHistory.length > 0

worker/TldrawDurableObject.ts

@@ -243,11 +243,20 @@ export class TldrawDurableObject {
 
     server.accept()
 
-    // Add error handling
+    // Add error handling and reconnection logic
     server.addEventListener("error", (err) => {
       console.error("WebSocket error:", err)
     })
 
+    server.addEventListener("close", () => {
+      if (this.roomPromise) {
+        this.getRoom().then((room) => {
+          // Update store to ensure all changes are persisted
+          room.updateStore(() => {})
+        })
+      }
+    })
+
     return new Response(null, {
       status: 101,
       webSocket: client,