react-native-enriched-markdown-scaffold 1.0.2-scaffold.7 → 1.0.2-scaffold.9

package/android/build.gradle

@@ -270,6 +270,8 @@ dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   // Baseline Profile installer for AOT compilation hints
   implementation "androidx.profileinstaller:profileinstaller:1.3.1"
+  // AppCompatTextView draws emoji through EmojiCompat; measurement must apply it too
+  implementation "androidx.emoji2:emoji2:1.4.0"
   // LaTeX math rendering (optional — set enrichedMarkdown.enableMath=false in gradle.properties to exclude)
   if (enableMath) {
     implementation("io.github.erweixin:ratex-android:0.1.10")

package/android/generated/jni/react/renderer/components/EnrichedMarkdownTextSpec/Props.h

@@ -1761,6 +1761,7 @@ struct EnrichedMarkdownMarkdownStyleMathStruct {
   Float marginBottom{0.0};
   std::string textAlign{};
   std::string fontWeight{};
+  Float glyphOverflow{0.0};
 
 
 #ifdef RN_SERIALIZABLE_STATE
@@ -1776,6 +1777,7 @@ struct EnrichedMarkdownMarkdownStyleMathStruct {
     result["marginBottom"] = marginBottom;
     result["textAlign"] = textAlign;
     result["fontWeight"] = fontWeight;
+    result["glyphOverflow"] = glyphOverflow;
     return result;
   }
 #endif
@@ -1816,6 +1818,10 @@ static inline void fromRawValue(const PropsParserContext& context, const RawValu
   if (tmp_fontWeight != map.end()) {
     fromRawValue(context, tmp_fontWeight->second, result.fontWeight);
   }
+  auto tmp_glyphOverflow = map.find("glyphOverflow");
+  if (tmp_glyphOverflow != map.end()) {
+    fromRawValue(context, tmp_glyphOverflow->second, result.glyphOverflow);
+  }
 }
 
 static inline std::string toString(const EnrichedMarkdownMarkdownStyleMathStruct &value) {
@@ -1832,6 +1838,7 @@ struct EnrichedMarkdownMarkdownStyleInlineMathStruct {
   SharedColor color{};
   Float paddingVertical{0.0};
   std::string fontWeight{};
+  Float glyphOverflow{0.0};
 
 
 #ifdef RN_SERIALIZABLE_STATE
@@ -1842,6 +1849,7 @@ struct EnrichedMarkdownMarkdownStyleInlineMathStruct {
     result["color"] = ::facebook::react::toDynamic(color);
     result["paddingVertical"] = paddingVertical;
     result["fontWeight"] = fontWeight;
+    result["glyphOverflow"] = glyphOverflow;
     return result;
   }
 #endif
@@ -1862,6 +1870,10 @@ static inline void fromRawValue(const PropsParserContext& context, const RawValu
   if (tmp_fontWeight != map.end()) {
     fromRawValue(context, tmp_fontWeight->second, result.fontWeight);
   }
+  auto tmp_glyphOverflow = map.find("glyphOverflow");
+  if (tmp_glyphOverflow != map.end()) {
+    fromRawValue(context, tmp_glyphOverflow->second, result.glyphOverflow);
+  }
 }
 
 static inline std::string toString(const EnrichedMarkdownMarkdownStyleInlineMathStruct &value) {
@@ -5807,6 +5819,7 @@ struct EnrichedMarkdownTextMarkdownStyleMathStruct {
   Float marginBottom{0.0};
   std::string textAlign{};
   std::string fontWeight{};
+  Float glyphOverflow{0.0};
 
 
 #ifdef RN_SERIALIZABLE_STATE
@@ -5822,6 +5835,7 @@ struct EnrichedMarkdownTextMarkdownStyleMathStruct {
     result["marginBottom"] = marginBottom;
     result["textAlign"] = textAlign;
     result["fontWeight"] = fontWeight;
+    result["glyphOverflow"] = glyphOverflow;
     return result;
   }
 #endif
@@ -5862,6 +5876,10 @@ static inline void fromRawValue(const PropsParserContext& context, const RawValu
   if (tmp_fontWeight != map.end()) {
     fromRawValue(context, tmp_fontWeight->second, result.fontWeight);
   }
+  auto tmp_glyphOverflow = map.find("glyphOverflow");
+  if (tmp_glyphOverflow != map.end()) {
+    fromRawValue(context, tmp_glyphOverflow->second, result.glyphOverflow);
+  }
 }
 
 static inline std::string toString(const EnrichedMarkdownTextMarkdownStyleMathStruct &value) {
@@ -5878,6 +5896,7 @@ struct EnrichedMarkdownTextMarkdownStyleInlineMathStruct {
   SharedColor color{};
   Float paddingVertical{0.0};
   std::string fontWeight{};
+  Float glyphOverflow{0.0};
 
 
 #ifdef RN_SERIALIZABLE_STATE
@@ -5888,6 +5907,7 @@ struct EnrichedMarkdownTextMarkdownStyleInlineMathStruct {
     result["color"] = ::facebook::react::toDynamic(color);
     result["paddingVertical"] = paddingVertical;
     result["fontWeight"] = fontWeight;
+    result["glyphOverflow"] = glyphOverflow;
     return result;
   }
 #endif
@@ -5908,6 +5928,10 @@ static inline void fromRawValue(const PropsParserContext& context, const RawValu
   if (tmp_fontWeight != map.end()) {
     fromRawValue(context, tmp_fontWeight->second, result.fontWeight);
   }
+  auto tmp_glyphOverflow = map.find("glyphOverflow");
+  if (tmp_glyphOverflow != map.end()) {
+    fromRawValue(context, tmp_glyphOverflow->second, result.glyphOverflow);
+  }
 }
 
 static inline std::string toString(const EnrichedMarkdownTextMarkdownStyleInlineMathStruct &value) {

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

@@ -13,6 +13,7 @@ import com.swmansion.enriched.markdown.spoiler.SpoilerCapable
 import com.swmansion.enriched.markdown.spoiler.SpoilerOverlay
 import com.swmansion.enriched.markdown.spoiler.SpoilerOverlayDrawer
 import com.swmansion.enriched.markdown.utils.text.interaction.CheckboxTouchHelper
+import com.swmansion.enriched.markdown.utils.text.view.HeadlessActionMode
 import com.swmansion.enriched.markdown.utils.text.view.LinkLongPressMovementMethod
 import com.swmansion.enriched.markdown.utils.text.view.SelectionMenuConfig
 import com.swmansion.enriched.markdown.utils.text.view.applySelectableState
@@ -20,6 +21,7 @@ import com.swmansion.enriched.markdown.utils.text.view.cancelJSTouchForCheckboxT
 import com.swmansion.enriched.markdown.utils.text.view.cancelJSTouchForLinkTap
 import com.swmansion.enriched.markdown.utils.text.view.clearTextSelection
 import com.swmansion.enriched.markdown.utils.text.view.createSelectionActionModeCallback
+import com.swmansion.enriched.markdown.utils.text.view.isRomSelectionPopupShower
 import com.swmansion.enriched.markdown.utils.text.view.reallowParentInterceptIfLinkReleased
 import com.swmansion.enriched.markdown.utils.text.view.setupAsMarkdownTextView
 import com.swmansion.enriched.markdown.views.BlockSegmentView
@@ -128,6 +130,26 @@ class EnrichedMarkdownInternalText
       onSelectionChangedCallback?.invoke(this, selEnd > selStart)
     }
 
+    // See HeadlessActionMode: with the menu hidden, no toolbar window is created.
+    override fun startActionMode(
+      callback: ActionMode.Callback?,
+      type: Int,
+    ): ActionMode? {
+      if (contextMenuHidden && type == ActionMode.TYPE_FLOATING && callback != null) {
+        return HeadlessActionMode.start(this, callback)
+      }
+      return super.startActionMode(callback, type)
+    }
+
+    // See isRomSelectionPopupShower: MIUI shows its own selection popup this way.
+    override fun postDelayed(
+      action: Runnable?,
+      delayMillis: Long,
+    ): Boolean {
+      if (contextMenuHidden && isRomSelectionPopupShower(action)) return false
+      return super.postDelayed(action, delayMillis)
+    }
+
     /** Clears the selection and ends its ActionMode. */
     fun clearSelection() {
       clearTextSelection()

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

@@ -28,6 +28,7 @@ import com.swmansion.enriched.markdown.utils.common.emitLinkLayout
 import com.swmansion.enriched.markdown.utils.common.emitSelectionChange
 import com.swmansion.enriched.markdown.utils.text.TailFadeInAnimator
 import com.swmansion.enriched.markdown.utils.text.interaction.CheckboxTouchHelper
+import com.swmansion.enriched.markdown.utils.text.view.HeadlessActionMode
 import com.swmansion.enriched.markdown.utils.text.view.LinkLayoutCollector
 import com.swmansion.enriched.markdown.utils.text.view.LinkLayoutFragment
 import com.swmansion.enriched.markdown.utils.text.view.LinkLongPressMovementMethod
@@ -43,6 +44,7 @@ import com.swmansion.enriched.markdown.utils.text.view.createSelectionActionMode
 import com.swmansion.enriched.markdown.utils.text.view.currentTextSelection
 import com.swmansion.enriched.markdown.utils.text.view.emitLinkLongPressEvent
 import com.swmansion.enriched.markdown.utils.text.view.emitLinkPressEvent
+import com.swmansion.enriched.markdown.utils.text.view.isRomSelectionPopupShower
 import com.swmansion.enriched.markdown.utils.text.view.reallowParentInterceptIfLinkReleased
 import com.swmansion.enriched.markdown.utils.text.view.setupAsMarkdownTextView
 import java.util.concurrent.Executors
@@ -336,6 +338,26 @@ class EnrichedMarkdownText
       selectionReporter?.enabled = enabled
     }
 
+    // See HeadlessActionMode: with the menu hidden, no toolbar window is created.
+    override fun startActionMode(
+      callback: ActionMode.Callback?,
+      type: Int,
+    ): ActionMode? {
+      if (contextMenuHidden && type == ActionMode.TYPE_FLOATING && callback != null) {
+        return HeadlessActionMode.start(this, callback)
+      }
+      return super.startActionMode(callback, type)
+    }
+
+    // See isRomSelectionPopupShower: MIUI shows its own selection popup this way.
+    override fun postDelayed(
+      action: Runnable?,
+      delayMillis: Long,
+    ): Boolean {
+      if (contextMenuHidden && isRomSelectionPopupShower(action)) return false
+      return super.postDelayed(action, delayMillis)
+    }
+
     /** Clears the selection (ending its ActionMode) and reports `active: false`. */
     fun clearSelection() {
       clearTextSelection()

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

@@ -7,6 +7,7 @@ import android.text.SpannableString
 import android.text.StaticLayout
 import android.text.TextPaint
 import android.util.Log
+import androidx.emoji2.text.EmojiCompat
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.yoga.YogaMeasureMode
@@ -92,6 +93,38 @@ object MeasurementStore {
   }
 
   private val measurePaint = TextPaint()
+
+  @Volatile
+  private var emojiInitCallbackRegistered = false
+
+  // A view measured before EmojiCompat loaded keeps a size without its emoji glyphs.
+  private val emojiInitCallback =
+    object : EmojiCompat.InitCallback() {
+      override fun onInitialized() {
+        data.clear()
+      }
+    }
+
+  // AppCompatTextView draws emoji the system font lacks through EmojiCompat, which can be
+  // wider than the fallback glyph and wrap a line earlier; measure the same glyphs.
+  private fun withEmojiSpans(text: CharSequence): CharSequence {
+    if (text.isEmpty() || !EmojiCompat.isConfigured()) return text
+    val emojiCompat = EmojiCompat.get()
+    if (emojiCompat.loadState != EmojiCompat.LOAD_STATE_SUCCEEDED) {
+      if (!emojiInitCallbackRegistered) {
+        emojiInitCallbackRegistered = true
+        emojiCompat.registerInitCallback(emojiInitCallback)
+      }
+      return text
+    }
+    return try {
+      emojiCompat.process(SpannableString(text)) ?: text
+    } catch (e: IllegalStateException) {
+      Log.w(TAG, "EmojiCompat processing failed, measuring raw text", e)
+      text
+    }
+  }
+
   private val measureRenderer = Renderer()
 
   @Volatile
@@ -337,9 +370,12 @@ object MeasurementStore {
       tryRenderMarkdown(markdown, styleMap, context, md4cFlags, allowFontScaling, maxFontSizeMultiplier, imageRequestHeaders)
     // Placeholders must be built with the same inlineMath.paddingVertical the real spans use,
     // or the measured line box won't match the drawn one.
+    val inlineMathMap = styleMap.getMapOrNull("inlineMath")
+    val inlineMathOverflowDip = inlineMathMap.getFloatOrDefault("glyphOverflow", 0f)
     spannable?.replaceMathSpansWithPlaceholders(
       context,
-      PixelUtil.toPixelFromDIP(styleMap.getMapOrNull("inlineMath").getFloatOrDefault("paddingVertical", 0f)),
+      PixelUtil.toPixelFromDIP(inlineMathMap.getFloatOrDefault("paddingVertical", 0f)) +
+        if (inlineMathOverflowDip > 0f) ceil(PixelUtil.toPixelFromDIP(inlineMathOverflowDip)) else 0f,
     )
     val textToMeasure = spannable ?: markdown
     val (size, _) = measureWithLayout(width, textToMeasure, measurePaint, id)
@@ -456,7 +492,8 @@ object MeasurementStore {
         for (i in mathSegmentIndices.indices) {
           val metrics = mathResults[i]
           mathHeightByIndex[mathSegmentIndices[i]] =
-            ceil(metrics.ascent + metrics.descent).toInt() + (style.mathStyle.padding * 2)
+            ceil(metrics.ascent + metrics.descent).toInt() + (style.mathStyle.padding * 2) +
+            (style.mathStyle.glyphOverflow * 2)
         }
       }
 
@@ -471,7 +508,7 @@ object MeasurementStore {
 
         when (segment) {
           is RenderedSegment.Text -> {
-            segment.styledText.replaceMathSpansWithPlaceholders(context, style.inlineMathStyle.paddingVertical)
+            segment.styledText.replaceMathSpansWithPlaceholders(context, style.inlineMathStyle.boxPaddingVertical)
 
             val layout = createStaticLayout(segment.styledText, fontSize, widthPx, id)
             totalHeightPx += layout.height
@@ -546,9 +583,10 @@ object MeasurementStore {
     viewId: Int?,
   ): StaticLayout {
     measurePaint.textSize = fontSize
-    prepareImageSpansForMeasurement(text, widthPx)
+    val content = withEmojiSpans(text)
+    prepareImageSpansForMeasurement(content, widthPx)
     return StaticLayout.Builder
-      .obtain(text, 0, text.length, measurePaint, widthPx)
+      .obtain(content, 0, content.length, measurePaint, widthPx)
       .setIncludePad(false)
       .setLineSpacing(0f, 1f)
       .apply {
@@ -579,7 +617,7 @@ object MeasurementStore {
       style.imageRequestHeaders = imageRequestHeaders
       measureRenderer.configure(style, context)
       measureRenderer.renderDocument(ast, null).apply {
-        replaceMathSpansWithPlaceholders(context, style.inlineMathStyle.paddingVertical)
+        replaceMathSpansWithPlaceholders(context, style.inlineMathStyle.boxPaddingVertical)
       }
     } catch (e: Exception) {
       Log.w(TAG, "Failed to render markdown for measurement, falling back to raw text", e)
@@ -628,7 +666,7 @@ object MeasurementStore {
     paint: TextPaint,
     viewId: Int?,
   ): Long {
-    val content = text ?: ""
+    val content = withEmojiSpans(text ?: "")
     val safeWidth = ceil(maxWidth).toInt().coerceAtLeast(1)
     prepareImageSpansForMeasurement(content, safeWidth)
 
@@ -668,7 +706,7 @@ object MeasurementStore {
     paint: TextPaint,
     viewId: Int?,
   ): Pair<Long, StaticLayout> {
-    val content = text ?: ""
+    val content = withEmojiSpans(text ?: "")
     val widthPx = ceil(maxWidth).toInt().coerceAtLeast(1)
     prepareImageSpansForMeasurement(content, widthPx)
 

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

@@ -1,12 +1,17 @@
 package com.swmansion.enriched.markdown.styles
 
 import com.facebook.react.bridge.ReadableMap
+import kotlin.math.ceil
 
 data class InlineMathStyle(
   val color: Int,
   val paddingVertical: Float,
   val fontWeight: String,
+  val glyphOverflow: Float = 0f,
 ) {
+  /** Line-box padding the span reports: author padding plus the ink headroom. */
+  val boxPaddingVertical: Float get() = paddingVertical + glyphOverflow
+
   companion object {
     fun fromReadableMap(
       map: ReadableMap,
@@ -15,7 +20,17 @@ data class InlineMathStyle(
       val color = parser.parseColor(map, "color")
       val paddingVertical = parser.toPixelFromDIP(map.getDouble("paddingVertical").toFloat())
       val fontWeight = parser.parseString(map, "fontWeight", "normal")
-      return InlineMathStyle(color, paddingVertical, fontWeight)
+      val glyphOverflow = glyphOverflowPx(parser.parseOptionalDouble(map, "glyphOverflow").toFloat(), parser)
+      return InlineMathStyle(color, paddingVertical, fontWeight, glyphOverflow)
     }
   }
 }
+
+/**
+ * `glyphOverflow` in whole pixels. Rounded up so a measured box and the bitmap or
+ * canvas it holds always grow by the same integer amount on each side.
+ */
+internal fun glyphOverflowPx(
+  dip: Float,
+  parser: StyleParser,
+): Float = if (dip <= 0f) 0f else ceil(parser.toPixelFromDIP(dip))

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

@@ -11,6 +11,7 @@ data class MathStyle(
   val marginBottom: Float,
   val textAlign: String,
   val fontWeight: String,
+  val glyphOverflow: Float = 0f,
 ) {
   companion object {
     fun fromReadableMap(
@@ -25,6 +26,7 @@ data class MathStyle(
       val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
       val textAlign = parser.parseString(map, "textAlign", "center")
       val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val glyphOverflow = glyphOverflowPx(parser.parseOptionalDouble(map, "glyphOverflow").toFloat(), parser)
       return MathStyle(
         fontSize,
         color,
@@ -34,6 +36,7 @@ data class MathStyle(
         marginBottom,
         textAlign,
         fontWeight,
+        glyphOverflow,
       )
     }
   }

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/view/HeadlessActionMode.kt

@@ -0,0 +1,88 @@
+package com.swmansion.enriched.markdown.utils.text.view
+
+import android.view.ActionMode
+import android.view.Menu
+import android.view.MenuInflater
+import android.view.View
+import android.widget.PopupMenu
+
+/**
+ * Stands in for the floating text-selection toolbar while `contextMenuHidden`
+ * is on. An empty menu only hides the AOSP FloatingToolbar; ROMs that draw
+ * their own selection popup (MIUI) still show it. Answering the Editor's
+ * startActionMode with this mode means no toolbar window is ever created.
+ *
+ * The callback is the Editor's TextActionModeCallback wrapping ours, so it
+ * still gets the full create/prepare/destroy lifecycle: Editor keeps the
+ * selection handles and its transient-state bookkeeping, and finish() clears
+ * the selection exactly as dismissing the real toolbar would.
+ */
+internal class HeadlessActionMode private constructor(
+  private val view: View,
+  private val callback: ActionMode.Callback,
+) : ActionMode() {
+  // A real framework menu: Editor populates it with MenuItem calls
+  // (setAlphabeticShortcut, setShowAsAction, setIntent) a stub can't take.
+  private val menu: Menu = PopupMenu(view.context, view).menu
+  private var finished = false
+
+  override fun setTitle(title: CharSequence?) = Unit
+
+  override fun setTitle(resId: Int) = Unit
+
+  override fun setSubtitle(subtitle: CharSequence?) = Unit
+
+  override fun setSubtitle(resId: Int) = Unit
+
+  override fun setCustomView(view: View?) = Unit
+
+  override fun invalidate() {
+    if (!finished) callback.onPrepareActionMode(this, menu)
+  }
+
+  override fun invalidateContentRect() = Unit
+
+  override fun hide(duration: Long) = Unit
+
+  override fun finish() {
+    if (finished) return
+    finished = true
+    callback.onDestroyActionMode(this)
+  }
+
+  override fun getMenu(): Menu = menu
+
+  override fun getTitle(): CharSequence? = null
+
+  override fun getSubtitle(): CharSequence? = null
+
+  override fun getCustomView(): View? = null
+
+  override fun getMenuInflater(): MenuInflater = MenuInflater(view.context)
+
+  companion object {
+    /** Mirrors the framework: null when the callback declines to start. */
+    fun start(
+      view: View,
+      callback: ActionMode.Callback,
+    ): ActionMode? {
+      val mode = HeadlessActionMode(view, callback)
+      mode.type = TYPE_FLOATING
+      if (!callback.onCreateActionMode(mode, mode.menu)) return null
+      callback.onPrepareActionMode(mode, mode.menu)
+      return mode
+    }
+  }
+}
+
+/**
+ * MIUI 12 (Android 10) replaces android.widget.Editor: text selection never reaches
+ * startActionMode or the custom ActionMode callback, so HeadlessActionMode is never used.
+ * Its own popup is shown by Editor$HandleView.showActionPopupWindow, which posts a runnable
+ * on the TextView (Editor$HandleView$2). Dropping that runnable is the only hook left while
+ * `contextMenuHidden` is on.
+ */
+private const val ROM_SELECTION_POPUP_SHOWER_PREFIX = "android.widget.Editor\$HandleView"
+
+internal fun isRomSelectionPopupShower(action: Runnable?): Boolean =
+  action != null && action.javaClass.name.startsWith(ROM_SELECTION_POPUP_SHOWER_PREFIX)

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

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

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

@@ -37,6 +37,7 @@ class MathInlineRenderer(
         textColor = config.style.inlineMathStyle.color,
         paddingVertical = config.style.inlineMathStyle.paddingVertical,
         fontWeight = config.style.inlineMathStyle.fontWeight,
+        glyphOverflow = config.style.inlineMathStyle.glyphOverflow,
       )
 
     builder.setSpan(span, start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)

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

@@ -16,6 +16,7 @@ class MathInlineSpan(
   private val textColor: Int,
   private val paddingVertical: Float,
   private val fontWeight: String = "normal",
+  private val glyphOverflow: Float = 0f,
 ) : ReplacementSpan() {
   private var cachedBitmap: Bitmap? = null
   private var cachedWidth = 0
@@ -31,18 +32,24 @@ class MathInlineSpan(
       val displayList = RaTeXEngine.parseBlocking(latex, displayMode = false, color = textColor)
       val renderer = RaTeXRenderer(displayList, fontSize, ratexTypefaceLoader(fontWeight))
 
-      cachedWidth = renderer.widthPx.toInt().coerceAtLeast(1)
+      cachedWidth = ceil(renderer.widthPx).toInt().coerceAtLeast(1)
       mathAscent = renderer.heightPx
       mathDescent = renderer.depthPx
 
+      // RaTeX reports TeX metric boxes, which digit and capital outlines (and the
+      // fake-bold stroke) overshoot; the bitmap keeps glyphOverflow px of headroom
+      // on both sides so that ink is not cut off.
+      val overflowPx = glyphOverflow.toInt()
       val bitmap =
         Bitmap.createBitmap(
           cachedWidth,
-          ceil(renderer.totalHeightPx).toInt().coerceAtLeast(1),
+          ceil(renderer.totalHeightPx).toInt().coerceAtLeast(1) + overflowPx * 2,
           Bitmap.Config.ARGB_8888,
         )
 
-      renderer.draw(Canvas(bitmap))
+      val canvas = Canvas(bitmap)
+      canvas.translate(0f, overflowPx.toFloat())
+      renderer.draw(canvas)
       cachedBitmap = bitmap
     } catch (_: Exception) {
       renderFailed = true
@@ -66,9 +73,9 @@ class MathInlineSpan(
       // 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()
+      ascent = -ceil(mathAscent + (paddingVertical + glyphOverflow)).toInt()
       top = ascent
-      descent = ceil(mathDescent + paddingVertical).toInt()
+      descent = ceil(mathDescent + (paddingVertical + glyphOverflow)).toInt()
       bottom = descent
     }
 
@@ -88,7 +95,7 @@ class MathInlineSpan(
   ) {
     prepareResources()
     cachedBitmap?.let {
-      val bitmapY = y - ceil(mathAscent)
+      val bitmapY = y - ceil(mathAscent) - glyphOverflow
       canvas.drawBitmap(it, x, bitmapY, paint)
     }
   }

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

@@ -5,6 +5,7 @@ import android.util.Log
 import io.ratex.RaTeXEngine
 import io.ratex.RaTeXFontLoader
 import io.ratex.RaTeXRenderer
+import kotlin.math.ceil
 
 object MathMeasureHelper {
   @JvmStatic
@@ -37,7 +38,7 @@ object MathMeasureHelper {
       }
 
     return MathMetrics(
-      renderer.widthPx.toInt(),
+      ceil(renderer.widthPx).toInt().coerceAtLeast(1),
       renderer.heightPx,
       renderer.depthPx,
     )

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

@@ -58,7 +58,7 @@ class MathContainerView(
       else -> Gravity.CENTER_HORIZONTAL
     }
 
-  private val mathView = RaTeXCanvasView(context)
+  private val mathView = RaTeXCanvasView(context, mathStyle.glyphOverflow)
 
   init {
     setBackgroundColor(mathStyle.backgroundColor)
@@ -139,8 +139,11 @@ class MathContainerView(
     }
   }
 
+  // glyphOverflow px of headroom above and below the RaTeX box: digit and capital
+  // outlines (and the fake-bold stroke) overshoot it, and this view clips to its size.
   private class RaTeXCanvasView(
     context: Context,
+    private val glyphOverflow: Float,
   ) : View(context) {
     var renderer: RaTeXRenderer? = null
 
@@ -153,12 +156,16 @@ class MathContainerView(
           ?: return setMeasuredDimension(0, 0)
       setMeasuredDimension(
         ceil(currentRenderer.widthPx).toInt().coerceAtLeast(1),
-        ceil(currentRenderer.totalHeightPx).toInt().coerceAtLeast(1),
+        ceil(currentRenderer.totalHeightPx).toInt().coerceAtLeast(1) + (glyphOverflow * 2).toInt(),
       )
     }
 
     override fun onDraw(canvas: Canvas) {
-      renderer?.draw(canvas)
+      val currentRenderer = renderer ?: return
+      canvas.save()
+      canvas.translate(0f, glyphOverflow)
+      currentRenderer.draw(canvas)
+      canvas.restore()
     }
   }
 
@@ -175,7 +182,7 @@ class MathContainerView(
           mode = MathRenderMode.Display,
         )
       val metrics = MathMeasureHelper.measure(context, listOf(request)).first()
-      return ceil(metrics.ascent + metrics.descent).toInt() + (mathStyle.padding * 2)
+      return ceil(metrics.ascent + metrics.descent).toInt() + (mathStyle.padding * 2) + (mathStyle.glyphOverflow * 2)
     }
 
     private const val TAG = "MathContainerView"

package/ios/attachments/ENRMMathInlineAttachment+macOS.m

@@ -29,7 +29,8 @@
                                              displayMode:NO
                                                 fontSize:self.fontSize
                                                    color:color
-                                                    bold:self.bold];
+                                                    bold:self.bold
+                                           glyphOverflow:self.glyphOverflow];
   if (!result)
     return;
 

package/ios/attachments/ENRMMathInlineAttachment.h

@@ -14,6 +14,9 @@ NS_ASSUME_NONNULL_BEGIN
 /// Typeset the glyphs at bold weight (synthetic — see ENRMRaTeXBridge).
 @property (nonatomic, assign) BOOL bold;
 
+/// Ink headroom above and below the formula box (`inlineMath.glyphOverflow`, points).
+@property (nonatomic, assign) CGFloat glyphOverflow;
+
 /// YES if block math (`$$...$$`), NO for inline (`$...$`).
 @property (nonatomic, assign) BOOL displayMode;
 

package/ios/attachments/ENRMMathInlineAttachment.m

@@ -42,7 +42,8 @@
                                              displayMode:NO
                                                 fontSize:self.fontSize
                                                    color:color
-                                                    bold:self.bold];
+                                                    bold:self.bold
+                                           glyphOverflow:self.glyphOverflow];
   if (!result) {
     _fallbackSource = ENRMMathFallbackString(self.latex, @"$", self.fontSize, color);
     UIFont *font = [_fallbackSource attribute:NSFontAttributeName atIndex:0 effectiveRange:NULL];