react-native-enriched 0.1.6 → 0.2.0

package/README.md

@@ -1,4 +1,4 @@
-<img src="https://github.com/user-attachments/assets/abc75d3b-495b-4a76-a72f-d87ce3ca1ff9" alt="react-native-enriched by Software Mansion" width="100%">
+<img src="https://github.com/user-attachments/assets/b010571e-e4a3-4d92-a409-4f9fe614025d" alt="react-native-enriched by Software Mansion" width="100%">
 
 # react-native-enriched
 
@@ -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()}
       />
@@ -152,9 +152,6 @@ Supported styles:
 - ordered list
 - unordered list
 
-> [!NOTE]
-> The iOS doesn't support codeblocks just yet, but it's planned in the near future!
-
 Each of the styles can be toggled the same way as in the example from [usage section](#usage); call a proper `toggle` function on the component ref.
 
 Each call toggles the style within the current text selection. We can still divide styles into two categories based on how they treat the selection:
@@ -212,9 +209,6 @@ You can insert an image into the input using [setImage](docs/API_REFERENCE.md#se
 
 The image will be put into a single line in the input and will affect the line's height as well as input's height. Keep in mind, that image will replace currently selected text or insert into the cursor position if there is no text selection.
 
-> [!NOTE]
-> The iOS doesn't support inline images just yet, but it's planned in the near future!
-
 ## Style Detection
 
 All of the above styles can be detected with the use of [onChangeState](docs/API_REFERENCE.md#onchangestate) event payload.

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

@@ -136,7 +136,7 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
         mViewManager.addLink(view, args.getInt(0), args.getInt(1), args.getString(2), args.getString(3));
         break;
       case "addImage":
-        mViewManager.addImage(view, args.getString(0));
+        mViewManager.addImage(view, args.getString(0), (float) args.getDouble(1), (float) args.getDouble(2));
         break;
       case "startMention":
         mViewManager.startMention(view, args.getString(0));

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

@@ -50,7 +50,7 @@ public interface EnrichedTextInputViewManagerInterface<T extends View> extends V
   void toggleOrderedList(T view);
   void toggleUnorderedList(T view);
   void addLink(T view, int start, int end, String text, String url);
-  void addImage(T view, String uri);
+  void addImage(T view, String uri, float width, float height);
   void startMention(T view, String indicator);
   void addMention(T view, String indicator, String text, String payload);
 }

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

@@ -309,45 +309,6 @@ static inline folly::dynamic toDynamic(const EnrichedTextInputViewHtmlStyleAStru
 }
 #endif
 
-struct EnrichedTextInputViewHtmlStyleImgStruct {
-  Float width{0.0};
-  Float height{0.0};
-
-#ifdef RN_SERIALIZABLE_STATE
-  bool operator==(const EnrichedTextInputViewHtmlStyleImgStruct&) const = default;
-
-  folly::dynamic toDynamic() const {
-    folly::dynamic result = folly::dynamic::object();
-    result["width"] = width;
-    result["height"] = height;
-    return result;
-  }
-#endif
-};
-
-static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, EnrichedTextInputViewHtmlStyleImgStruct &result) {
-  auto map = (std::unordered_map<std::string, RawValue>)value;
-
-  auto tmp_width = map.find("width");
-  if (tmp_width != map.end()) {
-    fromRawValue(context, tmp_width->second, result.width);
-  }
-  auto tmp_height = map.find("height");
-  if (tmp_height != map.end()) {
-    fromRawValue(context, tmp_height->second, result.height);
-  }
-}
-
-static inline std::string toString(const EnrichedTextInputViewHtmlStyleImgStruct &value) {
-  return "[Object EnrichedTextInputViewHtmlStyleImgStruct]";
-}
-
-#ifdef RN_SERIALIZABLE_STATE
-static inline folly::dynamic toDynamic(const EnrichedTextInputViewHtmlStyleImgStruct &value) {
-  return value.toDynamic();
-}
-#endif
-
 struct EnrichedTextInputViewHtmlStyleOlStruct {
   Float gapWidth{0.0};
   Float marginLeft{0.0};
@@ -459,7 +420,6 @@ struct EnrichedTextInputViewHtmlStyleStruct {
   EnrichedTextInputViewHtmlStyleCodeStruct code{};
   EnrichedTextInputViewHtmlStyleAStruct a{};
   folly::dynamic mention{};
-  EnrichedTextInputViewHtmlStyleImgStruct img{};
   EnrichedTextInputViewHtmlStyleOlStruct ol{};
   EnrichedTextInputViewHtmlStyleUlStruct ul{};
 
@@ -476,7 +436,6 @@ struct EnrichedTextInputViewHtmlStyleStruct {
     result["code"] = ::facebook::react::toDynamic(code);
     result["a"] = ::facebook::react::toDynamic(a);
     result["mention"] = mention;
-    result["img"] = ::facebook::react::toDynamic(img);
     result["ol"] = ::facebook::react::toDynamic(ol);
     result["ul"] = ::facebook::react::toDynamic(ul);
     return result;
@@ -519,10 +478,6 @@ static inline void fromRawValue(const PropsParserContext& context, const RawValu
   if (tmp_mention != map.end()) {
     fromRawValue(context, tmp_mention->second, result.mention);
   }
-  auto tmp_img = map.find("img");
-  if (tmp_img != map.end()) {
-    fromRawValue(context, tmp_img->second, result.img);
-  }
   auto tmp_ol = map.find("ol");
   if (tmp_ol != map.end()) {
     fromRawValue(context, tmp_ol->second, result.ol);

package/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
@@ -61,6 +62,7 @@ class EnrichedTextInputView : AppCompatEditText {
   var spanWatcher: EnrichedSpanWatcher? = null
   var layoutManager: EnrichedTextInputViewLayoutManager = EnrichedTextInputViewLayoutManager(this)
 
+  var shouldEmitHtml: Boolean = true
   var experimentalSynchronousEvents: Boolean = false
 
   var fontSize: Float? = null
@@ -254,6 +256,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))
 
@@ -262,6 +265,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
   }
@@ -527,11 +544,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()
   }
 

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

@@ -177,7 +177,7 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
   }
 
   override fun setIsOnChangeHtmlSet(view: EnrichedTextInputView?, value: Boolean) {
-    // this prop isn't used on Android as of now, but the setter must be present
+    view?.shouldEmitHtml = value
   }
 
   override fun setAutoCapitalize(view: EnrichedTextInputView?, flag: String?) {
@@ -255,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) {

package/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

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

@@ -2,8 +2,10 @@ package com.swmansion.enriched.spans
 
 import android.graphics.Canvas
 import android.graphics.Paint
+import android.graphics.Path
 import android.graphics.RectF
 import android.graphics.Typeface
+import android.text.Spanned
 import android.text.TextPaint
 import android.text.style.LineBackgroundSpan
 import android.text.style.MetricAffectingSpan
@@ -33,10 +35,43 @@ class EnrichedCodeBlockSpan(private val htmlStyle: HtmlStyle) : MetricAffectingS
     end: Int,
     lineNum: Int
   ) {
+    if (text !is Spanned) {
+      return
+    }
+
     val previousColor = p.color
     p.color = htmlStyle.codeBlockBackgroundColor
+
+    val radius = htmlStyle.codeBlockRadius
+
+    val spanStart = text.getSpanStart(this)
+    val spanEnd = text.getSpanEnd(this)
+    val isFirstLineOfSpan = start == spanStart
+    val isLastLineOfSpan = end == spanEnd || (spanEnd + 1 == end && text[spanEnd] == '\n')
+
+    val path = Path()
+    val radii = floatArrayOf(0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f)
+
+    if (isFirstLineOfSpan) {
+      // Top-Left and Top-Right corners
+      radii[0] = radius
+      radii[1] = radius
+      radii[2] = radius
+      radii[3] = radius
+    }
+
+    if (isLastLineOfSpan) {
+      // Bottom-Right and Bottom-Left corners
+      radii[4] = radius
+      radii[5] = radius
+      radii[6] = radius
+      radii[7] = radius
+    }
+
     val rect = RectF(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat())
-    canvas.drawRoundRect(rect, htmlStyle.codeBlockRadius, htmlStyle.codeBlockRadius, p)
+
+    path.addRoundRect(rect, radii, Path.Direction.CW)
+    canvas.drawPath(path, p)
     p.color = previousColor
   }
 }

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

@@ -1,24 +1,32 @@
 package com.swmansion.enriched.spans
 
-import android.content.Context
+import android.annotation.SuppressLint
+import android.content.res.Resources
+import android.graphics.BitmapFactory
 import android.graphics.Canvas
 import android.graphics.Paint
+import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.Drawable
-import android.net.Uri
+import android.text.Editable
+import android.text.Spannable
 import android.text.style.ImageSpan
+import android.util.Log
+import androidx.core.graphics.drawable.DrawableCompat
 import androidx.core.graphics.withSave
 import com.swmansion.enriched.spans.interfaces.EnrichedInlineSpan
-import com.swmansion.enriched.styles.HtmlStyle
+import com.swmansion.enriched.utils.AsyncDrawable
+import androidx.core.graphics.drawable.toDrawable
+import com.swmansion.enriched.R
+import com.swmansion.enriched.spans.utils.ForceRedrawSpan
+import com.swmansion.enriched.utils.ResourceManager
 
 class EnrichedImageSpan : ImageSpan, EnrichedInlineSpan {
-  private var htmlStyle: HtmlStyle? = null
+  private var width: Int = 0
+  private var height: Int = 0
 
-  constructor(context: Context, uri: Uri, htmlStyle: HtmlStyle, ) : super(context, uri, ALIGN_BASELINE) {
-    this.htmlStyle = htmlStyle
-  }
-
-  constructor(drawable: Drawable, source: String, htmlStyle: HtmlStyle) : super(drawable, source, ALIGN_BASELINE) {
-    this.htmlStyle = htmlStyle
+  constructor(drawable: Drawable, source: String, width: Int, height: Int) : super(drawable, source, ALIGN_BASELINE) {
+    this.width = width
+    this.height = height
   }
 
   override fun draw(
@@ -35,7 +43,120 @@ class EnrichedImageSpan : ImageSpan, EnrichedInlineSpan {
 
   override fun getDrawable(): Drawable {
     val drawable = super.getDrawable()
-    drawable.setBounds(0, 0, htmlStyle!!.imgWidth, htmlStyle!!.imgHeight)
+    val scale = Resources.getSystem().displayMetrics.density
+
+    drawable.setBounds(0, 0, (width * scale).toInt() , (height * scale).toInt())
     return drawable
   }
+
+  override fun getSize(
+    paint: Paint,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    fm: Paint.FontMetricsInt?
+  ): Int {
+    val d = drawable
+    val rect = d.bounds
+
+    if (fm != null) {
+      val imageHeight = rect.bottom - rect.top
+
+      // We want the image bottom to sit on the baseline (0).
+      // Therefore, the image top will be at: -imageHeight.
+      val targetTop = -imageHeight
+
+      // Expand the line UPWARDS if the image is taller than the current font
+      if (targetTop < fm.ascent) {
+        fm.ascent = targetTop
+        fm.top = targetTop
+      }
+    }
+
+    return rect.right
+  }
+
+  private fun registerDrawableLoadCallback (d: AsyncDrawable, text: Editable?) {
+    d.onLoaded = onLoaded@{
+      val spannable = text as? Spannable
+
+      if (spannable == null) {
+        return@onLoaded
+      }
+
+      val start = spannable.getSpanStart(this@EnrichedImageSpan)
+      val end = spannable.getSpanEnd(this@EnrichedImageSpan)
+
+      if (start != -1 && end != -1) {
+        // trick for adding empty span to force redraw when image is loaded
+        val redrawSpan = ForceRedrawSpan()
+        spannable.setSpan(redrawSpan, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+        spannable.removeSpan(redrawSpan)
+      }
+    }
+  }
+
+  fun observeAsyncDrawableLoaded(text: Editable?) {
+    val d = drawable
+
+    if (d !is AsyncDrawable) {
+      return
+    }
+
+    registerDrawableLoadCallback(d, text)
+
+    // If it's already loaded (race condition), run logic immediately
+    if (d.isLoaded) {
+      d.onLoaded?.invoke()
+    }
+  }
+
+  fun getWidth(): Int {
+    return width
+  }
+
+  fun getHeight(): Int {
+    return height
+  }
+
+  companion object {
+    fun createEnrichedImageSpan(src: String, width: Int, height: Int): EnrichedImageSpan {
+      var imgDrawable = prepareDrawableForImage(src)
+
+      if (imgDrawable == null) {
+        imgDrawable = ResourceManager.getDrawableResource(R.drawable.broken_image)
+      }
+
+      return EnrichedImageSpan(imgDrawable, src, width, height)
+    }
+
+    private fun prepareDrawableForImage(src: String): Drawable? {
+      var cleanPath = src
+
+      if (cleanPath.startsWith("http://") || cleanPath.startsWith("https://")) {
+        return AsyncDrawable(cleanPath)
+      }
+
+      if (cleanPath.startsWith("file://")) {
+        cleanPath = cleanPath.substring(7)
+      }
+
+      var drawable: BitmapDrawable? = null
+
+      try {
+        val bitmap = BitmapFactory.decodeFile(cleanPath)
+        if (bitmap != null) {
+          drawable = bitmap.toDrawable(Resources.getSystem())
+          // set bounds so it knows how big it is naturally,
+          // though EnrichedImageSpan will override this with the HTML width/height later.
+          drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight())
+        }
+      } catch (e: Exception) {
+        // Failed to load file
+        Log.e("EnrichedImageSpan", "Failed to load image from path: $cleanPath", e)
+      }
+
+      return drawable
+    }
+  }
 }

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

@@ -123,4 +123,8 @@ object EnrichedSpans {
       else -> null
     }
   }
+
+  fun isTypeContinuous(type: Class<*>): Boolean {
+    return paragraphSpans.values.find { it.clazz == type }?.isContinuous == true
+  }
 }

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

@@ -0,0 +1,13 @@
+package com.swmansion.enriched.spans.utils
+
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+
+class ForceRedrawSpan:  MetricAffectingSpan() {
+  override fun updateMeasureState(tp: TextPaint) {
+    // Do nothing, we don't actually want to change how it looks
+  }
+  override fun updateDrawState(tp: TextPaint?) {
+    // Do nothing
+  }
+}

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

@@ -43,9 +43,6 @@ class HtmlStyle {
   var ulBulletSize: Int = 8
   var ulBulletColor: Int = Color.BLACK
 
-  var imgWidth: Int = 200
-  var imgHeight: Int = 200
-
   var aColor: Int = Color.BLACK
   var aUnderline: Boolean = true
 
@@ -100,10 +97,6 @@ class HtmlStyle {
     ulMarginLeft = parseFloat(ulStyle, "marginLeft").toInt()
     ulBulletSize = parseFloat(ulStyle, "bulletSize").toInt()
 
-    val imgStyle = style.getMap("img")
-    imgWidth = parseFloat(imgStyle, "width").toInt()
-    imgHeight = parseFloat(imgStyle, "height").toInt()
-
     val aStyle = style.getMap("a")
     aColor = parseColor(aStyle, "color")
     aUnderline = parseIsUnderline(aStyle)
@@ -124,8 +117,8 @@ class HtmlStyle {
   private fun parseFloat(map: ReadableMap?, key: String): Float {
     val safeMap = ensureValueIsSet(map, key)
 
-    val fontSize = safeMap.getDouble(key)
-    return ceil(PixelUtil.toPixelFromSP(fontSize))
+    val value = safeMap.getDouble(key)
+    return ceil(PixelUtil.toPixelFromSP(value))
   }
 
   private fun parseColorWithOpacity(map: ReadableMap?, key: String, opacity: Int): Int {

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

@@ -54,6 +54,7 @@ class InlineStyles(private val view: EnrichedTextInputView) {
       val spanEnd = spannable.getSpanEnd(span)
       var finalStart: Int? = null
       var finalEnd: Int? = null
+      if (spanStart == -1 || spanEnd == -1) continue
 
       spannable.removeSpan(span)
 

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

@@ -3,13 +3,86 @@ package com.swmansion.enriched.styles
 import android.text.Editable
 import android.text.Spannable
 import android.text.SpannableStringBuilder
+import android.util.Log
 import com.swmansion.enriched.EnrichedTextInputView
+import com.swmansion.enriched.spans.EnrichedBlockQuoteSpan
+import com.swmansion.enriched.spans.EnrichedCodeBlockSpan
 import com.swmansion.enriched.spans.EnrichedSpans
 import com.swmansion.enriched.utils.getParagraphBounds
 import com.swmansion.enriched.utils.getSafeSpanBoundaries
 
 class ParagraphStyles(private val view: EnrichedTextInputView) {
+  private fun <T>getPreviousParagraphSpan(spannable: Spannable, paragraphStart: Int, type: Class<T>): T? {
+    if (paragraphStart <= 0) return null
+
+    val (previousParagraphStart, previousParagraphEnd) = spannable.getParagraphBounds(paragraphStart - 1)
+    val spans = spannable.getSpans(previousParagraphStart, previousParagraphEnd, type)
+
+    // A paragraph implies a single cohesive style. having multiple spans of the
+    // same type (e.g., two codeblock spans) in one paragraph is an invalid state in current library logic
+    if (spans.size > 1) {
+      Log.w("ParagraphStyles", "getPreviousParagraphSpan(): Found more than one span in the paragraph!")
+    }
+
+    if (spans.isNotEmpty()) {
+      return spans.first()
+    }
+
+    return null
+  }
+
+  private fun <T>getNextParagraphSpan(spannable: Spannable, paragraphEnd: Int, type: Class<T>): T? {
+    if (paragraphEnd >= spannable.length - 1) return null
+
+    val (nextParagraphStart, nextParagraphEnd) = spannable.getParagraphBounds(paragraphEnd + 1)
+
+    val spans = spannable.getSpans(nextParagraphStart, nextParagraphEnd, type)
+
+    // A paragraph implies a single cohesive style. having multiple spans of the
+    // same type (e.g., two codeblock spans) in one paragraph is an invalid state in current library logic
+    if (spans.size > 1) {
+      Log.w("ParagraphStyles", "getNextParagraphSpan(): Found more than one span in the paragraph!")
+    }
+
+    if (spans.isNotEmpty()) {
+      return spans.first()
+    }
+
+    return null
+  }
+
+  /**
+   * Applies a continuous span to the specified range.
+   * If the new range touches existing continuous spans, they are coalesced into a single span
+   */
+  private fun <T>setContinuousSpan(spannable: Spannable, start: Int, end: Int, type: Class<T>) {
+    val span = type.getDeclaredConstructor(HtmlStyle::class.java).newInstance(view.htmlStyle)
+    val previousSpan = getPreviousParagraphSpan(spannable, start, type)
+    val nextSpan = getNextParagraphSpan(spannable, end, type)
+    var newStart = start
+    var newEnd = end
+
+    if (previousSpan != null) {
+      newStart = spannable.getSpanStart(previousSpan)
+      spannable.removeSpan(previousSpan)
+    }
+
+    if (nextSpan != null && start != end) {
+      newEnd = spannable.getSpanEnd(nextSpan)
+      spannable.removeSpan(nextSpan)
+    }
+
+    val (safeStart, safeEnd) = spannable.getSafeSpanBoundaries(newStart, newEnd)
+    spannable.setSpan(span, safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+  }
+
+
   private fun <T>setSpan(spannable: Spannable, type: Class<T>, start: Int, end: Int) {
+    if (EnrichedSpans.isTypeContinuous(type)) {
+      setContinuousSpan(spannable, start, end, type)
+      return
+    }
+
     val span = type.getDeclaredConstructor(HtmlStyle::class.java).newInstance(view.htmlStyle)
     val (safeStart, safeEnd) = spannable.getSafeSpanBoundaries(start, end)
     spannable.setSpan(span, safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
@@ -94,6 +167,33 @@ class ParagraphStyles(private val view: EnrichedTextInputView) {
     return spans.isNotEmpty()
   }
 
+  private fun <T>mergeAdjacentStyleSpans(s: Editable, endCursorPosition: Int, type: Class<T>) {
+    val (start, end) = s.getParagraphBounds(endCursorPosition)
+    val currParagraphSpans = s.getSpans(start, end, type)
+
+    if (currParagraphSpans.isEmpty()) {
+      return
+    }
+
+    val currSpan = currParagraphSpans[0]
+    val nextSpan = getNextParagraphSpan(s, end, type)
+
+    if (nextSpan == null) {
+      return
+    }
+
+    val newStart = s.getSpanStart(currSpan)
+    val newEnd = s.getSpanEnd(nextSpan)
+
+    s.removeSpan(nextSpan)
+    s.removeSpan(currSpan)
+
+    val (safeStart, safeEnd) = s.getSafeSpanBoundaries(newStart, newEnd)
+    val span = type.getDeclaredConstructor(HtmlStyle::class.java).newInstance(view.htmlStyle)
+
+    s.setSpan(span, safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+  }
+
   fun afterTextChanged(s: Editable, endPosition: Int, previousTextLength: Int) {
     var endCursorPosition = endPosition
     val isBackspace = s.length < previousTextLength
@@ -101,7 +201,14 @@ class ParagraphStyles(private val view: EnrichedTextInputView) {
 
     for ((style, config) in EnrichedSpans.paragraphSpans) {
       val spanState = view.spanState ?: continue
-      val styleStart = spanState.getStart(style) ?: continue
+      val styleStart = spanState.getStart(style)
+
+      if (styleStart == null) {
+        if (config.isContinuous) {
+          mergeAdjacentStyleSpans(s, endCursorPosition, config.clazz)
+        }
+        continue
+      }
 
       if (isNewLine) {
         if (!config.isContinuous) {
@@ -154,8 +261,8 @@ class ParagraphStyles(private val view: EnrichedTextInputView) {
 
     if (start == end) {
       spannable.insert(start, "\u200B")
-      view.spanState?.setStart(name, start + 1)
       setAndMergeSpans(spannable, type, start, end + 1)
+      view.selection.validateStyles()
 
       return
     }
@@ -170,8 +277,8 @@ class ParagraphStyles(private val view: EnrichedTextInputView) {
       currentStart = currentEnd + 1
     }
 
-    view.spanState?.setStart(name, start)
     setAndMergeSpans(spannable, type, start, currentEnd)
+    view.selection.validateStyles()
   }
 
   fun getStyleRange(): Pair<Int, Int> {