ENG-797: Handle multiple canvases loaded at the same time (#928)

* [ENG-797] Handle multiple canvases loaded at the same time

Scope active canvas focus so clipboard, query builder actions, and
shared context don't leak across simultaneously open canvases.

* [ENG-797] Add pageUid to action listener deps

* [ENG-797] Fix cleanup guard and narrow closest selector

- Check activeCanvasEditor identity in cleanup to avoid clearing
  a canvas that was already replaced by another instance
- Guard onPointerDownCapture against null editor ref
- Narrow closest() selector to .roamjs-tldraw-canvas-container
  so nested data-page-uid attributes don't match incorrectly

* [ENG-797] Restore discourseContext.relations in Export and lastActions/lastAppEvent in Tldraw

Reverts two removals flagged in review: the discourseContext.relations
population in Export.tsx (needed when exporting to canvas) and the
lastAppEvent/lastActions fields on discourseContext (used to log recent
user actions on error).

Author: sid597

apps/roam/src/components/canvas/Tldraw.tsx

@@ -140,6 +140,33 @@ export const discourseContext: DiscourseContextType = {
   lastActions: [],
 };
 
+let activeCanvasPageUid: string | null = null;
+let activeCanvasEditor: Editor | null = null;
+
+const setActiveCanvas = ({
+  pageUid,
+  editor,
+}: {
+  pageUid: string;
+  editor: Editor | null;
+}) => {
+  if (activeCanvasPageUid === pageUid && activeCanvasEditor === editor) {
+    if (editor && !editor.getInstanceState().isFocused) editor.focus();
+    return;
+  }
+
+  if (activeCanvasEditor && activeCanvasEditor !== editor) {
+    activeCanvasEditor.blur();
+  }
+
+  activeCanvasPageUid = pageUid;
+  activeCanvasEditor = editor;
+
+  if (editor && !editor.getInstanceState().isFocused) {
+    editor.focus();
+  }
+};
+
 export const DEFAULT_WIDTH = 160;
 export const DEFAULT_HEIGHT = 64;
 export const MAX_WIDTH = "400px";
@@ -726,6 +753,17 @@ const TldrawCanvasShared = ({
       inSidebar: !!containerRef.current?.closest(".rm-sidebar-outline"),
     });
   }, [pageUid]);
+
+  useEffect(() => {
+    return () => {
+      const editor = appRef.current;
+      if (activeCanvasPageUid === pageUid && activeCanvasEditor === editor) {
+        activeCanvasEditor?.blur();
+        activeCanvasPageUid = null;
+        activeCanvasEditor = null;
+      }
+    };
+  }, [pageUid]);
   const { store, needsUpgrade, performUpgrade, error, isLoading } =
     useStoreAdapter(storeAdapterArgs);
   const migratedCloudStoreRef = useRef<string | null>(null);
@@ -789,10 +827,14 @@ const TldrawCanvasShared = ({
         uid?: string;
         val?: string;
         shapeId?: TLShapeId;
+        targetCanvasPageUid?: string;
         onRefresh: () => void;
       }>,
     ) => {
       if (!/canvas/i.test(e.detail.action)) return;
+      const targetCanvasPageUid =
+        e.detail.targetCanvasPageUid ?? activeCanvasPageUid;
+      if (targetCanvasPageUid !== pageUid) return;
       const app = appRef.current;
       if (!app) return;
       const { x, y } = app.getViewportScreenCenter();
@@ -830,7 +872,7 @@ const TldrawCanvasShared = ({
         actionListener,
       );
     };
-  }, [appRef, allNodes]);
+  }, [appRef, allNodes, pageUid]);
 
   // Catch a custom event we used patch-package to add
   useEffect(() => {
@@ -918,6 +960,10 @@ const TldrawCanvasShared = ({
       tabIndex={-1}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
+      onPointerDownCapture={() => {
+        if (!appRef.current) return;
+        setActiveCanvas({ pageUid, editor: appRef.current });
+      }}
     >
       {isCloudflareSync && (
         <div
@@ -988,6 +1034,7 @@ const TldrawCanvasShared = ({
           <TldrawEditor
             // baseUrl="https://samepage.network/assets/tldraw/"
             // instanceId={initialState.instanceId}
+            autoFocus={false}
             initialState="select"
             shapeUtils={[...defaultShapeUtils, ...customShapeUtils]}
             tools={[...defaultTools, ...defaultShapeTools, ...customTools]}
@@ -1003,6 +1050,10 @@ const TldrawCanvasShared = ({
 
               appRef.current = app;
 
+              if (!activeCanvasPageUid || activeCanvasPageUid === pageUid) {
+                setActiveCanvas({ pageUid, editor: app });
+              }
+
               void syncCanvasNodeTitlesOnLoad(
                 app,
                 allNodes.map((n) => n.type),

apps/roam/src/components/results-view/ResultsTable.tsx

@@ -229,7 +229,11 @@ const ResultRow = ({
       return (
         <Button
           {...buttonProps}
-          onClick={() => {
+          onClick={(event) => {
+            const targetCanvasPageUid =
+              event.currentTarget.closest<HTMLElement>(
+                ".roamjs-tldraw-canvas-container[data-page-uid]",
+              )?.dataset.pageUid || undefined;
             document.dispatchEvent(
               new CustomEvent("roamjs:query-builder:action", {
                 detail: {
@@ -238,6 +242,7 @@ const ResultRow = ({
                   val: r["text"],
                   onRefresh,
                   queryUid: parentUid,
+                  targetCanvasPageUid,
                 },
               }),
             );