ENG-741 Allow Canvas to be opened in Sidebar (#346)

* Refactor Tldraw component to enhance canvas rendering in both main and sidebar contexts. Update utility functions to support sidebar canvas rendering.

* Refactor Tldraw canvas rendering logic to utilize heading context for improved element selection.

Author: mdroidian

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

@@ -81,6 +81,7 @@ import ConvertToDialog from "./ConvertToDialog";
 import { createArrowShapeMigrations } from "./DiscourseRelationShape/discourseRelationMigrations";
 import ToastListener, { dispatchToastEvent } from "./ToastListener";
 import sendErrorEmail from "~/utils/sendErrorEmail";
+import { TLDRAW_DATA_ATTRIBUTE } from "./tldrawStyles";
 
 declare global {
   interface Window {
@@ -467,8 +468,7 @@ const TldrawCanvas = ({ title }: { title: string }) => {
 
   return (
     <div
-      className={`z-10 h-full w-full overflow-hidden rounded-md border border-gray-300 bg-white ${maximized ? "absolute inset-0" : "relative"}`}
-      id={`roamjs-tldraw-canvas-container`}
+      className={`roamjs-tldraw-canvas-container z-10 h-full w-full overflow-hidden rounded-md border border-gray-300 bg-white ${maximized ? "absolute inset-0" : "relative"}`}
       ref={containerRef}
       tabIndex={-1}
     >
@@ -845,31 +845,91 @@ const InsideEditorAndUiContext = ({
   return <CustomContextMenu extensionAPI={extensionAPI} allNodes={allNodes} />;
 };
 
-export const renderTldrawCanvas = ({
+const renderTldrawCanvasHelper = ({
   title,
   onloadArgs,
+  h1,
+  rootSelector,
+  minHeight,
+  height,
 }: {
   title: string;
   onloadArgs: OnloadArgs;
+  h1: HTMLHeadingElement;
+  rootSelector: string;
+  minHeight: string;
+  height: string;
 }) => {
-  const children = document.querySelector<HTMLDivElement>(
-    ".roam-article .rm-block-children",
+  // Find the root element using the H1 context to avoid scope issues
+  const rootElement = h1.closest(rootSelector) as HTMLDivElement;
+  if (!rootElement) return () => {};
+
+  if (rootElement.hasAttribute(TLDRAW_DATA_ATTRIBUTE)) return () => {};
+
+  const blockChildrenContainer =
+    rootElement.querySelector<HTMLDivElement>(".rm-block-children");
+  if (!blockChildrenContainer) return () => {};
+
+  rootElement.setAttribute(TLDRAW_DATA_ATTRIBUTE, "true");
+
+  const canvasWrapperEl = document.createElement("div");
+  canvasWrapperEl.style.minHeight = minHeight;
+  canvasWrapperEl.style.height = height;
+
+  blockChildrenContainer.parentElement?.insertBefore(
+    canvasWrapperEl,
+    blockChildrenContainer.nextSibling,
   );
-  if (
-    children &&
-    children.parentElement &&
-    !children.hasAttribute("data-roamjs-discourse-playground")
-  ) {
-    children.setAttribute("data-roamjs-discourse-playground", "true");
-    const parent = document.createElement("div");
-    children.parentElement.appendChild(parent);
-    parent.style.minHeight = "500px";
-    parent.style.height = "70vh";
-    renderWithUnmount(
-      <ExtensionApiContextProvider {...onloadArgs}>
-        <TldrawCanvas title={title} />
-      </ExtensionApiContextProvider>,
-      parent,
-    );
-  }
+
+  const unmount = renderWithUnmount(
+    <ExtensionApiContextProvider {...onloadArgs}>
+      <TldrawCanvas title={title} />
+    </ExtensionApiContextProvider>,
+    canvasWrapperEl,
+  );
+
+  const originalUnmount = unmount;
+  return () => {
+    originalUnmount();
+    rootElement.removeAttribute(TLDRAW_DATA_ATTRIBUTE);
+    canvasWrapperEl.remove();
+  };
+};
+
+export const renderTldrawCanvas = ({
+  title,
+  onloadArgs,
+  h1,
+}: {
+  title: string;
+  onloadArgs: OnloadArgs;
+  h1: HTMLHeadingElement;
+}) => {
+  return renderTldrawCanvasHelper({
+    title,
+    onloadArgs,
+    h1,
+    rootSelector: ".roam-article",
+    minHeight: "500px",
+    height: "70vh",
+  });
+};
+
+export const renderTldrawCanvasInSidebar = ({
+  title,
+  onloadArgs,
+  h1,
+}: {
+  title: string;
+  onloadArgs: OnloadArgs;
+  h1: HTMLHeadingElement;
+}) => {
+  return renderTldrawCanvasHelper({
+    title,
+    onloadArgs,
+    h1,
+    rootSelector: ".rm-sidebar-outline",
+    minHeight: "400px",
+    height: "60vh",
+  });
 };

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

@@ -1,7 +1,13 @@
 // tldrawStyles.ts because some of these styles need to be inlined
+export const TLDRAW_DATA_ATTRIBUTE = "dg-tldraw-canvas-wrapper";
 export default `
-  /* Hide Roam Blocks */
-  .roam-article .rm-block-children {
+  /* Hide Roam Blocks only when canvas is present */
+  .roam-article[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children {
+    display: none;
+  }
+  
+  /* Hide Roam Blocks in sidebar when canvas is present */
+  .rm-sidebar-outline[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children {
     display: none;
   }
   
@@ -13,7 +19,7 @@ export default `
   /* CANVAS */
   /* fixes drawing arrows in north-west direction */
   /* and selection context not being shown */
-  #roamjs-tldraw-canvas-container svg {
+  .roamjs-tldraw-canvas-container svg {
     overflow: visible;
   }
   
@@ -43,7 +49,7 @@ export default `
     padding: initial;
   }
   
-  /* #roamjs-tldraw-canvas-container
+  /* .roamjs-tldraw-canvas-container
     .tl-shape
     .roamjs-tldraw-node
     .rm-block-main

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -6,13 +6,16 @@ import {
 import { createBlock } from "roamjs-components/writes";
 import { renderLinkedReferenceAdditions } from "~/utils/renderLinkedReferenceAdditions";
 import { createConfigObserver } from "roamjs-components/components/ConfigPage";
-import { renderTldrawCanvas } from "~/components/canvas/Tldraw";
+import {
+  renderTldrawCanvas,
+  renderTldrawCanvasInSidebar,
+} from "~/components/canvas/Tldraw";
 import { renderQueryPage, renderQueryBlock } from "~/components/QueryBuilder";
 import {
   DISCOURSE_CONFIG_PAGE_TITLE,
   renderNodeConfigPage,
 } from "~/utils/renderNodeConfigPage";
-import { isCurrentPageCanvas as isCanvasPage } from "~/utils/isCanvasPage";
+import { isCurrentPageCanvas, isSidebarCanvas } from "~/utils/isCanvasPage";
 import { isDiscourseNodeConfigPage as isNodeConfigPage } from "~/utils/isDiscourseNodeConfigPage";
 import { isQueryPage } from "~/utils/isQueryPage";
 import {
@@ -74,7 +77,8 @@ export const initObservers = async ({
 
       if (isNodeConfigPage(title)) renderNodeConfigPage(props);
       else if (isQueryPage(props)) renderQueryPage(props);
-      else if (isCanvasPage(props)) renderTldrawCanvas(props);
+      else if (isCurrentPageCanvas(props)) renderTldrawCanvas(props);
+      else if (isSidebarCanvas(props)) renderTldrawCanvasInSidebar(props);
     },
   });
 

apps/roam/src/utils/isCanvasPage.ts

@@ -17,3 +17,13 @@ export const isCurrentPageCanvas = ({
 }) => {
   return isCanvasPage({ title }) && !!h1.closest(".roam-article");
 };
+
+export const isSidebarCanvas = ({
+  title,
+  h1,
+}: {
+  title: string;
+  h1: HTMLHeadingElement;
+}) => {
+  return isCanvasPage({ title }) && !!h1.closest(".rm-sidebar-outline");
+};