ENG-1356 Implement image to node conversion flow via icon button in tldraw Roam

[trangdoan982]

https://www.loom.com/share/ba1a4a782b3c4ac6b0e713bd4561a8fb

Note: I updated the styling to match Figma design after recording this Loom. "Image" is now highlighted and embeded image is flushed to the left:

Reviewer brief

• Result: hovering (or selecting) a tldraw image shape on the Roam canvas shows a convert button at its top-left. Clicking it opens the create node dialog with the type picker enabled, Page and Block hidden, and an image preview. Confirming replaces the image with a discourse node shape and adds the image to the node page. The right-click Convert To path is unchanged in UI and now shares the upload, image-insertion, and shape-replacement helpers.
• Review focus: ImageConvertOverlay.tsx hover tracking via editor.getHoveredShape() inside useValue; the additive nodeType field in the ModifyNodeDialog.tsx success payload; and handleImageCreation in createDiscourseNode.ts, which now always writes the image block for a canvas conversion and uses Key Image only to choose the query-builder placeholder (previously the image was dropped when Key Image was off).
• Optional commit, easy to drop: 72733d84a "Reuse the canvas asset URL instead of re-uploading the image". Files dropped or pasted onto the canvas are already uploaded to Roam by the canvas handlers and stored as the asset src, so conversion now reuses that URL and only re-uploads when the src is a data: or blob: URL. This affects both flows. If we prefer every conversion to create its own copy of the file, revert or drop that single commit; nothing else depends on it.
• Risk or follow-up: the hover flow deliberately hides Block; images can still be turned into blocks through the context menu. Locked images do not show the button because tldraw skips locked shapes in deleteShapes. The canvas node shape still displays the image only for node types with Key Image on.

Verification

• pnpm install --frozen-lockfile and pnpm ci:validate pass (226 Roam unit tests).
• Roam dev build succeeds with 0 errors; fresh-context subagent review of the full diff found nothing blocking, and its should-fix items are applied in the second commit.
• Manual check in a Roam graph (hover, dialog, replacement, image on the node page, context-menu regression) still to be done by the reviewer or author; Chrome automation was unavailable in this session.

Scope check

• Ran $scope-check against the ENG ticket and final diff.
• Scope beyond Done When: the always-add-image change and the URL reuse commit also apply to the existing right-click flow, because both flows share one implementation. Requested by Trang during review so both flows behave identically.

Local delegated full review

• Ran a comprehensive review of the entire final diff in a subagent with a fresh context. Use $dg-delegated-full-review when no other full-review workflow is available.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
discourse-graph	Skipped		Sep 10, 2026 1:34am UTC

[linear-code]

ENG-1356

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

[mdroidian]

To help the review, can you go through and write inline github comments on

• code sections (both removed and added) that are purely refactors with no functional change.
• code that is outside of the original scope

Could you also record a loom testing

• nodes that have Key Image defined via query block (making sure the image shows up in the correct location)
• the newly added image URL functionality
• testing the new changes to the right click flow

And finally, change the icon and icon positioning to match the design

• use document-open icon
• move to top right