[PR #18500] fix(markdown): correctly render links with inline code #28929

Closed
opened 2026-02-21 20:44:23 -05:00 by yindo · 0 comments
Owner

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

State: closed
Merged: Yes


Summary

This PR fixes a rendering issue where Markdown links containing nested formatting such as inline code, bold text, or emojis would break or render incompletely.

For example, Markdown like:

This is google

would only render the plain text (“This is”) as part of the link, while the formatted content (google) would be omitted or cause a React error.

The problem was due to the custom Link component attempting to render node.children[0]?.value, which assumes a flat text structure. However, when a link contains nested formatting, node.children includes raw Markdown AST nodes that are not directly renderable by React.

This fix replaces the use of node.children with children, the correct prop provided by ReactMarkdown, which contains fully rendered React elements. This ensures all Markdown links, including those with formatting inside, render consistently and correctly across the app.

Closes #18450

Screenshots

Before After
image image

Checklist

Important

Please review the checklist below before submitting your pull request.

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/18500 **State:** closed **Merged:** Yes --- # Summary This PR fixes a rendering issue where Markdown links containing nested formatting such as inline code, bold text, or emojis would break or render incompletely. For example, Markdown like: [This is `google`](https://www.google.com) would only render the plain text (“This is”) as part of the link, while the formatted content (google) would be omitted or cause a React error. The problem was due to the custom Link component attempting to render node.children[0]?.value, which assumes a flat text structure. However, when a link contains nested formatting, node.children includes raw Markdown AST nodes that are not directly renderable by React. This fix replaces the use of `node.children` with `children`, the correct prop provided by ReactMarkdown, which contains fully rendered React elements. This ensures all Markdown links, including those with formatting inside, render consistently and correctly across the app. Closes #18450 # Screenshots | Before | After | |--------|-------| | ![image](https://github.com/user-attachments/assets/7c89f5da-4752-492a-b8e9-bf48758b9582) | ![image](https://github.com/user-attachments/assets/feb50116-9dd1-40ac-8513-48a31af5eeef)| # Checklist > [!IMPORTANT] > Please review the checklist below before submitting your pull request. - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:44:23 -05:00
yindo closed this issue 2026-02-21 20:44:24 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#28929