Refactor Tldraw component to improve canvas rendering logic (#368)

- Simplified the rendering logic by consolidating checks for the root element and child elements.
- Updated the attribute handling for TLDRAW_DATA_ATTRIBUTE to ensure proper visibility toggling of Roam blocks.
- Enhanced the styling rules in tldrawStyles to maintain consistency in block visibility when the canvas is present.

Author: mdroidian

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<HTMLDivElement>(".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(
     <ExtensionApiContextProvider {...onloadArgs}>
@@ -913,7 +922,7 @@ const renderTldrawCanvasHelper = ({
   const originalUnmount = unmount;
   return () => {
     originalUnmount();
-    rootElement.removeAttribute(TLDRAW_DATA_ATTRIBUTE);
+    childFromRoot.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[${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;
   }