react-native-enriched 0.1.4 → 0.1.6

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedTextInputViewManagerDelegate.java

@@ -55,6 +55,9 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
       case "htmlStyle":
         mViewManager.setHtmlStyle(view, (ReadableMap) value);
         break;
+      case "scrollEnabled":
+        mViewManager.setScrollEnabled(view, value == null ? false : (boolean) value);
+        break;
       case "color":
         mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
         break;

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedTextInputViewManagerInterface.java

@@ -26,6 +26,7 @@ public interface EnrichedTextInputViewManagerInterface<T extends View> extends V
   void setSelectionColor(T view, @Nullable Integer value);
   void setAutoCapitalize(T view, @Nullable String value);
   void setHtmlStyle(T view, @Nullable ReadableMap value);
+  void setScrollEnabled(T view, boolean value);
   void setColor(T view, @Nullable Integer value);
   void setFontSize(T view, float value);
   void setFontFamily(T view, @Nullable String value);

package/android/generated/jni/react/renderer/components/RNEnrichedTextInputViewSpec/Props.cpp

@@ -30,6 +30,7 @@ EnrichedTextInputViewProps::EnrichedTextInputViewProps(
     selectionColor(convertRawProp(context, rawProps, "selectionColor", sourceProps.selectionColor, {})),
     autoCapitalize(convertRawProp(context, rawProps, "autoCapitalize", sourceProps.autoCapitalize, {})),
     htmlStyle(convertRawProp(context, rawProps, "htmlStyle", sourceProps.htmlStyle, {})),
+    scrollEnabled(convertRawProp(context, rawProps, "scrollEnabled", sourceProps.scrollEnabled, {false})),
     color(convertRawProp(context, rawProps, "color", sourceProps.color, {})),
     fontSize(convertRawProp(context, rawProps, "fontSize", sourceProps.fontSize, {0.0})),
     fontFamily(convertRawProp(context, rawProps, "fontFamily", sourceProps.fontFamily, {})),
@@ -94,6 +95,10 @@ folly::dynamic EnrichedTextInputViewProps::getDiffProps(
     result["htmlStyle"] = toDynamic(htmlStyle);
   }
     
+  if (scrollEnabled != oldProps->scrollEnabled) {
+    result["scrollEnabled"] = scrollEnabled;
+  }
+    
   if (color != oldProps->color) {
     result["color"] = *color;
   }

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

@@ -559,6 +559,7 @@ class EnrichedTextInputViewProps final : public ViewProps {
   SharedColor selectionColor{};
   std::string autoCapitalize{};
   EnrichedTextInputViewHtmlStyleStruct htmlStyle{};
+  bool scrollEnabled{false};
   SharedColor color{};
   Float fontSize{0.0};
   std::string fontFamily{};

package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputView.kt

@@ -7,6 +7,7 @@ import android.graphics.BlendMode
 import android.graphics.BlendModeColorFilter
 import android.graphics.Color
 import android.graphics.Rect
+import android.graphics.text.LineBreaker
 import android.os.Build
 import android.text.InputType
 import android.text.Spannable
@@ -51,11 +52,9 @@ class EnrichedTextInputView : AppCompatEditText {
   val paragraphStyles: ParagraphStyles? = ParagraphStyles(this)
   val listStyles: ListStyles? = ListStyles(this)
   val parametrizedStyles: ParametrizedStyles? = ParametrizedStyles(this)
-  // Sometimes setting up style triggers many changes in sequence
-  // Eg. removing conflicting styles -> changing text -> applying spans
-  // In such scenario we want to prevent from handling side effects (eg. onTextChanged)
   var isDuringTransaction: Boolean = false
   var isRemovingMany: Boolean = false
+  var scrollEnabled: Boolean = true
 
   val mentionHandler: MentionHandler? = MentionHandler(this)
   var htmlStyle: HtmlStyle = HtmlStyle(this, null)
@@ -72,6 +71,8 @@ class EnrichedTextInputView : AppCompatEditText {
   private var fontFamily: String? = null
   private var fontStyle: Int = ReactConstants.UNSET
   private var fontWeight: Int = ReactConstants.UNSET
+  private var defaultValue: CharSequence? = null
+  private var defaultValueDirty: Boolean = false
 
   private var inputMethodManager: InputMethodManager? = null
 
@@ -102,6 +103,10 @@ class EnrichedTextInputView : AppCompatEditText {
     gravity = Gravity.TOP or Gravity.START
     inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_MULTI_LINE
 
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      breakStrategy = LineBreaker.BREAK_STRATEGY_HIGH_QUALITY
+    }
+
     setPadding(0, 0, 0, 0)
     setBackgroundColor(Color.TRANSPARENT)
 
@@ -135,6 +140,14 @@ class EnrichedTextInputView : AppCompatEditText {
     return super.onTouchEvent(ev)
   }
 
+  override fun canScrollVertically(direction: Int): Boolean {
+    return scrollEnabled
+  }
+
+  override fun canScrollHorizontally(direction: Int): Boolean {
+    return scrollEnabled
+  }
+
   override fun onSelectionChanged(selStart: Int, selEnd: Int) {
     super.onSelectionChanged(selStart, selEnd)
     selection?.onSelection(selStart, selEnd)
@@ -236,18 +249,17 @@ class EnrichedTextInputView : AppCompatEditText {
 
   fun setValue(value: CharSequence?) {
     if (value == null) return
-    isDuringTransaction = true
-
-    val newText = parseText(value)
-    setText(newText)
 
-    // Assign SpanWatcher one more time as our previous spannable has been replaced
-    addSpanWatcher(EnrichedSpanWatcher(this))
+    runAsATransaction {
+      val newText = parseText(value)
+      setText(newText)
 
-    // Scroll to the last line of text
-    setSelection(text?.length ?: 0)
+      // Assign SpanWatcher one more time as our previous spannable has been replaced
+      addSpanWatcher(EnrichedSpanWatcher(this))
 
-    isDuringTransaction = false
+      // Scroll to the last line of text
+      setSelection(text?.length ?: 0)
+    }
   }
 
   fun setAutoFocus(autoFocus: Boolean) {
@@ -305,7 +317,7 @@ class EnrichedTextInputView : AppCompatEditText {
 
     // This ensured that newly created spans will take the new font size into account
     htmlStyle.invalidateStyles()
-    layoutManager.invalidateLayout(text)
+    layoutManager.invalidateLayout()
   }
 
   fun setFontFamily(family: String?) {
@@ -359,7 +371,24 @@ class EnrichedTextInputView : AppCompatEditText {
     return false
   }
 
-  fun updateTypeface() {
+  fun afterUpdateTransaction() {
+    updateTypeface()
+    updateDefaultValue()
+  }
+
+  fun setDefaultValue(value: CharSequence?) {
+    defaultValue = value
+    defaultValueDirty = true
+  }
+
+  private fun updateDefaultValue() {
+    if (!defaultValueDirty) return
+
+    defaultValueDirty = false
+    setValue(defaultValue ?: "")
+  }
+
+  private fun updateTypeface() {
     if (!typefaceDirty) return
     typefaceDirty = false
 
@@ -367,7 +396,7 @@ class EnrichedTextInputView : AppCompatEditText {
     typeface = newTypeface
     paint.typeface = newTypeface
 
-    layoutManager.invalidateLayout(text)
+    layoutManager.invalidateLayout()
   }
 
   private fun toggleStyle(name: String) {
@@ -387,7 +416,7 @@ class EnrichedTextInputView : AppCompatEditText {
       else -> Log.w("EnrichedTextInputView", "Unknown style: $name")
     }
 
-    layoutManager.invalidateLayout(text)
+    layoutManager.invalidateLayout()
   }
 
   private fun removeStyle(name: String, start: Int, end: Int): Boolean {
@@ -437,7 +466,7 @@ class EnrichedTextInputView : AppCompatEditText {
   }
 
   private fun verifyStyle(name: String): Boolean {
-    val mergingConfig = EnrichedSpans.mergingConfig[name] ?: return true
+    val mergingConfig = EnrichedSpans.getMergingConfigForStyle(name, htmlStyle) ?: return true
     val conflictingStyles = mergingConfig.conflictingStyles
     val blockingStyles = mergingConfig.blockingStyles
     val isEnabling = spanState?.getStart(name) == null
@@ -455,13 +484,13 @@ class EnrichedTextInputView : AppCompatEditText {
       val end = selection?.end ?: 0
       val lengthBefore = text?.length ?: 0
 
-      isDuringTransaction = true
-      val targetRange = getTargetRange(name)
-      val removed = removeStyle(style, targetRange.first, targetRange.second)
-      if (removed) {
-        spanState?.setStart(style, null)
+      runAsATransaction {
+        val targetRange = getTargetRange(name)
+        val removed = removeStyle(style, targetRange.first, targetRange.second)
+        if (removed) {
+          spanState?.setStart(style, null)
+        }
       }
-      isDuringTransaction = false
 
       val lengthAfter = text?.length ?: 0
       val charactersRemoved = lengthBefore - lengthAfter
@@ -503,6 +532,7 @@ class EnrichedTextInputView : AppCompatEditText {
     if (!isValid) return
 
     parametrizedStyles?.setImageSpan(src)
+    layoutManager.invalidateLayout()
   }
 
   fun startMention(indicator: String) {
@@ -519,6 +549,18 @@ class EnrichedTextInputView : AppCompatEditText {
     parametrizedStyles?.setMentionSpan(text, indicator, attributes)
   }
 
+  // Sometimes setting up style triggers many changes in sequence
+  // Eg. removing conflicting styles -> changing text -> applying spans
+  // In such scenario we want to prevent from handling side effects (eg. onTextChanged)
+  fun runAsATransaction(block: () -> Unit) {
+    try {
+      isDuringTransaction = true
+      block()
+    } finally {
+      isDuringTransaction = false
+    }
+  }
+
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
 
@@ -529,11 +571,6 @@ class EnrichedTextInputView : AppCompatEditText {
     didAttachToWindow = true
   }
 
-  override fun onDetachedFromWindow() {
-    layoutManager.cleanup()
-    super.onDetachedFromWindow()
-  }
-
   companion object {
     const val CLIPBOARD_TAG = "react-native-enriched-clipboard"
   }

package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputViewLayoutManager.kt

@@ -1,22 +1,16 @@
 package com.swmansion.enriched
 
-import android.text.Editable
-import android.text.StaticLayout
 import com.facebook.react.bridge.Arguments
-import com.facebook.react.uimanager.PixelUtil
 
 class EnrichedTextInputViewLayoutManager(private val view: EnrichedTextInputView) {
-  private var cachedSize: Pair<Float, Float> = Pair(0f, 0f)
-  private var cachedYogaWidth: Float = 0f
   private var forceHeightRecalculationCounter: Int = 0
 
-  fun cleanup() {
-    forceHeightRecalculationCounter = 0
-  }
+  fun invalidateLayout() {
+    val text = view.text
+    val paint = view.paint
 
-  // Update shadow node's state in order to recalculate layout
-  fun invalidateLayout(text: Editable?) {
-    measureSize(text ?: "")
+    val needUpdate = MeasurementStore.store(view.id, text, paint)
+    if (!needUpdate) return
 
     val counter = forceHeightRecalculationCounter
     forceHeightRecalculationCounter++
@@ -25,40 +19,7 @@ class EnrichedTextInputViewLayoutManager(private val view: EnrichedTextInputView
     view.stateWrapper?.updateState(state)
   }
 
-  fun getMeasuredSize(maxWidth: Float): Pair<Float, Float> {
-    if (maxWidth == cachedYogaWidth) {
-      return cachedSize
-    }
-
-    val text = view.text ?: ""
-    val result = measureAndCacheSize(text, maxWidth)
-    cachedYogaWidth = maxWidth
-    return result
-  }
-
-  fun measureSize(text: CharSequence): Pair<Float, Float> {
-    return measureAndCacheSize(text, cachedYogaWidth)
-  }
-
-  private fun measureAndCacheSize(text: CharSequence, maxWidth: Float): Pair<Float, Float> {
-    val result = measureSize(text, maxWidth)
-    cachedSize = result
-    return result
-  }
-
-  private fun measureSize(text: CharSequence, maxWidth: Float): Pair<Float, Float> {
-    val paint = view.paint
-    val textLength = text.length
-
-    val staticLayout = StaticLayout.Builder
-      .obtain(text, 0, textLength, paint, maxWidth.toInt())
-      .setIncludePad(true)
-      .setLineSpacing(0f, 1f)
-      .build()
-
-    val heightInSP = PixelUtil.toDIPFromPixel(staticLayout.height.toFloat())
-    val widthInSP = PixelUtil.toDIPFromPixel(maxWidth)
-
-    return Pair(widthInSP, heightInSP)
+  fun releaseMeasurementStore() {
+    MeasurementStore.release(view.id)
   }
 }

package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputViewManager.kt

@@ -15,7 +15,6 @@ import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.viewmanagers.EnrichedTextInputViewManagerDelegate
 import com.facebook.react.viewmanagers.EnrichedTextInputViewManagerInterface
 import com.facebook.yoga.YogaMeasureMode
-import com.facebook.yoga.YogaMeasureOutput
 import com.swmansion.enriched.events.OnInputBlurEvent
 import com.swmansion.enriched.events.OnChangeHtmlEvent
 import com.swmansion.enriched.events.OnChangeSelectionEvent
@@ -32,12 +31,8 @@ import com.swmansion.enriched.utils.jsonStringToStringMap
 @ReactModule(name = EnrichedTextInputViewManager.NAME)
 class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
   EnrichedTextInputViewManagerInterface<EnrichedTextInputView> {
-  private val mDelegate: ViewManagerDelegate<EnrichedTextInputView>
-  private var view: EnrichedTextInputView? = null
-
-  init {
-    mDelegate = EnrichedTextInputViewManagerDelegate(this)
-  }
+  private val mDelegate: ViewManagerDelegate<EnrichedTextInputView> =
+    EnrichedTextInputViewManagerDelegate(this)
 
   override fun getDelegate(): ViewManagerDelegate<EnrichedTextInputView>? {
     return mDelegate
@@ -48,10 +43,12 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
   }
 
   public override fun createViewInstance(context: ThemedReactContext): EnrichedTextInputView {
-    val view = EnrichedTextInputView(context)
-    this.view = view
+    return EnrichedTextInputView(context)
+  }
 
-    return view
+  override fun onDropViewInstance(view: EnrichedTextInputView) {
+    super.onDropViewInstance(view)
+    view.layoutManager.releaseMeasurementStore()
   }
 
   override fun updateState(
@@ -80,7 +77,7 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
 
   @ReactProp(name = "defaultValue")
   override fun setDefaultValue(view: EnrichedTextInputView?, value: String?) {
-    view?.setValue(value)
+    view?.setDefaultValue(value)
   }
 
   @ReactProp(name = "placeholder")
@@ -157,9 +154,14 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     view?.setFontStyle(style)
   }
 
+  @ReactProp(name = "scrollEnabled")
+  override fun setScrollEnabled(view: EnrichedTextInputView, scrollEnabled: Boolean) {
+    view.scrollEnabled = scrollEnabled
+  }
+
   override fun onAfterUpdateTransaction(view: EnrichedTextInputView) {
     super.onAfterUpdateTransaction(view)
-    view.updateTypeface()
+    view.afterUpdateTransaction()
   }
 
   override fun setPadding(
@@ -277,13 +279,8 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     heightMode: YogaMeasureMode?,
     attachmentsPositions: FloatArray?
   ): Long {
-    val size = this.view?.layoutManager?.getMeasuredSize(width)
-
-    if (size != null) {
-      return YogaMeasureOutput.make(size.first, size.second)
-    }
-
-    return YogaMeasureOutput.make(0, 0)
+    val id = localData?.getInt("viewTag")
+    return MeasurementStore.getMeasureById(context, id, width, props)
   }
 
   companion object {

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

@@ -0,0 +1,158 @@
+package com.swmansion.enriched
+
+import android.content.Context
+import android.graphics.Typeface
+import android.graphics.text.LineBreaker
+import android.os.Build
+import android.text.Spannable
+import android.text.StaticLayout
+import android.text.TextPaint
+import android.util.Log
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontStyle
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
+import com.facebook.yoga.YogaMeasureOutput
+import com.swmansion.enriched.styles.HtmlStyle
+import com.swmansion.enriched.utils.EnrichedParser
+import java.util.concurrent.ConcurrentHashMap
+import kotlin.math.ceil
+
+object MeasurementStore {
+  data class PaintParams(
+    val typeface: Typeface,
+    val fontSize: Float,
+  )
+
+  data class MeasurementParams(
+    val initialized: Boolean,
+
+    val cachedWidth: Float,
+    val cachedSize: Long,
+
+    val spannable: CharSequence?,
+    val paintParams: PaintParams,
+  )
+
+  private val data = ConcurrentHashMap<Int, MeasurementParams>()
+
+  fun store(id: Int, spannable: Spannable?, paint: TextPaint): Boolean {
+    val cachedWidth = data[id]?.cachedWidth ?: 0f
+    val cachedSize = data[id]?.cachedSize ?: 0L
+    val initialized = data[id]?.initialized ?: true
+
+    val size = measure(cachedWidth, spannable, paint)
+    val paintParams = PaintParams(paint.typeface, paint.textSize)
+
+    data[id] = MeasurementParams(initialized, cachedWidth, size, spannable, paintParams)
+    return cachedSize != size
+  }
+
+  fun release(id: Int) {
+    data.remove(id)
+  }
+
+  private fun measure(maxWidth: Float, spannable: CharSequence?, paintParams: PaintParams): Long {
+    val paint = TextPaint().apply {
+      typeface = paintParams.typeface
+      textSize = paintParams.fontSize
+    }
+
+    return measure(maxWidth, spannable, paint)
+  }
+
+  private fun measure(maxWidth: Float, spannable: CharSequence?, paint: TextPaint): Long {
+    val text = spannable ?: ""
+    val textLength = text.length
+    val builder = StaticLayout.Builder
+      .obtain(text, 0, textLength, paint, maxWidth.toInt())
+      .setIncludePad(true)
+      .setLineSpacing(0f, 1f)
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      builder.setBreakStrategy(LineBreaker.BREAK_STRATEGY_HIGH_QUALITY)
+    }
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      builder.setUseLineSpacingFromFallbacks(true)
+    }
+
+    val staticLayout = builder.build()
+    val heightInSP = PixelUtil.toDIPFromPixel(staticLayout.height.toFloat())
+    val widthInSP = PixelUtil.toDIPFromPixel(maxWidth)
+    return YogaMeasureOutput.make(widthInSP, heightInSP)
+  }
+
+  // Returns either: Spannable parsed from HTML defaultValue, or plain text defaultValue, or "I" if no defaultValue
+  private fun getInitialText(defaultView: EnrichedTextInputView, props: ReadableMap?): CharSequence {
+    val defaultValue = props?.getString("defaultValue")
+
+    // If there is no default value, assume text is one line, "I" is a good approximation of height
+    if (defaultValue == null) return "I"
+
+    val isHtml = defaultValue.startsWith("<html>") && defaultValue.endsWith("</html>")
+    if (!isHtml) return defaultValue
+
+    try {
+      val htmlStyle = HtmlStyle(defaultView, props.getMap("htmlStyle"))
+      val parsed = EnrichedParser.fromHtml(defaultValue, htmlStyle, null)
+      return parsed.trimEnd('\n')
+    } catch (e: Exception) {
+      Log.w("MeasurementStore", "Error parsing initial HTML text: ${e.message}")
+      return defaultValue
+    }
+  }
+
+  private fun getInitialFontSize(defaultView: EnrichedTextInputView, props: ReadableMap?): Float {
+    val propsFontSize = props?.getDouble("fontSize")?.toFloat()
+    if (propsFontSize == null) return defaultView.textSize
+
+    return ceil(PixelUtil.toPixelFromSP(propsFontSize))
+  }
+
+  // Called when view measurements are not available in the store
+  // Most likely first measurement, we can use defaultValue, as no native state is set yet
+  private fun initialMeasure(context: Context, id: Int?, width: Float, props: ReadableMap?): Long {
+    val defaultView = EnrichedTextInputView(context)
+
+    val text = getInitialText(defaultView, props)
+    val fontSize = getInitialFontSize(defaultView, props)
+
+    val fontFamily = props?.getString("fontFamily")
+    val fontStyle = parseFontStyle(props?.getString("fontStyle"))
+    val fontWeight = parseFontWeight(props?.getString("fontWeight"))
+
+    val typeface = applyStyles(defaultView.typeface, fontStyle, fontWeight, fontFamily, context.assets)
+    val paintParams = PaintParams(typeface, fontSize)
+    val size = measure(width, text, PaintParams(typeface, fontSize))
+
+    if (id != null) {
+      data[id] = MeasurementParams(true, width, size, text, paintParams)
+    }
+
+    return size
+  }
+
+  fun getMeasureById(context: Context, id: Int?, width: Float, props: ReadableMap?): Long {
+    val id = id ?: return initialMeasure(context, id, width, props)
+    val value = data[id] ?: return initialMeasure(context, id, width, props)
+
+    // First measure has to be done using initialMeasure
+    // That way it's free of any side effects and async initializations
+    if (!value.initialized) return initialMeasure(context, id, width, props)
+
+    if (width == value.cachedWidth) {
+      return value.cachedSize
+    }
+
+    val paint = TextPaint().apply {
+      typeface = value.paintParams.typeface
+      textSize = value.paintParams.fontSize
+    }
+
+    val size = measure(width, value.spannable, paint)
+    data[id] = MeasurementParams(true, width, size, value.spannable, value.paintParams)
+    return size
+  }
+}

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

@@ -4,13 +4,17 @@ import android.graphics.Canvas
 import android.graphics.Paint
 import android.text.Layout
 import android.text.TextPaint
-import android.text.style.CharacterStyle
 import android.text.style.LeadingMarginSpan
+import android.text.style.MetricAffectingSpan
 import com.swmansion.enriched.spans.interfaces.EnrichedBlockSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 // https://android.googlesource.com/platform/frameworks/base/+/refs/heads/main/core/java/android/text/style/QuoteSpan.java
-class EnrichedBlockQuoteSpan(private val htmlStyle: HtmlStyle) : CharacterStyle(), LeadingMarginSpan, EnrichedBlockSpan {
+class EnrichedBlockQuoteSpan(private val htmlStyle: HtmlStyle) : MetricAffectingSpan(), LeadingMarginSpan, EnrichedBlockSpan {
+  override fun updateMeasureState(p0: TextPaint) {
+    // Do nothing, but inform layout that this span affects text metrics
+  }
+
   override fun getLeadingMargin(p0: Boolean): Int {
     return htmlStyle.blockquoteStripeWidth + htmlStyle.blockquoteGapWidth
   }

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

@@ -5,15 +5,19 @@ import android.graphics.Paint
 import android.graphics.RectF
 import android.graphics.Typeface
 import android.text.TextPaint
-import android.text.style.CharacterStyle
 import android.text.style.LineBackgroundSpan
+import android.text.style.MetricAffectingSpan
 import com.swmansion.enriched.spans.interfaces.EnrichedBlockSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
-class EnrichedCodeBlockSpan(private val htmlStyle: HtmlStyle) : CharacterStyle(), LineBackgroundSpan, EnrichedBlockSpan {
-  override fun updateDrawState(paint: TextPaint?) {
-    paint?.typeface = Typeface.MONOSPACE
-    paint?.color = htmlStyle.codeBlockColor
+class EnrichedCodeBlockSpan(private val htmlStyle: HtmlStyle) : MetricAffectingSpan(), LineBackgroundSpan, EnrichedBlockSpan {
+  override fun updateDrawState(paint: TextPaint) {
+    paint.typeface = Typeface.MONOSPACE
+    paint.color = htmlStyle.codeBlockColor
+  }
+
+  override fun updateMeasureState(paint: TextPaint) {
+    paint.typeface = Typeface.MONOSPACE
   }
 
   override fun drawBackground(

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

@@ -2,15 +2,20 @@ package com.swmansion.enriched.spans
 
 import android.graphics.Typeface
 import android.text.TextPaint
-import android.text.style.BackgroundColorSpan
+import android.text.style.MetricAffectingSpan
 import com.swmansion.enriched.spans.interfaces.EnrichedInlineSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
-class EnrichedInlineCodeSpan(private val htmlStyle: HtmlStyle) : BackgroundColorSpan(htmlStyle.inlineCodeBackgroundColor), EnrichedInlineSpan {
+class EnrichedInlineCodeSpan(private val htmlStyle: HtmlStyle) : MetricAffectingSpan(), EnrichedInlineSpan {
   override fun updateDrawState(textPaint: TextPaint) {
-    super.updateDrawState(textPaint)
-
+    val typeface = Typeface.create(Typeface.MONOSPACE, Typeface.NORMAL)
+    textPaint.typeface = typeface
     textPaint.color = htmlStyle.inlineCodeColor
-    textPaint.typeface = Typeface.create(Typeface.MONOSPACE, Typeface.NORMAL)
+    textPaint.bgColor = htmlStyle.inlineCodeBackgroundColor
+  }
+
+  override fun updateMeasureState(textPaint: TextPaint) {
+    val typeface = Typeface.create(Typeface.MONOSPACE, Typeface.NORMAL)
+    textPaint.typeface = typeface
   }
 }

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

@@ -4,11 +4,21 @@ import android.graphics.Canvas
 import android.graphics.Paint
 import android.graphics.Typeface
 import android.text.Layout
+import android.text.TextPaint
 import android.text.style.LeadingMarginSpan
+import android.text.style.MetricAffectingSpan
 import com.swmansion.enriched.spans.interfaces.EnrichedParagraphSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
-class EnrichedOrderedListSpan(private var index: Int, private val htmlStyle: HtmlStyle) : LeadingMarginSpan, EnrichedParagraphSpan {
+class EnrichedOrderedListSpan(private var index: Int, private val htmlStyle: HtmlStyle) : MetricAffectingSpan(), LeadingMarginSpan, EnrichedParagraphSpan {
+  override fun updateMeasureState(p0: TextPaint) {
+    // Do nothing, but inform layout that this span affects text metrics
+  }
+
+  override fun updateDrawState(p0: TextPaint?) {
+    // Do nothing, but inform layout that this span affects text metrics
+  }
+
   override fun getLeadingMargin(first: Boolean): Int {
     return htmlStyle.olMarginLeft + htmlStyle.olGapWidth
   }