fix: android layout calculation race condition

Author: exploIF

android/src/main/java/com/swmansion/reactnativerichtexteditor/ReactNativeRichTextEditorView.kt

@@ -6,6 +6,7 @@ import android.graphics.BlendModeColorFilter
 import android.graphics.Color
 import android.graphics.Rect
 import android.os.Build
+import android.text.Editable
 import android.text.Spannable
 import android.text.StaticLayout
 import android.util.AttributeSet
@@ -53,6 +54,8 @@ class ReactNativeRichTextEditorView : AppCompatEditText {
   val mentionHandler: MentionHandler? = MentionHandler(this)
   var richTextStyle: RichTextStyle = RichTextStyle(this, null)
   var spanWatcher: EditorSpanWatcher? = null
+  var layoutManager: ReactNativeRichTextEditorViewLayoutManager? =
+    ReactNativeRichTextEditorViewLayoutManager(this)
 
   var fontSize: Float? = null
   private var autoFocus = false
@@ -66,6 +69,9 @@ class ReactNativeRichTextEditorView : AppCompatEditText {
 
   private var inputMethodManager: InputMethodManager? = null
 
+  private var maxWidth: Float = 0f
+  private var currentMeasureSize: Pair<Float, Float> = Pair(0f, 0f)
+
   constructor(context: Context) : super(context) {
     prepareComponent()
   }
@@ -274,25 +280,6 @@ class ReactNativeRichTextEditorView : AppCompatEditText {
     return false
   }
 
-  fun measureSize(maxWidth: Float): Pair<Float, Float> {
-    Log.d("ReactNativeRichTextEditorView", "measureSize called with maxWidth: $maxWidth")
-
-    val paint = this.paint
-    val spannable = text as Spannable
-    val spannableLength = spannable.length
-
-    val staticLayout = StaticLayout.Builder
-      .obtain(spannable, 0, spannableLength, 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 updateTypeface() {
     if (!typefaceDirty) return
     typefaceDirty = false
@@ -386,10 +373,11 @@ class ReactNativeRichTextEditorView : AppCompatEditText {
 
   // Update shadow node's state in order to recalculate layout
   fun updateYogaState() {
+    layoutManager?.measureSize(text ?: "")
+
     val counter = forceHeightRecalculationCounter
     forceHeightRecalculationCounter++
     val state = Arguments.createMap()
-
     state.putInt("forceHeightRecalculationCounter", counter)
     stateWrapper?.updateState(state)
   }

android/src/main/java/com/swmansion/reactnativerichtexteditor/ReactNativeRichTextEditorViewLayoutManager.kt

@@ -0,0 +1,46 @@
+package com.swmansion.reactnativerichtexteditor
+
+import android.text.StaticLayout
+import com.facebook.react.uimanager.PixelUtil
+
+class ReactNativeRichTextEditorViewLayoutManager(private val editorView: ReactNativeRichTextEditorView) {
+  private var cachedSize: Pair<Float, Float> = Pair(0f, 0f)
+  private var cachedYogaWidth: Float = 0f
+
+  fun getMeasuredSize(maxWidth: Float): Pair<Float, Float> {
+    if (maxWidth == cachedYogaWidth) {
+      return cachedSize
+    }
+
+    val text = editorView.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 = editorView.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)
+  }
+}

android/src/main/java/com/swmansion/reactnativerichtexteditor/ReactNativeRichTextEditorViewManager.kt

@@ -1,6 +1,7 @@
 package com.swmansion.reactnativerichtexteditor
 
 import android.content.Context
+import android.text.Spannable
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
@@ -262,7 +263,7 @@ class ReactNativeRichTextEditorViewManager : SimpleViewManager<ReactNativeRichTe
     heightMode: YogaMeasureMode?,
     attachmentsPositions: FloatArray?
   ): Long {
-    val size = this.view?.measureSize(width)
+    val size = this.view?.layoutManager?.getMeasuredSize(width)
 
     if (size != null) {
       return YogaMeasureOutput.make(size.first, size.second)

android/src/main/java/com/swmansion/reactnativerichtexteditor/watchers/EditorTextWatcher.kt

@@ -17,6 +17,8 @@ class EditorTextWatcher(private val editorView: ReactNativeRichTextEditorView) :
 
   override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
     endCursorPosition = start + count
+
+    editorView.layoutManager?.measureSize(s ?: "")
   }
 
   override fun afterTextChanged(s: Editable?) {