ENG-797: Handle multiple canvases loaded at the same time

apps/roam/src/components/Export.tsx

@@ -65,7 +65,7 @@ import {
   createNodeShapeUtils,
   DiscourseNodeShape,
 } from "~/components/canvas/DiscourseNodeUtil";
-import { discourseContext, MAX_WIDTH } from "~/components/canvas/Tldraw";
+import { MAX_WIDTH } from "~/components/canvas/Tldraw";
 import internalError from "~/utils/internalError";
 import { getSetting, setSetting } from "~/utils/extensionSettings";
 import { isTLStoreSnapshot } from "./canvas/useRoamStore";
@@ -79,9 +79,7 @@ import {
   createAllReferencedNodeUtils,
 } from "./canvas/DiscourseRelationShape/DiscourseRelationUtil";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
-import getDiscourseRelations, {
-  DiscourseRelation,
-} from "~/utils/getDiscourseRelations";
+import getDiscourseRelations from "~/utils/getDiscourseRelations";
 import { AddReferencedNodeType } from "./canvas/DiscourseRelationShape/DiscourseRelationTool";
 import posthog from "posthog-js";
 
@@ -312,17 +310,6 @@ const ExportDialog: ExportDialogComponent = ({
     // TODO lots of this is reused in tldraw.tsx, use a function to avoid duplication
     if (!isTLStore) {
       const relations = getDiscourseRelations();
-      discourseContext.relations = relations.reduce(
-        (acc, r) => {
-          if (acc[r.label]) {
-            acc[r.label].push(r);
-          } else {
-            acc[r.label] = [r];
-          }
-          return acc;
-        },
-        {} as Record<string, DiscourseRelation[]>,
-      );
       const allRelations = relations;
       const allRelationIds = allRelations.map((r) => r.id);
       const allNodes = getDiscourseNodes(allRelations);

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

@@ -129,15 +129,38 @@ export type DiscourseContextType = {
   nodes: Record<string, DiscourseNode & { index: number }>;
   // { [Relation.Label] => DiscourseRelation[] }
   relations: Record<string, DiscourseRelation[]>;
-  lastAppEvent: string;
-  lastActions: HistoryEntry<TLRecord>[];
 };
 
 export const discourseContext: DiscourseContextType = {
   nodes: {},
   relations: {},
-  lastAppEvent: "",
-  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;
@@ -358,9 +381,7 @@ const TldrawCanvasShared = ({
   const appRef = useRef<Editor | null>(null);
   const lastInsertRef = useRef<VecModel>();
   const containerRef = useRef<HTMLDivElement>(null);
-  const lastActionsRef = useRef<HistoryEntry<TLRecord>[]>(
-    discourseContext.lastActions,
-  );
+  const lastActionsRef = useRef<HistoryEntry<TLRecord>[]>([]);
 
   const [isConvertToDialogOpen, setConvertToDialogOpen] = useState(false);
 
@@ -725,6 +746,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);
@@ -788,10 +820,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();
@@ -829,7 +865,7 @@ const TldrawCanvasShared = ({
         actionListener,
       );
     };
-  }, [appRef, allNodes]);
+  }, [appRef, allNodes, pageUid]);
 
   // Catch a custom event we used patch-package to add
   useEffect(() => {
@@ -917,6 +953,10 @@ const TldrawCanvasShared = ({
       tabIndex={-1}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
+      onPointerDownCapture={() => {
+        if (!appRef.current) return;
+        setActiveCanvas({ pageUid, editor: appRef.current });
+      }}
     >
       {isCloudflareSync && (
         <div
@@ -987,6 +1027,7 @@ const TldrawCanvasShared = ({
           <TldrawEditor
             // baseUrl="https://samepage.network/assets/tldraw/"
             // instanceId={initialState.instanceId}
+            autoFocus={false}
             initialState="select"
             shapeUtils={[...defaultShapeUtils, ...customShapeUtils]}
             tools={[...defaultTools, ...defaultShapeTools, ...customTools]}
@@ -1002,6 +1043,10 @@ const TldrawCanvasShared = ({
 
               appRef.current = app;
 
+              if (!activeCanvasPageUid || activeCanvasPageUid === pageUid) {
+                setActiveCanvas({ pageUid, editor: app });
+              }
+
               void syncCanvasNodeTitlesOnLoad(
                 app,
                 allNodes.map((n) => n.type),
@@ -1022,8 +1067,6 @@ const TldrawCanvasShared = ({
               app.on("event", (event) => {
                 const e = event as TLPointerEventInfo;
 
-                discourseContext.lastAppEvent = e.name;
-
                 // Handle relation creation on pointer_down
                 handleRelationCreation(app, e);
 

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,
                 },
               }),
             );