ENG-797: Handle multiple canvases loaded at the same time by sid597 · Pull Request #928 · DiscourseGraphs/discourse-graph

sid597 · 2026-03-30T11:07:09Z

https://www.loom.com/share/8af7d98fbab74f429a8c7a4e4982c260

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

Summary by CodeRabbit

Refactor
- Improved canvas focus and blur handling when working with multiple canvases
- Enhanced action routing to support targeted canvas page selection
- Disabled auto-focus behavior on Tldraw editor initialization

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

linear · 2026-03-30T11:07:12Z

ENG-797 Handle Multiple canvas' loaded at the same time

supabase · 2026-03-30T11:07:18Z

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

sid597 · 2026-03-30T11:07:27Z

@coderabbitai full review

sid597 · 2026-03-30T11:07:53Z

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

 export const discourseContext: DiscourseContextType = {
  nodes: {},
  relations: {},
-  lastAppEvent: "",


Surface 1 handled

sid597 · 2026-03-30T11:10:26Z

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

+let activeCanvasPageUid: string | null = null;
+let activeCanvasEditor: Editor | null = null;
+
+const setActiveCanvas = ({


Surface 3 handled, we track the active canvas and ensure only that canvas is focused, so only this canvas responds to the clipboard events

coderabbitai · 2026-03-30T11:11:35Z

📝 Walkthrough

Walkthrough

This PR refactors discourse context state management by removing lastAppEvent and lastActions from shared context and replacing them with module-level and component-local state. It introduces active-canvas tracking and event routing based on target canvas page UID, with automatic focus/blur management when switching between Tldraw editors.

Changes

Cohort / File(s)	Summary
Discourse Context Cleanup `apps/roam/src/components/Export.tsx`, `apps/roam/src/components/canvas/Tldraw.tsx`	Removed `lastAppEvent` and `lastActions` properties from `DiscourseContextType`. Eliminated discourse relation assignment to shared context during canvas initialization and removed corresponding import of `discourseContext` in Export module.
Active Canvas Tracking & Event Routing `apps/roam/src/components/canvas/Tldraw.tsx`	Added module-level `activeCanvasPageUid` and `activeCanvasEditor` with `setActiveCanvas` helper for managing editor focus/blur. Updated `roamjs:query-builder:action` listener to route events by optional `targetCanvasPageUid`. Added `onPointerDownCapture` handler and `onMount` logic to activate canvas on interaction. Disabled Tldraw auto-focus and added cleanup on canvas unmount.
Event Payload Enhancement `apps/roam/src/components/results-view/ResultsTable.tsx`	Updated Button click handler to extract `targetCanvasPageUid` from closest `[data-page-uid]` ancestor and include it in the dispatched `CustomEvent` detail payload for targeted canvas event routing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

ENG-952 - inconsistent send nodes to canvas behavior #668: Both PRs modify apps/roam/src/components/Export.tsx and adjust TLStore initialization and discourse relation handling during canvas setup.
ENG-747 - Enhance Tldraw component to track last actions in history #383: This PR directly removes lastActions from DiscourseContext that was previously introduced and populated, representing an inverse change to the same context symbol.
ENG-1153 maximum update limit error on canvas after adding supports relation between evd and clm #628: Both PRs modify how discourse relations are imported and used in relation-handling logic and canvas initialization.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main objective of the changeset: implementing handling for multiple simultaneously-open canvases with proper focus scoping.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai · 2026-03-30T11:13:32Z

✅ Actions performed

Full review triggered.

sid597 · 2026-03-30T11:15:08Z

apps/roam/src/components/Export.tsx

    if (!isTLStore) {
      const relations = getDiscourseRelations();
-      discourseContext.relations = relations.reduce(
-        (acc, r) => {


Mutating this could effect the state for other open canvases??? we do set this up in tldraw.tsx line 455

This is for you Michael it seems correct to me but can give an authortative answer here

Needs to stay because this is a way to update the relations when we export to the canvas

sid597 · 2026-03-30T11:15:35Z

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

        <Button
          {...buttonProps}
-          onClick={() => {
+          onClick={(event) => {


Pass this to the correct canvas

- 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

- Introduced a new `docsRouteMap.ts` file to manage documentation sections and redirects for Roam and Obsidian platforms. - Updated `next.config.ts` to include dynamic redirects based on the new route map. - Refactored the layout components for documentation pages to utilize a consistent theme layout. - Removed outdated `page.tsx` files for Roam and Obsidian, replacing them with new landing pages that leverage Nextra for content rendering. - Added new metadata and content files for various documentation sections, enhancing the overall documentation structure and accessibility.

sid597 · 2026-04-01T17:34:32Z

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

  nodes: {},
  relations: {},
-  lastAppEvent: "",
-  lastActions: [],


needs to stay, because we use this to log on error

sid597 · 2026-04-01T17:36:47Z

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

  nodes: {},
  relations: {},
-  lastAppEvent: "",
-  lastActions: [],


We use this to send log of last actions taken by user in case of error. Should not remove this.

mdroidian

As discussed in our meeting

Let's

remove the useEffect and do a closer solution to: https://tldraw.dev/examples/multiple
re-add lastActions and make sure we test multiple canvas' against it
re-add the export.tsx discourseContext.relations
test sending from Share Via in query builder only sends to the target canvas
- we tested live, seems fine
we also noticed that copy all / delete was shared across canvas'
- this is likely the same "focus" problem, but worth checking

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

f057c8d

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

sid597 commented Mar 30, 2026

View reviewed changes

This comment was marked as resolved.

Sign in to view

sid597 commented Mar 30, 2026

View reviewed changes

[ENG-797] Add pageUid to action listener deps

4adf7ac

This comment was marked as resolved.

Sign in to view

sid597 requested a review from mdroidian April 1, 2026 13:48

sid597 commented Apr 1, 2026

View reviewed changes

sid597 removed the request for review from mdroidian April 1, 2026 17:41

mdroidian requested changes Apr 1, 2026

View reviewed changes

Conversation

sid597 commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

linear bot commented Mar 30, 2026

Uh oh!

supabase bot commented Mar 30, 2026

Uh oh!

sid597 commented Mar 30, 2026

Uh oh!

sid597 Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

sid597 Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

coderabbitai bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

coderabbitai bot commented Mar 30, 2026

Uh oh!

sid597 Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sid597 Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

sid597 Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

sid597 Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

sid597 Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mdroidian left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sid597 commented Mar 30, 2026 •

edited

Loading

coderabbitai bot commented Mar 30, 2026 •

edited

Loading

sid597 Mar 30, 2026 •

edited

Loading

sid597 Apr 1, 2026 •

edited

Loading