react-native-enriched-markdown-scaffold 0.7.4-scaffold.9 → 1.0.2-scaffold.10

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/ListRenderer.kt

@@ -2,7 +2,9 @@ package com.swmansion.enriched.markdown.renderer
 
 import android.text.SpannableStringBuilder
 import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.spans.ListItemSpacingSpan
 import com.swmansion.enriched.markdown.spans.MarginBottomSpan
+import com.swmansion.enriched.markdown.styles.ListStyle
 import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
 import com.swmansion.enriched.markdown.utils.text.span.applyLineHeightSkippingImages
 import com.swmansion.enriched.markdown.utils.text.span.applyMarginTop
@@ -22,8 +24,15 @@ class ListRenderer(
     val listStyle = config.style.listStyle
     val listType = if (isOrdered) BlockStyleContext.ListType.ORDERED else BlockStyleContext.ListType.UNORDERED
 
+    val startNumber =
+      if (isOrdered) {
+        node.getAttribute("start")?.toIntOrNull()?.coerceAtLeast(0) ?: 1
+      } else {
+        1
+      }
+
     val contextManager = ListContextManager(factory.blockStyleContext)
-    val entryState = contextManager.enterList(listType, listStyle)
+    val entryState = contextManager.enterList(listType, listStyle, startNumber)
 
     // For top-level lists, insert marginTop spacer before rendering content
     if (entryState.previousDepth == 0) {
@@ -45,7 +54,7 @@ class ListRenderer(
     }
 
     if (builder.length > contentStart) {
-      applyListSpacing(builder, contentStart, entryState.previousDepth, listStyle)
+      applyListSpacing(builder, contentStart, entryState.previousDepth, listStyle, factory.blockStyleContext)
     }
   }
 
@@ -53,15 +62,18 @@ class ListRenderer(
     builder: SpannableStringBuilder,
     start: Int,
     depth: Int,
-    style: com.swmansion.enriched.markdown.styles.BaseBlockStyle,
+    style: ListStyle,
+    styleContext: BlockStyleContext,
   ) {
     // TODO: LineHeightSpan may also clip superscript/subscript glyphs that extend
     // outside the normal line bounds. A similar "skip" strategy as for images may
     // be needed here once super/subscript usage in practice is better understood.
     applyLineHeightSkippingImages(builder, start, builder.length, style.lineHeight)
 
-    // External bottom margin is only handled by the root-level list
+    // Item spacing and external bottom margin are only handled by the root-level list
     if (depth == 0) {
+      applyItemSpacing(builder, start, style.itemSpacing, styleContext)
+
       builder.append("\n")
       builder.setSpan(
         MarginBottomSpan(style.marginBottom),
@@ -71,4 +83,31 @@ class ListRenderer(
       )
     }
   }
+
+  // Inserts the vertical gap between consecutive items (including nested ones)
+  // by spanning the newline that precedes each item start. The first item of
+  // the root list gets no spacing above it.
+  private fun applyItemSpacing(
+    builder: SpannableStringBuilder,
+    start: Int,
+    itemSpacing: Float,
+    styleContext: BlockStyleContext,
+  ) {
+    if (itemSpacing <= 0f) return
+
+    val itemStarts =
+      styleContext.listItemStarts
+        .filter { it in start until builder.length }
+        .distinct()
+        .sorted()
+
+    for (itemStart in itemStarts.drop(1)) {
+      builder.setSpan(
+        ListItemSpacingSpan(itemSpacing),
+        itemStart - 1,
+        itemStart,
+        SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+      )
+    }
+  }
 }

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/NodeRenderer.kt

@@ -80,6 +80,7 @@ class RendererFactory(
 
   private val textRenderer = TextRenderer()
   private val lineBreakRenderer = LineBreakRenderer()
+  private val softBreakRenderer = SoftBreakRenderer()
 
   private val renderers: Map<MarkdownASTNode.NodeType, NodeRenderer> by lazy {
     buildMap {
@@ -103,13 +104,20 @@ class RendererFactory(
       put(MarkdownASTNode.NodeType.Code, CodeRenderer(config))
       put(MarkdownASTNode.NodeType.Image, ImageRenderer())
       put(MarkdownASTNode.NodeType.LineBreak, lineBreakRenderer)
+      put(MarkdownASTNode.NodeType.SoftBreak, softBreakRenderer)
       put(MarkdownASTNode.NodeType.ThematicBreak, ThematicBreakRenderer(config))
       put(MarkdownASTNode.NodeType.Spoiler, SpoilerRenderer())
       if (FeatureFlags.IS_MATH_ENABLED) {
         try {
           val mathInlineRendererClass = Class.forName("com.swmansion.enriched.markdown.renderer.MathInlineRenderer")
           val constructor = mathInlineRendererClass.getConstructor(RendererConfig::class.java, Context::class.java)
-          put(MarkdownASTNode.NodeType.LatexMathInline, constructor.newInstance(config, context) as NodeRenderer)
+          val mathInlineRenderer = constructor.newInstance(config, context) as NodeRenderer
+          put(MarkdownASTNode.NodeType.LatexMathInline, mathInlineRenderer)
+          // Isolated display math is promoted to a block segment in the parser
+          // (see promoteDisplayMathFromParagraphs). What reaches the factory is
+          // genuinely mid-line display math (e.g. `a $$x$$ b`); render it inline
+          // rather than dropping it via the TextRenderer fallback.
+          put(MarkdownASTNode.NodeType.LatexMathDisplay, mathInlineRenderer)
         } catch (_: Exception) {
           // math not available
         }

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/SoftBreakRenderer.kt

@@ -0,0 +1,16 @@
+package com.swmansion.enriched.markdown.renderer
+
+import android.text.SpannableStringBuilder
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+
+class SoftBreakRenderer : NodeRenderer {
+  override fun render(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+    factory: RendererFactory,
+  ) {
+    builder.append(" ")
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/SpanStyleCache.kt

@@ -1,6 +1,10 @@
 package com.swmansion.enriched.markdown.renderer
 
+import android.content.res.AssetManager
 import android.graphics.Typeface
+import com.facebook.react.common.ReactConstants
+import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.swmansion.enriched.markdown.styles.LinkChipStyle
 import com.swmansion.enriched.markdown.styles.LinkVariantEntry
 import com.swmansion.enriched.markdown.styles.StyleConfig
 
@@ -8,6 +12,8 @@ import com.swmansion.enriched.markdown.styles.StyleConfig
 class SpanStyleCache(
   style: StyleConfig,
 ) {
+  private val assetManager: AssetManager = style.assetManager
+
   // Colors to preserve when applying inline styles (links, code, strong, emphasis)
   val colorsToPreserve: IntArray = buildColorsToPreserve(style)
 
@@ -21,7 +27,7 @@ class SpanStyleCache(
   val linkFontFamily: String = style.linkStyle.fontFamily
   val linkColor: Int = style.linkStyle.color
   val linkUnderline: Boolean = style.linkStyle.underline
-  val linkBackgroundColor: Int = style.linkStyle.backgroundColor
+  val linkChip: LinkChipStyle = style.linkStyle.chip
   val linkVariants: List<LinkVariantEntry> = style.linkVariants
 
   private val compiledVariantPatterns: List<Pair<Regex, LinkVariantEntry>> =
@@ -95,36 +101,37 @@ class SpanStyleCache(
     return compiledVariantPatterns.firstOrNull { (regex, _) -> regex.containsMatchIn(url) }?.second
   }
 
-  companion object {
-    private val typefaceCache = mutableMapOf<String, Typeface>()
-
-    /** Cached typeface for font family + style (BOLD, ITALIC, BOLD_ITALIC) */
-    fun getTypeface(
-      fontFamily: String,
-      style: Int,
-    ): Typeface =
-      typefaceCache.getOrPut("$fontFamily|$style") {
-        val base =
-          fontFamily
-            .takeIf { it.isNotEmpty() }
-            ?.let { Typeface.create(it, Typeface.NORMAL) }
-            ?: Typeface.DEFAULT
-        Typeface.create(base, style)
-      }
+  /** Chip style for [url]: the matching variant's own, else the base link's (never merged). */
+  fun linkChipForUrl(url: String): LinkChipStyle = resolvedVariantForUrl(url)?.chip ?: linkChip
 
-    /** Cached typeface using weight string (e.g., "bold", "700") */
-    fun getTypefaceWithWeight(
-      fontFamily: String,
-      fontWeight: String,
-    ): Typeface {
-      val style =
-        when (fontWeight.lowercase()) {
-          "bold", "700", "800", "900" -> Typeface.BOLD
-          else -> Typeface.NORMAL
-        }
-      return getTypeface(fontFamily, style)
+  /**
+   * Cached typeface for font family + style (BOLD, ITALIC, BOLD_ITALIC).
+   *
+   * Loads the base custom font at its NORMAL weight (via applyStyles/ReactFontManager)
+   * so the bundled assets/fonts file resolves, then synthesizes bold/italic on that real
+   * typeface. Requesting bold/italic directly makes ReactFontManager look for `_bold`/
+   * `_italic` asset variants that single-file custom fonts don't have — and it then falls
+   * back to a default system face, dropping the custom font entirely.
+   */
+  fun getTypeface(
+    fontFamily: String,
+    style: Int,
+  ): Typeface =
+    typefaceCache.getOrPut("family|$fontFamily|$style") {
+      val base =
+        applyStyles(
+          null,
+          ReactConstants.UNSET,
+          ReactConstants.UNSET,
+          fontFamily.takeIf { it.isNotEmpty() },
+          assetManager,
+        )
+      if (style == Typeface.NORMAL) base else Typeface.create(base, style)
     }
 
+  companion object {
+    private val typefaceCache = mutableMapOf<String, Typeface>()
+
     /** Cached monospace typeface preserving bold/italic */
     fun getMonospaceTypeface(currentStyle: Int): Typeface =
       typefaceCache.getOrPut("monospace|$currentStyle") {

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

@@ -22,11 +22,20 @@ abstract class BaseListSpan(
   protected val blockStyle: BlockStyle,
   protected val marginLeft: Float,
   protected val gapWidth: Float,
+  internal val drawsMarker: Boolean = true,
 ) : MetricAffectingSpan(),
   LeadingMarginSpan {
   private var cachedText: CharSequence? = null
   private var cachedHasDeeperSpanByPosition = mutableMapOf<Int, Boolean>()
 
+  val markerFontMetrics: Paint.FontMetrics by lazy {
+    TextPaint()
+      .apply {
+        applyBlockStyleFont(blockStyle, context)
+        textSize = blockStyle.fontSize
+      }.fontMetrics
+  }
+
   protected abstract fun getMarkerWidth(): Float
 
   override fun updateMeasureState(textPaint: TextPaint) = applyTextStyle(textPaint)
@@ -55,6 +64,7 @@ abstract class BaseListSpan(
     first: Boolean,
     layout: Layout?,
   ) {
+    if (!drawsMarker) return
     if (!first || shouldSkipDrawing(text, start) || !hasContent(text, start, end)) return
 
     // Only draw the marker on the true first line of this span.
@@ -62,6 +72,20 @@ abstract class BaseListSpan(
     // but only the line at the span start should get a bullet/number.
     if (text is Spanned && text.getSpanStart(this) != start) return
 
+    drawMarkerAt(canvas, paint, x, dir, top, baseline, bottom, layout, start)
+  }
+
+  fun drawMarkerAt(
+    canvas: Canvas,
+    paint: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    layout: Layout?,
+    start: Int,
+  ) {
     val originalStyle = paint.style
     val originalColor = paint.color
     drawMarker(canvas, paint, x, dir, top, baseline, bottom, layout, start)

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

@@ -5,6 +5,8 @@ import android.content.Context
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
 import android.graphics.Typeface
 import android.text.Layout
 import android.text.Spanned
@@ -12,6 +14,7 @@ import android.text.TextPaint
 import android.text.style.LeadingMarginSpan
 import android.text.style.LineBackgroundSpan
 import android.text.style.MetricAffectingSpan
+import androidx.core.graphics.withSave
 import com.swmansion.enriched.markdown.renderer.BlockStyle
 import com.swmansion.enriched.markdown.renderer.SpanStyleCache
 import com.swmansion.enriched.markdown.styles.BlockquoteStyle
@@ -37,7 +40,13 @@ class BlockquoteSpan(
 
   // Cache for shouldSkipDrawing to avoid repeated getSpans() calls during draw passes
   private var cachedText: CharSequence? = null
-  private var cachedMaxDepthByPosition = mutableMapOf<Int, Int>()
+  private var cachedSpansByPosition = mutableMapOf<Int, Array<BlockquoteSpan>>()
+  private var boxLeft = 0f
+  private var boxRight = 0f
+
+  private val path = Path()
+  private val rect = RectF()
+  private val radiiArray = FloatArray(8)
 
   override fun updateMeasureState(tp: TextPaint) = applyTextStyle(tp)
 
@@ -63,13 +72,56 @@ class BlockquoteSpan(
     if (shouldSkipDrawing(text, start)) return
 
     val borderPaint = configureBorderPaint()
-    val borderTop = top.toFloat()
-    val borderBottom = bottom.toFloat()
+    val radius = blockquoteStyle.borderRadius
+    val spanned = text as? Spanned
+
+    if (spanned == null) {
+      drawBorders(c, x, dir, top, bottom, borderPaint)
+      return
+    }
+
+    val rootSpan = spanAtMinDepth(spanned, start)
+    val clipToRoot =
+      radius > 0f && boxRight > boxLeft && rootSpan != null && isBoundaryLine(spanned, start, end, rootSpan)
+
+    val padding = blockquoteStyle.padding
+    var topInset = 0f
+    var bottomInset = 0f
 
     for (level in 0..depth) {
       val borderX = x + (levelSpacing * level * dir)
       val borderRight = borderX + (blockquoteStyle.borderWidth * dir)
-      c.drawRect(minOf(borderX, borderRight), borderTop, maxOf(borderX, borderRight), borderBottom, borderPaint)
+      val stripeLeft = minOf(borderX, borderRight)
+      val stripeRight = maxOf(borderX, borderRight)
+      val stripeTop = top.toFloat() + topInset
+      val stripeBottom = bottom.toFloat() - bottomInset
+
+      val levelSpan = if (level == 0) rootSpan else spanAtDepth(spanned, start, level)
+      val clipToOwn =
+        radius > 0f && level > 0 && levelSpan != null && isBoundaryLine(spanned, start, end, levelSpan)
+
+      if (!clipToRoot && !clipToOwn) {
+        c.drawRect(stripeLeft, stripeTop, stripeRight, stripeBottom, borderPaint)
+      } else {
+        c.withSave {
+          if (clipToRoot) {
+            buildBoundaryPath(spanned, start, end, rootSpan!!, boxLeft, top.toFloat(), boxRight, bottom.toFloat())
+            clipPath(path)
+          }
+          if (clipToOwn) {
+            val clipLeft = if (dir >= 0) stripeLeft else boxLeft
+            val clipRight = if (dir >= 0) boxRight else stripeRight
+            buildBoundaryPath(spanned, start, end, levelSpan!!, clipLeft, stripeTop, clipRight, stripeBottom)
+            clipPath(path)
+          }
+          drawRect(stripeLeft, stripeTop, stripeRight, stripeBottom, borderPaint)
+        }
+      }
+
+      if (padding > 0 && levelSpan != null) {
+        if (start == spanned.getSpanStart(levelSpan)) topInset += padding
+        if (isLastLineOf(spanned, end, levelSpan)) bottomInset += padding
+      }
     }
   }
 
@@ -87,7 +139,40 @@ class BlockquoteSpan(
     lineNum: Int,
   ) {
     if (shouldSkipDrawing(text, start)) return
-    drawBackground(canvas, left, top, bottom, right)
+
+    boxLeft = left.toFloat()
+    boxRight = right.toFloat()
+
+    val bgColor = blockquoteStyle.backgroundColor?.takeIf { it != Color.TRANSPARENT } ?: return
+    val backgroundPaint = configureBackgroundPaint(bgColor)
+    val radius = blockquoteStyle.borderRadius
+    val rootSpan = (text as? Spanned)?.let { spanAtMinDepth(it, start) }
+
+    if (radius <= 0f || rootSpan == null) {
+      canvas.drawRect(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat(), backgroundPaint)
+      return
+    }
+
+    buildBoundaryPath(text as Spanned, start, end, rootSpan, left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat())
+    canvas.drawPath(path, backgroundPaint)
+  }
+
+  private fun drawBorders(
+    c: Canvas,
+    x: Int,
+    dir: Int,
+    top: Int,
+    bottom: Int,
+    borderPaint: Paint,
+  ) {
+    val borderTop = top.toFloat()
+    val borderBottom = bottom.toFloat()
+
+    for (level in 0..depth) {
+      val borderX = x + (levelSpacing * level * dir)
+      val borderRight = borderX + (blockquoteStyle.borderWidth * dir)
+      c.drawRect(minOf(borderX, borderRight), borderTop, maxOf(borderX, borderRight), borderBottom, borderPaint)
+    }
   }
 
   @SuppressLint("WrongConstant") // Result of mask is always valid: 0, 1, 2, or 3
@@ -118,35 +203,100 @@ class BlockquoteSpan(
       color = bgColor
     }
 
+  private fun spansAt(
+    text: Spanned,
+    start: Int,
+  ): Array<BlockquoteSpan> {
+    if (cachedText !== text) {
+      cachedText = text
+      cachedSpansByPosition.clear()
+    }
+    return cachedSpansByPosition.getOrPut(start) {
+      text.getSpans(start, start + 1, BlockquoteSpan::class.java)
+    }
+  }
+
   private fun shouldSkipDrawing(
     text: CharSequence?,
     start: Int,
   ): Boolean {
     if (text !is Spanned) return false
+    val maxDepth = spansAt(text, start).maxOfOrNull { it.depth } ?: -1
+    return maxDepth > depth
+  }
 
-    if (cachedText !== text) {
-      cachedText = text
-      cachedMaxDepthByPosition.clear()
-    }
+  private fun spanAtMinDepth(
+    text: Spanned,
+    start: Int,
+  ): BlockquoteSpan? = spansAt(text, start).minByOrNull { it.depth }
 
-    val maxDepth =
-      cachedMaxDepthByPosition.getOrPut(start) {
-        val spans = text.getSpans(start, start + 1, BlockquoteSpan::class.java)
-        spans.maxOfOrNull { it.depth } ?: -1
-      }
+  private fun spanAtDepth(
+    text: Spanned,
+    start: Int,
+    level: Int,
+  ): BlockquoteSpan? = spansAt(text, start).firstOrNull { it.depth == level }
 
-    return maxDepth > depth
+  /**
+   * The span range can include trailing '\n'(s) that form no visible line (e.g. a
+   * paragraph break closing the quote), so the last drawn line ends before getSpanEnd;
+   * this compares against the end of visible content instead.
+   */
+  private fun isLastLineOf(
+    text: Spanned,
+    lineEnd: Int,
+    box: BlockquoteSpan,
+  ): Boolean {
+    var boxEnd = text.getSpanEnd(box)
+    while (boxEnd > 0 && text[boxEnd - 1] == '\n') {
+      boxEnd--
+    }
+    return lineEnd >= boxEnd
   }
 
-  private fun drawBackground(
-    c: Canvas,
-    left: Int,
-    top: Int,
-    bottom: Int,
-    right: Int,
+  private fun isBoundaryLine(
+    text: Spanned,
+    lineStart: Int,
+    lineEnd: Int,
+    box: BlockquoteSpan,
+  ): Boolean {
+    val boxStart = text.getSpanStart(box)
+    val boxEnd = text.getSpanEnd(box)
+    if (boxStart !in 0 until boxEnd) return false
+    return lineStart == boxStart || isLastLineOf(text, lineEnd, box)
+  }
+
+  private fun buildBoundaryPath(
+    text: Spanned,
+    lineStart: Int,
+    lineEnd: Int,
+    box: BlockquoteSpan,
+    left: Float,
+    top: Float,
+    right: Float,
+    bottom: Float,
   ) {
-    val bgColor = blockquoteStyle.backgroundColor?.takeIf { it != Color.TRANSPARENT } ?: return
-    val backgroundPaint = configureBackgroundPaint(bgColor)
-    c.drawRect(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat(), backgroundPaint)
+    val boxStart = text.getSpanStart(box)
+
+    val isFirstLine = lineStart == boxStart
+    val isLastLine = isLastLineOf(text, lineEnd, box)
+
+    val radius = blockquoteStyle.borderRadius
+    radiiArray.fill(0f)
+    if (isFirstLine) {
+      radiiArray[0] = radius
+      radiiArray[1] = radius // Top-Left
+      radiiArray[2] = radius
+      radiiArray[3] = radius // Top-Right
+    }
+    if (isLastLine) {
+      radiiArray[4] = radius
+      radiiArray[5] = radius // Bottom-Right
+      radiiArray[6] = radius
+      radiiArray[7] = radius // Bottom-Left
+    }
+
+    rect.set(left, top, right, bottom)
+    path.reset()
+    path.addRoundRect(rect, radiiArray, Path.Direction.CW)
   }
 }

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

@@ -5,8 +5,6 @@ import android.graphics.Paint
 import android.graphics.Path
 import android.graphics.RectF
 import android.text.Spanned
-import android.text.StaticLayout
-import android.text.TextPaint
 import android.text.style.LineBackgroundSpan
 import com.swmansion.enriched.markdown.styles.StyleConfig
 import kotlin.math.max
@@ -58,8 +56,9 @@ class CodeBackgroundSpan(
 
     // 2. Calculate coordinates
     val finalBottom = adjustBottomForMargin(text, end, bottom)
-    val startX = if (isFirst) getHorizontalOffset(text, start, end, spanStart, p) + left else left.toFloat()
-    val endX = if (isLast) getHorizontalOffset(text, start, end, spanEnd, p) + left else right.toFloat()
+    val leadingMargin = leadingMarginAt(text, start)
+    val startX = if (isFirst) getHorizontalOffset(text, start, end, spanStart, p, leadingMargin) + left else left.toFloat() + leadingMargin
+    val endX = if (isLast) getHorizontalOffset(text, start, end, spanEnd, p, leadingMargin) + left else right.toFloat()
 
     rect.set(min(startX, endX), top.toFloat(), max(startX, endX), finalBottom.toFloat())
 
@@ -77,92 +76,31 @@ class CodeBackgroundSpan(
     lineEnd: Int,
     index: Int,
     paint: Paint,
-  ): Float {
-    if (index <= lineStart) return 0f
-    val lineText = text.subSequence(lineStart, lineEnd)
-    val textPaint = paint as? TextPaint ?: TextPaint(paint)
-    val layout = StaticLayout.Builder.obtain(lineText, 0, lineText.length, textPaint, 10000).build()
-    return layout.getPrimaryHorizontal(index - lineStart)
-  }
+    leadingMargin: Int,
+  ): Float = InlineChipPainter.horizontalOffset(text, lineStart, lineEnd, index, paint, leadingMargin)
 
   private fun drawShapes(
     canvas: Canvas,
     isFirst: Boolean,
     isLast: Boolean,
   ) {
-    val radii = createRadii(isFirst, isLast)
-
-    path.reset()
-    path.addRoundRect(rect, radii, Path.Direction.CW)
-    canvas.drawPath(path, sharedBackgroundPaint)
-
-    if (isFirst && isLast) {
-      canvas.drawPath(path, sharedBorderPaint)
-    } else {
-      drawOpenBorders(canvas, isFirst, isLast)
-    }
-  }
-
-  private fun drawOpenBorders(
-    canvas: Canvas,
-    isFirst: Boolean,
-    isLast: Boolean,
-  ) {
-    val r = CORNER_RADIUS
-    path.reset()
-
-    if (isFirst) {
-      path.moveTo(rect.right, rect.top)
-      path.lineTo(rect.left + r, rect.top)
-      path.quadTo(rect.left, rect.top, rect.left, rect.top + r)
-      path.lineTo(rect.left, rect.bottom - r)
-      path.quadTo(rect.left, rect.bottom, rect.left + r, rect.bottom)
-      path.lineTo(rect.right, rect.bottom)
-    } else if (isLast) {
-      path.moveTo(rect.left, rect.top)
-      path.lineTo(rect.right - r, rect.top)
-      path.quadTo(rect.right, rect.top, rect.right, rect.top + r)
-      path.lineTo(rect.right, rect.bottom - r)
-      path.quadTo(rect.right, rect.bottom, rect.right - r, rect.bottom)
-      path.lineTo(rect.left, rect.bottom)
-    } else {
-      path.moveTo(rect.left, rect.top)
-      path.lineTo(rect.right, rect.top)
-      path.moveTo(rect.left, rect.bottom)
-      path.lineTo(rect.right, rect.bottom)
-    }
-    canvas.drawPath(path, sharedBorderPaint)
+    InlineChipPainter.draw(
+      canvas,
+      rect,
+      path,
+      CORNER_RADIUS,
+      sharedBackgroundPaint,
+      sharedBorderPaint,
+      isFirst,
+      isLast,
+      strokeInset = false,
+    )
   }
 
-  private fun createRadii(
-    isFirst: Boolean,
-    isLast: Boolean,
-  ) = when {
-    isFirst && isLast -> {
-      floatArrayOf(
-        CORNER_RADIUS,
-        CORNER_RADIUS,
-        CORNER_RADIUS,
-        CORNER_RADIUS,
-        CORNER_RADIUS,
-        CORNER_RADIUS,
-        CORNER_RADIUS,
-        CORNER_RADIUS,
-      )
-    }
-
-    isFirst -> {
-      floatArrayOf(CORNER_RADIUS, CORNER_RADIUS, 0f, 0f, 0f, 0f, CORNER_RADIUS, CORNER_RADIUS)
-    }
-
-    isLast -> {
-      floatArrayOf(0f, 0f, CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS, 0f, 0f)
-    }
-
-    else -> {
-      floatArrayOf(0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f)
-    }
-  }
+  private fun leadingMarginAt(
+    text: Spanned,
+    lineStart: Int,
+  ): Int = InlineChipPainter.leadingMarginAt(text, lineStart)
 
   private fun adjustBottomForMargin(
     text: Spanned,