react-native-jet-markdown 0.2.2 → 0.2.3-beta.1

package/JetMarkdown.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/alizahid/react-native-jet-markdown.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/alizahid/react-native-jet-markdown.git", :tag => "v#{s.version}" }
 
   # Headers are deliberately NOT in source_files. Xcode's project-wide
   # header maps index every pod target's headers BY BASENAME, so adding

package/README.md

@@ -33,6 +33,8 @@ cd ios && pod install
 
 Requires React Native 0.86+ with the New Architecture (Fabric).
 
+> **Android support is experimental.** The Android renderer implements the same feature set as iOS, but it has had far less real-world use. Expect rough edges and please [report](https://github.com/alizahid/react-native-jet-markdown/issues) anything that renders differently from iOS.
+
 ## Usage
 
 ```tsx
@@ -71,20 +73,29 @@ const styles: MarkdownStyles = mergeStyles({
 | Prop | Type | Description |
 | --- | --- | --- |
 | `markdown` | `string` | The markdown source. |
-| `style` | `MarkdownContainerStyle` | Main container style: `backgroundColor`, `padding`/`padding{Left,Right,Top,Bottom}`, `gap` (spacing between blocks), plus base text styles (`fontSize`, `fontWeight`, `fontFamily`, `color`, `fontVariant`, `textDecoration*`) that cascade into every text element unless overridden per-element via `styles`. Element builtins survive the cascade: heading sizes/weight stay unless `headings.hN` overrides, and code blocks keep their monospace font unless `codeBlock` overrides. For outer layout (margin, width, flex), wrap the viewer in a `View`. |
-| `styles` | `MarkdownStyles` | Per-element styles (below). Omitted = fully plain output (no colors, boxes, heading sizes — only bold/italic runs, monospace code, list markers, and the spoiler cover). Pass the exported `defaultStyles` for the classic look, or `mergeStyles(overrides)` for defaults + your changes. Hoist to module scope or memoize. |
-| `images` | `{ url, width, height }[]` | Pre-sizing data. Listed images lay out at their final size immediately — zero layout shift. Unlisted images render a styled full-width, 200pt-tall placeholder, then snap to their real aspect once loaded. Loading runs on SDWebImage (iOS) and Glide (Android) — the same cores expo-image uses — with memory + disk caches, request dedupe, and animated GIF playback (plus APNG on iOS). |
+| `style` | `MarkdownContainerStyle` | Container box (`backgroundColor`, `padding*`, `gap`) plus base text styles that cascade into every element. See [Container style](#container-style). |
+| `styles` | `MarkdownStyles` | Per-element styles. See [Styling](#styling). Hoist to module scope or memoize. |
+| `images` | `{ url, width, height }[]` | Pre-sizing data. Listed images lay out at their final size immediately (zero layout shift); unlisted ones render a full-width, 200pt-tall placeholder and snap to their real aspect once loaded. |
+| `allowFontScaling` | `boolean` | Scale all text, including `lineHeight`, with the system font size setting. Default `true`. |
 | `onLinkPress` | `({ url }) => void` | Link or mention tapped. Mentions arrive with their scheme (e.g. `users://ali`). |
 | `onLinkLongPress` | `({ url }) => void` | Link long-pressed. |
 | `onImagePress` | `({ url, x, y, width, height }) => void` | Image tapped. `width`/`height` are the rendered size and `x`/`y` the position relative to the screen (dp) — everything a lightbox needs for a zoom-from-thumbnail transition. |
 
 ## Styling
 
-The viewer ships **unstyled by default**. Two exports cover the common cases:
+The viewer ships **unstyled by default**: with no `styles` prop the output is plain text (only bold/italic runs, monospace code, list markers, and the spoiler cover survive). Two exports cover the common cases:
 
 - `defaultStyles` — a plain `MarkdownStyles` object with the classic markdown look (heading scale, blue links, code boxes, quote bar, table separators). It's just data: spread it, fork it, or use it as a reference.
 - `mergeStyles(overrides)` — deep-merges your overrides into `defaultStyles` (element sections merge key-by-key, heading levels individually).
 
+### Container style
+
+The `style` prop styles the container itself: `backgroundColor`, `padding` (+ `paddingHorizontal`/`paddingVertical` and per-side), and `gap` (spacing between blocks; wins over `styles.gap`). Text keys on it (`fontSize`, `fontWeight`, `fontFamily`, `color`, `lineHeight`, `fontVariant`, `textDecoration*`) are the base of the cascade: every element inherits them unless its own section overrides. Element builtins survive the cascade — heading sizes and weights stay unless `headings.hN` overrides, and code keeps its monospace font unless `codeBlock` overrides.
+
+All of these are measured natively. For outer layout (margin, width, flex), wrap the viewer in a `View`.
+
+### Element styles
+
 Two shared shapes compose every element style:
 
 **Text** — `fontSize`, `fontWeight`, `fontFamily`, `color`, `backgroundColor` (run highlight), `fontVariant`, `lineHeight`, `textDecorationColor`, `textDecorationLine`, `textDecorationStyle`
@@ -125,6 +136,10 @@ Each column gets its natural (unwrapped) width, clamped to `[minColumnWidth, max
 
 Mentions are plain markdown links with custom schemes — `[@ali](users://ali)`, `[#general](channels://general)` — classified by the `mention.variants` regexes and styled accordingly. Presses arrive through `onLinkPress`; branch on the URL scheme.
 
+### Images
+
+A paragraph containing only an image renders as a block image, aspect-fit to the container width. Pass `images` to pre-size known images and avoid layout shift. Loading runs on SDWebImage (iOS) and Glide (Android) — the same cores expo-image uses — with memory + disk caches, request dedupe, and animated GIF playback (plus APNG on iOS).
+
 ## Using in lists
 
 Rendering hundreds of viewers in FlatList / FlashList / LegendList is a first-class use case:
@@ -161,37 +176,23 @@ You may notice styles ship natively as one `stylesJson` string instead of a stru
 ## Platform notes & limitations
 
 - New Architecture (Fabric) only; React Native 0.86+.
+- Android support is experimental; iOS is the reference implementation.
 - `textDecorationStyle`/`textDecorationColor` render fully on iOS; Android draws plain underline/strikethrough.
 - `borderCurve: 'continuous'` is iOS-only.
 - `fontVariant` supports `tabular-nums`, `proportional-nums`, `oldstyle-nums`, `lining-nums`, `small-caps` (font support required).
-- `allowFontScaling` (default `true`) scales all text — including `lineHeight` — with the system font size setting.
 - Spoilers and inline formatting inside link labels stay literal; spoilers inside table cells are unsupported (the `|` delimiter conflicts).
 - Code blocks render plain monospace (no syntax highlighting).
+- The viewer fills the width it is given and sizes its own height. Under an unconstrained width (a horizontal `ScrollView`, `alignSelf: 'flex-start'`) it has nothing to wrap against and renders empty — give it a definite width.
 
 ## Sponsors
 
-Development of react-native-jet-markdown is supported by:
-
-<table>
-  <tr>
-    <td align="center" width="200">
-      <a href="https://duet.so">
-        <img alt="Duet" src="https://github.com/alizahid/react-native-jet-markdown/blob/main/.github/duet.png?raw=true" width="96"><br>
-        <b>Duet</b>
-      </a>
-      <br>
-      <sub>Your AI coworker that runs your business 24/7</sub>
-    </td>
-    <td align="center" width="200">
-      <a href="https://acorn.blue">
-        <img alt="Acorn" src="https://github.com/alizahid/react-native-jet-markdown/blob/main/.github/acorn.png?raw=true" width="96"><br>
-        <b>Acorn</b>
-      </a>
-      <br>
-      <sub>Reddit for mobile</sub>
-    </td>
-  </tr>
-</table>
+<p align="center">
+  <a href="https://acorn.blue"><img alt="Acorn" src="https://acorn.blue/images/acorn.png" width="96"></a>
+</p>
+
+<p align="center">
+  Built for and sponsored by <a href="https://acorn.blue">Acorn</a>, a Reddit client for iOS.
+</p>
 
 ## License
 

package/android/src/main/java/com/jetmarkdown/JetMarkdownView.kt

@@ -10,6 +10,7 @@ import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.Event
 import com.jetmarkdown.render.ContentCache
+import com.jetmarkdown.render.RenderedContent
 import com.jetmarkdown.style.StyleConfig
 import com.jetmarkdown.views.BlockStackView
 import com.jetmarkdown.views.MarkdownHost
@@ -27,12 +28,14 @@ class JetMarkdownView(context: Context) : ViewGroup(context), MarkdownHost {
     set(value) {
       if (field != value) {
         field = value
-        boundKey = null
+        boundLayout = null
         requestLayout()
       }
     }
-  private var boundKey: List<Any>? = null
-  private var boundWidth: Int = 0
+  // Layouts are cached per (content, width, image sizes), and content per
+  // (markdown, styles, font scale, appearance): identity says whether the
+  // bound view tree is still current.
+  private var boundLayout: RenderedContent.WidthLayout? = null
   private val stack = BlockStackView(context)
 
   /** url -> [w, h] dp: from the images prop (wins) and loaded bitmaps. */
@@ -53,8 +56,7 @@ class JetMarkdownView(context: Context) : ViewGroup(context), MarkdownHost {
     stylesJson = ""
     allowFontScaling = true
     stateWrapper = null
-    boundKey = null
-    boundWidth = 0
+    boundLayout = null
     propImageSizes.clear()
     loadedImageSizes.clear()
     revealedSpoilers.clear()
@@ -200,9 +202,9 @@ class JetMarkdownView(context: Context) : ViewGroup(context), MarkdownHost {
     val paddingRightPx = (styles.paddingRight * density).toInt()
     val paddingTopPx = (styles.paddingTop * density).toInt()
     val contentWidthPx = (r - l) - paddingLeftPx - paddingRightPx
-    if (contentWidthPx <= 0 || markdown.isEmpty()) {
+    if (contentWidthPx <= 0) {
       stack.setBlocks(emptyList(), 0f)
-      boundKey = null
+      boundLayout = null
       return
     }
 
@@ -210,10 +212,8 @@ class JetMarkdownView(context: Context) : ViewGroup(context), MarkdownHost {
     val imageSizes = mergedImageSizes()
     val layout = content.layoutFor(contentWidthPx, imageSizes)
 
-    val key = listOf(markdown, stylesJson, imageSizes.hashCode(), fontScale)
-    if (boundKey != key || boundWidth != contentWidthPx) {
-      boundKey = key
-      boundWidth = contentWidthPx
+    if (layout !== boundLayout) {
+      boundLayout = layout
       stack.setBlocks(layout.measured, content.gap)
     }
 

package/android/src/main/java/com/jetmarkdown/views/BlockStackView.kt

@@ -17,45 +17,63 @@ class BlockStackView(context: Context) : ViewGroup(context) {
 
   var host: MarkdownHost? = null
 
-  private fun unbindImages(group: android.view.ViewGroup) {
-    for (index in 0 until group.childCount) {
-      when (val child = group.getChildAt(index)) {
-        is MarkdownImageView -> child.unbind()
-        is android.view.ViewGroup -> unbindImages(child)
-      }
+  // Discard hook for views dropped for good: stop in-flight image requests
+  // from delivering into a recycled host.
+  private fun unbindImages(view: View) {
+    when (view) {
+      is MarkdownImageView -> view.unbind()
+      is ViewGroup -> for (index in 0 until view.childCount) unbindImages(view.getChildAt(index))
     }
   }
 
+  /**
+   * Rebinds in place: a child of the right kind at the same index is reused,
+   * anything else is replaced. List recycling rebinds whole trees, so the
+   * common case (same block kinds, different content) allocates nothing.
+   */
   fun setBlocks(blocks: List<MeasuredBlock>, gap: Float) {
-    unbindImages(this)
     measured = blocks
     gapPx = gap
-    removeAllViews()
-    for (block in blocks) {
-      addView(createView(block))
+    blocks.forEachIndexed { index, block ->
+      val old = getChildAt(index)
+      val view = bindView(old, block)
+      if (view !== old) {
+        if (old != null) {
+          unbindImages(old)
+          removeViewAt(index)
+        }
+        addView(view, index)
+      }
+    }
+    while (childCount > blocks.size) {
+      val extra = getChildAt(childCount - 1)
+      unbindImages(extra)
+      removeViewAt(childCount - 1)
     }
     requestLayout()
   }
 
-  private fun createView(measuredBlock: MeasuredBlock): View {
+  private fun bindView(old: View?, measuredBlock: MeasuredBlock): View {
     return when (val block = measuredBlock.block) {
-      is Block.Text -> BlockTextView(context).apply {
+      is Block.Text -> (old as? BlockTextView ?: BlockTextView(context)).apply {
         this.host = this@BlockStackView.host
         setBlock(block)
         measuredBlock.textLayout?.let(::setTextLayout)
       }
-      is Block.Code -> CodeBlockView(context).apply { bind(measuredBlock, block) }
-      is Block.Quote -> QuoteView(context).apply {
+      is Block.Code -> (old as? CodeBlockView ?: CodeBlockView(context)).apply {
+        bind(measuredBlock, block)
+      }
+      is Block.Quote -> (old as? QuoteView ?: QuoteView(context)).apply {
         bind(measuredBlock, block, gapPx, this@BlockStackView.host)
       }
-      is Block.ListBlock -> ListBlockView(context).apply {
+      is Block.ListBlock -> (old as? ListBlockView ?: ListBlockView(context)).apply {
         bind(measuredBlock, block, gapPx, this@BlockStackView.host)
       }
-      is Block.Divider -> DividerView(context).apply { color = block.color }
-      is Block.Table -> TableBlockView(context).apply {
+      is Block.Divider -> (old as? DividerView ?: DividerView(context)).apply { color = block.color }
+      is Block.Table -> (old as? TableBlockView ?: TableBlockView(context)).apply {
         bind(measuredBlock, block, this@BlockStackView.host)
       }
-      is Block.Image -> MarkdownImageView(context).apply {
+      is Block.Image -> (old as? MarkdownImageView ?: MarkdownImageView(context)).apply {
         this.host = this@BlockStackView.host
         bind(block)
       }
@@ -228,13 +246,22 @@ class ListBlockView(context: Context) : ViewGroup(context) {
     measured = measuredBlock
     block = list
     gapPx = gap
-    removeAllViews()
+    // Children are (marker, content) pairs; grow/shrink the pair list, then
+    // rebind every pair in place.
+    val needed = measuredBlock.markerLayouts.size * 2
+    while (childCount > needed) {
+      removeViewAt(childCount - 1)
+    }
+    while (childCount < needed) {
+      addView(BlockTextView(context))
+      addView(BlockStackView(context))
+    }
     measuredBlock.markerLayouts.forEachIndexed { index, marker ->
-      addView(BlockTextView(context).apply { setTextLayout(marker) })
-      addView(BlockStackView(context).apply {
+      (getChildAt(index * 2) as BlockTextView).setTextLayout(marker)
+      (getChildAt(index * 2 + 1) as BlockStackView).apply {
         this.host = host
         setBlocks(measuredBlock.rowContents[index], gap)
-      })
+      }
     }
     requestLayout()
   }

package/android/src/main/java/com/jetmarkdown/views/BlockTextView.kt

@@ -54,6 +54,8 @@ class BlockTextView(context: Context) : View(context) {
 
   fun setBlock(block: Block.Text) {
     textBlock = block
+    // Spoiler styling may change without the layout changing.
+    invalidate()
   }
 
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

package/android/src/main/java/com/jetmarkdown/views/TableBlockView.kt

@@ -74,13 +74,21 @@ class TableGridView(context: Context) : ViewGroup(context) {
   fun bind(measuredBlock: MeasuredBlock, table: Block.Table, host: MarkdownHost? = null) {
     measured = measuredBlock
     block = table
-    removeAllViews()
+    // One text view per cell, row-major; grow/shrink then rebind in place.
+    val needed = measuredBlock.cellLayouts.sumOf { it.size }
+    while (childCount > needed) {
+      removeViewAt(childCount - 1)
+    }
+    while (childCount < needed) {
+      addView(BlockTextView(context))
+    }
+    var index = 0
     for (row in measuredBlock.cellLayouts) {
       for (cell in row) {
-        addView(BlockTextView(context).apply {
+        (getChildAt(index++) as BlockTextView).apply {
           this.host = host
           setTextLayout(cell)
-        })
+        }
       }
     }
     invalidate()

package/cpp/core/InlineExtensions.cpp

@@ -278,8 +278,8 @@ void superscriptPass(Node* parent, AstArena& arena) {
 }
 
 void process(Node* node, AstArena& arena) {
-  if (node->type == NodeType::Link || node->type == NodeType::CodeBlock ||
-      node->type == NodeType::InlineCode || node->type == NodeType::Image) {
+  if (node->type == NodeType::CodeBlock || node->type == NodeType::InlineCode ||
+      node->type == NodeType::Image) {
     return;
   }
   if (!node->children.empty()) {

package/cpp/core/Parser.cpp

@@ -319,6 +319,11 @@ int onEnterSpan(MD_SPANTYPE type, void* detail, void* userdata) {
       auto* d = static_cast<MD_SPAN_A_DETAIL*>(detail);
       Node* node = state->push(NodeType::Link);
       node->url = attributeToString(d->href);
+      // md4c (patched) lets Reddit-style spaces through in destinations;
+      // encode them so the URL is openable as-is.
+      for (size_t i = 0; (i = node->url.find(' ', i)) != std::string::npos; i += 3) {
+        node->url.replace(i, 1, "%20");
+      }
       break;
     }
     case MD_SPAN_IMG: {
@@ -443,7 +448,8 @@ std::unique_ptr<MarkdownDocument> parseMarkdown(const std::string& markdown) {
 
   MD_PARSER parser = {};
   parser.abi_version = 0;
-  parser.flags = MD_FLAG_TABLES | MD_FLAG_PERMISSIVEAUTOLINKS | MD_FLAG_NOHTML;
+  parser.flags = MD_FLAG_TABLES | MD_FLAG_PERMISSIVEAUTOLINKS | MD_FLAG_NOHTML |
+      MD_FLAG_PERMISSIVEATXHEADERS; // Reddit accepts "###Heading"
   parser.enter_block = onEnterBlock;
   parser.leave_block = onLeaveBlock;
   parser.enter_span = onEnterSpan;

package/cpp/md4c/md4c.c

@@ -2055,9 +2055,22 @@ md_is_link_destination_B(MD_CTX* ctx, OFF beg, OFF max_end, OFF* p_end,
             continue;
         }
 
-        if(ISWHITESPACE(off) || ISCNTRL(off))
+        if(ISCNTRL(off))
             break;
 
+        /* JETMARKDOWN PATCH: Reddit (snudown) allows spaces inside link
+         * destinations. Whitespace ends the destination only when what
+         * follows is a title opener, the closing ')' or the end. */
+        if(ISWHITESPACE(off)) {
+            OFF tmp = off;
+            while(tmp < max_end  &&  ISWHITESPACE(tmp))
+                tmp++;
+            if(tmp >= max_end  ||  ISANYOF(tmp, _T("\"')")))
+                break;
+            off = tmp;
+            continue;
+        }
+
         /* Link destination may include balanced pairs of unescaped '(' ')'.
          * Note we limit the maximal nesting level by 32 to protect us from
          * https://github.com/jgm/cmark/issues/214 */

package/ios/JetMarkdownView.mm

@@ -41,8 +41,9 @@ static BOOL JMDIsScrollInProgress(UIView *view);
   NSString *_stylesJson;
   BOOL _allowFontScaling;
   JMDBlockStackView *_stack;
-  NSString *_boundKey;
-  CGFloat _boundWidth;
+  // Layout objects are cached per (content, width, image sizes, font
+  // scale), so identity says whether the bound view tree is still current.
+  JMDWidthLayout *_boundLayout;
   // url -> @[w, h] points: from the images prop (wins) and loaded bitmaps.
   NSMutableDictionary<NSString *, NSArray<NSNumber *> *> *_propImageSizes;
   NSMutableDictionary<NSString *, NSArray<NSNumber *> *> *_loadedImageSizes;
@@ -346,7 +347,7 @@ static void JMDSetNeedsDisplayDeep(UIView *view) {
     // Dynamic (platform) colors resolve at draw time for text, but border
     // and background colors snapshot into CGColors when blocks bind; rebind
     // so they re-resolve under the new appearance.
-    _boundKey = nil;
+    _boundLayout = nil;
     [self setNeedsLayout];
     JMDSetNeedsDisplayDeep(self);
   }
@@ -449,7 +450,7 @@ static void JMDSetNeedsDisplayDeep(UIView *view) {
   [super prepareForRecycle];
   _markdown = @"";
   _stylesJson = @"";
-  _boundKey = nil;
+  _boundLayout = nil;
   _state = nullptr;
   [_propImageSizes removeAllObjects];
   [_loadedImageSizes removeAllObjects];
@@ -463,9 +464,9 @@ static void JMDSetNeedsDisplayDeep(UIView *view) {
 
   const CGFloat contentWidth =
       self.bounds.size.width - styles.paddingLeft - styles.paddingRight;
-  if (contentWidth <= 0 || _markdown.length == 0) {
+  if (contentWidth <= 0) {
     [_stack setBlocks:@[] gap:0];
-    _boundKey = nil;
+    _boundLayout = nil;
     return;
   }
 
@@ -477,16 +478,8 @@ static void JMDSetNeedsDisplayDeep(UIView *view) {
   NSDictionary *imageSizes = [self mergedImageSizes];
   JMDWidthLayout *layout = [content layoutForWidth:contentWidth imageSizes:imageSizes];
 
-  // Full contents, not hashes: CFString samples long strings and
-  // NSDictionary.hash is the entry count — both collide.
-  NSString *key = [NSString stringWithFormat:@"%@\x1f%@\x1f%@\x1f%.3f",
-                                             _markdown,
-                                             _stylesJson,
-                                             [JMDRenderedContent keyForImageSizes:imageSizes],
-                                             fontScale];
-  if (![key isEqualToString:_boundKey] || _boundWidth != contentWidth) {
-    _boundKey = key;
-    _boundWidth = contentWidth;
+  if (layout != _boundLayout) {
+    _boundLayout = layout;
     [_stack setBlocks:layout.measured gap:content.gap];
   }
 

package/ios/measure/JMDMarkdownMeasurer.mm

@@ -12,7 +12,7 @@
                  fontScale:(CGFloat)fontScale {
   JMDStyleConfig *styles = [JMDStyleConfig configWithJson:stylesJson];
   const CGFloat contentWidth = maxWidth - styles.paddingLeft - styles.paddingRight;
-  if (contentWidth <= 0 || markdown.length == 0) {
+  if (contentWidth <= 0) {
     return 0;
   }
 

package/ios/render/JMDBlock.h

@@ -92,6 +92,13 @@ FOUNDATION_EXPORT NSAttributedStringKey const JMDRunBackgroundAttributeName;
 /// Tables: resolved column widths and per-row heights.
 @property (nonatomic, strong) NSArray<NSNumber *> *columnWidths;
 @property (nonatomic, strong) NSArray<NSNumber *> *rowHeights;
+/// TextKit stacks built at measure time (storage owns the layout manager
+/// and container); the views draw with these, so measure and draw never
+/// disagree and text is laid out once. Text/Code: textStorage. Lists:
+/// one per row. Tables: row-major cells.
+@property (nonatomic, strong, nullable) NSTextStorage *textStorage;
+@property (nonatomic, strong) NSArray<NSTextStorage *> *markerStorages;
+@property (nonatomic, strong) NSArray<NSArray<NSTextStorage *> *> *cellStorages;
 @end
 
 NS_ASSUME_NONNULL_END

package/ios/render/JMDBlock.m

@@ -21,6 +21,8 @@
     _rowContents = @[];
     _columnWidths = @[];
     _rowHeights = @[];
+    _markerStorages = @[];
+    _cellStorages = @[];
   }
   return self;
 }

package/ios/render/JMDBlockRenderer.mm

@@ -186,7 +186,7 @@ NSArray<NSDictionary *> *featureSettings(NSArray<NSString *> *variants) {
   return features;
 }
 
-UIFont *buildFont(const ResolvedAttrs &attrs) {
+UIFont *buildFontUncached(const ResolvedAttrs &attrs) {
   UIFont *base;
   if (attrs.family.length > 0) {
     UIFontDescriptor *descriptor = [UIFontDescriptor fontDescriptorWithFontAttributes:@{
@@ -228,6 +228,32 @@ UIFont *buildFont(const ResolvedAttrs &attrs) {
   return font ?: base;
 }
 
+// Descriptor matching (family + weight trait, especially for custom
+// families) costs real time and runs once per text run otherwise. UIFont is
+// immutable, NSCache is thread-safe: the layout thread and main thread share
+// one cache.
+UIFont *buildFont(const ResolvedAttrs &attrs) {
+  static NSCache<NSString *, UIFont *> *cache;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    cache = [NSCache new];
+    cache.countLimit = 256;
+  });
+  NSString *key = [NSString stringWithFormat:@"%@\x1f%.2f\x1f%ld\x1f%d\x1f%@",
+                                             attrs.family ?: @"",
+                                             attrs.fontSize,
+                                             (long)attrs.weight,
+                                             attrs.italic ? 1 : 0,
+                                             [attrs.variants componentsJoinedByString:@","] ?: @""];
+  UIFont *cached = [cache objectForKey:key];
+  if (cached != nil) {
+    return cached;
+  }
+  UIFont *font = buildFontUncached(attrs);
+  [cache setObject:font forKey:key];
+  return font;
+}
+
 NSUnderlineStyle decorationMask(NSString *style) {
   if ([style isEqualToString:@"double"]) {
     return NSUnderlineStyleDouble;

package/ios/render/JMDRenderedContent.mm

@@ -84,12 +84,13 @@
   return layout;
 }
 
-- (CGSize)textSize:(NSAttributedString *)text width:(CGFloat)width {
-  // Measured with TextKit, not NSStringDrawing: boundingRect stops at the
-  // last line's drawn descent, dropping the bottom of the final line box
-  // under a custom lineHeight. The full box keeps overlays (spoiler covers,
-  // run background chips) from being clipped at the view's bottom edge and
-  // matches how RN's <Text> and the Android renderer measure.
+// Lays text out with TextKit, not NSStringDrawing: boundingRect stops at
+// the last line's drawn descent, dropping the bottom of the final line box
+// under a custom lineHeight. The full box keeps overlays (spoiler covers,
+// run background chips) from being clipped at the view's bottom edge and
+// matches how RN's <Text> and the Android renderer measure. The returned
+// storage owns the layout manager; views draw with the same stack.
+- (NSTextStorage *)layoutText:(NSAttributedString *)text width:(CGFloat)width {
   NSTextStorage *storage = [[NSTextStorage alloc] initWithAttributedString:text];
   NSLayoutManager *layoutManager = [NSLayoutManager new];
   NSTextContainer *container = [[NSTextContainer alloc]
@@ -98,10 +99,20 @@
   [layoutManager addTextContainer:container];
   [storage addLayoutManager:layoutManager];
   [layoutManager ensureLayoutForTextContainer:container];
-  const CGRect used = [layoutManager usedRectForTextContainer:container];
+  return storage;
+}
+
+static CGSize JMDUsedSize(NSTextStorage *storage) {
+  NSLayoutManager *layoutManager = storage.layoutManagers.firstObject;
+  const CGRect used =
+      [layoutManager usedRectForTextContainer:layoutManager.textContainers.firstObject];
   return CGSizeMake(ceil(used.size.width), ceil(used.size.height));
 }
 
+- (CGSize)textSize:(NSAttributedString *)text width:(CGFloat)width {
+  return JMDUsedSize([self layoutText:text width:width]);
+}
+
 - (JMDMeasuredBlock *)measureBlock:(JMDBlock *)block
                              width:(CGFloat)width
                         imageSizes:(nullable NSDictionary<NSString *, NSArray<NSNumber *> *> *)imageSizes {
@@ -111,13 +122,17 @@
 
   switch (block.kind) {
     case JMDBlockKindText: {
-      const CGSize size = [self textSize:block.attributedText width:width];
+      NSTextStorage *storage = [self layoutText:block.attributedText width:width];
+      const CGSize size = JMDUsedSize(storage);
+      measured.textStorage = storage;
       measured.height = size.height;
       measured.textHeight = size.height;
       break;
     }
     case JMDBlockKindCode: {
-      const CGSize size = [self textSize:block.attributedText width:CGFLOAT_MAX];
+      NSTextStorage *storage = [self layoutText:block.attributedText width:CGFLOAT_MAX];
+      const CGSize size = JMDUsedSize(storage);
+      measured.textStorage = storage;
       measured.contentWidth = size.width;
       measured.textHeight = size.height;
       measured.height =
@@ -142,11 +157,14 @@
       const CGFloat contentWidth = MAX(width - contentX, 1);
       measured.contentWidth = contentWidth;
       NSMutableArray<NSNumber *> *markerHeights = [NSMutableArray new];
+      NSMutableArray<NSTextStorage *> *markerStorages = [NSMutableArray new];
       NSMutableArray<NSArray<JMDMeasuredBlock *> *> *rowContents = [NSMutableArray new];
       CGFloat height = 0;
       for (NSUInteger i = 0; i < block.rows.count; i++) {
         JMDListRow *row = block.rows[i];
-        const CGSize markerSize = [self textSize:row.marker width:block.markerWidth];
+        NSTextStorage *markerStorage = [self layoutText:row.marker width:block.markerWidth];
+        [markerStorages addObject:markerStorage];
+        const CGSize markerSize = JMDUsedSize(markerStorage);
         NSMutableArray<JMDMeasuredBlock *> *content = [NSMutableArray new];
         for (JMDBlock *child in row.content) {
           [content addObject:[self measureBlock:child width:contentWidth imageSizes:imageSizes]];
@@ -159,6 +177,7 @@
         }
       }
       measured.markerHeights = markerHeights;
+      measured.markerStorages = markerStorages;
       measured.rowContents = rowContents;
       measured.height = height;
       break;
@@ -209,6 +228,7 @@
       }
 
       NSMutableArray<NSNumber *> *rowHeights = [NSMutableArray new];
+      NSMutableArray<NSArray<NSTextStorage *> *> *cellStorages = [NSMutableArray new];
       CGFloat contentHeight = 0;
       for (JMDTableRow *row in block.tableRows) {
         JMDLayoutStyle *rowStyle = row.isHeader ? block.headerRowStyle : block.bodyRowStyle;
@@ -217,10 +237,14 @@
         const CGFloat cellPadV = pad.top + pad.bottom;
         const CGFloat rowExtra = rowStyle.borderTopWidth + rowStyle.borderBottomWidth;
         CGFloat rowHeight = 0;
+        NSMutableArray<NSTextStorage *> *rowStorages = [NSMutableArray new];
         for (NSUInteger column = 0; column < row.cells.count; column++) {
           const CGFloat cellWidth = MAX(columnWidths[column] - cellPadH, 1);
-          rowHeight = MAX(rowHeight, [self textSize:row.cells[column] width:cellWidth].height);
+          NSTextStorage *storage = [self layoutText:row.cells[column] width:cellWidth];
+          [rowStorages addObject:storage];
+          rowHeight = MAX(rowHeight, JMDUsedSize(storage).height);
         }
+        [cellStorages addObject:rowStorages];
         rowHeight += cellPadV + rowExtra;
         [rowHeights addObject:@(rowHeight)];
         contentHeight += rowHeight;
@@ -235,6 +259,7 @@
 
       measured.columnWidths = widths;
       measured.rowHeights = rowHeights;
+      measured.cellStorages = cellStorages;
       measured.contentWidth = contentWidth;
       measured.height = contentHeight + block.layoutStyle.verticalInset;
       break;