react-native-enriched 0.1.6 → 0.2.1

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
 
@@ -40,7 +40,7 @@ We can help you build your next dream product –
 ## Prerequisites
 
 - `react-native-enriched` currently supports only Android and iOS platforms
-- It works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page) and supports following React Native releases: `0.79`, `0.80`, `0.81` and `0.82`
+- It works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page) and supports following React Native releases: `0.79`, `0.80`, `0.81`, `0.82` and `0.83`
 
 ## Installation
 
@@ -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.
@@ -244,14 +238,10 @@ See the [API Reference](docs/API_REFERENCE.md) for a detailed overview of all th
 ## Known limitations
 
 - Only one level of lists is supported. We currently do not support nested lists.
-- Inline images are supported only on Android.
-- Codeblocks are supported only on Android.
 - iOS headings can't have the same `fontSize` in their config as input's `fontSize`. Doing so results in incorrect headings behavior.
 
 ## Future Plans
 
-- Adding Codeblocks and Inline Images to iOS input.
-- Making some optimizations around `onChangeHtml` event, maybe some imperative API to get the HTML output.
 - Creating `EnrichedText` text component that supports our HTML output format with all additional interactions like pressing links or mentions.
 - Adding API for custom link detection regex.
 - Web library implementation via `react-native-web`.

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));
@@ -144,6 +144,9 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
       case "addMention":
         mViewManager.addMention(view, args.getString(0), args.getString(1), args.getString(2));
         break;
+      case "requestHTML":
+        mViewManager.requestHTML(view, args.getInt(0));
+        break;
     }
   }
 }

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

@@ -50,7 +50,8 @@ 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);
+  void requestHTML(T view, int requestId);
 }

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

@@ -115,4 +115,14 @@ payload.setProperty(runtime, "text", event.text);
   });
 }
 
+
+void EnrichedTextInputViewEventEmitter::onRequestHtmlResult(OnRequestHtmlResult event) const {
+  dispatchEvent("requestHtmlResult", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "requestId", event.requestId);
+payload.setProperty(runtime, "html", jsi::valueFromDynamic(runtime, event.html));
+    return payload;
+  });
+}
+
 } // namespace facebook::react

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

@@ -74,6 +74,11 @@ class EnrichedTextInputViewEventEmitter : public ViewEventEmitter {
     int end;
     std::string text;
     };
+
+  struct OnRequestHtmlResult {
+      int requestId;
+    folly::dynamic html;
+    };
   void onInputFocus(OnInputFocus value) const;
 
   void onInputBlur(OnInputBlur value) const;
@@ -91,5 +96,7 @@ class EnrichedTextInputViewEventEmitter : public ViewEventEmitter {
   void onMention(OnMention value) const;
 
   void onChangeSelection(OnChangeSelection value) const;
+
+  void onRequestHtmlResult(OnRequestHtmlResult value) const;
 };
 } // namespace facebook::react

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,7 +29,13 @@ 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.events.OnRequestHtmlResultEvent
+import com.swmansion.enriched.spans.EnrichedH1Span
+import com.swmansion.enriched.spans.EnrichedH2Span
+import com.swmansion.enriched.spans.EnrichedH3Span
+import com.swmansion.enriched.spans.EnrichedImageSpan
 import com.swmansion.enriched.spans.EnrichedSpans
+import com.swmansion.enriched.spans.interfaces.EnrichedSpan
 import com.swmansion.enriched.styles.InlineStyles
 import com.swmansion.enriched.styles.ListStyles
 import com.swmansion.enriched.styles.ParagraphStyles
@@ -58,9 +64,17 @@ class EnrichedTextInputView : AppCompatEditText {
 
   val mentionHandler: MentionHandler? = MentionHandler(this)
   var htmlStyle: HtmlStyle = HtmlStyle(this, null)
+    set(value) {
+        if (field != value) {
+            val prev = field
+            field = value
+            reApplyHtmlStyleForSpans(prev, value)
+        }
+    }
   var spanWatcher: EnrichedSpanWatcher? = null
   var layoutManager: EnrichedTextInputViewLayoutManager = EnrichedTextInputViewLayoutManager(this)
 
+  var shouldEmitHtml: Boolean = true
   var experimentalSynchronousEvents: Boolean = false
 
   var fontSize: Float? = null
@@ -254,6 +268,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 +277,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
   }
@@ -318,6 +347,7 @@ class EnrichedTextInputView : AppCompatEditText {
     // This ensured that newly created spans will take the new font size into account
     htmlStyle.invalidateStyles()
     layoutManager.invalidateLayout()
+    forceScrollToSelection()
   }
 
   fun setFontFamily(family: String?) {
@@ -527,11 +557,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()
   }
 
@@ -549,6 +579,19 @@ class EnrichedTextInputView : AppCompatEditText {
     parametrizedStyles?.setMentionSpan(text, indicator, attributes)
   }
 
+  fun requestHTML(requestId: Int) {
+    val html = try {
+      EnrichedParser.toHtmlWithDefault(text)
+    } catch (e: Exception) {
+      null
+    }
+
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+    dispatcher?.dispatchEvent(OnRequestHtmlResultEvent(surfaceId, id, requestId, html, experimentalSynchronousEvents))
+  }
+
   // 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)
