Add support for images in Markdown previews

[dovakin0007]

Closes #13246

Release Notes:
added image preview for markdown

mark_down_img_preview.-.Made.with.Clipchamp.mp4

Release Notes:

• Added support for images to the markdown preview

[Angelk90]

@dovakin0007 : Does it also work using the img tag?

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png" alt="Image description" width="300"/>

[dovakin0007]

@dovakin0007 : Does it also work using the img tag?

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png" alt="Image description" width="300"/>

no sir

[Angelk90]

@dovakin0007 : What is displayed in case of the alt message?

[dovakin0007]

@dovakin0007 : What is displayed in case of the alt message?

the alt text like zed gpui image doesn't have a way to display the alt text so for now I am displaying alt text directly
this text will be shown if image fails or unable to find the image in path

else we display image
interactive image needs to be added though

[dovakin0007]

I want to raise one more issue it seems like the image is not rendering in same line
like the above example any ideas and contributions will be helpful here

[mikayla-maki]

Seems like there's some test failures as well. I'm going to mark this as draft for now, once things are ready to go feel free to mark it as ready :)

As for your issues with the layout, perhaps you need to add some more styling rules on the img perhaps usingblock() (equivalent to display: block)?

[bennetbo]

I haven't looked at the PR in the detail, but I assume that we will run into the same issues I encountered in #10565.
In particular there are these two issues:

1. Gpui cannot handle images in the middle of a paragraph, I think there are two ways we can address this:

• Split up paragraph's that contain images and render each text and image as their own block (This is what I did in markdown preview: Image support #10565)
• Add support for this in gpui (seems like a lot of work though)

2. The img element needs better error handling, right now if a link is malformed or does not return an image, we fetch it over and over again. This wastes unnecessary resources and network bandwidth.

Rendering images in separate lines feels like a good enough workaround for now, but 2. definitely feels like a blocker to me.

[dovakin0007]

Seems like there's some test failures as well. I'm going to mark this as draft for now, once things are ready to go feel free to mark it as ready :)

As for your issues with the layout, perhaps you need to add some more styling rules on the img perhaps usingblock() (equivalent to display: block)?

yeah that should work. regarding the layout we have to render the image within text StyledText can't handle images for now

[dovakin0007]

I haven't looked at the PR in the detail, but I assume that we will run into the same issues I encountered in #10565. In particular there are these two issues:

1. Gpui cannot handle images in the middle of a paragraph, I think there are two ways we can address this:

• Split up paragraph's that contain images and render each text and image as their own block (This is what I did in markdown preview: Image support #10565)
• Add support for this in gpui (seems like a lot of work though)

2. The img element needs better error handling, right now if a link is malformed or does not return an image, we fetch it over and over again. This wastes unnecessary resources and network bandwidth.

Rendering images in separate lines feels like a good enough workaround for now, but 2. definitely feels like a blocker to me.

yeah I am running into the same issues that you have mentioned.

[dovakin0007]

I haven't looked at the PR in the detail, but I assume that we will run into the same issues I encountered in #10565. In particular there are these two issues:

1. Gpui cannot handle images in the middle of a paragraph, I think there are two ways we can address this:

• Split up paragraph's that contain images and render each text and image as their own block (This is what I did in markdown preview: Image support #10565)
• Add support for this in gpui (seems like a lot of work though)

2. The img element needs better error handling, right now if a link is malformed or does not return an image, we fetch it over and over again. This wastes unnecessary resources and network bandwidth.

Rendering images in separate lines feels like a good enough workaround for now, but 2. definitely feels like a blocker to me.
Maybe we can split the text into multiple blocks which will allow us to render image between text that can fix 1?

[dovakin0007]

still img() doesn't return error for bad request

[dovakin0007]

I was able to render the image within

markdown_preview_2.mp4

text

[MatinAniss]

Support for inline elements in the text system is probably the better choice if the text and inline elements needs to wrap properly. Splitting the text and images into their own blocks is just avoiding the problem that will eventually be needed to be implemented. It may be fine for now.

I've tried to implement it myself, but there are some changes and some decisions which I'm not sure what is best.

I have had a issue up to track this #10916

[dovakin0007]

Support for inline elements in the text system is probably the better choice if the text and inline elements needs to wrap properly. Splitting the text and images into their own blocks is just avoiding the problem that will eventually be needed to be implemented. It may be fine for now.

I've tried to implement it myself, but there are some changes and some decisions which I'm not sure what is best.

I have had a issue up to track this #10916

Yeah I did try to do it but I wasn't on the right track so I scrapped it then for now implemented to render image as its separate own block rather than a part of interactive text yeah you are right once interactive text supports inline images this has to be changed