markdown: Add support for inline HTML `img` tags inside text #37264

RemcoSmitsDev · 2025-08-31T11:52:16Z

Follow-up: #36700

This PR adds basic support for showing images inline inside a text.

As you can see inside the before screenshot, the image was displayed right below the Some inline text text. This was because we didn't consider the image to be inline with the text (paragraph). Now we do :)

All the test changes are making sure it is not more than 1 element parsed, instead of only checking for the first parsed element. This could work out bad when we return more than 1 result.

Before

After

Code example:

<p>some inline text <img src="https://picsum.photos/200/300" alt="Description of image" style="height: 100px" /> asdjkflsadjfl</p>

# Html Tag
<img src="https://picsum.photos/200/300" alt="Description of image" />

# Html Tag with width and height
<img src="https://picsum.photos/200/300" alt="Description of image" width="100" height="200" />

# Html Tag with style attribute with width and height
<img src="https://picsum.photos/200/300" alt="Description of image" style="width: 100px; height: 200px" />

# Normal Tag
![alt text](https://picsum.photos/200/300)

cc @huacnlee As you are also familiar with this code.

Release Notes:

Markdown: Added support for inline HTML img tags inside paragraphs

zed-industries#36700 (comment)

RemcoSmitsDev · 2025-08-31T13:12:52Z

Ooo sorry @maxdeviant for changing the title at the same time. Feel free to change it back.

crates/markdown_preview/src/markdown_renderer.rs

crates/markdown_preview/src/markdown_parser.rs

This reverts commit c3860f3.

RemcoSmitsDev · 2025-09-03T13:25:29Z

We have to find a better html minifier, because html5minify has many issues with removing spaces, and it has a cve on a dependency. Or write our own in a next PR.

RemcoSmitsDev · 2025-09-03T14:05:51Z

Should be ready now, In a next RemcoSmitsDev#120 I will fix that, we have support for styling tags like b and strong etc. After that, I will start working on adding li / ol support or fix the html minifier issues.

huacnlee · 2025-09-04T01:49:22Z

I just remembered that using h_flex won’t work, which will directly cause all wrapping to fail to work.

And here have secondary issue, you can try this case (I am not sure is caused by recent image change):

Welcome to [![Zed](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/zed-industries/zed/main/assets/badge/v0.json)](https://zed.dev) Zed

The previous img tag have link, the link is cross over to the next Zed text.

RemcoSmitsDev · 2025-09-04T08:07:40Z

Should i just revert that change so we can handle it correctly in the near future? So this pr just adds the groundwork for nested elements inside a p tag.

huacnlee · 2025-09-04T09:49:04Z

Yes, I think you should do the other ones first.

RemcoSmitsDev · 2025-09-04T10:07:26Z

@SomeoneToIgnore It's ready if you are ok with the changes.

We will later fix the wrapping issues

RemcoSmitsDev · 2025-09-04T15:14:28Z

crates/markdown_preview/src/markdown_renderer.rs


 fn render_markdown_paragraph(parsed: &MarkdownParagraph, cx: &mut RenderContext) -> AnyElement {
-    cx.with_common_p(h_flex().flex_wrap())
+    cx.with_common_p(div())


@huacnlee I'm re-adding this, because adding a flex & flex-col here breaks the keyboard shortcut code for example:

Before removing h_flex

After removing h_flex

I would rather see the wrapping break than it looks like this.

Reverting this because see: zed-industries@8b8186a#r2322518759 This reverts commit 8b8186a.

SomeoneToIgnore

Nice, thank you for the follow-up.

RemcoSmitsDev · 2025-09-08T08:51:28Z

I have 2 more PRs coming :)

huacnlee · 2025-09-08T09:32:45Z

Sorry, I have busy on Input changed in GPUI Compopnent recently days, not reply this.

@RemcoSmitsDev may not understand I was said issue, the flex for paragraph will let the soft wrap not working.

Expected

Now merged in main

SomeoneToIgnore · 2025-09-10T05:19:33Z

Sorry for overlooking: it is a great point that we should not break the "main" page for Zed's markdown rendering: its own release notes.

Given that today is a release day and people will look at this, I'll revert the PR meanwhile and will be looking future PRs more on rendering markdown from Zed and from rust-analyzer's repo.

Still interested to get those image renders in.

…37264)" This reverts commit e1a5d29.

…37264)" (#37893) This reverts commit e1a5d29. This have regressed Zed release notes' wrapping which we do not want to do on a release day: #37264 (comment) Release Notes: - N/A

