ENG-796 Canvas Hide Block CSS Fix (#384)

* Enhance Tldraw canvas rendering by setting TLDRAW_DATA_ATTRIBUTE on root element and updating CSS selectors for block visibility. Removed commented-out code for cleaner implementation.

* rm on unmount

Author: mdroidian

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

@@ -936,22 +936,14 @@ const renderTldrawCanvasHelper = ({
     childFromRoot.parentElement &&
     !childFromRoot.hasAttribute(TLDRAW_DATA_ATTRIBUTE)
   ) {
+    rootElement.setAttribute(TLDRAW_DATA_ATTRIBUTE, "true");
     childFromRoot.setAttribute(TLDRAW_DATA_ATTRIBUTE, "true");
     const parentEl = childFromRoot.parentElement;
     parentEl.appendChild(canvasWrapperEl);
     canvasWrapperEl.style.minHeight = minHeight;
     canvasWrapperEl.style.height = height;
   }
 
-  // console.log(
-  //   "blockChildrenContainer.parentElement",
-  //   articleChildren.parentElement,
-  // );
-  // articleChildren.parentElement?.insertBefore(
-  //   canvasWrapperEl,
-  //   articleChildren.nextSibling,
-  // );
-
   const unmount = renderWithUnmount(
     <ExtensionApiContextProvider {...onloadArgs}>
       <TldrawCanvas title={title} />
@@ -963,6 +955,7 @@ const renderTldrawCanvasHelper = ({
   return () => {
     originalUnmount();
     childFromRoot.removeAttribute(TLDRAW_DATA_ATTRIBUTE);
+    rootElement.removeAttribute(TLDRAW_DATA_ATTRIBUTE);
     canvasWrapperEl.remove();
   };
 };

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 .rm-block-children[${TLDRAW_DATA_ATTRIBUTE}="true"]  {
+  .roam-article[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children  {
     display: none;
   }
   
   /* Hide Roam Blocks in sidebar when canvas is present */
-  .rm-sidebar-outline .rm-block-children[${TLDRAW_DATA_ATTRIBUTE}="true"] {
+  .rm-sidebar-outline[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children {
     display: none;
   }