ENG-1553: Embed canvas in block

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

@@ -0,0 +1,59 @@
+import React from "react";
+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 getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
+import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
+import { TldrawCanvas } from "./Tldraw";
+
+const BLOCK_TEXT_REGEX = /\{\{dg-canvas:\s*\[\[(.+?)\]\]\s*\}\}/i;
+
+const extractCanvasTitle = (button: HTMLElement): string | null => {
+  const blockUid = getBlockUidFromTarget(button);
+  if (!blockUid) return null;
+  const blockText = getTextByBlockUid(blockUid);
+  if (!blockText) return null;
+  const match = blockText.match(BLOCK_TEXT_REGEX);
+  if (!match) return null;
+  return match[1].trim();
+};
+
+const CanvasEmbedPlaceholder = ({ message }: { message: string }) => (
+  <div className="dg-canvas-embed-placeholder">{message}</div>
+);
+
+export const renderCanvasEmbed = (
+  button: HTMLElement,
+  onloadArgs: OnloadArgs,
+) => {
+  button.classList.add("dg-canvas-embed-source-hidden");
+
+  if (!button.parentElement) return;
+
+  const title = extractCanvasTitle(button);
+  if (!title) return;
+
+  const pageUid = getPageUidByPageTitle(title);
+  if (!pageUid) {
+    const wrapper = document.createElement("div");
+    button.parentElement.appendChild(wrapper);
+    renderWithUnmount(
+      <CanvasEmbedPlaceholder message={`Canvas not found: ${title}`} />,
+      wrapper,
+    );
+    return;
+  }
+
+  const wrapper = document.createElement("div");
+  wrapper.className = "dg-canvas-embed";
+  wrapper.onmousedown = (e: MouseEvent) => e.stopPropagation();
+  button.parentElement.appendChild(wrapper);
+
+  renderWithUnmount(
+    <ExtensionApiContextProvider {...onloadArgs}>
+      <TldrawCanvas title={title} />
+    </ExtensionApiContextProvider>,
+    wrapper,
+  );
+};

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

@@ -0,0 +1,75 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Dialog } from "@blueprintjs/core";
+import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
+import renderOverlay, {
+  RoamOverlayProps,
+} from "roamjs-components/util/renderOverlay";
+import { getCanvasPageTitles } from "~/utils/isCanvasPage";
+
+type CanvasEmbedDialogProps = {
+  onSelect: (title: string) => void;
+};
+
+const CanvasEmbedDialog = ({
+  isOpen,
+  onClose,
+  onSelect,
+}: RoamOverlayProps<CanvasEmbedDialogProps>) => {
+  const [canvasPages, setCanvasPages] = useState<string[] | null>(null);
+
+  useEffect(() => {
+    void getCanvasPageTitles().then(setCanvasPages);
+  }, []);
+
+  const handleSetValue = useCallback(
+    (title: string) => {
+      if (canvasPages?.includes(title)) {
+        onSelect(title);
+        onClose();
+      }
+    },
+    [canvasPages, onSelect, onClose],
+  );
+
+  const renderContent = () => {
+    if (canvasPages === null)
+      return (
+        <div className="dg-canvas-embed-dialog-message">
+          Loading canvas pages...
+        </div>
+      );
+    if (canvasPages.length === 0)
+      return (
+        <div className="dg-canvas-embed-dialog-message">
+          No canvas pages found
+        </div>
+      );
+    return (
+      <AutocompleteInput
+        setValue={handleSetValue}
+        options={canvasPages}
+        placeholder="Search canvas pages..."
+        autoFocus
+        autoSelectFirstOption={false}
+      />
+    );
+  };
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Embed Canvas"
+      className="dg-canvas-embed-dialog"
+    >
+      <div className="dg-canvas-embed-dialog-body">{renderContent()}</div>
+    </Dialog>
+  );
+};
+
+export const renderCanvasEmbedDialog = (props: CanvasEmbedDialogProps) =>
+  renderOverlay({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    Overlay: CanvasEmbedDialog,
+    props,
+  });

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

@@ -189,7 +189,7 @@ export const isPageUid = (uid: string) =>
     ":node/title"
   ];
 