…ustries#37264) Follow-up: zed-industries#36700 This PR adds basic support for showing images inline inside a text. As you can see inside the before screenshot, the image was displayed right below the `Some inline text` text. This was because we didn't consider the image to be inline with the text (paragraph). Now we do :) All the test changes are making sure it is not more than 1 element parsed, instead of only checking for the first parsed element. This could work out bad when we return more than 1 result. **Before** <img width="1717" height="1344" alt="Screenshot 2025-08-31 at 13 49 45" src="https://github.com/user-attachments/assets/13c5f9dd-0e0a-4e08-b2a6-28e9a4e0cab8" /> **After** <img width="1719" height="1343" alt="Screenshot 2025-08-31 at 13 42 14" src="https://github.com/user-attachments/assets/bf7aa82f-3743-4fb3-87aa-4a97a550c4d1" /> **Code example**: ```markdown <p>some inline text <img src="https://picsum.photos/200/300" alt="Description of image" style="height: 100px" /> asdjkflsadjfl</p> # Html Tag <img src="https://picsum.photos/200/300" alt="Description of image" /> # Html Tag with width and height <img src="https://picsum.photos/200/300" alt="Description of image" width="100" height="200" /> # Html Tag with style attribute with width and height <img src="https://picsum.photos/200/300" alt="Description of image" style="width: 100px; height: 200px" /> # Normal Tag ![alt text](https://picsum.photos/200/300) ``` Release Notes: - Markdown: Added support for inline HTML `img` tags inside paragraphs

…ed-industries#37264)" (zed-industries#37893) This reverts commit e1a5d29. This have regressed Zed release notes' wrapping which we do not want to do on a release day: zed-industries#37264 (comment) Release Notes: - N/A

RemcoSmitsDev · 2025-09-12T17:07:35Z

Yeah, I knew it was not 100% perfect but didn't know It was that broken. Sorry for that, should have checked it better.

@huacnlee and I both don't really know what the best way is to support wrapping with images. I'm trying to implement the inline display feature from CSS inside taffy. As I'm not really familiar with the code base, it will probably take me some time to get it working as expected.

@SomeoneToIgnore Do you want me to just push the HTML image support without adding the flex wrap code? So we don't break the wrapping but have HTML image support without them being inline yet?

SomeoneToIgnore · 2025-09-12T18:42:09Z

Yeah, I think that would be a nice step forward.

Overall, a baseline are all md files in Zed, esp. the release notes preview (which is autogenerated IIRC?) — if those do not break, it is fine to move on + test on a few extra documents.

@SomeoneToIgnore

Re-adds: #37264 This PR re-adds basic support for showing HTML images, without touching the display mode for images. The initial PR changed the `div().flex().flex_col()` to `h_flex().flex_wrap()` but this broke the text wrapping in almost all cases. **Note**: This does not add support for showing the images inline, because we haven't figured out how they correctly do this. I'm working on adding the CSS `inline` display feature support to taffy that hopefully allows us to correctly show images/other elements inline without breaking the text wrapping. **Before (nightly) and after (dev) for the README file inside Zed. (nothing has changed, which is good)** <img width="3440" height="1380" alt="Screenshot 2025-09-13 at 12 49 08" src="https://github.com/user-attachments/assets/9cbdcb07-dbe9-4236-9d20-e59acc0e955e" /> **Result** <img width="1717" height="1314" alt="Screenshot 2025-09-13 at 12 51 54" src="https://github.com/user-attachments/assets/1c0f8507-c63d-472e-8e82-a654a63f7153" /> cc @SomeoneToIgnore Release Notes: - markdown preview: Added support for HTML `img` tags inside paragraphs

RemcoSmitsDev added 2 commits August 31, 2025 11:07

Apply feedback from previous PR

dbfd090

zed-industries#36700 (comment)

Add support for inline images

d98cd19

cla-bot bot added the cla-signed The user has signed the Contributor License Agreement label Aug 31, 2025

RemcoSmitsDev changed the title ~~markdown: Add support for showing images inside a text~~ markdown: Add support for inline HTML img tags inside text Aug 31, 2025

maxdeviant changed the title ~~markdown: Add support for inline HTML img tags inside text~~ markdown: Add support for showing images inside text Aug 31, 2025

