ENG-796 Canvas Hide Block CSS Fix #384
Conversation
…oot element and updating CSS selectors for block visibility. Removed commented-out code for cleaner implementation.
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
@CodeRabbit full review |
✅ Actions performedFull review triggered. |
📝 WalkthroughWalkthroughAdds a data attribute to the root container during canvas wrapper injection in Tldraw.tsx. Updates CSS selectors in tldrawStyles.ts to check the attribute on ancestor containers (.roam-article, .rm-sidebar-outline) instead of child elements. Removes unused console logging and a redundant insertBefore call. No public API changes. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Tldraw as Tldraw Component
participant DOM as Root Element
participant CSS as CSS Selectors
User->>Tldraw: Mount component
Tldraw->>DOM: Inject canvas wrapper
Tldraw->>DOM: Set data attribute (TLDRAW_DATA_ATTRIBUTE="true")
CSS-->>DOM: Match ancestor-based selectors
CSS-->>User: Hide .rm-block-children under marked containers
User->>Tldraw: Unmount component
Tldraw->>DOM: Remove wrapper (attribute handling unchanged)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/roam/src/components/canvas/Tldraw.tsx (2)
933-945: Align gating and idempotency checks on the same element (root) and drop redundant child attributeCSS now gates on the ancestor. Use the root attribute for both gating and idempotency; the child attribute is no longer needed.
const canvasWrapperEl = document.createElement("div"); if ( childFromRoot && childFromRoot.parentElement && - !childFromRoot.hasAttribute(TLDRAW_DATA_ATTRIBUTE) + !rootElement.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; }
947-953: Avoid mounting into a detached node when already mountedIf the guard fails,
canvasWrapperElisn’t appended butrenderWithUnmountstill runs, creating an off-DOM tree. Bail out early.- const unmount = renderWithUnmount( + if (!canvasWrapperEl.isConnected) { + return () => {}; + } + const unmount = renderWithUnmount( <ExtensionApiContextProvider {...onloadArgs}> <TldrawCanvas title={title} /> </ExtensionApiContextProvider>, canvasWrapperEl, );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
apps/roam/src/components/canvas/Tldraw.tsx(1 hunks)apps/roam/src/components/canvas/tldrawStyles.ts(1 hunks)
🔇 Additional comments (1)
apps/roam/src/components/canvas/tldrawStyles.ts (1)
5-7: LGTM: selector shift to ancestor-based gating matches runtime attribute placementSelectors now correctly check the root container attribute; this resolves timing issues with child attributes.
Also applies to: 10-12
We were using attrs on the child block, but these were being created after render, so not being hidden.
Summary by CodeRabbit
Bug Fixes
Chores