[PR #32435] fix: resolve markdown hydration warning by ensuring valid DOM nesting for images #33744

Open
opened 2026-02-21 20:53:48 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/langgenius/dify/pull/32435

State: open
Merged: No


Hey team, I fixed the hydration warning (issue #32362) regarding invalid HTML nesting in Markdown. The problem was that the Paragraph component would use a "p" tag even when images
were present. Since images use a "div" from the ImageGallery, it caused an invalid "p inside a div" error.

I updated the logic to use a "div" wrapper instead of a "p" tag whenever an image is detected anywhere in the paragraph. I also swapped the "div" in the Img component for a "span"
to keep things cleaner. Verified this locally and the console errors are fixed. Fixes #32362.

**Original Pull Request:** https://github.com/langgenius/dify/pull/32435 **State:** open **Merged:** No --- Hey team, I fixed the hydration warning (issue #32362) regarding invalid HTML nesting in Markdown. The problem was that the Paragraph component would use a "p" tag even when images were present. Since images use a "div" from the ImageGallery, it caused an invalid "p inside a div" error. I updated the logic to use a "div" wrapper instead of a "p" tag whenever an image is detected anywhere in the paragraph. I also swapped the "div" in the Img component for a "span" to keep things cleaner. Verified this locally and the console errors are fixed. Fixes #32362.
yindo added the pull-request label 2026-02-21 20:53:48 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#33744