diff --git a/apps/roam/src/components/Export.tsx b/apps/roam/src/components/Export.tsx index 928e459e1..e2d4b15d4 100644 --- a/apps/roam/src/components/Export.tsx +++ b/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, - ); const allRelations = relations; const allRelationIds = allRelations.map((r) => r.id); const allNodes = getDiscourseNodes(allRelations); diff --git a/apps/roam/src/components/canvas/Tldraw.tsx b/apps/roam/src/components/canvas/Tldraw.tsx index e77e91dcd..1e0fff2e4 100644 --- a/apps/roam/src/components/canvas/Tldraw.tsx +++ b/apps/roam/src/components/canvas/Tldraw.tsx @@ -129,15 +129,38 @@ export type DiscourseContextType = { nodes: Record; // { [Relation.Label] => DiscourseRelation[] } relations: Record; - lastAppEvent: string; - lastActions: HistoryEntry[]; }; 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(null); const lastInsertRef = useRef(); const containerRef = useRef(null); - const lastActionsRef = useRef[]>( - discourseContext.lastActions, - ); + const lastActionsRef = useRef[]>([]); 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(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 && (
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); diff --git a/apps/roam/src/components/results-view/ResultsTable.tsx b/apps/roam/src/components/results-view/ResultsTable.tsx index 6b4300751..e32302e6d 100644 --- a/apps/roam/src/components/results-view/ResultsTable.tsx +++ b/apps/roam/src/components/results-view/ResultsTable.tsx @@ -229,7 +229,11 @@ const ResultRow = ({ return (