multiplatform-markdown-renderer

multiplatform-markdown-renderer copied to clipboard

About this issue

Hello! When trying to render markdown, images do not show. However, if they are linked, clicking on the empty space where they should be opens the link

Details

• [x] Used library version 0.13.0
• [x] Used platform Android, via ComposeView
• [ ] Used support library version
• [x] Used gradle build tools version 8.3.1
• [x] Used tooling / Android Studio version Iguana 2023.2.1
• [ ] Other used libraries, potential conflicting libraries

Checklist

• [x] Searched for similar issues
• [x] Checked out the sample application
• [x] Read the README
• [x] Checked out the CHANGELOG
• [x] Read the FAQ
• [x] Checked out the MIGRATION GUIDE

Can you please provide some additional details, like sample code to reproduce this, can you reproduce this in the sample app? (Which has images loading as well)?

The app is proprietary and in closed alpha so I'm afraid i cannot show details, but the general gist is:

1. Load readme text from an api
2. Decode text (encoded using a proprietary format, but confirmed to be the same client and server side once decoded)
3. Render using the Mardown() composable in a ComposeView, which has markdownColor and markdownTypography set as closely to our app theme as possible (which is using google's material library and themes)

Some things worth noting:

• The images are proxied through cloudflare for optimization, and cloudflare provides webp and avif when it detects support. I'm not sure how this library loads images, but it shouldn't probably trigger that anyway
• Some images are SVG as well (think shields.io)
• We use cronet for okhttp, and have HTTPUrlConnection configured to use cronet as well
• The app is otherwise View based (and let me tell you, getting compose to play nice in a View based app, even with things like ComposeView, is lots of fun)

I'm not sure if there's anything else I can offer, as this library does not seem to do any logging I really cannot tell if it is even trying to load the images at all.

Here's an example element:

[<img src="https://production-api.androidacy.com/cdn-cgi/image/q=80,dpr=1,f=auto,metadata=none,onerror=redirect/https://img.shields.io/badge/XDA--Developers-%23AC6E2F.svg?style=flat&logo=XDA-Developers&logoColor=white" class="img-fluid rounded m-1" alt="XDA-Developers" loading="lazy">](https://forum.xda-developers.com/android/software/bromite-magisk-module-t3936964)

Also worthy of noting, https://github.com/noties/Markwon has no issues with these images.

Here's an example element:

[<img src="https://production-api.androidacy.com/cdn-cgi/image/q=80,dpr=1,f=auto,metadata=none,onerror=redirect/https://img.shields.io/badge/XDA--Developers-%23AC6E2F.svg?style=flat&logo=XDA-Developers&logoColor=white" class="img-fluid rounded m-1" alt="XDA-Developers" loading="lazy">](https://forum.xda-developers.com/android/software/bromite-magisk-module-t3936964)

After some digging, I've found a couple things:

• Specifically, this image link format does not work. As noted above, other implementations have no problem with this format. (specifically, it will not even try to render html <img> elements)
• SVG images still do not work with the ![][] format, resulting in the following log message. Note the OpenGL lines, the other lines are just for context:

16:49:30.065 Remote....       D  Setting markdown content
16:49:30.083 OpenGLRenderer   D  --- Failed to create image decoder with message 'unimplemented'
16:49:30.083 OpenGLRenderer   D  --- Failed to create image decoder with message 'unimplemented'
16:49:30.083 OpenGLRenderer   D  --- Failed to create image decoder with message 'unimplemented'
16:49:30.083 OpenGLRenderer   D  --- Failed to create image decoder with message 'unimplemented'
16:49:30.084 OpenGLRenderer   D  --- Failed to create image decoder with message 'unimplemented'
16:49:30.084 OpenGLRenderer   D  --- Failed to create image decoder with message 'unimplemented'
16:49:30.106 Remote........   D  Markdown content set

• When encountering an error loading images, this library just doesn't show them, instead of logging any error to give insight as to why

Let us know if you need anything else @mikepenz

Looking at the parsed result, it shows up as HTML_TAG type. At the I do not plan to add HTML support to this project.

You might be able to add support for these by implementing your own custom component which can handle this sort of tag.

Looking at the parsed result, it shows up as `HTML_TAG` type. At the I do not plan to add HTML support to this project.

You might be able to add support for these by implementing your own custom component which can handle this sort of tag.

It's very common, especially with GitHub, to use <img> tags in image links. We don't necessarily need full HTML support, as our API strips out most html tags except for a whitelist (like <p, <code> and similiar) but i think <img> support or an otherwise limited set of html support (such is supported by default in i.e. commonmark) would be very beneficial for everyone 😉