langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 03:55:25 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #32410] fix: avoid invalid DOM nesting when inline image is not first paragraph child #33722

New Issue
Open
opened 2026-02-21 20:53:46 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:53:46 -05:00
Owner
Copy Link
Copy Source

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

State: open
Merged: No

Problem

When rendering Markdown where an inline image appears inside a paragraph but is not the first child (e.g. Text before ![img](url) text after), the Paragraph component falls through to rendering <p>, while the Img renderer wraps the image in a <div>. This creates invalid <p><div>...</div></p> nesting, which triggers Next.js hydration warnings:

In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error.

Solution

Added a check for image tags among all children of the paragraph node, not just the first child. When any child is an image, the component renders a <div> wrapper instead of <p>, preventing invalid DOM nesting.

The existing first-child optimization (which extracts the image into an ImageGallery) is preserved for backwards compatibility.

Changes

  • web/app/components/base/markdown-blocks/paragraph.tsx: Added hasImageChild helper and fallback <div> rendering when images are found in non-first positions.

Fixes #32362

**Original Pull Request:** https://github.com/langgenius/dify/pull/32410 **State:** open **Merged:** No --- ## Problem When rendering Markdown where an inline image appears inside a paragraph but is **not** the first child (e.g. `Text before ![img](url) text after`), the `Paragraph` component falls through to rendering `<p>`, while the `Img` renderer wraps the image in a `<div>`. This creates invalid `<p><div>...</div></p>` nesting, which triggers Next.js hydration warnings: > In HTML, `<div>` cannot be a descendant of `<p>`. This will cause a hydration error. ## Solution Added a check for image tags among **all** children of the paragraph node, not just the first child. When any child is an image, the component renders a `<div>` wrapper instead of `<p>`, preventing invalid DOM nesting. The existing first-child optimization (which extracts the image into an `ImageGallery`) is preserved for backwards compatibility. ## Changes - `web/app/components/base/markdown-blocks/paragraph.tsx`: Added `hasImageChild` helper and fallback `<div>` rendering when images are found in non-first positions. Fixes #32362
yindo added the pull-request label 2026-02-21 20:53:46 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#33722
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?