langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-20 19:50:06 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #32366] fix(web): avoid invalid DOM nesting when inline images appear in paragraphs #33693

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

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

State: open
Merged: No

Summary

When a Markdown paragraph contains an inline image that is not the first child (e.g. Text before ![img](url) text after), the Img component renders a block-level <div> wrapper. This was placed inside a <p> tag, producing invalid HTML and triggering React/Next.js hydration warnings:

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

Changes

  • Updated Paragraph component (web/app/components/base/markdown-blocks/paragraph.tsx) to detect when any child node (not just the first) is an image element.
  • When a non-leading image is found, renders as <div class="markdown-paragraph"> instead of <p>, keeping the DOM valid.
  • The existing first-child-is-image logic (dedicated ImageGallery block) is unchanged.

Testing

  • Rendered Markdown with inline images in various positions within paragraphs
  • Confirmed no hydration warning in browser console
  • Confirmed existing image-as-first-child rendering is unaffected

Closes #32362

**Original Pull Request:** https://github.com/langgenius/dify/pull/32366 **State:** open **Merged:** No --- ## Summary When a Markdown paragraph contains an inline image that is **not** the first child (e.g. `Text before ![img](url) text after`), the `Img` component renders a block-level `<div>` wrapper. This was placed inside a `<p>` tag, producing invalid HTML and triggering React/Next.js hydration warnings: > `In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error.` ## Changes - Updated `Paragraph` component (`web/app/components/base/markdown-blocks/paragraph.tsx`) to detect when **any** child node (not just the first) is an image element. - When a non-leading image is found, renders as `<div class="markdown-paragraph">` instead of `<p>`, keeping the DOM valid. - The existing first-child-is-image logic (dedicated `ImageGallery` block) is unchanged. ## Testing - Rendered Markdown with inline images in various positions within paragraphs - Confirmed no hydration warning in browser console - Confirmed existing image-as-first-child rendering is unaffected Closes #32362
yindo added the pull-request label 2026-02-21 20:53:43 -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#33693
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?