From e0b4f7fb5b311c76580a629bf8b110a4a13534ac Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Mon, 6 Jul 2026 00:01:09 +0530
Subject: [PATCH 1/3] ENG-1792: Add edit block button to rendered dg-canvas

Overlay Button on the embedded canvas that focuses the underlying
{{dg-canvas}} block via setBlockFocusAndSelection, using the same
getUids/.roam-block idiom as the ResultsView Edit Block action so it
works in the right sidebar too.
---
 .../src/components/canvas/CanvasEmbed.tsx     | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/roam/src/components/canvas/CanvasEmbed.tsx b/apps/roam/src/components/canvas/CanvasEmbed.tsx
index f5b08f02b..92cc0a1a9 100644
--- a/apps/roam/src/components/canvas/CanvasEmbed.tsx
+++ b/apps/roam/src/components/canvas/CanvasEmbed.tsx
@@ -1,8 +1,11 @@
 import React from "react";
+import { Button } from "@blueprintjs/core";
+import posthog from "posthog-js";
 import ExtensionApiContextProvider from "roamjs-components/components/ExtensionApiContext";
 import { OnloadArgs } from "roamjs-components/types";
 import renderWithUnmount from "roamjs-components/util/renderWithUnmount";
 import getBlockUidFromTarget from "roamjs-components/dom/getBlockUidFromTarget";
+import getUids from "roamjs-components/dom/getUids";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import { TldrawCanvas } from "./Tldraw";
@@ -28,6 +31,36 @@ const CanvasEmbedPlaceholder = ({ message }: { message: string }) => (
   </div>
 );
 
+const handleEditBlock = (location: { blockUid: string; windowId: string }) => {
+  posthog.capture("Canvas Embed: Edit Block Clicked");
+  void window.roamAlphaAPI.ui.setBlockFocusAndSelection({
+    location: {
+      "block-uid": location.blockUid,
+      "window-id": location.windowId,
+    },
+  });
+};
+
+const CanvasEmbedChrome = ({
+  title,
+  location,
+}: {
+  title: string;
+  location: { blockUid: string; windowId: string };
+}) => (
+  <div className="relative h-full w-full">
+    <TldrawCanvas title={title} />
+    <Button
+      className="absolute right-2 top-2 z-20"
+      icon="edit"
+      minimal
+      small
+      title="Edit Block"
+      onClick={() => handleEditBlock(location)}
+    />
+  </div>
+);
+
 export const renderCanvasEmbed = (
   button: HTMLElement,
   onloadArgs: OnloadArgs,
@@ -50,6 +83,8 @@ export const renderCanvasEmbed = (
     return;
   }
 
+  const location = getUids(button.closest(".roam-block") as HTMLDivElement);
+
   const wrapper = document.createElement("div");
   wrapper.className = "dg-canvas-embed my-2 w-full overflow-hidden rounded-md";
   wrapper.style.height = "400px";
@@ -58,7 +93,7 @@ export const renderCanvasEmbed = (
 
   renderWithUnmount(
     <ExtensionApiContextProvider {...onloadArgs}>
-      <TldrawCanvas title={title} />
+      <CanvasEmbedChrome title={title} location={location} />
     </ExtensionApiContextProvider>,
     wrapper,
   );

From d53a010d9ca230204b8b9124c23142e061f32270 Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Mon, 6 Jul 2026 13:56:04 +0530
Subject: [PATCH 2/3] ENG-1792: Type the block container lookup as nullable

Review follow-up: getUids accepts a null element and returns empty
ids, so use the closest() generic instead of a non-null assertion.
---
 apps/roam/src/components/canvas/CanvasEmbed.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/roam/src/components/canvas/CanvasEmbed.tsx b/apps/roam/src/components/canvas/CanvasEmbed.tsx
index 92cc0a1a9..d20c00c51 100644
--- a/apps/roam/src/components/canvas/CanvasEmbed.tsx
+++ b/apps/roam/src/components/canvas/CanvasEmbed.tsx
@@ -83,7 +83,7 @@ export const renderCanvasEmbed = (
     return;
   }
 
-  const location = getUids(button.closest(".roam-block") as HTMLDivElement);
+  const location = getUids(button.closest<HTMLDivElement>(".roam-block"));
 
   const wrapper = document.createElement("div");
   wrapper.className = "dg-canvas-embed my-2 w-full overflow-hidden rounded-md";

From 9612e356802db034b8215b262e9cf1e00a04edff Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Mon, 6 Jul 2026 21:08:56 +0530
Subject: [PATCH 3/3] ENG-1792: Move edit button to bottom right of the canvas

Top right overlaps the tldraw style panel; bottom right is the corner
the plugin already uses for its cloud sync icon, offset left so both
fit.
---
 apps/roam/src/components/canvas/CanvasEmbed.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/roam/src/components/canvas/CanvasEmbed.tsx b/apps/roam/src/components/canvas/CanvasEmbed.tsx
index d20c00c51..c66c9662b 100644
--- a/apps/roam/src/components/canvas/CanvasEmbed.tsx
+++ b/apps/roam/src/components/canvas/CanvasEmbed.tsx
@@ -51,7 +51,7 @@ const CanvasEmbedChrome = ({
   <div className="relative h-full w-full">
     <TldrawCanvas title={title} />
     <Button
-      className="absolute right-2 top-2 z-20"
+      className="absolute bottom-2 right-8 z-20"
       icon="edit"
       minimal
       small