react-native-jet-markdown 0.2.1 → 0.2.3-beta.0

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

@@ -1,9 +1,9 @@
 <p align="center">
-  <img alt="react-native-jet-markdown — native markdown viewer and WYSIWYG editor for React Native" src="https://raw.githubusercontent.com/alizahid/react-native-jet-markdown/main/docs/hero.svg" width="900">
+  <img alt="react-native-jet-markdown — native markdown viewer for React Native" src="https://raw.githubusercontent.com/alizahid/react-native-jet-markdown/main/docs/hero.svg" width="900">
 </p>
 
 <p align="center">
-  Fast, fully native Markdown viewer &amp; WYSIWYG editor for React Native
+  Fast, fully native Markdown viewer for React Native
 </p>
 
 <p align="center">
@@ -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:
@@ -150,100 +165,34 @@ Numbers from the shared C++ core (Apple M-series, `-O2`; the same code runs on d
 | --- | --- | --- |
 | Parse a typical feed post | 1.5 KB mixed markdown | **35 µs** |
 | Parse a large document | 160 KB | **4.1 ms** |
-| Open a document in the editor (`editorFromMarkdown`) | 160 KB, ~6,400 style runs | **4.7 ms** |
-| Serialize the editor back to markdown | 160 KB | **5.8 ms** |
 | Serialize the full `defaultStyles` object in JS | 980 B JSON | **3 µs**, memoized |
 
-Beyond raw parsing: measurement runs on the Fabric layout thread (never on main), parse + layout results are cached and shared between measure and mount, editor keystrokes only rebuild the derived styling of the lines they touch, and markdown serialization is coalesced to once per frame. The 500-item Feed screen in the example app scrolls at 60 fps on both platforms.
+Beyond raw parsing: measurement runs on the Fabric layout thread (never on main), and parse + layout results are cached and shared between measure and mount. The 500-item Feed screen in the example app scrolls at 60 fps on both platforms.
 
 ### Why styles cross as JSON
 
 You may notice styles ship natively as one `stylesJson` string instead of a structured object. This is deliberate, not legacy: Fabric props cross via JSI either way (there is no old-bridge serialization in either design), codegen cannot express the open-keyed `mention.variants` map, and the string doubles as the cache key shared by the C++ measurer, iOS, and Android — a structured prop would need deep equality or native re-serialization to get the same caching. The cost is ~3 µs once per distinct styles object.
 
-## Editor
-
-> [!WARNING]
-> The editor is not ready for production use yet. The viewer (`JetMarkdownView`) is stable; `JetMarkdownEditor` still has known issues and its API may change. Track progress in the issue tracker before shipping it.
-
-`JetMarkdownEditor` is a WYSIWYG editor with markdown as the interchange format: no visible syntax while editing, `onChangeMarkdown` fires with serialized markdown on every edit, and `setValue`/`defaultValue`/paste parse markdown into styled content.
-
-```tsx
-import { JetMarkdownEditor, useJetMarkdownEditor } from "react-native-jet-markdown";
-
-function Compose() {
-  const editor = useJetMarkdownEditor();
-
-  return (
-    <>
-      <JetMarkdownEditor
-        mentionTriggers={["@"]}
-        onChangeMarkdown={(markdown) => save(markdown)}
-        onMentionChange={({ query }) => search(query)}
-        placeholder="Write something..."
-        ref={editor.ref}
-      />
-      <Button onPress={editor.toggleBold} title="B" />
-    </>
-  );
-}
-```
-
-### Formatting
-
-Inline marks — bold, italic, strikethrough, inline code, spoiler, superscript, subscript — toggle over the selection, or arm for the text typed next at a collapsed cursor (`toggleBold()`, `toggleItalic()`, `toggleStrikethrough()`, `toggleCode()`, `toggleSpoiler()`, `toggleSuperscript()`, `toggleSubscript()`).
-
-Blocks apply per line: `toggleHeading(1-6)`, `toggleBlockQuote()`, `toggleCodeBlock()`, `toggleUnorderedList()`, `toggleOrderedList()`. Enter continues a list, Enter on an empty item exits it, Enter after a heading returns to paragraph, and backspace at the start of a formatted line clears its block first.
-
-`onChangeState` reports the formatting at the cursor or selection (`isBold`, `headingLevel`, `isUnorderedList`, ...) for toolbar highlighting.
-
-### Links & mentions
-
-`insertLink(url, label?)` links the selection (or inserts a linked label), `removeLink()` strips it. Typing a bare `http(s)://` URL followed by a space emits `onLinkDetected` — call `insertLink` if you want it linkified.
-
-Mentions start when a `mentionTriggers` character is typed at a word start: `onMentionStart` → `onMentionChange` (with the growing query) → `onMentionEnd`. Call `insertMention(trigger, label, url)` — e.g. `("@", "ali", "users://ali")` — to replace the query with an atomic token that deletes as one unit.
-
-### Paste
-
-Paste never inserts directly. `onPaste` receives `{ text?, images?, preventDefault() }` — images are reported (never auto-inserted) with `url`, `width`, `height`. Unless you call `preventDefault()` synchronously, the pasted text is parsed as markdown and inserted styled.
-
-### Everything else
-
-`getMarkdown()` resolves the current markdown; `focus()`, `blur()`, `setSelection(start, end)`, `setValue(markdown)`, and `insertMarkdown(markdown)` do what they say. Hardware keyboards get Cmd+B / Cmd+I (iOS) and Ctrl+B / Ctrl+I (Android). The editor shares the viewer's `style` / `styles` contract — the `base`/`paragraph` cascade drives the root text and `link.color` drives links. The viewer's `gap` is not applied while editing (a text field flows line to line); drive the editing feel with the text styles themselves.
-
 ## 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 on both components.
 - 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/cpp/JniBindings.cpp

@@ -12,7 +12,6 @@
 #include <vector>
 
 #include "core/AstSerializer.h"
-#include "core/EditorRuns.h"
 #include "core/Parser.h"
 #include "react/JetMarkdownMeasurer.h"
 
@@ -87,111 +86,6 @@ Java_com_jetmarkdown_JetMarkdownNative_parse(JNIEnv* env, jclass, jbyteArray mar
   return toByteArray(env, bytes.data(), bytes.size());
 }
 
-extern "C" JNIEXPORT jbyteArray JNICALL
-Java_com_jetmarkdown_JetMarkdownNative_markdownFromEditorContent(
-    JNIEnv* env,
-    jclass,
-    jbyteArray text,
-    jintArray runs,
-    jintArray lineBlocks,
-    jintArray linkRanges,
-    jbyteArray linkUrls) {
-  std::vector<jetmarkdown::StyledRun> styledRuns;
-  if (runs != nullptr) {
-    const jsize length = env->GetArrayLength(runs);
-    std::vector<jint> values(static_cast<size_t>(length));
-    if (length > 0) {
-      env->GetIntArrayRegion(runs, 0, length, values.data());
-    }
-    for (jsize i = 0; i + 2 < length; i += 3) {
-      styledRuns.push_back(
-          {static_cast<uint32_t>(values[i]),
-           static_cast<uint32_t>(values[i + 1]),
-           static_cast<uint32_t>(values[i + 2])});
-    }
-  }
-  std::vector<jetmarkdown::EditorLine> lines;
-  if (lineBlocks != nullptr) {
-    const jsize length = env->GetArrayLength(lineBlocks);
-    std::vector<jint> values(static_cast<size_t>(length));
-    if (length > 0) {
-      env->GetIntArrayRegion(lineBlocks, 0, length, values.data());
-    }
-    for (jsize i = 0; i + 1 < length; i += 2) {
-      lines.push_back(
-          {static_cast<jetmarkdown::EditorBlockType>(values[i]),
-           static_cast<uint8_t>(values[i + 1])});
-    }
-  }
-  // Link URLs cross as one newline-joined blob (URLs cannot contain '\n').
-  std::vector<jetmarkdown::LinkRun> links;
-  if (linkRanges != nullptr) {
-    const jsize length = env->GetArrayLength(linkRanges);
-    std::vector<jint> values(static_cast<size_t>(length));
-    if (length > 0) {
-      env->GetIntArrayRegion(linkRanges, 0, length, values.data());
-    }
-    const std::string urls = toStdString(env, linkUrls);
-    size_t urlStart = 0;
-    for (jsize i = 0; i + 1 < length; i += 2) {
-      const size_t urlEnd = urls.find('\n', urlStart);
-      links.push_back(
-          {static_cast<uint32_t>(values[i]),
-           static_cast<uint32_t>(values[i + 1]),
-           urls.substr(urlStart, urlEnd == std::string::npos ? std::string::npos
-                                                             : urlEnd - urlStart)});
-      urlStart = urlEnd == std::string::npos ? urls.size() : urlEnd + 1;
-    }
-  }
-  const std::string result = jetmarkdown::markdownFromEditor(
-      toStdString(env, text), styledRuns, lines, links);
-  return toByteArray(
-      env, reinterpret_cast<const uint8_t*>(result.data()), result.size());
-}
-
-extern "C" JNIEXPORT jbyteArray JNICALL
-Java_com_jetmarkdown_JetMarkdownNative_editorFromMarkdownContent(
-    JNIEnv* env,
-    jclass,
-    jbyteArray markdown) {
-  const jetmarkdown::EditorDocument document =
-      jetmarkdown::editorFromMarkdown(toStdString(env, markdown));
-  // [int32 runCount][runCount x (start, end, flags)][int32 lineCount]
-  // [lineCount x (type, level)][utf8 text], little-endian.
-  std::vector<uint8_t> bytes;
-  bytes.reserve(
-      8 + document.runs.size() * 12 + document.lines.size() * 8 +
-      document.text.size());
-  const auto push32 = [&bytes](uint32_t value) {
-    bytes.push_back(static_cast<uint8_t>(value & 0xFF));
-    bytes.push_back(static_cast<uint8_t>((value >> 8) & 0xFF));
-    bytes.push_back(static_cast<uint8_t>((value >> 16) & 0xFF));
-    bytes.push_back(static_cast<uint8_t>((value >> 24) & 0xFF));
-  };
-  push32(static_cast<uint32_t>(document.runs.size()));
-  for (const jetmarkdown::StyledRun& run : document.runs) {
-    push32(run.start);
-    push32(run.end);
-    push32(run.flags);
-  }
-  push32(static_cast<uint32_t>(document.lines.size()));
-  for (const jetmarkdown::EditorLine& line : document.lines) {
-    push32(static_cast<uint32_t>(line.type));
-    push32(line.level);
-  }
-  push32(static_cast<uint32_t>(document.links.size()));
-  for (const jetmarkdown::LinkRun& link : document.links) {
-    push32(link.start);
-    push32(link.end);
-    push32(static_cast<uint32_t>(link.url.size()));
-  }
-  for (const jetmarkdown::LinkRun& link : document.links) {
-    bytes.insert(bytes.end(), link.url.begin(), link.url.end());
-  }
-  bytes.insert(bytes.end(), document.text.begin(), document.text.end());
-  return toByteArray(env, bytes.data(), bytes.size());
-}
-
 extern "C" JNIEXPORT void JNICALL
 Java_com_jetmarkdown_JetMarkdownNative_installMeasurer(
     JNIEnv* env,

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

@@ -29,86 +29,7 @@ object JetMarkdownNative {
   }
 
 
-  /** Decoded editor content: text, inline-mark runs, line blocks, links. */
-  class EditorContent(
-    val text: String,
-    /** Flat `[start, end, flags]` triples in UTF-16 offsets. */
-    val runs: IntArray,
-    /** Flat `[type, level]` pairs, one per text line. */
-    val lineBlocks: IntArray,
-    /** Flat `[start, end]` pairs, aligned with [linkUrls]. */
-    val linkRanges: IntArray,
-    val linkUrls: List<String>,
-  )
-
-  /**
-   * Editor: markdown from text + inline-mark runs + per-line blocks +
-   * links. Runs are flat `[start, end, flags]` triples in UTF-16 offsets
-   * (Spannable indices); lineBlocks are `[type, level]` pairs per line;
-   * links are `[start, end]` pairs with URLs joined by '\n'.
-   */
-  fun markdownFromEditor(
-    text: String,
-    runs: IntArray,
-    lineBlocks: IntArray,
-    linkRanges: IntArray = IntArray(0),
-    linkUrls: List<String> = emptyList(),
-  ): String {
-    return markdownFromEditorContent(
-      text.toByteArray(Charsets.UTF_8),
-      runs,
-      lineBlocks,
-      linkRanges,
-      linkUrls.joinToString("\n").toByteArray(Charsets.UTF_8),
-    ).toString(Charsets.UTF_8)
-  }
-
-  /**
-   * Editor: markdown parsed into editor content. The native payload is
-   * `[int32 runCount][triples][int32 lineCount][pairs][int32 linkCount]
-   * [(start, end, urlLen) triples][url bytes][utf8 text]`, little-endian.
-   */
-  fun editorFromMarkdown(markdown: String): EditorContent {
-    val bytes = editorFromMarkdownContent(markdown.toByteArray(Charsets.UTF_8))
-    val buffer = java.nio.ByteBuffer.wrap(bytes).order(java.nio.ByteOrder.LITTLE_ENDIAN)
-    val runs = IntArray(buffer.int * 3)
-    for (i in runs.indices) {
-      runs[i] = buffer.int
-    }
-    val lineBlocks = IntArray(buffer.int * 2)
-    for (i in lineBlocks.indices) {
-      lineBlocks[i] = buffer.int
-    }
-    val linkCount = buffer.int
-    val linkRanges = IntArray(linkCount * 2)
-    val urlLengths = IntArray(linkCount)
-    for (i in 0 until linkCount) {
-      linkRanges[i * 2] = buffer.int
-      linkRanges[i * 2 + 1] = buffer.int
-      urlLengths[i] = buffer.int
-    }
-    val linkUrls = ArrayList<String>(linkCount)
-    for (i in 0 until linkCount) {
-      val urlBytes = ByteArray(urlLengths[i])
-      buffer.get(urlBytes)
-      linkUrls.add(urlBytes.toString(Charsets.UTF_8))
-    }
-    val text = ByteArray(buffer.remaining())
-    buffer.get(text)
-    return EditorContent(text.toString(Charsets.UTF_8), runs, lineBlocks, linkRanges, linkUrls)
-  }
-
   @JvmStatic private external fun parse(markdown: ByteArray): ByteArray
 
-  @JvmStatic private external fun markdownFromEditorContent(
-    text: ByteArray,
-    runs: IntArray,
-    lineBlocks: IntArray,
-    linkRanges: IntArray,
-    linkUrls: ByteArray,
-  ): ByteArray
-
-  @JvmStatic private external fun editorFromMarkdownContent(markdown: ByteArray): ByteArray
-
   @JvmStatic private external fun installMeasurer(measurer: MarkdownMeasurer)
 }

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

@@ -5,7 +5,6 @@ import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
-import com.jetmarkdown.editor.JetMarkdownEditorManager
 
 class JetMarkdownViewPackage : BaseReactPackage() {
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
@@ -13,7 +12,7 @@ class JetMarkdownViewPackage : BaseReactPackage() {
     // font/color resolution must work from the very first measure. The view
     // managers re-install with the themed context on view creation.
     com.jetmarkdown.style.PlatformColorResolver.install(reactContext)
-    return listOf(JetMarkdownViewManager(), JetMarkdownEditorManager())
+    return listOf(JetMarkdownViewManager())
   }
 
   override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null

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/render/spans/MarkdownLineHeightSpan.kt

@@ -1,26 +1,15 @@
 package com.jetmarkdown.render.spans
 
 import android.graphics.Paint
-import android.text.TextPaint
 import android.text.style.LineHeightSpan
-import android.text.style.MetricAffectingSpan
 import kotlin.math.ceil
 import kotlin.math.floor
 
 /**
  * React Native's lineHeight semantics: the line box is exactly [heightPx]
- * tall with glyphs centered (mirrors RN's CustomLineHeightSpan). Extends
- * MetricAffectingSpan (a no-op there) so DynamicLayout — the editor —
- * reflows when the span is attached; plain LineHeightSpan is not an
- * UpdateLayout span.
+ * tall with glyphs centered (mirrors RN's CustomLineHeightSpan).
  */
-open class MarkdownLineHeightSpan(private val heightPx: Int) :
-  MetricAffectingSpan(),
-  LineHeightSpan {
-  override fun updateMeasureState(paint: TextPaint) = Unit
-
-  override fun updateDrawState(paint: TextPaint) = Unit
-
+class MarkdownLineHeightSpan(private val heightPx: Int) : LineHeightSpan {
   override fun chooseHeight(
     text: CharSequence,
     start: Int,

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()