fix(ui): [Bug] Rich text nested paragraph causes Next.js hydration er…

[michnowak]

Fixes #779

Problem

The RichText component's p override renders paragraphs as <p> elements via TypographyComp. When content contains block-level descendants (e.g. <div> from ImgComp or nested <p> from HTML), this produces invalid HTML nesting and triggers Next.js hydration errors:

• In HTML, <p> cannot be a descendant of <p>
• Hydration failed because... Invalid HTML tag nesting

Solution

Changed the p override in RichText to use tag: 'div' instead of the default 'p'. This allows block-level descendants while preserving visual styling (Typography applies styles via variant, not tag).

Changes

• packages/ui/src/components/RichText/RichText.tsx — added tag: 'div' to paragraph override props

Changeset

Included as @o2s/ui patch.

Summary by CodeRabbit

Bug Fixes

• Fixed hydration errors in RichText component that could occur with certain content structures.

[coderabbitai]

Walkthrough

A Changesets metadata entry was added to document a patch version bump for the @o2s/ui package. The RichText component's Markdown paragraph override was updated to render as a div element instead of a p tag to prevent hydration errors caused by nested block-level elements.

Changes

Cohort / File(s)	Summary
Changeset Metadata .changeset/sad-lies-kick.md	Added changeset entry documenting a patch-level fix for the UI package regarding RichText paragraph rendering.
UI Component packages/ui/src/components/Content/RichText/RichText.tsx	Modified the Markdown p element override to explicitly pass tag: 'div' prop to TypographyComp, changing the rendered markup from a paragraph tag to a div tag while preserving typography variant and margin classes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related issues

• [Bug] Rich text nested paragraph causes Next.js hydration errors on article page #779 — Directly addresses the same code-level fix in the RichText component to prevent nested block-level element hydration errors.

Suggested reviewers

• marcinkrasowski

Poem

🐰 A div now rests where p once stood,
No nested blocks to cause such dread,
Hydration flows as smooth as wood,
Tags transformed, the errors fled! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description is incomplete. While it clearly explains the problem, solution, and changes, the required 'How to test' and 'Media' sections from the template are missing or unfilled.	Add a detailed 'How to test' section with step-by-step instructions for testing the hydration error fix, and indicate whether media is applicable for this change.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: fixing a Next.js hydration error caused by nested paragraphs in the RichText component, which matches the actual implementation change of replacing a p tag with a div tag.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix(ui)---Bug]-Rich-text-nested-paragraph-causes-Next.js-hydration-errors-on-article-page-#779

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/ui/src/components/Content/RichText/RichText.tsx (1)

134-141: Pragmatic fix; note the semantic tradeoff.

Switching the paragraph override to div correctly avoids the <p>-cannot-contain-block hydration error (e.g., when Markdown paragraphs wrap images/figures/divs via overrides). Since typographyVariants classes are element-agnostic, visual styling is preserved.

Tradeoff worth acknowledging: all Markdown paragraphs now render as non-semantic divs, which is a minor accessibility/SEO regression vs. valid <p> output. If you want to preserve <p> for the common case, a more targeted alternative is to inspect children and only fall back to div when a block-level child is detected; otherwise, this fix is acceptable given markdown-to-jsx's limitations.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/Content/RichText/RichText.tsx` around lines 134 -
141, The override for markdown paragraphs currently renders as <p> which causes
hydration errors when a paragraph contains block children; modify the paragraph
override in the RichText mapping so the p key uses TypographyComp with tag set
to 'div' (preserving visual styles via baseFontSize and className) instead of
'p'; if you want to preserve semantics later, add a follow-up enhancement:
inspect children in the paragraph renderer and only switch to 'div' when a
block-level child is detected, otherwise render as 'p'.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/ui/src/components/Content/RichText/RichText.tsx`:
- Around line 134-141: The override for markdown paragraphs currently renders as
<p> which causes hydration errors when a paragraph contains block children;
modify the paragraph override in the RichText mapping so the p key uses
TypographyComp with tag set to 'div' (preserving visual styles via baseFontSize
and className) instead of 'p'; if you want to preserve semantics later, add a
follow-up enhancement: inspect children in the paragraph renderer and only
switch to 'div' when a block-level child is detected, otherwise render as 'p'.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e2381025-c18f-4585-a15c-eb6432453c20

📥 Commits

Reviewing files that changed from the base of the PR and between da515dc and 955a05c.

📒 Files selected for processing (2)

• .changeset/sad-lies-kick.md
• packages/ui/src/components/Content/RichText/RichText.tsx

[github-actions]

Coverage Report for packages/configs/vitest-config

Status	Category	Percentage	Covered / Total
🔵	Lines	78.51%	1739 / 2215
🔵	Statements	77.43%	1829 / 2362
🔵	Functions	75%	519 / 692
🔵	Branches	65.9%	1148 / 1742

File Coverage

No changed files found.

Generated in workflow #639 for commit 955a05c by the Vitest Coverage Report Action