@@ -561,6 +604,72 @@ class EnrichedTextInputView : AppCompatEditText {
     }
   }
 
+    private fun forceScrollToSelection() {
+      val textLayout = layout ?: return
+      val cursorOffset = selectionStart
+      if (cursorOffset <= 0) return
+
+      val selectedLineIndex = textLayout.getLineForOffset(cursorOffset)
+      val selectedLineTop = textLayout.getLineTop(selectedLineIndex)
+      val selectedLineBottom = textLayout.getLineBottom(selectedLineIndex)
+      val visibleTextHeight = height - paddingTop - paddingBottom
+
+      if (visibleTextHeight <= 0) return
+
+      val visibleTop = scrollY
+      val visibleBottom = scrollY + visibleTextHeight
+      var targetScrollY = scrollY
+
+      if (selectedLineTop < visibleTop) {
+        targetScrollY = selectedLineTop
+      } else if (selectedLineBottom > visibleBottom) {
+        targetScrollY = selectedLineBottom - visibleTextHeight
+      }
+
+      val maxScrollY = (textLayout.height - visibleTextHeight).coerceAtLeast(0)
+      targetScrollY = targetScrollY.coerceIn(0, maxScrollY)
+      scrollTo(scrollX, targetScrollY)
+    }
+
+  private fun reApplyHtmlStyleForSpans(previousHtmlStyle: HtmlStyle, nextHtmlStyle: HtmlStyle) {
+    val shouldRemoveBoldSpanFromH1Span = !previousHtmlStyle.h1Bold && nextHtmlStyle.h1Bold
+    val shouldRemoveBoldSpanFromH2Span = !previousHtmlStyle.h2Bold && nextHtmlStyle.h2Bold
+    val shouldRemoveBoldSpanFromH3Span = !previousHtmlStyle.h3Bold && nextHtmlStyle.h3Bold
+
+    val spannable = text as? Spannable ?: return
+    if (spannable.isEmpty()) return
+
+    var shouldEmitStateChange = false
+
+    runAsATransaction {
+      val spans = spannable.getSpans(0, spannable.length, EnrichedSpan::class.java)
+      for (span in spans) {
+        if (!span.dependsOnHtmlStyle) continue
+
+        val start = spannable.getSpanStart(span)
+        val end = spannable.getSpanEnd(span)
+        val flags = spannable.getSpanFlags(span)
+
+        if (start == -1 || end == -1) continue
+
+        if ((span is EnrichedH1Span && shouldRemoveBoldSpanFromH1Span) || (span is EnrichedH2Span && shouldRemoveBoldSpanFromH2Span) || (span is EnrichedH3Span && shouldRemoveBoldSpanFromH3Span)) {
+          val isRemoved = removeStyle(EnrichedSpans.BOLD, start, end)
+          if (isRemoved) shouldEmitStateChange = true
+        }
+
+        spannable.removeSpan(span)
+        val newSpan = span.rebuildWithStyle(htmlStyle)
+        spannable.setSpan(newSpan, start, end, flags)
+      }
+
+      if (shouldEmitStateChange) {
+        selection?.validateStyles()
+      }
+    }
+    layoutManager.invalidateLayout()
+    forceScrollToSelection()
+  }
+
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
 

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

@@ -24,6 +24,7 @@ import com.swmansion.enriched.events.OnInputFocusEvent
 import com.swmansion.enriched.events.OnLinkDetectedEvent
 import com.swmansion.enriched.events.OnMentionDetectedEvent
 import com.swmansion.enriched.events.OnMentionEvent
+import com.swmansion.enriched.events.OnRequestHtmlResultEvent
 import com.swmansion.enriched.spans.EnrichedSpans
 import com.swmansion.enriched.styles.HtmlStyle
 import com.swmansion.enriched.utils.jsonStringToStringMap
@@ -71,6 +72,7 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
      map.put(OnMentionDetectedEvent.EVENT_NAME, mapOf("registrationName" to OnMentionDetectedEvent.EVENT_NAME))
      map.put(OnMentionEvent.EVENT_NAME, mapOf("registrationName" to OnMentionEvent.EVENT_NAME))
      map.put(OnChangeSelectionEvent.EVENT_NAME, mapOf("registrationName" to OnChangeSelectionEvent.EVENT_NAME))
+     map.put(OnRequestHtmlResultEvent.EVENT_NAME, mapOf("registrationName" to OnRequestHtmlResultEvent.EVENT_NAME))
 
      return map
    }
@@ -177,7 +179,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 +257,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) {
@@ -268,6 +270,10 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     view?.addMention(text, indicator, attributes)
   }
 
