Image rendering is not using the provided component

[Azadios]

Bug Description

Image link is always parsed as a paragraph with a text containing an inline image. (If you suspect it might be a JB markdown parser bug please tell me, I will take a look)
And this library code seems to not use the provided image component for the inline image rendering (see MarkdownText).
I couldn't make any markdown text to render the provided image component (which as I understand used for standalone images within markdown, which is never actually parsed) and there is no way to provide a component for an inline image.
So the end bug is that it's impossible to configure image rendering.

Steps to Reproduce

Steps to reproduce the behavior:

1. Add this code

Markdown(
  content = "![Minion](https://octodex.github.com/images/minion.png)",
  imageTransformer = Coil3ImageTransformerImpl,
  components = markdownComponents(
    image = {
      Text(it.content)
    },
  )
)

2. Run web JS (probably reproducible on any target)
3. See the image rendered

Expected Behavior

Expected to see the content as text instead of the image as per provided image component.

Screenshots

Environment

• Library Version: 0.39.0
• Platform: Web JS
• Device: PC, Pixel 9A
• OS Version: Ubuntu 24.04.3, Android 16
• Kotlin Version: 2.3.0
• Compose Version: 1.9.3
• Coil Version: 3.2.0

Additional Context

If you're too busy I can help and contribute, but I need guidance on the proper solution here. Is it to add another component for inline images, fix JB markdown parser, both, neither but something else?

Checklist

• I have searched for similar issues (this seems different, but maybe related)
• I have checked the sample application
• I have read the README
• I have checked the CHANGELOG
• I have read the MIGRATION GUIDE

[mikepenz]

Good day @Azadios

The library has 2 methods for images. there is standalone images, and inline images. These are handled differently as inline images are part of the text itself and are not pure Composables like the standalone one.

You can see inline images being handled here: https://github.com/mikepenz/multiplatform-markdown-renderer/blob/develop/multiplatform-markdown-renderer/src/commonMain/kotlin/com/mikepenz/markdown/annotator/AnnotatedStringKtx.kt#L264

multiplatform-markdown-renderer/multiplatform-markdown-renderer/src/commonMain/kotlin/com/mikepenz/markdown/compose/elements/MarkdownText.kt

Lines 144 to 152 in b69c3c3

	inlineContent = remember(inlineContent.inlineContent, placeholderState, transformer, imageState) {
	inlineContent.inlineContent + mapOf(
	MARKDOWN_TAG_IMAGE_URL to createImageInlineTextContent(
	placeholderState,
	transformer,
	imageState
	)
	)
	},

as native inline content within the Text component.

Depending on how the markdown library parses and exposes the image, either path may be chosen.

[Azadios]

Hey @mikepenz ! Thank you for the swift response.

Yes, exactly, that what I'm wondering about. You still have to render inline images as it's done down the line here, why not provide the way to control the inline image component? At least I don't see any hard limitation from what I read, it seems like it's possible to pass user-defined component there and use it instead of hardcoding Image composable.

And a bit sideways from this library discussion, but still something you might be interested in. As I mentioned in the initial description, I couldn't find a way to make parser return a standalone image as an AST node, even when there is nothing but the image as in the example I provided. Do you suspect it might be a parser bug? If so, I can go take a look there as well.

Once again, I am willing to contribute, just please tell me if the direction is correct. Should I add a component for inline images and use it here?

[mikepenz]

That sounds reasonable! Would you be up for putting together a quick proof of concept so we can explore the options from there?

Regarding standalone image AST nodes I've never encountered one either. It's possible I just haven't figured out how to trigger that case, or perhaps it's simply not achievable with the current parser. Either way, the library was designed to handle it just in case, and also to support alternative parsing backends that might produce such nodes.

[Azadios]

Would you be up for putting together a quick proof of concept so we can explore the options from there?

Sure, will do. And I will try to take a look at JB parser as well.

[Azadios]

Hey @mikepenz , please see POC commit. It works, but I'm quite unsure how to properly go about few things

1. In the current implementation there's an imageState which propagates image state changes from the component back to the markdown text, which is ok with the current implementation, but is problematic when you separate the component.

val intrinsicSize = transformer.intrinsicSize(imageData.painter)
LaunchedEffect(intrinsicSize) {
    imageState.updateImageSize(intrinsicSize)
}

So I want your advice on fixing these:

• the default component here has no imageState to update
• the MarkdownText here has no access to imageData as it is fetched in the separated component. I moved fetching into the new component by the analogy as it is done this way with the existing Image component, but maybe that's the mistake? Shouldn't fetching logic be controlled by the provided ImageTransformer instead of being the part of the component?
• and should the end user of this library care about this logic when providing their component here?

Also I had to pass ASTNode through few places, seems ok to me, but better to review those as well.

And one last thing - I couldn't build with gradle 9.0.0, had to update to 9.1.0, I'm not sure whether this is just on my end or it should be indeed updated.

An exception occurred applying plugin request [id: 'com.mikepenz.convention.android-library']
Failed to apply plugin 'com.android.internal.version-check'.
Minimum supported Gradle version is 9.1.0. Current version is 9.0.0.
Try updating the 'distributionUrl' property in .../multiplatform-markdown-renderer/gradle/wrapper/gradle-wrapper.properties to 'gradle-9.1.0-bin.zip'.

[mikepenz]

Sorry that I haven't yet provided feedback, got busy with other things :/

[Azadios]

Sorry that I haven't yet provided feedback, got busy with other things :/

No worries at all, I understand, been busy as well lately. Though in my free time I've vibe-coded the solution above, it's still pretty hacky, but a good starting point for a discussion. Please read the description of the PR draft, I've tried to explain the placeholder resizing issue as clear as possible.

P.S. I saw you updated the gradle wrapper version, thanks, the issue above is gone now.