RemcoSmitsDev changed the title ~~markdown: Add support for showing images inside text~~ markdown: Add support for showing images inside paragraphs Aug 31, 2025

RemcoSmitsDev changed the title ~~markdown: Add support for showing images inside paragraphs~~ markdown: Add support for inline HTML img tags inside text Aug 31, 2025

RemcoSmitsDev marked this pull request as ready for review August 31, 2025 13:35

RemcoSmitsDev added 2 commits August 31, 2025 15:46

Remove styling preparation code

cfa6896

Fix rare panic

a4c8e7e

RemcoSmitsDev mentioned this pull request Aug 31, 2025

markdown: Add support for HTML styling elements RemcoSmitsDev/zed#120

Open

huacnlee reviewed Sep 1, 2025

View reviewed changes

crates/markdown_preview/src/markdown_renderer.rs Outdated Show resolved Hide resolved

Fix wrapping with inline images

e476d14

RemcoSmitsDev marked this pull request as draft September 2, 2025 17:03

huacnlee reviewed Sep 3, 2025

View reviewed changes

crates/markdown_preview/src/markdown_parser.rs Show resolved Hide resolved

huacnlee reviewed Sep 3, 2025

View reviewed changes

crates/markdown_preview/src/markdown_parser.rs Show resolved Hide resolved

Minify markdown to remove newlines & specify capacity for links

c3860f3

RemcoSmitsDev marked this pull request as ready for review September 3, 2025 13:14

RemcoSmitsDev added 2 commits September 3, 2025 15:17

Merge branch 'main' into markdown-support-inline-elements

730b1cb

Revert "Minify markdown to remove newlines & specify capacity for links"

d27656d

This reverts commit c3860f3.

Undo flex wrap logic

8b8186a

We will later fix the wrapping issues

RemcoSmitsDev commented Sep 4, 2025

View reviewed changes

Revert "Undo flex wrap logic"

3163088

Reverting this because see: zed-industries@8b8186a#r2322518759 This reverts commit 8b8186a.

RemcoSmitsDev mentioned this pull request Sep 6, 2025

Markdown: Add support for kbd HTML tags RemcoSmitsDev/zed#121

Open

SomeoneToIgnore self-assigned this Sep 8, 2025

SomeoneToIgnore approved these changes Sep 8, 2025

View reviewed changes

SomeoneToIgnore merged commit e1a5d29 into zed-industries:main Sep 8, 2025
21 checks passed

RemcoSmitsDev mentioned this pull request Sep 8, 2025

markdown: Add support for HTML styling elements #37765

Draft

SomeoneToIgnore added a commit that referenced this pull request Sep 10, 2025

Revert "markdown: Add support for inline HTML img tags inside text (#…

44cb7f2

…37264)" This reverts commit e1a5d29.

SomeoneToIgnore mentioned this pull request Sep 10, 2025

Revert "markdown: Add support for inline HTML img tags inside text (#37264)" #37893

Merged

RemcoSmitsDev mentioned this pull request Sep 13, 2025

markdown: Add Support for HTML img tags in text #38107

Merged

markdown: Add support for inline HTML img tags inside text #37264

markdown: Add support for inline HTML img tags inside text #37264

Uh oh!

Conversation

RemcoSmitsDev commented Aug 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RemcoSmitsDev commented Aug 31, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RemcoSmitsDev commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RemcoSmitsDev commented Sep 3, 2025

Uh oh!

huacnlee commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RemcoSmitsDev commented Sep 4, 2025

Uh oh!

huacnlee commented Sep 4, 2025

Uh oh!

RemcoSmitsDev commented Sep 4, 2025

Uh oh!

RemcoSmitsDev Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

RemcoSmitsDev Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

SomeoneToIgnore left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

RemcoSmitsDev commented Sep 8, 2025

Uh oh!

huacnlee commented Sep 8, 2025

Expected

Now merged in main

Uh oh!

SomeoneToIgnore commented Sep 10, 2025

Uh oh!

RemcoSmitsDev commented Sep 12, 2025

Uh oh!

SomeoneToIgnore commented Sep 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

markdown: Add support for inline HTML `img` tags inside text #37264

markdown: Add support for inline HTML `img` tags inside text #37264

RemcoSmitsDev commented Aug 31, 2025 •

edited

Loading

RemcoSmitsDev commented Sep 3, 2025 •

edited

Loading

huacnlee commented Sep 4, 2025 •

edited

Loading