+  override fun requestHTML(view: EnrichedTextInputView?, requestId: Int) {
+    view?.requestHTML(requestId)
+  }
+
   override fun measure(
     context: Context,
     localData: ReadableMap?,

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/events/MentionHandler.kt

@@ -9,8 +9,8 @@ class MentionHandler(private val view: EnrichedTextInputView) {
   private var previousIndicator: String? = null
 
   fun reset() {
+    endMention()
     previousText = null
-    previousIndicator = null
   }
 
   fun endMention() {

package/android/src/main/java/com/swmansion/enriched/events/OnRequestHtmlResultEvent.kt

@@ -0,0 +1,33 @@
+package com.swmansion.enriched.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class OnRequestHtmlResultEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val requestId: Int,
+  private val html: String?,
+  private val experimentalSynchronousEvents: Boolean
+) : Event<OnRequestHtmlResultEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    val eventData: WritableMap = Arguments.createMap()
+    eventData.putInt("requestId", requestId)
+    if (html != null) {
+      eventData.putString("html", html)
+    } else {
+      eventData.putNull("html")
+    }
+    return eventData
+  }
+
+  override fun experimental_isSynchronous(): Boolean = experimentalSynchronousEvents
+
+  companion object {
+    const val EVENT_NAME: String = "onRequestHtmlResult"
+  }
+}

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

@@ -11,6 +11,8 @@ 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) : MetricAffectingSpan(), LeadingMarginSpan, EnrichedBlockSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateMeasureState(p0: TextPaint) {
     // Do nothing, but inform layout that this span affects text metrics
   }
@@ -35,4 +37,8 @@ class EnrichedBlockQuoteSpan(private val htmlStyle: HtmlStyle) : MetricAffecting
       textPaint?.color = color
     }
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedBlockQuoteSpan {
+    return EnrichedBlockQuoteSpan(htmlStyle)
+  }
 }

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

@@ -2,9 +2,15 @@ package com.swmansion.enriched.spans
 
 import android.graphics.Typeface
 import android.text.style.StyleSpan
+import com.swmansion.enriched.spans.interfaces.EnrichedBlockSpan
 import com.swmansion.enriched.spans.interfaces.EnrichedInlineSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 @Suppress("UNUSED_PARAMETER")
 class EnrichedBoldSpan(htmlStyle: HtmlStyle) : StyleSpan(Typeface.BOLD), EnrichedInlineSpan {
+  override val dependsOnHtmlStyle: Boolean = false
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedBoldSpan {
+    return EnrichedBoldSpan(htmlStyle)
+  }
 }

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
@@ -11,6 +13,8 @@ import com.swmansion.enriched.spans.interfaces.EnrichedBlockSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 class EnrichedCodeBlockSpan(private val htmlStyle: HtmlStyle) : MetricAffectingSpan(), LineBackgroundSpan, EnrichedBlockSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateDrawState(paint: TextPaint) {
     paint.typeface = Typeface.MONOSPACE
     paint.color = htmlStyle.codeBlockColor
@@ -33,10 +37,47 @@ 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
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedCodeBlockSpan {
+    return EnrichedCodeBlockSpan(htmlStyle)
+  }
 }

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

@@ -7,6 +7,8 @@ import com.swmansion.enriched.spans.interfaces.EnrichedHeadingSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 class EnrichedH1Span(private val style: HtmlStyle) : AbsoluteSizeSpan(style.h1FontSize), EnrichedHeadingSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateDrawState(tp: TextPaint) {
     super.updateDrawState(tp)
     val bold = style.h1Bold
@@ -14,4 +16,8 @@ class EnrichedH1Span(private val style: HtmlStyle) : AbsoluteSizeSpan(style.h1Fo
       tp.typeface = Typeface.create(tp.typeface, Typeface.BOLD)
     }
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedH1Span {
+    return EnrichedH1Span(htmlStyle)
+  }
 }

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

@@ -7,6 +7,8 @@ import com.swmansion.enriched.spans.interfaces.EnrichedHeadingSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 class EnrichedH2Span(private val htmlStyle: HtmlStyle) : AbsoluteSizeSpan(htmlStyle.h2FontSize), EnrichedHeadingSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateDrawState(tp: TextPaint) {
     super.updateDrawState(tp)
     val bold = htmlStyle.h2Bold
@@ -14,4 +16,8 @@ class EnrichedH2Span(private val htmlStyle: HtmlStyle) : AbsoluteSizeSpan(htmlSt
       tp.typeface = Typeface.create(tp.typeface, Typeface.BOLD)
     }
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedH2Span {
+    return EnrichedH2Span(htmlStyle)
+  }
 }

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

@@ -7,6 +7,8 @@ import com.swmansion.enriched.spans.interfaces.EnrichedHeadingSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 class EnrichedH3Span(private val htmlStyle: HtmlStyle) : AbsoluteSizeSpan(htmlStyle.h3FontSize), EnrichedHeadingSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateDrawState(tp: TextPaint) {
     super.updateDrawState(tp)
     val bold = htmlStyle.h3Bold
@@ -14,4 +16,8 @@ class EnrichedH3Span(private val htmlStyle: HtmlStyle) : AbsoluteSizeSpan(htmlSt
       tp.typeface = Typeface.create(tp.typeface, Typeface.BOLD)
     }
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedH3Span {
+    return EnrichedH3Span(htmlStyle)
+  }
 }