-const TldrawCanvas = ({ title }: { title: string }) => {
+export const TldrawCanvas = ({ title }: { title: string }) => {
   // In Roam, canvas identity is currently keyed by the page UID.
   // Room sync is graph/page encoded as an opaque base64url token.
   const pageUid = useMemo(() => getPageUidByPageTitle(title), [title]);

apps/roam/src/components/canvas/tldrawStyles.ts

@@ -1,12 +1,12 @@
 // tldrawStyles.ts because some of these styles need to be inlined
 export default /* css */ `
-  /* Hide Roam Blocks only when a canvas is present under the root */
-  .roam-article:has(.roamjs-tldraw-canvas-container) .rm-block-children  {
+  /* Hide Roam Blocks only when a full-page canvas is present (not embedded) */
+  .roam-article:has(.roamjs-tldraw-canvas-container:not(.dg-canvas-embed *)) .rm-block-children  {
     display: none;
   }
-  
-  /* Hide Roam Blocks in sidebar when a canvas is present */
-  .rm-sidebar-outline:has(.roamjs-tldraw-canvas-container) .rm-block-children {
+
+  /* Hide Roam Blocks in sidebar when a full-page canvas is present (not embedded) */
+  .rm-sidebar-outline:has(.roamjs-tldraw-canvas-container:not(.dg-canvas-embed *)) .rm-block-children {
     display: none;
   }
 

apps/roam/src/index.ts

@@ -9,6 +9,7 @@ import { fireQuerySync } from "./utils/fireQuery";
 import parseQuery from "./utils/parseQuery";
 import refreshConfigTree from "./utils/refreshConfigTree";
 import { registerCommandPaletteCommands } from "./utils/registerCommandPaletteCommands";
+import { registerSlashCommands } from "./utils/registerSlashCommands";
 import { createSettingsPanel } from "~/utils/createSettingsPanel";
 import { listActiveQueries } from "./utils/listActiveQueries";
 import { registerSmartBlock } from "./utils/registerSmartBlock";
@@ -91,7 +92,7 @@ export default runExtension(async (onloadArgs) => {
   addGraphViewNodeStyling();
 
   registerCommandPaletteCommands(onloadArgs);
-
+  const unregisterSlashCommands = registerSlashCommands();
   createSettingsPanel(onloadArgs);
 
   registerSmartBlock(onloadArgs);
@@ -212,6 +213,7 @@ export default runExtension(async (onloadArgs) => {
       cleanupPullWatchers();
       cleanups.forEach((fn) => fn());
       setSyncActivity(false);
+      unregisterSlashCommands();
       window.roamjs.extension?.smartblocks?.unregisterCommand("QUERYBUILDER");
       // @ts-expect-error - tldraw throws a warning on multiple loads
       delete window[Symbol.for("__signia__")];

apps/roam/src/styles/styles.css

@@ -191,3 +191,51 @@
 #dg-left-sidebar-root .bp3-dark .bp3-button:not([class*="bp3-intent-"]):hover {
   color: #f5f8fa;
 }
+
+.dg-canvas-embed-source-hidden {
+  display: none;
+}
+
+.dg-canvas-embed {
+  height: 400px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 6px;
+  margin: 8px 0;
+}
+
+.dg-canvas-embed > .roamjs-tldraw-canvas-container {
+  height: 100%;
+  width: 100%;
+}
+
+.dg-canvas-embed-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  color: #8a9ba8;
+  font-size: 14px;
+  border: 1px dashed #d1d5db;
+  border-radius: 6px;
+}
+
+.dg-canvas-embed-dialog.bp3-dialog {
+  width: 400px;
+  padding-bottom: 0;
+}
+
+.dg-canvas-embed-dialog-body {
+  padding: 16px;
+}
+
+.dg-canvas-embed-dialog-message {
+  color: #5c7080;
+  font-size: 14px;
+}
+
+.dg-canvas-embed-dialog .roamjs-autocomplete-input-target,
+.dg-canvas-embed-dialog .roamjs-autocomplete-input-target .bp3-input-group {
+  display: block;
+  width: 100%;
+}

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -49,6 +49,7 @@ import { getFeatureFlag } from "~/components/settings/utils/accessors";
 import { getCleanTagText } from "~/components/settings/NodeConfig";
 import { getNodeTagStyles } from "~/utils/getDiscourseNodeColors";
 import { renderPossibleDuplicates } from "~/components/VectorDuplicateMatches";
+import { renderCanvasEmbed } from "~/components/canvas/CanvasEmbed";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import findDiscourseNode from "./findDiscourseNode";
@@ -148,6 +149,11 @@ export const initObservers = ({
     render: (b) => renderQueryBlock(b, onloadArgs),
   });
 
+  const canvasEmbedObserver = createButtonObserver({
+    attribute: "dg-canvas",
+    render: (b) => renderCanvasEmbed(b, onloadArgs),
+  });
+
   let batchedTagNodes: DiscourseNode[] | null = null;
   const getNodesForTagBatch = (): DiscourseNode[] => {
     if (batchedTagNodes === null) {
@@ -447,6 +453,7 @@ export const initObservers = ({
     observers: [
       pageTitleObserver,
       queryBlockObserver,
+      canvasEmbedObserver,
       graphOverviewExportObserver,
       nodeTagPopupButtonObserver,
       leftSidebarObserver,

apps/roam/src/utils/isCanvasPage.ts

@@ -5,20 +5,23 @@ import {
 } from "~/components/settings/utils/accessors";
 import { GLOBAL_KEYS } from "~/components/settings/utils/settingKeys";
 
+const getCanvasPageRegex = (snapshot?: SettingsSnapshot): RegExp => {
+  const format =
+    (snapshot
+      ? snapshot.globalSettings[GLOBAL_KEYS.canvasPageFormat]
+      : getGlobalSetting<string>([GLOBAL_KEYS.canvasPageFormat])) ||
+    DEFAULT_CANVAS_PAGE_FORMAT;
+  return new RegExp(`^${format}$`.replace(/\*/g, ".+"));
+};
+
 export const isCanvasPage = ({
   title,
   snapshot,
 }: {
   title: string;
   snapshot?: SettingsSnapshot;
 }) => {
-  const format =
-    (snapshot
-      ? snapshot.globalSettings[GLOBAL_KEYS.canvasPageFormat]
-      : getGlobalSetting<string>([GLOBAL_KEYS.canvasPageFormat])) ||
-    DEFAULT_CANVAS_PAGE_FORMAT;
-  const canvasRegex = new RegExp(`^${format}$`.replace(/\*/g, ".+"));
-  return canvasRegex.test(title);
+  return getCanvasPageRegex(snapshot).test(title);
 };
 
 export const isCurrentPageCanvas = ({
@@ -46,3 +49,20 @@ export const isSidebarCanvas = ({
     isCanvasPage({ title, snapshot }) && !!h1.closest(".rm-sidebar-outline")
   );
 };
+
+export const getCanvasPageTitles = async (): Promise<string[]> => {
+  const regex = getCanvasPageRegex();
+  const escaped = regex.source.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  try {
+    const results = (await window.roamAlphaAPI.data.async.fast.q(`[
+      :find ?title
+      :where
+        [(re-pattern "${escaped}") ?regex]
+        [?node :node/title ?title]
+        [(re-find ?regex ?title)]
+    ]`)) as [string][];
+    return results.map(([title]) => title).sort((a, b) => a.localeCompare(b));
+  } catch {
+    return [];
+  }
+};

apps/roam/src/utils/registerSlashCommands.ts

@@ -0,0 +1,48 @@
+import { updateBlock } from "roamjs-components/writes";
+import { renderCanvasEmbedDialog } from "~/components/canvas/CanvasEmbedDialog";
+
+type SlashCommandContext = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  "block-uid": string;
+};
+
+type SlashCommandApi = {
+  addCommand: (cmd: {
+    label: string;
+    callback: (context: SlashCommandContext) => void;
+  }) => void;
+  removeCommand: (cmd: { label: string }) => void;
+};
+
+const getSlashCommandApi = (): SlashCommandApi =>
+  (window.roamAlphaAPI.ui as unknown as { slashCommand: SlashCommandApi })
+    .slashCommand;
+
+const SLASH_COMMANDS: {
+  label: string;
+  callback: (context: SlashCommandContext) => void;
+}[] = [
+  {
+    label: "DG: Embed canvas",
+    callback: (context) => {
+      const uid = context["block-uid"];
+      if (!uid) return;
+      renderCanvasEmbedDialog({
+        onSelect: (title: string) => {
+          void updateBlock({
+            uid,
+            text: `{{dg-canvas: [[${title}]]}}`,
+          });
+        },
+      });
+    },
+  },
+];
+
+export const registerSlashCommands = (): (() => void) => {
+  const api = getSlashCommandApi();
+  for (const cmd of SLASH_COMMANDS) api.addCommand(cmd);
+  return () => {
+    for (const { label } of SLASH_COMMANDS) api.removeCommand({ label });
+  };
+};