From 0e2ab122105fe1b10da615eb59e22ee7cd5ee827 Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Mon, 18 Aug 2025 00:24:14 -0600 Subject: [PATCH 1/2] Refactor Tldraw component to enhance canvas rendering in both main and sidebar contexts. Update utility functions to support sidebar canvas rendering. --- apps/roam/src/components/canvas/Tldraw.tsx | 80 +++++++++++++++---- .../src/components/canvas/tldrawStyles.ts | 14 +++- .../utils/initializeObserversAndListeners.ts | 10 ++- apps/roam/src/utils/isCanvasPage.ts | 10 +++ 4 files changed, 91 insertions(+), 23 deletions(-) diff --git a/apps/roam/src/components/canvas/Tldraw.tsx b/apps/roam/src/components/canvas/Tldraw.tsx index b684d9ea3..d9f7517e7 100644 --- a/apps/roam/src/components/canvas/Tldraw.tsx +++ b/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 (
@@ -845,31 +845,79 @@ const InsideEditorAndUiContext = ({ return ; }; -export const renderTldrawCanvas = ({ +const renderTldrawCanvasHelper = ({ title, onloadArgs, + selector, + minHeight, + height, }: { title: string; onloadArgs: OnloadArgs; + selector: string; + minHeight: string; + height: string; }) => { - const children = document.querySelector( - ".roam-article .rm-block-children", - ); + const blockChildrenEl = document.querySelector(selector); if ( - children && - children.parentElement && - !children.hasAttribute("data-roamjs-discourse-playground") + blockChildrenEl && + blockChildrenEl.parentElement && + !blockChildrenEl.parentElement.hasAttribute(TLDRAW_DATA_ATTRIBUTE) ) { - 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( + blockChildrenEl.parentElement.setAttribute(TLDRAW_DATA_ATTRIBUTE, "true"); + + const wrapperEl = document.createElement("div"); + blockChildrenEl.parentElement.appendChild(wrapperEl); + + wrapperEl.style.minHeight = minHeight; + wrapperEl.style.height = height; + + const unmount = renderWithUnmount( , - parent, + wrapperEl, ); + + const originalUnmount = unmount; + return () => { + originalUnmount(); + if (blockChildrenEl.parentElement) { + blockChildrenEl.parentElement.removeAttribute(TLDRAW_DATA_ATTRIBUTE); + } + }; } + return () => {}; +}; + +export const renderTldrawCanvas = ({ + title, + onloadArgs, +}: { + title: string; + onloadArgs: OnloadArgs; +}) => { + return renderTldrawCanvasHelper({ + title, + onloadArgs, + selector: ".roam-article .rm-block-children", + minHeight: "500px", + height: "70vh", + }); +}; + +export const renderTldrawCanvasInSidebar = ({ + title, + onloadArgs, +}: { + title: string; + onloadArgs: OnloadArgs; +}) => { + return renderTldrawCanvasHelper({ + title, + onloadArgs, + selector: ".rm-sidebar-outline .rm-block-children", + minHeight: "400px", + height: "60vh", + }); }; diff --git a/apps/roam/src/components/canvas/tldrawStyles.ts b/apps/roam/src/components/canvas/tldrawStyles.ts index 1f32d2792..665dfb55e 100644 --- a/apps/roam/src/components/canvas/tldrawStyles.ts +++ b/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 div[${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 diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts index 4aa5a210e..e028878e4 100644 --- a/apps/roam/src/utils/initializeObserversAndListeners.ts +++ b/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); }, }); diff --git a/apps/roam/src/utils/isCanvasPage.ts b/apps/roam/src/utils/isCanvasPage.ts index 867737e64..591ccea5c 100644 --- a/apps/roam/src/utils/isCanvasPage.ts +++ b/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"); +}; From fef30a12c96ae35082e290abd568fe7d0f2ec64d Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Mon, 18 Aug 2025 00:43:27 -0600 Subject: [PATCH 2/2] Refactor Tldraw canvas rendering logic to utilize heading context for improved element selection. --- apps/roam/src/components/canvas/Tldraw.tsx | 78 +++++++++++-------- .../src/components/canvas/tldrawStyles.ts | 2 +- 2 files changed, 46 insertions(+), 34 deletions(-) diff --git a/apps/roam/src/components/canvas/Tldraw.tsx b/apps/roam/src/components/canvas/Tldraw.tsx index d9f7517e7..2ed727737 100644 --- a/apps/roam/src/components/canvas/Tldraw.tsx +++ b/apps/roam/src/components/canvas/Tldraw.tsx @@ -848,59 +848,68 @@ const InsideEditorAndUiContext = ({ const renderTldrawCanvasHelper = ({ title, onloadArgs, - selector, + h1, + rootSelector, minHeight, height, }: { title: string; onloadArgs: OnloadArgs; - selector: string; + h1: HTMLHeadingElement; + rootSelector: string; minHeight: string; height: string; }) => { - const blockChildrenEl = document.querySelector(selector); - if ( - blockChildrenEl && - blockChildrenEl.parentElement && - !blockChildrenEl.parentElement.hasAttribute(TLDRAW_DATA_ATTRIBUTE) - ) { - blockChildrenEl.parentElement.setAttribute(TLDRAW_DATA_ATTRIBUTE, "true"); - - const wrapperEl = document.createElement("div"); - blockChildrenEl.parentElement.appendChild(wrapperEl); - - wrapperEl.style.minHeight = minHeight; - wrapperEl.style.height = height; - - const unmount = renderWithUnmount( - - - , - wrapperEl, - ); + // Find the root element using the H1 context to avoid scope issues + const rootElement = h1.closest(rootSelector) as HTMLDivElement; + if (!rootElement) return () => {}; - const originalUnmount = unmount; - return () => { - originalUnmount(); - if (blockChildrenEl.parentElement) { - blockChildrenEl.parentElement.removeAttribute(TLDRAW_DATA_ATTRIBUTE); - } - }; - } - return () => {}; + if (rootElement.hasAttribute(TLDRAW_DATA_ATTRIBUTE)) return () => {}; + + const blockChildrenContainer = + rootElement.querySelector(".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, + ); + + const unmount = renderWithUnmount( + + + , + 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, - selector: ".roam-article .rm-block-children", + h1, + rootSelector: ".roam-article", minHeight: "500px", height: "70vh", }); @@ -909,14 +918,17 @@ export const renderTldrawCanvas = ({ export const renderTldrawCanvasInSidebar = ({ title, onloadArgs, + h1, }: { title: string; onloadArgs: OnloadArgs; + h1: HTMLHeadingElement; }) => { return renderTldrawCanvasHelper({ title, onloadArgs, - selector: ".rm-sidebar-outline .rm-block-children", + h1, + rootSelector: ".rm-sidebar-outline", minHeight: "400px", height: "60vh", }); diff --git a/apps/roam/src/components/canvas/tldrawStyles.ts b/apps/roam/src/components/canvas/tldrawStyles.ts index 665dfb55e..468f6304d 100644 --- a/apps/roam/src/components/canvas/tldrawStyles.ts +++ b/apps/roam/src/components/canvas/tldrawStyles.ts @@ -2,7 +2,7 @@ export const TLDRAW_DATA_ATTRIBUTE = "dg-tldraw-canvas-wrapper"; export default ` /* Hide Roam Blocks only when canvas is present */ - .roam-article div[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children { + .roam-article[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children { display: none; }