ENG-913 - Canvas css issue in main window (#467)

* Refactor Tldraw component to remove unused TLDRAW_DATA_ATTRIBUTE and simplify canvas rendering logic. Update styles to use :has() for conditionally hiding Roam Blocks based on canvas presence.

* Enhance Tldraw component by adding early return to prevent duplicate canvas container appending. This improves rendering logic and maintains clean DOM structure.

Author: mdroidian

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

@@ -85,7 +85,6 @@ import ConvertToDialog from "./ConvertToDialog";
 import { createMigrations } from "./DiscourseRelationShape/discourseRelationMigrations";
 import ToastListener, { dispatchToastEvent } from "./ToastListener";
 import sendErrorEmail from "~/utils/sendErrorEmail";
-import { TLDRAW_DATA_ATTRIBUTE } from "./tldrawStyles";
 import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
 import { isPluginTimerReady, waitForPluginTimer } from "~/utils/pluginTimer";
@@ -975,14 +974,12 @@ const renderTldrawCanvasHelper = ({
   if (!childFromRoot) return () => {};
 
   const canvasWrapperEl = document.createElement("div");
-  if (
-    childFromRoot &&
-    childFromRoot.parentElement &&
-    !childFromRoot.hasAttribute(TLDRAW_DATA_ATTRIBUTE)
-  ) {
-    rootElement.setAttribute(TLDRAW_DATA_ATTRIBUTE, "true");
-    childFromRoot.setAttribute(TLDRAW_DATA_ATTRIBUTE, "true");
+  if (childFromRoot && childFromRoot.parentElement) {
     const parentEl = childFromRoot.parentElement;
+
+    if (parentEl.querySelector(".roamjs-tldraw-canvas-container"))
+      return () => {};
+
     parentEl.appendChild(canvasWrapperEl);
     canvasWrapperEl.style.minHeight = minHeight;
     canvasWrapperEl.style.height = height;
@@ -998,8 +995,6 @@ const renderTldrawCanvasHelper = ({
   const originalUnmount = unmount;
   return () => {
     originalUnmount();
-    childFromRoot.removeAttribute(TLDRAW_DATA_ATTRIBUTE);
-    rootElement.removeAttribute(TLDRAW_DATA_ATTRIBUTE);
     canvasWrapperEl.remove();
   };
 };

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

@@ -1,13 +1,12 @@
 // tldrawStyles.ts because some of these styles need to be inlined
-export const TLDRAW_DATA_ATTRIBUTE = "dg-tldraw-canvas-wrapper";
 export default /* css */ `
-  /* Hide Roam Blocks only when canvas is present */
-  .roam-article[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children  {
+  /* Hide Roam Blocks only when a canvas is present under the root */
+  .roam-article:has(.roamjs-tldraw-canvas-container) .rm-block-children  {
     display: none;
   }
   
-  /* Hide Roam Blocks in sidebar when canvas is present */
-  .rm-sidebar-outline[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children {
+  /* Hide Roam Blocks in sidebar when a canvas is present */
+  .rm-sidebar-outline:has(.roamjs-tldraw-canvas-container) .rm-block-children {
     display: none;
   }