ENG-1792: Add edit block button to rendered dg-canvas (#1203)

* 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.

* 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.

* 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.

Author: sid597

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 bottom-2 right-8 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<HTMLDivElement>(".roam-block"));
+
   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,
   );