react-native-enriched-markdown-scaffold 0.7.4-scaffold.3 → 0.7.4-scaffold.5

package/android/src/main/java/com/swmansion/enriched/markdown/input/EnrichedMarkdownTextInputManager.kt

@@ -57,6 +57,13 @@ class EnrichedMarkdownTextInputManager :
     stateWrapper: StateWrapper?,
   ): Any? {
     view.stateWrapper = stateWrapper
+    // Fabric applies props before it hands over the state wrapper, so every layout
+    // invalidation raised during the mount transaction was dropped. Replay it now that we can
+    // actually push state — otherwise the shadow node keeps the initialMeasure() estimate,
+    // which ignores math chips, until the first keystroke.
+    if (stateWrapper != null) {
+      view.layoutManager.flushPendingInvalidation()
+    }
     return super.updateState(view, props, stateWrapper)
   }
 
@@ -69,6 +76,11 @@ class EnrichedMarkdownTextInputManager :
     view.dismissActiveMention()
     super.onDropViewInstance(view)
     view.layoutManager.release()
+    // Unreachable while view recycling is off — it needs a `setupViewRecycling()` call from this
+    // constructor *and* ReactNativeFeatureFlags.enableViewRecycling(). Kept because the flush
+    // above turns a recycled view into a view that pushes state at mount: without this, it would
+    // push into the shadow node it was dropped from.
+    view.stateWrapper = null
   }
 
   override fun measure(

package/android/src/main/java/com/swmansion/enriched/markdown/input/EnrichedMarkdownTextInputView.kt

@@ -708,8 +708,16 @@ class EnrichedMarkdownTextInputView(
       }
       invalidate()
       requestLayout()
+      // Chips only reach the text here when `defaultValue` landed before `markdownStyle`
+      // (@ReactProp order is undefined). requestLayout() cannot change a height Fabric owns —
+      // the shadow tree has to re-measure text that now carries the spans.
+      layoutManager.invalidateLayout()
     } else if (mathStyleChanged) {
       refreshAllMathChips()
+      // A math font size / padding change resizes every chip, so the measured height moves.
+      // Colour-only changes end up here too; store() then measures the same size and skips
+      // the state update.
+      layoutManager.invalidateLayout()
     }
     return changed
   }

package/android/src/main/java/com/swmansion/enriched/markdown/input/layout/InputLayoutManager.kt

@@ -8,21 +8,49 @@ class InputLayoutManager(
 ) {
   private var forceHeightRecalculationCounter = 0
 
+  /**
+   * An invalidation that arrived before `stateWrapper` existed. Fabric applies every prop
+   * (and runs `onAfterUpdateTransaction`) inside `ViewManager.updateProperties`, which runs
+   * *before* `updateState` assigns the wrapper — so the whole mount transaction invalidates
+   * into the void. Without this flag the measurement store stays empty and Yoga keeps the
+   * `initialMeasure()` approximation until the next text/prop change.
+   */
+  private var pending = false
+
   fun invalidateLayout() {
-    if (view.stateWrapper == null) return
+    val stateWrapper = view.stateWrapper
+    if (stateWrapper == null) {
+      pending = true
+      return
+    }
+    pending = false
 
     val text = view.text
     val paint = view.paint
 
+    // First call for this view measures against cachedWidth = 0 and stores a throwaway size;
+    // Yoga immediately re-measures through getMeasureById() with the real width and overwrites
+    // it. The state update below is what makes that second pass happen.
     val needUpdate = InputMeasurementStore.store(view.id, text, paint)
     if (!needUpdate) return
 
     val state = Arguments.createMap()
     state.putInt("forceHeightRecalculationCounter", forceHeightRecalculationCounter++)
-    view.stateWrapper?.updateState(state)
+    stateWrapper.updateState(state)
+  }
+
+  /**
+   * Replays an invalidation that was dropped while `stateWrapper` was null. Called once the
+   * wrapper is assigned, i.e. after every prop of the mount transaction has been applied — so
+   * the text carries its math chips and the paint carries the resolved typeface/size.
+   */
+  fun flushPendingInvalidation() {
+    if (!pending) return
+    invalidateLayout()
   }
 
   fun release() {
+    pending = false
     InputMeasurementStore.release(view.id)
   }
 }

package/android/src/main/java/com/swmansion/enriched/markdown/spans/LineHeightSpan.kt

@@ -1,6 +1,8 @@
 package com.swmansion.enriched.markdown.spans
 
 import android.graphics.Paint
+import android.text.Spanned
+import android.text.style.ReplacementSpan
 import kotlin.math.ceil
 import kotlin.math.floor
 import android.text.style.LineHeightSpan as AndroidLineHeightSpan
@@ -18,10 +20,34 @@ class LineHeightSpan(
     v: Int,
     fm: Paint.FontMetricsInt?,
   ) {
-    if (fm == null) return
+    if (fm == null || lineHeight <= 0) return
 
     val leading = lineHeight - ((-fm.ascent) + fm.descent)
+
+    // A ReplacementSpan on this line — inline math, or the placeholder MeasurementStore
+    // swaps in to measure it off the main thread — reports its own metrics from getSize().
+    // Shrinking those back down to the configured line height cuts the line box below what
+    // the span actually draws, and can drive descent negative so the next line starts above
+    // this one's baseline. Those lines are expanded only, never compressed; every other line
+    // keeps the exact clamp it had before. The lookup only runs on the rare negative-leading
+    // path, so the common case stays allocation-free.
+    if (leading <= 0 && hasSelfMeasuringSpan(text, start, end)) return
+
     fm.ascent -= ceil(leading / 2.0f).toInt()
     fm.descent += floor(leading / 2.0f).toInt()
   }
+
+  /**
+   * Images are excluded on purpose. Block images already keep this span off their range via
+   * `applyLineHeightSkippingImages`, and inline ones never touch the metrics at all, so
+   * letting them through here would change image layout instead of math layout.
+   */
+  private fun hasSelfMeasuringSpan(
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+  ): Boolean {
+    val spanned = text as? Spanned ?: return false
+    return spanned.getSpans(start, end, ReplacementSpan::class.java).any { it !is ImageSpan }
+  }
 }

package/ios/renderer/ListItemRenderer.m

@@ -109,15 +109,18 @@ NSString *const TaskIndexAttribute = @"TaskIndex";
                     style.firstLineHeadIndent = totalIndent;
                     style.headIndent = totalIndent;
 
-                    if (lineHeightConfig > 0) {
-                      style.minimumLineHeight = lineHeightConfig;
-                      style.maximumLineHeight = lineHeightConfig;
-                    }
-
                     NSMutableDictionary *attributesToApply = [metadata mutableCopy];
                     attributesToApply[NSParagraphStyleAttributeName] = style;
 
                     [output addAttributes:attributesToApply range:range];
+
+                    // Line height goes through the shared helper so list items get the same math
+                    // carve-out as paragraphs. Setting maximumLineHeight here directly would clamp
+                    // the line fragment below the height an inline math attachment draws at, and the
+                    // overflow paints over the neighbouring lines. applyLineHeight reads back the
+                    // paragraph style we just applied, so the indents above survive, and it
+                    // early-returns on a non-positive line height like the old guard did.
+                    applyLineHeight(output, range, lineHeightConfig);
                   }];
 
   if (isTask && isChecked) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-enriched-markdown-scaffold",
-  "version": "0.7.4-scaffold.3",
+  "version": "0.7.4-scaffold.5",
   "description": "Markdown Text component for React Native",
   "main": "./lib/module/index",
   "module": "./lib/module/index",