diff --git a/apps/roam/src/components/canvas/Tldraw.tsx b/apps/roam/src/components/canvas/Tldraw.tsx index 090d10e1e..70871462f 100644 --- a/apps/roam/src/components/canvas/Tldraw.tsx +++ b/apps/roam/src/components/canvas/Tldraw.tsx @@ -886,22 +886,31 @@ const renderTldrawCanvasHelper = ({ const rootElement = h1.closest(rootSelector) as HTMLDivElement; if (!rootElement) return () => {}; - if (rootElement.hasAttribute(TLDRAW_DATA_ATTRIBUTE)) return () => {}; - - const blockChildrenContainer = + const childFromRoot = rootElement.querySelector(".rm-block-children"); - if (!blockChildrenContainer) return () => {}; - - rootElement.setAttribute(TLDRAW_DATA_ATTRIBUTE, "true"); + if (!childFromRoot) return () => {}; const canvasWrapperEl = document.createElement("div"); - canvasWrapperEl.style.minHeight = minHeight; - canvasWrapperEl.style.height = height; + if ( + childFromRoot && + childFromRoot.parentElement && + !childFromRoot.hasAttribute(TLDRAW_DATA_ATTRIBUTE) + ) { + childFromRoot.setAttribute(TLDRAW_DATA_ATTRIBUTE, "true"); + const parentEl = childFromRoot.parentElement; + parentEl.appendChild(canvasWrapperEl); + canvasWrapperEl.style.minHeight = minHeight; + canvasWrapperEl.style.height = height; + } - blockChildrenContainer.parentElement?.insertBefore( - canvasWrapperEl, - blockChildrenContainer.nextSibling, - ); + // console.log( + // "blockChildrenContainer.parentElement", + // articleChildren.parentElement, + // ); + // articleChildren.parentElement?.insertBefore( + // canvasWrapperEl, + // articleChildren.nextSibling, + // ); const unmount = renderWithUnmount( @@ -913,7 +922,7 @@ const renderTldrawCanvasHelper = ({ const originalUnmount = unmount; return () => { originalUnmount(); - rootElement.removeAttribute(TLDRAW_DATA_ATTRIBUTE); + childFromRoot.removeAttribute(TLDRAW_DATA_ATTRIBUTE); canvasWrapperEl.remove(); }; }; diff --git a/apps/roam/src/components/canvas/tldrawStyles.ts b/apps/roam/src/components/canvas/tldrawStyles.ts index b0c78413c..14f004e5a 100644 --- a/apps/roam/src/components/canvas/tldrawStyles.ts +++ b/apps/roam/src/components/canvas/tldrawStyles.ts @@ -2,12 +2,12 @@ export const TLDRAW_DATA_ATTRIBUTE = "dg-tldraw-canvas-wrapper"; export default ` /* Hide Roam Blocks only when canvas is present */ - .roam-article[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children { + .roam-article .rm-block-children[${TLDRAW_DATA_ATTRIBUTE}="true"] { display: none; } /* Hide Roam Blocks in sidebar when canvas is present */ - .rm-sidebar-outline[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children { + .rm-sidebar-outline .rm-block-children[${TLDRAW_DATA_ATTRIBUTE}="true"] { display: none; }