react-native-enriched-markdown-scaffold 0.7.4-scaffold.1 → 0.7.4-scaffold.10

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

@@ -10,6 +10,8 @@ import com.facebook.react.uimanager.PixelUtil
 import com.facebook.yoga.YogaMeasureMode
 import com.facebook.yoga.YogaMeasureOutput
 import com.swmansion.enriched.markdown.input.formatting.InputParser
+import com.swmansion.enriched.markdown.utils.common.getBooleanOrDefault
+import com.swmansion.enriched.markdown.utils.common.getFloatOrDefault
 import java.util.concurrent.ConcurrentHashMap
 
 object InputMeasurementStore {
@@ -99,8 +101,11 @@ object InputMeasurementStore {
     // invisible characters and over-estimates the height into extra lines, until the next text
     // change forces a re-measure. Parsing first matches what the editor actually renders.
     val markdown = props?.getString("defaultValue") ?: props?.getString("placeholder") ?: "I"
-    val text = InputParser.parseToPlainTextAndRanges(markdown).plainText
-    val fontSize = props?.getDouble("fontSize")?.toFloat() ?: 16f
+    // Must read the same flag the view parses with, or the measured height and the
+    // rendered height disagree: `blockSyntax = false` keeps list markers and `#` as text.
+    val blockSyntax = props.getBooleanOrDefault("blockSyntax", true)
+    val text = InputParser.parseToPlainTextAndRanges(markdown, blockSyntax).plainText
+    val fontSize = props.getFloatOrDefault("fontSize", 16f)
     val spSize = kotlin.math.ceil(PixelUtil.toPixelFromSP(fontSize).toDouble()).toFloat()
 
     val defaultView = AppCompatEditText(context)

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

@@ -13,6 +13,7 @@ open class MathChipStyle(
   val paddingVertical: Float,
   val selectedBackgroundColor: Int?,
   val selectedBorderColor: Int?,
+  val fontWeight: String = "normal",
 ) {
   open fun isBlock(): Boolean = false
 }
@@ -28,6 +29,7 @@ class MathBlockStyle(
   paddingVertical: Float,
   selectedBackgroundColor: Int?,
   selectedBorderColor: Int?,
+  fontWeight: String = "normal",
   val marginTop: Float,
   val marginBottom: Float,
   val alignment: Layout.Alignment,
@@ -42,6 +44,7 @@ class MathBlockStyle(
     paddingVertical,
     selectedBackgroundColor,
     selectedBorderColor,
+    fontWeight,
   ) {
   override fun isBlock(): Boolean = true
 }

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/HeadingRenderer.kt

@@ -40,6 +40,7 @@ class HeadingRenderer(
         HeadingSpan(
           level,
           config.style,
+          factory.styleCache,
         ),
         start,
         end,

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

@@ -4,11 +4,14 @@ import android.annotation.SuppressLint
 import android.graphics.Typeface
 import android.text.TextPaint
 import android.text.style.MetricAffectingSpan
+import com.swmansion.enriched.markdown.renderer.SpanStyleCache
 import com.swmansion.enriched.markdown.styles.StyleConfig
+import com.swmansion.enriched.markdown.utils.text.extensions.applyColorPreserving
 
 class HeadingSpan(
   val level: Int,
   styleConfig: StyleConfig,
+  private val styleCache: SpanStyleCache,
 ) : MetricAffectingSpan() {
   private val fontSize: Float = styleConfig.headingStyles[level]!!.fontSize
   private val color: Int = styleConfig.headingStyles[level]!!.color
@@ -16,7 +19,11 @@ class HeadingSpan(
 
   override fun updateDrawState(tp: TextPaint) {
     applyHeadingStyle(tp)
-    tp.color = color
+    // Inline spans (link, code, strong/em with their own color) are attached to the range
+    // BEFORE this block span, and TextLine replays every CharacterStyle in insertion order,
+    // so an unconditional `tp.color = color` here would repaint them. Same guard used by
+    // BlockquoteSpan, BaseListSpan, CodeBlockSpan, StrongSpan and EmphasisSpan.
+    tp.applyColorPreserving(color, *styleCache.colorsToPreserve)
   }
 
   override fun updateMeasureState(tp: TextPaint) {

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/android/src/main/java/com/swmansion/enriched/markdown/styles/InlineMathStyle.kt

@@ -4,6 +4,8 @@ import com.facebook.react.bridge.ReadableMap
 
 data class InlineMathStyle(
   val color: Int,
+  val paddingVertical: Float,
+  val fontWeight: String,
 ) {
   companion object {
     fun fromReadableMap(
@@ -11,7 +13,9 @@ data class InlineMathStyle(
       parser: StyleParser,
     ): InlineMathStyle {
       val color = parser.parseColor(map, "color")
-      return InlineMathStyle(color)
+      val paddingVertical = parser.toPixelFromDIP(map.getDouble("paddingVertical").toFloat())
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      return InlineMathStyle(color, paddingVertical, fontWeight)
     }
   }
 }

package/android/src/main/java/com/swmansion/enriched/markdown/styles/MathFontWeight.kt

@@ -0,0 +1,25 @@
+package com.swmansion.enriched.markdown.styles
+
+/**
+ * Weight a formula can actually be typeset at.
+ *
+ * The style model keeps `fontWeight` as a [String], the way every other
+ * `fontWeight` prop in the codebase does, so a value like `"600"` survives as
+ * far as the renderer. This enum is the narrowing step at that last hop — see
+ * `ratexTypefaceLoader`, the only caller — so adding a third weight is a
+ * compile error at the draw site rather than a value that silently falls back
+ * to regular. Mirrors ENRMMathFontWeight.h on iOS.
+ */
+enum class MathFontWeight {
+  NORMAL,
+  BOLD,
+  ;
+
+  companion object {
+    fun fromString(value: String): MathFontWeight =
+      when (value.lowercase()) {
+        "bold" -> BOLD
+        else -> NORMAL
+      }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/MathStyle.kt

@@ -10,6 +10,7 @@ data class MathStyle(
   val marginTop: Float,
   val marginBottom: Float,
   val textAlign: String,
+  val fontWeight: String,
 ) {
   companion object {
     fun fromReadableMap(
@@ -23,7 +24,17 @@ data class MathStyle(
       val marginTop = parser.toPixelFromDIP(map.getDouble("marginTop").toFloat())
       val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
       val textAlign = parser.parseString(map, "textAlign", "center")
-      return MathStyle(fontSize, color, backgroundColor, padding, marginTop, marginBottom, textAlign)
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      return MathStyle(
+        fontSize,
+        color,
+        backgroundColor,
+        padding,
+        marginTop,
+        marginBottom,
+        textAlign,
+        fontWeight,
+      )
     }
   }
 }

package/android/src/main/java/com/swmansion/enriched/markdown/utils/common/MarkdownViewManagerUtils.kt

@@ -82,11 +82,11 @@ fun emitContextMenuItemPress(
 
 fun parseMd4cFlags(flags: ReadableMap?): Md4cFlags =
   Md4cFlags(
-    underline = flags?.getBoolean("underline") ?: false,
-    latexMath = FeatureFlags.IS_MATH_ENABLED && (flags?.getBoolean("latexMath") ?: true),
-    superscript = flags?.getBoolean("superscript") ?: false,
-    subscript = flags?.getBoolean("subscript") ?: false,
-    highlight = flags?.getBoolean("highlight") ?: false,
+    underline = flags.getBooleanOrDefault("underline", false),
+    latexMath = FeatureFlags.IS_MATH_ENABLED && flags.getBooleanOrDefault("latexMath", true),
+    superscript = flags.getBooleanOrDefault("superscript", false),
+    subscript = flags.getBooleanOrDefault("subscript", false),
+    highlight = flags.getBooleanOrDefault("highlight", false),
   )
 
 fun parseContextMenuItems(value: ReadableArray?): List<String> =
@@ -95,8 +95,8 @@ fun parseContextMenuItems(value: ReadableArray?): List<String> =
 fun parseSelectionMenuConfig(value: ReadableMap?): SelectionMenuConfig {
   if (value == null) return SelectionMenuConfig()
   return SelectionMenuConfig(
-    copyAsMarkdown = value.getBoolean("copyAsMarkdown"),
-    copyImageUrl = value.getBoolean("copyImageUrl"),
+    copyAsMarkdown = value.getBooleanOrDefault("copyAsMarkdown", true),
+    copyImageUrl = value.getBooleanOrDefault("copyImageUrl", true),
     copyLabel = value.getString("copyLabel") ?: "",
     copyAsMarkdownLabel = value.getString("copyAsMarkdownLabel") ?: "",
     copyImageUrlLabel = value.getString("copyImageUrlLabel") ?: "",

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

@@ -76,6 +76,8 @@ object MarkdownStyleParser {
       if (mathMap?.hasKey("selectedBackgroundColor") == true) mathMap.getInt("selectedBackgroundColor") else null
     val selectedBorderColor =
       if (mathMap?.hasKey("selectedBorderColor") == true) mathMap.getInt("selectedBorderColor") else null
+    val fontWeight =
+      (if (mathMap?.hasKey("fontWeight") == true) mathMap.getString("fontWeight") else null) ?: "normal"
 
     return MathChipStyle(
       color = color,
@@ -88,6 +90,7 @@ object MarkdownStyleParser {
       paddingVertical = paddingVertical,
       selectedBackgroundColor = nullIfTransparent(selectedBackgroundColor),
       selectedBorderColor = nullIfTransparent(selectedBorderColor),
+      fontWeight = fontWeight,
     )
   }
 
@@ -143,6 +146,12 @@ object MarkdownStyleParser {
       } else {
         inlineFallback.selectedBorderColor
       }
+    val fontWeight =
+      if (mathBlockMap?.hasKey("fontWeight") == true) {
+        mathBlockMap.getString("fontWeight") ?: "normal"
+      } else {
+        inlineFallback.fontWeight
+      }
     val marginTop =
       PixelUtil.toPixelFromDIP(
         if (mathBlockMap?.hasKey("marginTop") == true) mathBlockMap.getDouble("marginTop").toFloat() else 8f,
@@ -170,6 +179,7 @@ object MarkdownStyleParser {
       paddingVertical = paddingVertical,
       selectedBackgroundColor = nullIfTransparent(selectedBackgroundColor),
       selectedBorderColor = nullIfTransparent(selectedBorderColor),
+      fontWeight = fontWeight,
       marginTop = marginTop,
       marginBottom = marginBottom,
       alignment = alignment,

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/extensions/SpannableExtensions.kt

@@ -14,8 +14,16 @@ fun SpannableStringBuilder.isInlineImage(): Boolean {
   return lastChar != '\n' && lastChar != '\u200B'
 }
 
-/** Swaps MathInlineSpans for MathInlinePlaceholderSpans safe for background-thread measurement. */
-fun SpannableString.replaceMathSpansWithPlaceholders(context: Context) {
+/**
+ * Swaps MathInlineSpans for MathInlinePlaceholderSpans safe for background-thread measurement.
+ *
+ * [paddingVertical] must be the same `inlineMath.paddingVertical` (in px) the real spans were
+ * built with, or the measured line box won't match the drawn one.
+ */
+fun SpannableString.replaceMathSpansWithPlaceholders(
+  context: Context,
+  paddingVertical: Float,
+) {
   if (!FeatureFlags.IS_MATH_ENABLED) return
 
   try {
@@ -42,7 +50,7 @@ fun SpannableString.replaceMathSpansWithPlaceholders(context: Context) {
     @Suppress("UNCHECKED_CAST")
     val results = measureMethod.invoke(null, context, requests) as? List<MathMetrics> ?: return
 
-    val placeholderCtor = placeholderClass.getConstructor(MathMetrics::class.java)
+    val placeholderCtor = placeholderClass.getConstructor(MathMetrics::class.java, Float::class.javaPrimitiveType)
 
     mathSpans.forEachIndexed { i, oldSpan ->
       val metrics = results.getOrNull(i) ?: return@forEachIndexed
@@ -53,7 +61,7 @@ fun SpannableString.replaceMathSpansWithPlaceholders(context: Context) {
 
       if (start != -1 && end != -1) {
         removeSpan(oldSpan)
-        val newSpan = placeholderCtor.newInstance(metrics)
+        val newSpan = placeholderCtor.newInstance(metrics, paddingVertical)
         setSpan(newSpan, start, end, flags)
       }
     }

package/android/src/main/java/com/swmansion/enriched/markdown/views/TableContainerView.kt

@@ -456,7 +456,7 @@ class TableContainerView(
                     .apply { configure(config, context) }
                     .renderDocument(MarkdownASTNode(NodeType.Document, children = listOf(paragraph)), null, null)
                 }
-              styledText.replaceMathSpansWithPlaceholders(context)
+              styledText.replaceMathSpansWithPlaceholders(context, config.inlineMathStyle.paddingVertical)
               if (isHeader && styledText.isNotEmpty()) {
                 styledText.setSpan(HeaderTypefaceSpan(headerTypeface), 0, styledText.length, 33)
               }

package/android/src/math/java/com/swmansion/enriched/markdown/renderer/MathInlineRenderer.kt

@@ -35,6 +35,8 @@ class MathInlineRenderer(
         latex = latex,
         fontSize = blockStyle.fontSize,
         textColor = config.style.inlineMathStyle.color,
+        paddingVertical = config.style.inlineMathStyle.paddingVertical,
+        fontWeight = config.style.inlineMathStyle.fontWeight,
       )
 
     builder.setSpan(span, start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)

package/android/src/math/java/com/swmansion/enriched/markdown/spans/MathChipSpan.kt

@@ -66,7 +66,7 @@ class MathChipSpan(
           displayMode = displayMode,
           color = style.color,
         )
-      val renderer = RaTeXRenderer(displayList, style.fontSize) { RaTeXFontLoader.getTypeface(it) }
+      val renderer = RaTeXRenderer(displayList, style.fontSize, ratexTypefaceLoader(style.fontWeight))
       formulaWidth = renderer.widthPx
       formulaAscent = renderer.heightPx
       formulaDescent = renderer.depthPx

package/android/src/math/java/com/swmansion/enriched/markdown/spans/MathInlinePlaceholderSpan.kt

@@ -3,11 +3,12 @@ package com.swmansion.enriched.markdown.spans
 import android.graphics.Canvas
 import android.graphics.Paint
 import android.text.style.ReplacementSpan
-import kotlin.math.roundToInt
+import kotlin.math.ceil
 
 /** Holds pre-computed math metrics for background-thread measurement. */
 class MathInlinePlaceholderSpan(
   private val metrics: MathMetrics,
+  private val paddingVertical: Float,
 ) : ReplacementSpan() {
   override fun getSize(
     paint: Paint,
@@ -17,9 +18,12 @@ class MathInlinePlaceholderSpan(
     fm: Paint.FontMetricsInt?,
   ): Int {
     fm?.apply {
-      ascent = -metrics.ascent.roundToInt()
+      // Must stay identical to MathInlineSpan.getSize — this span stands in for it
+      // during ShadowNode measurement, so any divergence shows up as a clipped or
+      // over-tall view. Same ceil, same padding, same expression.
+      ascent = -ceil(metrics.ascent + paddingVertical).toInt()
       top = ascent
-      descent = metrics.descent.roundToInt()
+      descent = ceil(metrics.descent + paddingVertical).toInt()
       bottom = descent
     }
     return metrics.width

package/android/src/math/java/com/swmansion/enriched/markdown/spans/MathInlineSpan.kt

@@ -6,7 +6,6 @@ import android.graphics.Canvas
 import android.graphics.Paint
 import android.text.style.ReplacementSpan
 import io.ratex.RaTeXEngine
-import io.ratex.RaTeXFontLoader
 import io.ratex.RaTeXRenderer
 import kotlin.math.ceil
 
@@ -15,6 +14,8 @@ class MathInlineSpan(
   internal val latex: String,
   internal val fontSize: Float,
   private val textColor: Int,
+  private val paddingVertical: Float,
+  private val fontWeight: String = "normal",
 ) : ReplacementSpan() {
   private var cachedBitmap: Bitmap? = null
   private var cachedWidth = 0
@@ -28,7 +29,7 @@ class MathInlineSpan(
 
     try {
       val displayList = RaTeXEngine.parseBlocking(latex, displayMode = false, color = textColor)
-      val renderer = RaTeXRenderer(displayList, fontSize) { RaTeXFontLoader.getTypeface(it) }
+      val renderer = RaTeXRenderer(displayList, fontSize, ratexTypefaceLoader(fontWeight))
 
       cachedWidth = renderer.widthPx.toInt().coerceAtLeast(1)
       mathAscent = renderer.heightPx
@@ -62,10 +63,12 @@ class MathInlineSpan(
     prepareResources()
 
     fm?.apply {
-      val ascentPx = ceil(mathAscent).toInt()
-      ascent = -ascentPx
+      // Must stay identical to MathInlinePlaceholderSpan.getSize: that span measures
+      // this one off the main thread, and a box that disagrees by even a pixel either
+      // clips the formula or eats the padding this field is here to add.
+      ascent = -ceil(mathAscent + paddingVertical).toInt()
       top = ascent
-      descent = (cachedBitmap?.height ?: ceil(mathAscent + mathDescent).toInt()) - ascentPx
+      descent = ceil(mathDescent + paddingVertical).toInt()
       bottom = descent
     }
 

package/android/src/math/java/com/swmansion/enriched/markdown/spans/MathTypeface.kt

@@ -0,0 +1,30 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.graphics.Typeface
+import com.swmansion.enriched.markdown.styles.MathFontWeight
+import io.ratex.RaTeXFontLoader
+
+/**
+ * Typeface supplier for [io.ratex.RaTeXRenderer]. RaTeX resolves every glyph to
+ * a KaTeX font id and asks us for the face to draw it with.
+ *
+ * Takes the raw `fontWeight` string the style model carries — the same shape
+ * every other `fontWeight` prop keeps — and is the single place on Android that
+ * narrows it to a weight we can draw. Consumers pass the style through; nothing
+ * upstream has to know that only two weights are reachable today.
+ *
+ * Bold is SYNTHETIC: asking for [Typeface.BOLD] on a single-weight asset makes
+ * the platform embolden it, which preserves the advances RaTeX already laid the
+ * glyphs out with. Substituting the bundled KaTeX bold faces instead would not
+ * — their advances run up to 15% wider than the regular ones the layout
+ * reserved, so glyphs would collide. iOS reaches the same result by stroking
+ * the glyph outline; see ENRMRaTeXBridge.
+ */
+internal fun ratexTypefaceLoader(fontWeight: String): (String) -> Typeface? =
+  when (MathFontWeight.fromString(fontWeight)) {
+    MathFontWeight.NORMAL -> { fontId -> RaTeXFontLoader.getTypeface(fontId) }
+
+    MathFontWeight.BOLD -> { fontId ->
+      RaTeXFontLoader.getTypeface(fontId)?.let { Typeface.create(it, Typeface.BOLD) }
+    }
+  }

package/android/src/math/java/com/swmansion/enriched/markdown/views/MathContainerView.kt

@@ -15,6 +15,7 @@ import com.swmansion.enriched.markdown.accessibility.AccessibilityLabels
 import com.swmansion.enriched.markdown.spans.MathMeasureHelper
 import com.swmansion.enriched.markdown.spans.MathMeasureRequest
 import com.swmansion.enriched.markdown.spans.MathRenderMode
+import com.swmansion.enriched.markdown.spans.ratexTypefaceLoader
 import com.swmansion.enriched.markdown.styles.MathStyle
 import com.swmansion.enriched.markdown.styles.StyleConfig
 import io.ratex.RaTeXEngine
@@ -100,7 +101,8 @@ class MathContainerView(
     cachedLatex = latex
     try {
       val displayList = RaTeXEngine.parseBlocking(latex, displayMode = true, color = mathStyle.color)
-      mathView.renderer = RaTeXRenderer(displayList, mathStyle.fontSize) { RaTeXFontLoader.getTypeface(it) }
+      mathView.renderer =
+        RaTeXRenderer(displayList, mathStyle.fontSize, ratexTypefaceLoader(mathStyle.fontWeight))
     } catch (e: Exception) {
       Log.e(TAG, "Failed to render LaTeX", e)
       mathView.renderer = null

package/docs/API_REFERENCE.md

@@ -515,6 +515,15 @@ Whether the input is scrollable when content exceeds the visible area.
 | --------- | ------------- | -------- |
 | `boolean` | `true`        | Both     |
 
+### `blockSyntax`
+
+Whether block-level Markdown syntax is interpreted. See
+[Preserving block syntax](./INPUT.md#preserving-block-syntax).
+
+| Type      | Default Value | Platform |
+| --------- | ------------- | -------- |
+| `boolean` | `true`        | Both     |
+
 ### `autoCapitalize`
 
 Auto-capitalization behavior.

package/docs/INPUT.md

@@ -122,6 +122,50 @@ The callback fires only for newly detected links — not for links that were alr
 
 When a manual link is applied (via `setLink` or `insertLink`) over an auto-detected link, the auto-detected link is replaced by the manual one. Auto-link detection skips ranges that already contain a manual link.
 
+## Preserving block syntax
+
+By default the input interprets block-level Markdown: a line starting with `1) `, `- `,
+`# ` or `> ` is consumed as list, heading or quote *structure*, and the marker itself is
+not part of the text. The editor has no block styles to render that structure with and
+the serializer has no way to write the marker back, so the marker is lost on save. Two
+adjacent list items can end up with their formulas touching — `1) $a+b$` and `2) $c+d$`
+save as `$a+b$$c+d$`, where the `$$` now reads as display math.
+
+Set `blockSyntax={false}` when the text must survive the round trip unchanged:
+
+```tsx
+<EnrichedMarkdownTextInput
+  blockSyntax={false}
+  defaultValue={markdown}
+  onChangeMarkdown={setMarkdown}
+/>
+```
+
+In this mode the parser never sees block structure, so markers stay in the text verbatim
+and `onChangeMarkdown` returns what was loaded, byte for byte. Inline syntax is unaffected:
+`**bold**`, `*italic*`, `~~strike~~`, `||spoiler||`, links and `$math$` all still parse and
+style as usual.
+
+What changes:
+
+- **Typing `3) ` no longer starts a list**, and `# ` no longer makes a heading. Nothing
+  block-level is interpreted while typing either — that is the point of the mode.
+- The text is displayed with its markers showing, so an editor with `blockSyntax={false}`
+  and a `EnrichedMarkdownText` rendering the same source look different, even though the
+  stored string is identical.
+- `\r\n` and `\r` are normalized to `\n`, and `U+000B` (vertical tab) is stripped from the
+  input. `U+000B` is used internally to hide line structure from the Markdown parser, so it
+  cannot be carried through as content.
+
+Three inline constructs are still lossy in this mode, exactly as they are with
+`blockSyntax={true}` — they are not regressions introduced by the flag:
+
+| Input | Saved as | Why |
+| --- | --- | --- |
+| `` gõ `x` vào `` | `gõ x vào` | The editor has no inline code style, so the backticks have nothing to round-trip through |
+| `Giá 5\$` | `Giá 5$` | The serializer does not re-escape `\$`, which can leave an unpaired `$` |
+| `A &amp;amp; B` | `A  B` | HTML entity nodes are dropped. A raw `&` is safe |
+
 ## Caret Position Tracking
 
 `EnrichedMarkdownTextInput` can report the caret's pixel position relative to the input, which is useful when the input is embedded in a scrollable container with `scrollEnabled={false}` and you need to keep the caret visible.
@@ -231,3 +275,7 @@ Available style properties:
 - `link.underline` — whether links are underlined (defaults to `true`).
 - `spoiler.color` — text color for spoiler text.
 - `spoiler.backgroundColor` — background color for spoiler text.
+- `math.fontWeight` — `'bold'` | `'normal'` (default `'normal'`); typesets inline formula chips
+  (`$...$`) at bold weight. See [LATEX_MATH.md](./LATEX_MATH.md#bold-formulas).
+- `mathBlock.fontWeight` — same for block formula chips (`$$...$$`); inherits from
+  `math.fontWeight` when unset.

package/docs/LATEX_MATH.md

@@ -27,6 +27,7 @@ Einstein's mass-energy equivalence $E = mc^2$ is one of the most famous equation
     },
     inlineMath: {
       color: '#1F2937',
+      paddingVertical: 4,
     },
   }}
 />
@@ -34,6 +35,62 @@ Einstein's mass-energy equivalence $E = mc^2$ is one of the most famous equation
 
 Block math equations are rendered as standalone display elements with spacing and an optional background. Inline math inherits the surrounding block's typography.
 
+### Spacing around inline formulas
+
+An inline formula reports its own height, and tall constructs such as `\frac` are routinely taller than the
+surrounding text. The block's `lineHeight` cannot loosen those lines: it is applied expand-only, so a value
+below the formula's natural height is ignored rather than compressing the formula out of its box. Two wrapped
+lines that each contain a fraction therefore sit flush against each other.
+
+`inlineMath.paddingVertical` (points, default `4`) adds empty space above and below the formula box, which is
+what pushes those lines apart. It affects only lines that actually contain inline math — prose-only lines keep
+the line height they had. Set it to `0` to get the old flush behaviour back. Block math (`$$...$$`) has its own
+`math.padding` instead.
+
+### Bold formulas
+
+`math.fontWeight` / `inlineMath.fontWeight` (`'normal'` | `'bold'`, default `'normal'`) typeset a
+formula at bold weight. Set it wherever the surrounding text is bold so the formula follows it.
+
+The embolden is **synthetic on every platform** — no real bold face is ever used.
+
+On **iOS and Android** it is a stroke on the glyph outline and the platform's fake-bold
+respectively, rather than a switch to the bundled KaTeX bold faces. That is deliberate. The native
+engine has no weight parameter, and by the time a style applies, glyph positions are already laid
+out: the bold faces' advances run up to 15% wider than the regular ones the layout reserved, so
+swapping them in would make glyphs collide. Stroking and fake-bold both preserve every advance.
+
+Two consequences worth knowing:
+
+- Fraction bars and rules keep their own thickness, so they do not thicken with the glyphs.
+- On iOS the stroke width also applies to the handful of decorations the engine strokes itself
+  (`\cancel`, `\textcircled`, `\corresponds`, `\imageof`). Prefer turning bold on per surface
+  rather than globally.
+
+On **web** the prop is a plain CSS declaration on the KaTeX output — but the library renders in
+[MathML output mode](#web) and loads no KaTeX stylesheet or fonts, so `font-weight` is resolved by
+the browser's own math font (STIX Two Math, Latin Modern Math, Cambria Math). Most of those ship no
+bold face, so the browser synthesizes one there too. Treat web as synthetic as well, not as a
+reference for how heavy bold "should" look.
+
+`EnrichedMarkdownTextInput` honours the same prop for the formula chips typed into the editor, under
+its own style keys — `math.fontWeight` for inline chips (`$...$`) and `mathBlock.fontWeight` for
+block chips (`$$...$$`). `mathBlock` inherits the weight from `math` when it does not set one of its
+own, the way it already inherits `color` and the border props:
+
+```tsx
+<EnrichedMarkdownTextInput
+  markdownStyle={{
+    math: { fontWeight: 'bold' },       // inline chips bold…
+    mathBlock: { fontWeight: 'normal' }, // …block chips opt back out
+  }}
+/>
+```
+
+The caveats above apply unchanged — the embolden is the same synthetic one, and the chip keeps its
+measured width because fake-bold and stroking both preserve the glyph advances. Editor chips are
+iOS + Android only; there is no web or macOS chip surface.
+
 > [!IMPORTANT]
 > LaTeX commands use backslashes (e.g. `\frac`, `\alpha`). In regular JS strings and template literals, backslashes are escape characters. Use `String.raw` or double backslashes (`\\frac`) to preserve them. Block math (`$$...$$`) must be on its own line to render as a display element.
 
@@ -53,6 +110,11 @@ yarn add katex
 
 KaTeX is loaded lazily the first time a LaTeX node is encountered, so it has no impact on pages that do not render math. No stylesheet or `<link>` tag is needed.
 
+If you load `katex/dist/katex.min.css` anyway — some setups do — its `.katex` rule opens with the
+`font` shorthand, which resets `font-weight` and would drop [`fontWeight`](#bold-formulas) on the
+way down to the formula. The library injects `.katex { font-weight: inherit; }` to keep the prop
+working in that case; nothing is required of you.
+
 > [!NOTE]
 > MathML is supported natively in Chrome 109+, Firefox, and Safari. Older browsers will display the raw LaTeX source as a text fallback.
 

package/docs/STYLES.md

@@ -179,9 +179,12 @@ The library provides sensible default styles for all Markdown elements out of th
       padding: 12,
       marginBottom: 16,
       textAlign: 'center',
+      fontWeight: 'normal',
     },
     inlineMath: {
       color: '#1F2937',
+      paddingVertical: 4,
+      fontWeight: 'normal',
     },
     spoiler: {
       color: '#6B7280',