React Native Enriched Markdown 1.2.0

React Native Enriched Markdown 1.2.0 released!

1.2.0 lets you draw blocks with your own React components, brings EnrichedMarkdownTextInput to the web, and adds link pills, link menus and LaTeX formulas that screen readers read as words. There are no breaking changes.

New Features

• Custom block renderers: renderers lets you draw standalone images, videos, links on their own line and code blocks with your own React components, such as a lightbox for photos, your own video player, a card for a PDF or a YouTube link, or a Mermaid diagram from a code fence. The rest of the document stays native text. (#1028, #1070)
• resolveImageSource keeps the native image but changes where it loads from, for signed URLs and images that need an auth token. Like renderers, it needs flavor="github" on iOS and Android. (#1028)
• EnrichedMarkdownTextInput now runs on the web, with bold, italic, underline, strikethrough, spoilers, headings, lists, and undo and redo. Link editing, mentions and typing shortcuts are still native-only. (#965)
• Link pills turn links into rounded chips with an icon and a label, such as a file chip or a mention with an avatar. The Markdown underneath stays a plain link. iOS and Android only. (#920, #921)
• Link menus: linkContextMenuItems shows your own actions when someone long-presses a link, picked by URL pattern. iOS 17 and later. (#923)
• linkRecognition turns plain text such as #1234, @name or a file path into links, without changing your Markdown. It works on every platform, and recognized links can be pills and have menus too. (#855)
• VoiceOver and TalkBack now read LaTeX formulas as words, like "x squared over 2", instead of raw LaTeX. Use {latex} in accessibilityLabels.math.equation to keep reading the source. (#979)
• On iOS and Android, code block headers have a line wrap toggle next to the copy button. It is on by default; hide it with enableCodeBlockWrapToggle={false}. (#1021)
• New callbacks: onTextPress reports which character was tapped, onSelectionCopy reports copied text and its format, and onLinksChange reports the links in the document. (#1031, #1125, #1088)
• With streamingAnimation and flavor="github", an image, video or link on its own line no longer shows as raw text while it streams in. It appears once its syntax is complete, and a block drawn by renderers grows into place instead of pushing the text down at once. Set mediaMode: 'hidden' in streamingConfig to hold media until the text after it arrives. (#1028, #1034)
• Also new: per-paragraph text direction on the web (#1058), md4cFlags.strikethrough for CommonMark (#1090), and the link's URL in the input's onChangeState (#883).

Documentation

Enriched Markdown has a new documentation site at docs.swmansion.com/enriched-markdown. It covers React Native and the standalone iOS and Android packages, with live examples you can edit in the browser.

Fixes & Improvements

• Images: an image that fails to load now shows its alt text instead of an empty box on iOS and Android (#1148). Inline images fit inside their square without being stretched or cropped, sit centred on the text's cap height, and scale with the font size on iOS (#1157, #1089, #1155).
• Text: character references such as & and © are no longer dropped (#1018), ordered lists size their marker column to the widest number (#1015), and copying keeps line breaks and math in table cells (#1019).
• Input: lineHeight now works for headings (#885), the input no longer flickers while it grows (#1035), and a style that spans several lines is closed on each line of the Markdown output (#1109).
• iOS: a new view shows its content in its first frame (#1139), long documents use less memory while they stream in (#1138), a back swipe can start over a code block or table scrolled to its left edge (#958), onImagePress fires for images in tables and blockquotes (#959), and VoiceOver's Headings, Links and Images rotors work with flavor="github" (#1099).
• Android: fixed crashes when the block context menu is wider than the screen (#1076), after a view is removed (#1063), and on a long press in the input after setValue (#971). Text sized to its content no longer loses its last line (#1107), text inside a FlatList stays selectable (#1135), and a chat list no longer re-measures every message while one streams in (#924).
• Web: EnrichedMarkdownText renders its Markdown in the commit that receives it, which fixes row measurement in virtualized lists (#1111).
• Build: apps that also include another copy of the md4c parser no longer fail to build (#922), codegen now runs in your app so it matches your React Native version (#1121), and in a monorepo the asset download opt-out is also read from each app's package.json (#977).

To see the full changelog, including about twenty smaller fixes, look here