Skip to content

BLOCK_TAGS

reference
1 min readUpdated

Kind: Constant

Source: atloria-monorepo/apps/web/src/components/Viewer/blockNesting.ts

Which markdown children our component map renders as BLOCK-level markup.

This is a server-rendering correctness rule, not a styling preference. Markdown puts a standalone image in its own paragraph, so ![shot](url) reaches the renderer as <p><img></p> — and CustomImage renders that img as a

, which is not legal inside a

. A browser parsing that HTML closes the

before the

, so the DOM built from our server HTML no longer matches the tree React expects: hydration fails (React #418) and React throws the ENTIRE server-rendered page away and re-renders it in the browser. The page still looks right, which is what makes it dangerous — server rendering is silently undone on exactly the pages that carry screenshots.

Lives in its own module (rather than inside MarkdownRenderer) so it can be unit-tested: MarkdownRenderer pulls in ESM-only react-markdown, which this app's jest transform cannot load.

Was this page helpful?

Download as PDF