react-native-enriched 0.1.4 → 0.1.5

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,9 +52,6 @@ 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
 
@@ -102,6 +100,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)
 
@@ -236,18 +238,17 @@ class EnrichedTextInputView : AppCompatEditText {
 
   fun setValue(value: CharSequence?) {
     if (value == null) return
-    isDuringTransaction = true
 
-    val newText = parseText(value)
-    setText(newText)
+    runAsATransaction {
+      val newText = parseText(value)
+      setText(newText)
 
-    // Assign SpanWatcher one more time as our previous spannable has been replaced
-    addSpanWatcher(EnrichedSpanWatcher(this))
-
-    // 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) {
@@ -455,13 +456,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
@@ -519,6 +520,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()
 

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

@@ -1,5 +1,7 @@
 package com.swmansion.enriched
 
+import android.graphics.text.LineBreaker
+import android.os.Build
 import android.text.Editable
 import android.text.StaticLayout
 import com.facebook.react.bridge.Arguments
@@ -50,12 +52,20 @@ class EnrichedTextInputViewLayoutManager(private val view: EnrichedTextInputView
     val paint = view.paint
     val textLength = text.length
 
-    val staticLayout = StaticLayout.Builder
+    val builder = StaticLayout.Builder
       .obtain(text, 0, textLength, paint, maxWidth.toInt())
       .setIncludePad(true)
       .setLineSpacing(0f, 1f)
-      .build()
 
+    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)
 

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
   }

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

@@ -4,12 +4,22 @@ import android.graphics.Canvas
 import android.graphics.Paint
 import android.text.Layout
 import android.text.Spanned
+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
 
 // https://android.googlesource.com/platform/frameworks/base/+/refs/heads/main/core/java/android/text/style/BulletSpan.java
-class EnrichedUnorderedListSpan(private val htmlStyle: HtmlStyle) : LeadingMarginSpan, EnrichedParagraphSpan {
+class EnrichedUnorderedListSpan(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(p0: Boolean): Int {
     return htmlStyle.ulBulletSize + htmlStyle.ulGapWidth + htmlStyle.ulMarginLeft
   }

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

@@ -58,12 +58,11 @@ class ListStyles(private val view: EnrichedTextInputView) {
     val spans = ssb.getSpans(start, end, clazz)
     if (spans.isEmpty()) return false
 
-    ssb.replace(start, end, ssb.substring(start, end).replace("\u200B", ""))
-
     for (span in spans) {
       ssb.removeSpan(span)
     }
 
+    ssb.replace(start, end, ssb.substring(start, end).replace("\u200B", ""))
     return true
   }
 

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

@@ -201,20 +201,21 @@ class ParametrizedStyles(private val view: EnrichedTextInputView) {
     }
 
     val start = mentionStart ?: return
-    view.isDuringTransaction = true
-    spannable.replace(start, selectionEnd, text)
 
-    val span = EnrichedMentionSpan(text, indicator, attributes, view.htmlStyle)
-    val spanEnd = start + text.length
-    val (safeStart, safeEnd) = spannable.getSafeSpanBoundaries(start, spanEnd)
-    spannable.setSpan(span, safeStart, safeEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+    view.runAsATransaction {
+      spannable.replace(start, selectionEnd, text)
 
-    val hasSpaceAtTheEnd = spannable.length > safeEnd && spannable[safeEnd] == ' '
-    if (!hasSpaceAtTheEnd) {
-      spannable.insert(safeEnd, " ")
+      val span = EnrichedMentionSpan(text, indicator, attributes, view.htmlStyle)
+      val spanEnd = start + text.length
+      val (safeStart, safeEnd) = spannable.getSafeSpanBoundaries(start, spanEnd)
+      spannable.setSpan(span, safeStart, safeEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+
+      val hasSpaceAtTheEnd = spannable.length > safeEnd && spannable[safeEnd] == ' '
+      if (!hasSpaceAtTheEnd) {
+        spannable.insert(safeEnd, " ")
+      }
     }
 
-    view.isDuringTransaction = false
     view.mentionHandler?.reset()
     view.selection.validateStyles()
   }

package/ios/EnrichedTextInputView.mm

@@ -1091,10 +1091,15 @@ Class<RCTComponentViewProtocol> EnrichedTextInputViewCls(void) {
   [self tryUpdatingHeight];
   // update active styles as well
   [self tryUpdatingActiveStyles];
+
   // update drawing
-  NSRange wholeRange = NSMakeRange(0, textView.textStorage.string.length);
-  [textView.layoutManager invalidateLayoutForCharacterRange:wholeRange actualCharacterRange:nullptr];
-  [textView.layoutManager invalidateDisplayForCharacterRange:wholeRange];
+   dispatch_async(dispatch_get_main_queue(), ^{
+     NSRange wholeRange = NSMakeRange(0, textView.textStorage.string.length);
+     NSRange actualRange = NSMakeRange(0, 0);
+     [textView.layoutManager invalidateLayoutForCharacterRange:wholeRange actualCharacterRange:&actualRange];
+     [textView.layoutManager ensureLayoutForCharacterRange:actualRange];
+     [textView.layoutManager invalidateDisplayForCharacterRange:wholeRange];
+   });
 }
 
 // MARK: - UITextView delegate methods

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-enriched",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Rich Text Editor component for React Native",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -39,7 +39,8 @@
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
     "release": "release-it",
-    "android-studio": "open -a 'Android Studio' example/android"
+    "android-studio": "open -a 'Android Studio' example/android",
+    "xcode": "open -a 'Xcode' example/ios/EnrichedTextInputExample.xcworkspace"
   },
   "keywords": [
     "react-native",