[ENG-870] bug fix allow right click on canvas

[trangdoan982]

Summary by CodeRabbit

• Bug Fixes
  • Fixed right-click context menus in the canvas editor, enabling proper menu interactions when right-clicking on the canvas.
  • Improved automatic save functionality with better error handling and recovery mechanisms to ensure changes are reliably persisted.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

ENG-870 Bug fix: allow right click on canvas

[supabase]

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 ↗︎.

[trangdoan982]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

TldrawViewComponent is enhanced with debounced file persistence logic via a saveChanges function that handles concurrent saves with guards and error recovery, and right-click event handling that dispatches native contextmenu events to enable Radix UI context menus on the TLDraw canvas.

Changes

Cohort / File(s)	Summary
TLDraw save persistence apps/obsidian/src/components/canvas/TldrawViewComponent.tsx	Adds saveChanges function with debounced saves, concurrency guard (isSavingRef), and file read/modify/verify flow; includes error handling that reloads on save failures
Context menu event handling apps/obsidian/src/components/canvas/TldrawViewComponent.tsx	Adds right-click pointer event detection and dispatches native contextmenu events to canvas element via MouseEvent with coordinates and modifier keys, aligned with requestAnimationFrame for proper rendering timing

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Debounced save logic: Verify concurrency guard (isSavingRef) prevents race conditions; review file read/modify/verify flow and error recovery behavior
• Event dispatching: Confirm MouseEvent construction includes correct coordinates and modifier keys; validate requestAnimationFrame timing for Radix UI context menu triggering

Possibly related PRs

• [ENG-968] Obsidian - Open node functionalities #524: Modifies pointer event handling in the same component file, potentially overlapping with right-click/contextmenu dispatch additions
• [ENG-598] Data persistence for tldraw #303: Adds file persistence and debounced save behavior to TldrawPreviewComponent, directly related to saveChanges functionality
• [ENG-997] High priority small fixes #519: Modifies TLDraw save and verification logic in the same file, complementary to the new debounced save flow

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main fix: enabling right-click functionality on the canvas component, which directly matches the primary change in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 83a18be and 7259754.

📒 Files selected for processing (1)

• apps/obsidian/src/components/canvas/TldrawViewComponent.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx}: Use Tailwind CSS for styling where possible
When refactoring inline styles, use tailwind classes
Prefer type over interface in TypeScript
Use explicit return types for functions
Avoid any types when possible
Prefer arrow functions over regular function declarations
Use named parameters (object destructuring) when a function has more than 2 parameters
Use PascalCase for components and types
Use camelCase for variables and functions
Use UPPERCASE for constants
Function names should describe their purpose clearly
Prefer early returns over nested conditionals for better readability

Files:

• apps/obsidian/src/components/canvas/TldrawViewComponent.tsx

apps/obsidian/**

📄 CodeRabbit inference engine (.cursor/rules/obsidian.mdc)

apps/obsidian/**: Prefer existing dependencies from apps/obsidian/package.json when adding dependencies to the Obsidian plugin
Follow the Obsidian style guide from help.obsidian.md/style-guide and docs.obsidian.md/Developer+policies for UI and code styling
Use Lucide and custom Obsidian icons alongside detailed elements to provide visual representation of features in platform-native UI

Files:

• apps/obsidian/src/components/canvas/TldrawViewComponent.tsx

🔇 Additional comments (1)

apps/obsidian/src/components/canvas/TldrawViewComponent.tsx (1)

224-245: No changes needed — code correctly integrates Radix UI with TLDraw.

The implementation is correct: e.point is already in screen-space coordinates (appropriate for clientX/clientY), and requestAnimationFrame is necessary to ensure TLDraw completes layout updates before Radix UI measures and positions the context menu. This pattern aligns with TLDraw's documentation for custom menu integration.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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