[JEWEL-941] Reducing space used by images on markdown image error

[faogustavo]

• When the line contains only images, replaced the Text component with FlowRow
• Using a flow row we can skip the Paragraph component that was taking extra space

Evidences

Before	After

Release notes

⚠️ Important Changes

• If the markdown row contains only image components, it will not use a "Text" composable as the root. In that case, the root component will be a flow row

Bug fixes

• Reduce space used when images fail to load

---

Note

Renders image-only paragraphs/headings without Text using a FlowRow, hides images that fail to load via a nullable image extension, and adjusts LazyMarkdown spacing with per-item padding.

• Rendering (core):
  • Paragraphs/Headings: detect image-only content and render via RenderImages (a FlowRow), skipping Text; headings early-return when images are absent.
  • renderedImages: now maintains a mutable map and supports nullable images from extensions; removes entries on error.
  • Added RenderImages helper to lay out inline images using placeholder sizes.
• API:
  • ImageRendererExtension.renderImageContent return type is now InlineTextContent? to allow suppressing failed images.
• Images extension (Coil3):
  • Returns null on load error; tracks loading/error state; preserves original-size placeholders on success.
• Layout/spacing:
  • LazyMarkdown: switch to itemsIndexed and apply top/bottom padding per item instead of list verticalArrangement.
• Tests:
  • Updated to expect missing nodes on image load error and to handle nullable inline content.

^{Written by Cursor Bugbot for commit 63bc89f. This will update automatically on new commits. Configure here.}

[rock3r]

@faogustavo can you confirm the space under the title in the "after" screenshot is purely bottom padding of the title? I haven't looked at the code yet but it seems to me like we should not emit anything at all in the case where there is a paragraph that only contains an image that failed

[faogustavo]

@faogustavo can you confirm the space under the title in the "after" screenshot is purely bottom padding of the title? I haven't looked at the code yet but it seems to me like we should not emit anything at all in the case where there is a paragraph that only contains an image that failed

There is also an extra space from the empty line above and below the failed image. I'll check if I can "hide" that too

[rock3r]

Yeah, that's what I meant. Thanks :)

[faogustavo]

Yeah, that's what I meant. Thanks :)

I've pushed a second commit to this branch so we can discuss the solution. I'm kinda not that sure this is good enough, but I'm not able to think on other alternatives.

Let me know your thoughts and I can squash the commits later

[rock3r]

Seems like a legit implementation, I think you can squash

[rock3r]

Ready to merge

[cursor]

Bug: Spacing lost when paragraph has only failed images

When a paragraph contains only images that all fail to load, RenderImages returns early without applying the modifier, causing spacing to be lost in LazyMarkdown. The modifier contains padding for block spacing, but when images.isEmpty() triggers the early return in RenderImages, this padding is never applied. This causes the spacing between blocks to collapse when a paragraph with only failed images is present in a LazyMarkdown context.

 

[cursor]

Bug: Spacing lost when heading has only failed images

When a heading contains only images that all fail to load, the function returns early without applying the modifier, causing spacing to be lost in LazyMarkdown. The modifier contains padding for block spacing, but the early return at line 281 prevents the Column from being created, so the modifier is never applied. This causes incorrect spacing between blocks in a LazyMarkdown context.

 

[cursor]

Bug: Duplicate images not rendered in image-only blocks

When a paragraph or heading contains only images and multiple images share the same source URL, only one image is rendered instead of all of them. The renderedImages function uses a map keyed by image.source, so duplicate sources overwrite each other. When RenderImages iterates through this map, it only renders one image per unique source. For example, ![alt1](a.png) ![alt2](a.png) would render only one image instead of two. This differs from the text path where duplicate images are rendered correctly.