Merge branch 'main' into fix/initial-hmtl-styles-are-not-applied

Author: IvanIhnatsiuk

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,31 @@
+<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect -->
+
+# Summary
+
+Explain the **motivation** for making this change: here are some points to help you:
+
+- What issues does the pull request solve? Please tag them so that they will get automatically closed once PR is merged
+- What is the feature? (if applicable)
+- How did you implement the solution?
+- What areas of the library does it impact?
+
+## Test Plan
+
+Provide **clear steps so another contributor can reproduce the behavior or verify the feature works**.  
+For example:
+
+- Steps to reproduce the bug (if this is a bug fix)
+- Steps to verify the new feature
+- Expected vs actual results
+- Any special conditions or edge cases to test
+
+## Screenshots / Videos
+
+Include any visual proof that helps reviewers understand the change — UI updates, bug reproduction or the result of the fix.
+
+## Compatibility
+
+| OS      | Implemented |
+| ------- | :---------: |
+| iOS     |    ✅❌     |
+| Android |    ✅❌     |

README.md

@@ -101,11 +101,11 @@ export default function App() {
     <View style={styles.container}>
       <EnrichedTextInput
         ref={ref}
-        onChangeState={(e) => setStylesState(e.nativeEvent)}
+        onChangeState={e => setStylesState(e.nativeEvent)}
         style={styles.input}
       />
       <Button
-        title="Toggle bold"
+        title={stylesState?.isBold ? 'Unbold' : 'Bold'}
         color={stylesState?.isBold ? 'green' : 'gray'}
         onPress={() => ref.current?.toggleBold()}
       />

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

@@ -29,6 +29,7 @@ import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
 import com.swmansion.enriched.events.MentionHandler
 import com.swmansion.enriched.events.OnInputBlurEvent
 import com.swmansion.enriched.events.OnInputFocusEvent
+import com.swmansion.enriched.spans.EnrichedImageSpan
 import com.swmansion.enriched.spans.EnrichedSpans
 import com.swmansion.enriched.styles.InlineStyles
 import com.swmansion.enriched.styles.ListStyles
@@ -54,6 +55,7 @@ class EnrichedTextInputView : AppCompatEditText {
   val parametrizedStyles: ParametrizedStyles? = ParametrizedStyles(this)
   var isDuringTransaction: Boolean = false
   var isRemovingMany: Boolean = false
+  var scrollEnabled: Boolean = true
 
   val mentionHandler: MentionHandler? = MentionHandler(this)
   var htmlStyle: HtmlStyle = HtmlStyle(this, null)
@@ -76,6 +78,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
 
@@ -143,6 +147,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)
@@ -249,6 +261,7 @@ class EnrichedTextInputView : AppCompatEditText {
       val newText = parseText(value)
       setText(newText)
 
+      observeAsyncImages()
       // Assign SpanWatcher one more time as our previous spannable has been replaced
       addSpanWatcher(EnrichedSpanWatcher(this))
 
@@ -257,6 +270,20 @@ class EnrichedTextInputView : AppCompatEditText {
     }
   }
 
+  /**
+   * Finds all async images in the current text and sets up listeners
+   * to redraw the text layout when they finish downloading.
+   */
+  private fun observeAsyncImages() {
+    val liveText = text ?: return
+
+    val spans = liveText.getSpans(0, liveText.length, EnrichedImageSpan::class.java)
+
+    for (span in spans) {
+      span.observeAsyncDrawableLoaded(liveText)
+    }
+  }
+
   fun setAutoFocus(autoFocus: Boolean) {
     this.autoFocus = autoFocus
   }
@@ -366,7 +393,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
 
@@ -444,7 +488,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
@@ -505,11 +549,11 @@ class EnrichedTextInputView : AppCompatEditText {
     parametrizedStyles?.setLinkSpan(start, end, text, url)
   }
 
-  fun addImage(src: String) {
+  fun addImage(src: String, width: Float, height: Float) {
     val isValid = verifyStyle(EnrichedSpans.IMAGE)
     if (!isValid) return
 
-    parametrizedStyles?.setImageSpan(src)
+    parametrizedStyles?.setImageSpan(src, width, height)
     layoutManager.invalidateLayout()
   }
 

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

@@ -1,7 +1,6 @@
 package com.swmansion.enriched
 
 import android.content.Context
-import android.util.Log
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
@@ -78,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")
@@ -155,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(
@@ -251,8 +255,8 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     view?.addLink(start, end, text, url)
   }
 
-  override fun addImage(view: EnrichedTextInputView?, src: String) {
-    view?.addImage(src)
+  override fun addImage(view: EnrichedTextInputView?, src: String, width: Float, height: Float) {
+    view?.addImage(src, width, height)
   }
 
   override fun startMention(view: EnrichedTextInputView?, indicator: String) {
@@ -275,7 +279,8 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     heightMode: YogaMeasureMode?,
     attachmentsPositions: FloatArray?
   ): Long {
-    return MeasurementStore.getMeasureById(localData?.getInt("viewTag"), width)
+    val id = localData?.getInt("viewTag")
+    return MeasurementStore.getMeasureById(context, id, width, props)
   }
 
   companion object {

android/src/main/java/com/swmansion/enriched/EnrichedTextInputViewPackage.kt

@@ -4,10 +4,12 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
+import com.swmansion.enriched.utils.ResourceManager
 import java.util.ArrayList
 
 class EnrichedTextInputViewPackage : ReactPackage {
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    ResourceManager.init(reactContext.applicationContext)
     val viewManagers: MutableList<ViewManager<*, *>> = ArrayList()
     viewManagers.add(EnrichedTextInputViewManager())
     return viewManagers

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

@@ -1,14 +1,23 @@
 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(
@@ -17,10 +26,12 @@ object MeasurementStore {
   )
 
   data class MeasurementParams(
+    val initialized: Boolean,
+
     val cachedWidth: Float,
     val cachedSize: Long,
 
-    val spannable: Spannable?,
+    val spannable: CharSequence?,
     val paintParams: PaintParams,
   )
 
@@ -29,18 +40,20 @@ object MeasurementStore {
   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(cachedWidth, size, spannable, paintParams)
+    data[id] = MeasurementParams(initialized, cachedWidth, size, spannable, paintParams)
     return cachedSize != size
   }
 
   fun release(id: Int) {
     data.remove(id)
   }
 
-  fun measure(maxWidth: Float, spannable: Spannable?, paintParams: PaintParams): Long {
+  private fun measure(maxWidth: Float, spannable: CharSequence?, paintParams: PaintParams): Long {
     val paint = TextPaint().apply {
       typeface = paintParams.typeface
       textSize = paintParams.fontSize
@@ -49,7 +62,7 @@ object MeasurementStore {
     return measure(maxWidth, spannable, paint)
   }
 
-  fun measure(maxWidth: Float, spannable: Spannable?, paint: TextPaint): Long {
+  private fun measure(maxWidth: Float, spannable: CharSequence?, paint: TextPaint): Long {
     val text = spannable ?: ""
     val textLength = text.length
     val builder = StaticLayout.Builder
@@ -71,9 +84,63 @@ object MeasurementStore {
     return YogaMeasureOutput.make(widthInSP, heightInSP)
   }
 
-  fun getMeasureById(id: Int?, width: Float): Long {
-    val id = id ?: return YogaMeasureOutput.make(0, 0)
-    val value = data[id] ?: return YogaMeasureOutput.make(0, 0)
+  // 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
@@ -83,8 +150,9 @@ object MeasurementStore {
       typeface = value.paintParams.typeface
       textSize = value.paintParams.fontSize
     }
+
     val size = measure(width, value.spannable, paint)
-    data[id] = MeasurementParams(width, size, value.spannable, value.paintParams)
+    data[id] = MeasurementParams(true, width, size, value.spannable, value.paintParams)
     return size
   }
 }