Is your feature request related to a problem? Please describe.
When EnrichedMarkdownText is placed in a container that sizes to its content (auto width / "hug", e.g. a chat bubble that has a maxWidth but no fixed width), block-level elements collapse: blockquotes and bullet/ordered lists wrap after only a few characters (roughly one short word per line), even though there's plenty of horizontal room.
Plain paragraphs work correctly in the same container — they report a sensible intrinsic width and wrap at the available width. Only block elements collapse. Headings are also fine.
It appears the component reports a very small intrinsic content width for block elements, so a content-hugging parent shrinks the whole view down to that tiny width, and the block then wraps within it. The actual layout is fine when a width is available (see below) — it's the intrinsic-size measurement of blocks that seems off.
Describe the solution you'd like
EnrichedMarkdownText should report an intrinsic content width for block elements (blockquotes, lists) that reflects their real content — i.e. the width of their longest line, the same way paragraphs are measured — so they lay out and wrap correctly inside content-sized/hugging containers without the app having to force a width.
In short: blocks should measure like paragraphs, so EnrichedMarkdownText "just works" in an auto-width parent.
Describe alternatives you've considered
Forcing a fixed/definite width on the container (or on containerStyle): fixes block wrapping, but then every message renders at that fixed width and can no longer hug its content — undesirable for short plain-text messages.
A fixed-width invisible spacer sibling: adding a zero-height View with an explicit width next to the EnrichedMarkdownText forces the parent wide, and blocks then wrap correctly. This confirms the layout works when a width is present — but it requires the app to (a) detect which messages contain block content and (b) hardcode a width, and it forfeits content-hugging for those messages.
containerStyle={{ width: "100%" }}: only helps when an ancestor already has a definite width; in a hugging parent it resolves to the collapsed width and doesn't help.
All of these are app-side workarounds for what looks like an intrinsic-measurement issue in the component.
Additional context
Library version: react-native-enriched-markdown@0.7.3
Platform: iOS (New Architecture)
Minimal repro — render this inside a container that hugs its content (auto width, e.g. alignSelf: "flex-start" with a maxWidth), which is typical for chat bubbles:
<EnrichedMarkdownText markdown={"> This is a normal quote with several words to see where it wraps"} />
Observed: the quote wraps after ~a few characters instead of using the available width. Same for:
<EnrichedMarkdownText markdown={"- item one with a fair amount of text\n- item two with a fair amount of text"} />
Adding a fixed-width child (e.g. an image) or a definite width to the container makes the same content wrap correctly, which is why this looks like an intrinsic-width measurement problem for block elements specifically. Plain paragraphs and headings in the same container are unaffected.
It is also observable that numbered lists have marginLeft applied, but bullet lists do not get this applied to them.
With a regex capturing lists and blockquote, to re-create what I would expect.
What is happening currently
Is your feature request related to a problem? Please describe.
When EnrichedMarkdownText is placed in a container that sizes to its content (auto width / "hug", e.g. a chat bubble that has a maxWidth but no fixed width), block-level elements collapse: blockquotes and bullet/ordered lists wrap after only a few characters (roughly one short word per line), even though there's plenty of horizontal room.
Plain paragraphs work correctly in the same container — they report a sensible intrinsic width and wrap at the available width. Only block elements collapse. Headings are also fine.
It appears the component reports a very small intrinsic content width for block elements, so a content-hugging parent shrinks the whole view down to that tiny width, and the block then wraps within it. The actual layout is fine when a width is available (see below) — it's the intrinsic-size measurement of blocks that seems off.
Describe the solution you'd like
EnrichedMarkdownText should report an intrinsic content width for block elements (blockquotes, lists) that reflects their real content — i.e. the width of their longest line, the same way paragraphs are measured — so they lay out and wrap correctly inside content-sized/hugging containers without the app having to force a width.
In short: blocks should measure like paragraphs, so EnrichedMarkdownText "just works" in an auto-width parent.
Describe alternatives you've considered
Forcing a fixed/definite width on the container (or on containerStyle): fixes block wrapping, but then every message renders at that fixed width and can no longer hug its content — undesirable for short plain-text messages.
A fixed-width invisible spacer sibling: adding a zero-height View with an explicit width next to the EnrichedMarkdownText forces the parent wide, and blocks then wrap correctly. This confirms the layout works when a width is present — but it requires the app to (a) detect which messages contain block content and (b) hardcode a width, and it forfeits content-hugging for those messages.
containerStyle={{ width: "100%" }}: only helps when an ancestor already has a definite width; in a hugging parent it resolves to the collapsed width and doesn't help.
All of these are app-side workarounds for what looks like an intrinsic-measurement issue in the component.
Additional context
Library version: react-native-enriched-markdown@0.7.3
Platform: iOS (New Architecture)
Minimal repro — render this inside a container that hugs its content (auto width, e.g. alignSelf: "flex-start" with a maxWidth), which is typical for chat bubbles:
<EnrichedMarkdownText markdown={"> This is a normal quote with several words to see where it wraps"} />
Observed: the quote wraps after ~a few characters instead of using the available width. Same for:
<EnrichedMarkdownText markdown={"- item one with a fair amount of text\n- item two with a fair amount of text"} />
Adding a fixed-width child (e.g. an image) or a definite width to the container makes the same content wrap correctly, which is why this looks like an intrinsic-width measurement problem for block elements specifically. Plain paragraphs and headings in the same container are unaffected.
It is also observable that numbered lists have marginLeft applied, but bullet lists do not get this applied to them.
With a regex capturing lists and blockquote, to re-create what I would expect.
What is happening currently
