Skip to content

feat: configurable portal target for Mermaid fullscreen#500

Open
slavco86 wants to merge 2 commits intovercel:mainfrom
slavco86:feat/mermaid-fullscreen-portal-container
Open

feat: configurable portal target for Mermaid fullscreen#500
slavco86 wants to merge 2 commits intovercel:mainfrom
slavco86:feat/mermaid-fullscreen-portal-container

Conversation

@slavco86
Copy link
Copy Markdown

@slavco86 slavco86 commented Apr 9, 2026

Summary

Implements vercel/streamdown#499: optional mermaid.fullscreenPortalContainer on MermaidOptions so the Mermaid fullscreen overlay can portal into a host element instead of document.body. This helps micro-frontends and apps using scoped or prefixed Tailwind keep the overlay in the same DOM/CSS scope.

Changes

  • MermaidOptions.fullscreenPortalContainer: HTMLElement | null | (() => HTMLElement | null) — unset or null keeps the default document.body.
  • MermaidFullscreenButton: resolves the portal target from context and passes it to createPortal.
  • Streamdown memo: compare mermaid so StreamdownContext updates when the portal option (or other mermaid props) change.
  • Docs: configuration.mdx — Mermaid options table.
  • Tests: custom portal targets (element and callback).
  • Changeset: patch bump for streamdown.

Testing

  • pnpm build:packages
  • pnpm test
  • pnpm check

Fixes #499

Add mermaid.fullscreenPortalContainer (element or getter) for micro-frontend
and prefixed CSS scenarios. Compare mermaid in Streamdown memo for context
updates. Document on configuration page; add changeset and tests.

Refs vercel#499
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 9, 2026

Someone is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

Avoid accessing document during render when fullscreen is closed; addresses
review feedback on vercel#500.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(mermaid): configurable portal target for Mermaid fullscreen (micro-frontends & prefixed CSS)

1 participant