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

[PR #32419] fix: prevent hydration warning from div nesting inside p for inline markdown images #33733

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

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

State: open
Merged: No

Summary

Fixes #32362

When a markdown paragraph contains an inline image that is not the first child (e.g. Text before ![img](url) text after), the paragraph renderer fell through to a <p> wrapper while the image component rendered block-level <div> elements inside it. This produced invalid HTML (<div> inside <p>) and triggered React/Next.js hydration warnings.

Changes

  • paragraph.tsx: Added hasImageChild() helper to detect any image element among paragraph children. When an image is found (but isn't the first child), renders a <div class="markdown-paragraph"> instead of <p> to avoid invalid nesting.
  • plugin-paragraph.tsx: Same logic applied to the plugin paragraph variant.

How it works

The existing code already handled the case where an image is the first child by rendering a <div> wrapper. This fix extends that pattern to cover images appearing anywhere in the paragraph, ensuring valid HTML output in all cases.

**Original Pull Request:** https://github.com/langgenius/dify/pull/32419 **State:** open **Merged:** No --- ## Summary Fixes #32362 When a markdown paragraph contains an inline image that is **not** the first child (e.g. `Text before ![img](url) text after`), the paragraph renderer fell through to a `<p>` wrapper while the image component rendered block-level `<div>` elements inside it. This produced invalid HTML (`<div>` inside `<p>`) and triggered React/Next.js hydration warnings. ## Changes - **`paragraph.tsx`**: Added `hasImageChild()` helper to detect any image element among paragraph children. When an image is found (but isn't the first child), renders a `<div class="markdown-paragraph">` instead of `<p>` to avoid invalid nesting. - **`plugin-paragraph.tsx`**: Same logic applied to the plugin paragraph variant. ## How it works The existing code already handled the case where an image is the **first** child by rendering a `<div>` wrapper. This fix extends that pattern to cover images appearing **anywhere** in the paragraph, ensuring valid HTML output in all cases.
yindo added the pull-request label 2026-02-21 20:53:47 -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#33733
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?