react-native-marcus 0.1.1 → 0.2.0

package/android/src/main/java/app/getbullet/marcus/MarkdownRanges.kt

@@ -0,0 +1,47 @@
+package app.getbullet.marcus
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableType
+
+/**
+ * Reads the `ranges` prop into what the formatter wants.
+ *
+ * The JavaScript side has already stripped the syntax and remapped every offset onto the text the
+ * child `Text` is rendering, so nothing here validates or reorders: emission order is the contract
+ * the formatter walks, and reordering it would break the pairing of a block prefix with the
+ * container that follows it.
+ *
+ * An object with `@JvmStatic` rather than a top-level function, because `CustomFabricUIManager` is
+ * Java and Kotlin mangles the names of top-level internal ones.
+ */
+object MarkdownRanges {
+
+  @JvmStatic
+  fun read(array: ReadableArray?): List<MarkdownRange> {
+    if (array == null || array.size() == 0) {
+      return emptyList()
+    }
+
+    val ranges = ArrayList<MarkdownRange>(array.size())
+
+    for (i in 0 until array.size()) {
+      if (array.getType(i) != ReadableType.Map) {
+        continue
+      }
+
+      val map = array.getMap(i) ?: continue
+      val type = map.getString("type") ?: continue
+
+      ranges.add(
+        MarkdownRange(
+          type = type,
+          start = map.getInt("start"),
+          length = map.getInt("length"),
+          depth = map.getInt("depth")
+        )
+      )
+    }
+
+    return ranges
+  }
+}

package/android/src/main/java/app/getbullet/marcus/MarkdownStyle.kt

@@ -7,75 +7,154 @@ import com.facebook.react.bridge.JSApplicationCausedNativeException
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.ReadableType
 
-class MarkdownStyle(map: ReadableMap, context: Context) {
-  private val screenDensity = context.resources.displayMetrics.density
-
-  @ColorInt val syntaxColor = parseColor(map, "syntax", "color", context)
-  @ColorInt val linkColor = parseColor(map, "link", "color", context)
-
-  val headingFontSize = parseFloat(map, "heading", "fontSize")
-
-  val headingScale = parseFloat(map, "heading", "scale")
-
-  val emojiFontSize = parseFloat(map, "emoji", "fontSize")
-  val emojiFontFamily = parseString(map, "emoji", "fontFamily")
-
-  @ColorInt val blockquoteBorderColor = parseColor(map, "blockquote", "borderColor", context)
-  val blockquoteBorderWidth = parseFloat(map, "blockquote", "borderWidth")
-  val blockquoteMarginLeft = parseFloat(map, "blockquote", "marginLeft")
-  val blockquotePaddingLeft = parseFloat(map, "blockquote", "paddingLeft")
+/**
+ * The text attributes one styled run can carry: the subset of React Native's
+ * `TextStyle` that survives as a span.
+ *
+ * Everything is optional and everything unset is inherited, which is what a run
+ * of markdown wants -- a mention that only names a colour keeps the face, the
+ * size and the weight of the prose it sits in. "Unset" is null for a colour or a
+ * name and zero for a length, which costs nothing: a zero-length `fontSize`,
+ * `letterSpacing` or `lineHeight` would mean the same as leaving it out.
+ *
+ * `textDecorationColor` and `textDecorationStyle` are not read. Android draws an
+ * underline and a strikethrough in the text's own colour as a solid line and
+ * offers no way to say otherwise, so the two are honoured on iOS and the web and
+ * documented as such rather than parsed and dropped here.
+ */
+open class MarkdownTextStyle(map: ReadableMap?, context: Context) {
+  @ColorInt val color = parseColor(map, "color", context)
+  val fontFamily = parseString(map, "fontFamily")
+  val fontSize = parseFloat(map, "fontSize")
+  val fontStyle = parseString(map, "fontStyle")
+  val fontWeight = parseString(map, "fontWeight")
+  val letterSpacing = parseFloat(map, "letterSpacing")
+  val lineHeight = parseFloat(map, "lineHeight")
+  val textDecorationLine = parseString(map, "textDecorationLine")
+  @ColorInt val textShadowColor = parseColor(map, "textShadowColor", context)
+  val textShadowOffsetX = parseFloat(map?.let { style(it, "textShadowOffset") }, "width")
+  val textShadowOffsetY = parseFloat(map?.let { style(it, "textShadowOffset") }, "height")
+  val textShadowRadius = parseFloat(map, "textShadowRadius")
+}
 
-  val orderedListMarginLeft = parseFloat(map, "orderedList", "marginLeft")
-  val orderedListPaddingLeft = parseFloat(map, "orderedList", "paddingLeft")
+/**
+ * A run drawn as a box rather than as a background behind the glyphs: an inline
+ * or fenced run of code, or a mention's pill.
+ *
+ * Only the per-axis lengths are here. A style may be written with a single
+ * `padding` or `margin` covering both axes; `mergeMarkdownStyleWithDefault`
+ * resolves that into the two before the style is ever sent, so a length of zero
+ * here means zero rather than "unset".
+ *
+ * The lengths are in dp, as they are written in a style. What draws them
+ * converts, so a value means the same thing wherever it is read.
+ */
+class MarkdownBoxStyle(map: ReadableMap?, context: Context) : MarkdownTextStyle(map, context) {
+  @ColorInt val backgroundColor = parseColor(map, "backgroundColor", context)
+  @ColorInt val borderColor = parseColor(map, "borderColor", context)
+  val borderWidth = parseFloat(map, "borderWidth")
+  val borderRadius = parseFloat(map, "borderRadius")
+  val paddingHorizontal = parseFloat(map, "paddingHorizontal")
+  val paddingVertical = parseFloat(map, "paddingVertical")
+  val marginHorizontal = parseFloat(map, "marginHorizontal")
+  val marginVertical = parseFloat(map, "marginVertical")
+}
 
-  val unorderedListMarginLeft = parseFloat(map, "unorderedList", "marginLeft")
-  val unorderedListPaddingLeft = parseFloat(map, "unorderedList", "paddingLeft")
+class MarkdownHeadingStyle(map: ReadableMap?, context: Context) : MarkdownTextStyle(map, context) {
+  /**
+   * Each level down multiplies the one above, so level N is
+   * `fontSize * scale^(N - 1)`. Six levels, matching HTML.
+   */
+  val scale = parseFloat(map, "scale")
+}
 
-  val codeFontFamily = parseString(map, "code", "fontFamily")
-  val codeFontSize = parseFloat(map, "code", "fontSize")
-  @ColorInt val codeColor = parseColor(map, "code", "color", context)
-  @ColorInt val codeBackgroundColor = parseColor(map, "code", "backgroundColor", context)
+/**
+ * The bar beside a quoted block, the indent it opens, and the text inside it.
+ *
+ * `marginStart` and `paddingStart` rather than left and right: the gutter opens
+ * on the line's leading edge, which is what a `LeadingMarginSpan` has always
+ * meant, so the names now say what was already drawn.
+ */
+class MarkdownBlockquoteStyle(map: ReadableMap?, context: Context) :
+  MarkdownTextStyle(map, context) {
+  @ColorInt val borderColor = parseColor(map, "borderColor", context)
+  val borderWidth = parseFloat(map, "borderWidth")
+  /** Rounds the bar's ends. A bar whose radius is half its width is a capsule. */
+  val borderRadius = parseFloat(map, "borderRadius")
+  val marginStart = parseFloat(map, "marginStart")
+  val paddingStart = parseFloat(map, "paddingStart")
+}
 
-  val preFontFamily = parseString(map, "pre", "fontFamily")
-  val preFontSize = parseFloat(map, "pre", "fontSize")
-  @ColorInt val preColor = parseColor(map, "pre", "color", context)
-  @ColorInt val preBackgroundColor = parseColor(map, "pre", "backgroundColor", context)
+/**
+ * Indent, and the marker that sits in the gutter it opens.
+ *
+ * The marker is sized from the base font -- the size the wrapped `Text` renders
+ * at -- rather than from a size of its own, so a list marks itself in proportion
+ * to the prose it marks however that prose is sized. [marker] is what it is
+ * drawn with, already resolved against `syntax` on the JavaScript side, so
+ * nothing here has to know where an unset value came from.
+ */
+class MarkdownListStyle(map: ReadableMap?, context: Context) {
+  val marginStart = parseFloat(map, "marginStart")
+  val paddingStart = parseFloat(map, "paddingStart")
+  val markerScale = parseFloat(map, "markerScale")
+  val markerPadding = parseFloat(map, "markerPadding")
+  val marker = MarkdownTextStyle(map?.let { style(it, "marker") }, context)
+}
 
-  @ColorInt val mentionHereColor = parseColor(map, "mentionHere", "color", context)
-  @ColorInt val mentionHereBackgroundColor = parseColor(map, "mentionHere", "backgroundColor", context)
-  val mentionHereBorderRadius = parseFloat(map, "mentionHere", "borderRadius") * screenDensity
+class MarkdownEmojiStyle(map: ReadableMap?, context: Context) {
+  val fontSize = parseFloat(map, "fontSize")
+  val fontFamily = parseString(map, "fontFamily")
+}
 
-  @ColorInt val mentionUserColor = parseColor(map, "mentionUser", "color", context)
-  @ColorInt val mentionUserBackgroundColor = parseColor(map, "mentionUser", "backgroundColor", context)
-  val mentionUserBorderRadius = parseFloat(map, "mentionUser", "borderRadius") * screenDensity
+class MarkdownStyle(map: ReadableMap, context: Context) {
+  val syntax = MarkdownTextStyle(style(map, "syntax"), context)
+  val link = MarkdownTextStyle(style(map, "link"), context)
+  val strong = MarkdownTextStyle(style(map, "strong"), context)
+  val emphasis = MarkdownTextStyle(style(map, "emphasis"), context)
+  val strikethrough = MarkdownTextStyle(style(map, "strikethrough"), context)
+  val heading = MarkdownHeadingStyle(style(map, "heading"), context)
+  val emoji = MarkdownEmojiStyle(style(map, "emoji"), context)
+  val blockquote = MarkdownBlockquoteStyle(style(map, "blockquote"), context)
+  val orderedList = MarkdownListStyle(style(map, "orderedList"), context)
+  val unorderedList = MarkdownListStyle(style(map, "unorderedList"), context)
+  val code = MarkdownBoxStyle(style(map, "code"), context)
+  val pre = MarkdownBoxStyle(style(map, "pre"), context)
+  val mention = MarkdownBoxStyle(style(map, "mention"), context)
+}
 
-  @ColorInt val mentionReportColor = parseColor(map, "mentionReport", "color", context)
-  @ColorInt val mentionReportBackgroundColor = parseColor(map, "mentionReport", "backgroundColor", context)
-  val mentionReportBorderRadius = parseFloat(map, "mentionReport", "borderRadius") * screenDensity
+/** The nested map under [key], or null where the style says nothing about it. */
+internal fun style(map: ReadableMap, key: String): ReadableMap? =
+  if (map.hasKey(key)) map.getMap(key) else null
+
+/**
+ * Reads a property, or the value that stands for "unset": null for a colour and
+ * a name, zero for a length.
+ *
+ * A missing entry and a missing property are the same thing, which is what lets
+ * a caller pass a map it did not have to check for.
+ */
+@ColorInt
+internal fun parseColor(map: ReadableMap?, prop: String, context: Context): Int? {
+  if (map == null || !map.hasKey(prop) || map.isNull(prop)) {
+    return null
+  }
 
-  private companion object {
-    fun style(map: ReadableMap, key: String): ReadableMap =
-      requireNotNull(map.getMap(key)) { "[react-native-marcus] markdownStyle.$key is missing" }
+  val value = map.getDynamic(prop)
+  val color = when (value.type) {
+    ReadableType.Number -> ColorPropConverter.getColor(value.asDouble(), context)
+    ReadableType.Map -> ColorPropConverter.getColor(value.asMap(), context)
+    else -> throw JSApplicationCausedNativeException(
+      "ColorValue: the value must be a number or Object."
+    )
+  }
 
-    @ColorInt
-    fun parseColor(map: ReadableMap, key: String, prop: String, context: Context): Int {
-      val value = style(map, key).getDynamic(prop)
-      val color = when (value.type) {
-        ReadableType.Number -> ColorPropConverter.getColor(value.asDouble(), context)
-        ReadableType.Map -> ColorPropConverter.getColor(value.asMap(), context)
-        else -> throw JSApplicationCausedNativeException("ColorValue: the value must be a number or Object.")
-      }
-      return requireNotNull(color) {
-        "[react-native-marcus] markdownStyle.$key.$prop could not be resolved to a color"
-      }
-    }
+  return color
+}
 
-    fun parseFloat(map: ReadableMap, key: String, prop: String): Float =
-      style(map, key).getDouble(prop).toFloat()
+internal fun parseFloat(map: ReadableMap?, prop: String): Float =
+  if (map == null || !map.hasKey(prop) || map.isNull(prop)) 0f
+  else map.getDouble(prop).toFloat()
 
-    fun parseString(map: ReadableMap, key: String, prop: String): String =
-      requireNotNull(style(map, key).getString(prop)) {
-        "[react-native-marcus] markdownStyle.$key.$prop is missing"
-      }
-  }
-}
+internal fun parseString(map: ReadableMap?, prop: String): String? =
+  if (map == null || !map.hasKey(prop)) null else map.getString(prop)

package/android/src/main/java/app/getbullet/marcus/MarkdownUtils.kt

@@ -14,12 +14,18 @@ import com.facebook.react.util.RNLog
  *   nested inside them start, and has to see the size the text is drawn at.
  *   Null on the measure path, which has no view yet and carries the size on the
  *   spannable instead.
+ * @param backgroundPass set for an input, where the view paints the markdown
+ *   backgrounds itself so that the caret stays visible. Null everywhere else.
+ * @param display set for a `Text`, whose list markers are rendered rather than
+ *   shown; see [MarkdownFormatter].
  */
 class MarkdownUtils @JvmOverloads constructor(
   private val reactContext: ReactContext,
-  private val textPaint: TextPaint? = null
+  private val textPaint: TextPaint? = null,
+  backgroundPass: MarkdownBackgroundPass? = null,
+  display: Boolean = false
 ) {
-  private val markdownFormatter = MarkdownFormatter(reactContext.assets)
+  private val markdownFormatter = MarkdownFormatter(reactContext.assets, backgroundPass, display)
 
   // Hoisted rather than built per call: applyMarkdownFormatting runs several times per
   // keystroke, and this is only ever needed for a warning that normally never fires.
@@ -30,6 +36,15 @@ class MarkdownUtils @JvmOverloads constructor(
   var markdownStyle: MarkdownStyle? = null
   var parserId: Int = 0
 
+  /**
+   * Ranges to format with, for a caller that already has them.
+   *
+   * A `Text` is parsed in JavaScript -- its content only ever changes by a re-render, so there is
+   * nothing for a worklet to react to -- and the result arrives as a prop. A `TextInput` leaves
+   * this null and the parser above is used instead.
+   */
+  var ranges: List<MarkdownRange>? = null
+
   /**
    * Records what the markdown spans currently on a spannable were built from.
    *
@@ -38,9 +53,15 @@ class MarkdownUtils @JvmOverloads constructor(
    * this along with the markdown spans, and the next pass rebuilds both. A field would
    * survive that and we would skip a pass that was actually needed.
    */
-  private class Fingerprint(val text: String, val parserId: Int, val style: MarkdownStyle)
+  private class Fingerprint(
+    val text: String,
+    val parserId: Int,
+    val style: MarkdownStyle,
+    val ranges: List<MarkdownRange>?
+  )
 
-  fun applyMarkdownFormatting(ssb: SpannableStringBuilder) {
+  /** Whether anything was reformatted, which is what tells a caller to push the result on. */
+  fun applyMarkdownFormatting(ssb: SpannableStringBuilder): Boolean {
     try {
       Trace.beginSection("applyMarkdownFormatting")
       val style = checkNotNull(markdownStyle) { "[react-native-marcus] markdownStyle is null" }
@@ -49,13 +70,14 @@ class MarkdownUtils @JvmOverloads constructor(
       // Native's state round-trip. They all ask for the same text, so only the first has any
       // work to do.
       if (isUpToDate(ssb, style)) {
-        return
+        return false
       }
 
       val text = ssb.toString()
-      val markdownRanges = MarkdownParser.shared.parse(text, parserId, onSchemaError)
+      val markdownRanges = ranges ?: MarkdownParser.shared.parse(text, parserId, onSchemaError)
       markdownFormatter.format(ssb, markdownRanges, style, textPaint)
       stamp(ssb, text, style)
+      return true
     } finally {
       Trace.endSection()
     }
@@ -68,6 +90,9 @@ class MarkdownUtils @JvmOverloads constructor(
       // Identity, not equality: MarkdownStyle is rebuilt whenever the prop arrives, so a
       // different instance means the style may have changed and we re-apply to be safe.
       fingerprint.style === style &&
+      // Same reasoning for the ranges, which are rebuilt from the prop on every commit that
+      // carries them.
+      fingerprint.ranges === ranges &&
       // Compares the CharSequence in place. ssb.toString() would copy the whole document on
       // a path whose entire purpose is to do no work.
       TextUtils.equals(ssb, fingerprint.text)
@@ -79,6 +104,11 @@ class MarkdownUtils @JvmOverloads constructor(
     for (stale in ssb.getSpans(0, ssb.length, Fingerprint::class.java)) {
       ssb.removeSpan(stale)
     }
-    ssb.setSpan(Fingerprint(text, parserId, style), 0, ssb.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+    ssb.setSpan(
+      Fingerprint(text, parserId, style, ranges),
+      0,
+      ssb.length,
+      Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+    )
   }
 }

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownAbsoluteLineHeightSpan.kt

@@ -0,0 +1,48 @@
+package app.getbullet.marcus.spans
+
+import android.graphics.Paint
+import android.text.style.LineHeightSpan
+import com.facebook.react.uimanager.PixelUtil
+import kotlin.math.roundToInt
+
+/**
+ * Draws the lines a run touches at an exact height.
+ *
+ * A line height is a property of a line rather than of a run, so a run that asks
+ * for one raises the whole line it sits on. iOS puts the same value on the
+ * paragraph style for the same reason, and the public type says as much.
+ *
+ * The difference is taken off the ascent and the descent in the proportion they
+ * already stood in, which is what React Native's own line-height span does and
+ * what keeps the text centred in the taller line rather than sitting on its
+ * floor.
+ *
+ * @param lineHeight in dp, as it is written in a style
+ */
+class MarkdownAbsoluteLineHeightSpan(lineHeight: Float) : MarkdownSpan, LineHeightSpan {
+
+  private val height = PixelUtil.toPixelFromDIP(lineHeight).roundToInt()
+
+  override fun chooseHeight(
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    spanstartv: Int,
+    lineHeight: Int,
+    fm: Paint.FontMetricsInt
+  ) {
+    if (height <= 0) {
+      return
+    }
+
+    val current = fm.descent - fm.ascent
+    if (current <= 0) {
+      return
+    }
+
+    fm.descent = (fm.descent.toFloat() * height / current).roundToInt()
+    fm.ascent = fm.descent - height
+    fm.top = fm.ascent
+    fm.bottom = fm.descent
+  }
+}

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownBackgroundSpan.kt

@@ -8,16 +8,50 @@ import android.text.StaticLayout
 import android.text.TextPaint
 import android.text.style.LineBackgroundSpan
 import androidx.annotation.ColorInt
-
+import app.getbullet.marcus.MarkdownBackgroundPass
+
+/**
+ * The rounded box behind a run of text: a mention's pill, or an inline run of
+ * code.
+ *
+ * Drawn a line at a time, because soft wrapping can split a run, and only the
+ * sides that actually terminate it are rounded -- the break itself stays square,
+ * so the two halves read as one run. iOS draws the same shape the same way, in
+ * `MarkdownTextLayoutFragment` and `MarkdownParagraphLayoutManager`.
+ *
+ * The padding is the room between the glyphs and the box, the margin the room
+ * between the box and the text either side of it. Horizontally both are held
+ * open by the `MarkdownGapSpan`s the formatter puts on the run's first and last
+ * characters, so what is left to do here is place the box's edges inside the
+ * space those reserved. Vertically only the padding is used, and the box grows
+ * out of the font's own box into the line's spacing, which is what an inline box
+ * does everywhere else: a line cannot be pushed apart for one run on it, so
+ * there is nothing a vertical margin could hold open.
+ *
+ * Only the vertical padding is a parameter: the horizontal room was already
+ * taken by the gap spans, so all this has to know is how far inside it the box's
+ * edge sits, which is the margin.
+ *
+ * @param runStart first character of the run, for the corners and the insets
+ * @param runEnd one past its last character
+ * @param pass set in an input, where the view paints the backgrounds itself so
+ *   that the caret stays visible; null in a `Text`, which has no caret and lets
+ *   the layout paint them
+ */
 class MarkdownBackgroundSpan(
   @ColorInt private val backgroundColor: Int,
   private val borderRadius: Float,
-  private val mentionStart: Int,
-  private val mentionEnd: Int
+  private val runStart: Int,
+  private val runEnd: Int,
+  private val paddingVertical: Float = 0f,
+  private val marginHorizontal: Float = 0f,
+  @ColorInt private val borderColor: Int? = null,
+  private val borderWidth: Float = 0f,
+  private val pass: MarkdownBackgroundPass? = null
 ) : MarkdownSpan, LineBackgroundSpan {
 
-  private var layout: StaticLayout? = null
-  private val backgroundPath = Path()
+  private val rect = RectF()
+  private val path = Path()
 
   override fun drawBackground(
     canvas: Canvas,
@@ -32,58 +66,78 @@ class MarkdownBackgroundSpan(
     end: Int,
     lnum: Int
   ) {
+    if (pass != null && !pass.painting) {
+      return
+    }
+
+    // The line on its own, measured as it was laid out. `drawBackground` is
+    // handed the line's characters and its paint but not the layout that
+    // positioned them, so where the run sits on it has to be measured again.
     val lineText = text.subSequence(start, end)
-    val cachedLayout = layout
-    // `!==` on purpose: the Java this replaces compared the layout's text by
-    // reference, not by value.
-    if (cachedLayout == null ||
-      cachedLayout.text !== lineText ||
-      cachedLayout.width != right ||
-      cachedLayout.getLineEnd(0) != lineText.length
-    ) {
-      val currentLineStart = 0
-      val currentLineEnd = lineText.length
-      // Create layout for the current line only
-      val newLayout = StaticLayout.Builder
-        .obtain(lineText, currentLineStart, currentLineEnd, paint as TextPaint, right)
-        .build()
-      layout = newLayout
-
-      val relativeMentionStart = mentionStart - start
-      val relativeMentionEnd = mentionEnd - start
-
-      val mentionStartsInCurrentLine = currentLineStart <= relativeMentionStart
-      val mentionEndsInCurrentLine = currentLineEnd >= relativeMentionEnd
-
-      val startX = newLayout.getPrimaryHorizontal(
-        if (mentionStartsInCurrentLine) relativeMentionStart else currentLineStart
-      )
-      val endX = newLayout.getPrimaryHorizontal(
-        if (mentionEndsInCurrentLine) relativeMentionEnd else currentLineEnd
-      )
-
-      val fm = paint.getFontMetrics()
-      val startY = baseline + fm.ascent
-      val endY = baseline + fm.descent
-
-      val lineRect = RectF(startX, startY, endX, endY)
-      backgroundPath.reset()
-      backgroundPath.addRoundRect(
-        lineRect,
-        createRadii(mentionStartsInCurrentLine, mentionEndsInCurrentLine),
-        Path.Direction.CW
-      )
+    val layout = StaticLayout.Builder
+      .obtain(lineText, 0, lineText.length, paint as TextPaint, right)
+      .build()
+
+    val opens = runStart >= start
+    val closes = runEnd <= end
+
+    val startX = layout.getPrimaryHorizontal(if (opens) runStart - start else 0)
+    val endX = layout.getPrimaryHorizontal(if (closes) runEnd - start else lineText.length)
+
+    // The gap spans reserved padding and margin inside the first and last
+    // characters, so the box's edge is the margin's width inside what they took.
+    val metrics = paint.fontMetrics
+    rect.set(
+      startX + if (opens) marginHorizontal else 0f,
+      baseline + metrics.ascent - paddingVertical,
+      endX - if (closes) marginHorizontal else 0f,
+      baseline + metrics.descent + paddingVertical,
+    )
+
+    if (rect.width() <= 0f || rect.height() <= 0f) {
+      return
     }
 
+    path.reset()
+    path.addRoundRect(rect, radii(opens, closes), Path.Direction.CW)
+
+    fill(canvas, paint, path)
+  }
+
+  /**
+   * Fills the box and, where the style asked for one, draws its border.
+   *
+   * The border is stroked at twice its width and clipped to the box, so the
+   * outer half is trimmed away and a bordered run covers exactly the room an
+   * unbordered one does. `MarkdownFormatter.swift` draws its border the same
+   * way, and it is what a border on an element does on the web.
+   */
+  private fun fill(canvas: Canvas, paint: Paint, path: Path) {
     val originalColor = paint.color
-    paint.color = backgroundColor
+    val originalStyle = paint.style
+    val originalWidth = paint.strokeWidth
 
-    canvas.drawPath(backgroundPath, paint)
+    paint.style = Paint.Style.FILL
+    paint.color = backgroundColor
+    canvas.drawPath(path, paint)
+
+    if (borderColor != null && borderWidth > 0f) {
+      canvas.save()
+      canvas.clipPath(path)
+      paint.style = Paint.Style.STROKE
+      paint.strokeWidth = borderWidth * 2f
+      paint.color = borderColor
+      canvas.drawPath(path, paint)
+      canvas.restore()
+    }
 
     paint.color = originalColor
+    paint.style = originalStyle
+    paint.strokeWidth = originalWidth
   }
 
-  private fun createRadii(roundedLeft: Boolean, roundedRight: Boolean): FloatArray {
+  /** Corners of one line's rect: only the ends of the run are rounded. */
+  private fun radii(roundedLeft: Boolean, roundedRight: Boolean): FloatArray {
     val radii = FloatArray(8)
 
     if (roundedLeft) {

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownBlockIndentSpan.kt

@@ -13,11 +13,15 @@ import androidx.annotation.ColorInt
  * One span per line rather than one per container: where a container's gutter
  * goes depends on the markers of the containers around it, so the offsets are
  * worked out together by the formatter and handed over already in pixels.
+ *
+ * The ribbon's own three values default to nothing, for a line that is only
+ * indented -- a code block's padding, where no quote is involved.
  */
 class MarkdownBlockIndentSpan(
-  @ColorInt private val borderColor: Int,
-  private val borderWidth: Float,
-  private val borderSpacing: Float
+  @ColorInt private val borderColor: Int = 0,
+  private val borderWidth: Float = 0f,
+  private val borderSpacing: Float = 0f,
+  private val borderRadius: Float = 0f
 ) : MarkdownSpan, LeadingMarginSpan {
 
   /** Where the line's text starts, and where it resumes when it wraps. */
@@ -58,7 +62,21 @@ class MarkdownBlockIndentSpan(
 
     for (level in 0 until depth) {
       val left = x + dir * (ribbonOffset + borderSpacing * level)
-      c.drawRect(left, top.toFloat(), left + dir * borderWidth, bottom.toFloat(), p)
+      val right = left + dir * borderWidth
+
+      if (borderRadius > 0f) {
+        c.drawRoundRect(
+          minOf(left, right),
+          top.toFloat(),
+          maxOf(left, right),
+          bottom.toFloat(),
+          borderRadius,
+          borderRadius,
+          p
+        )
+      } else {
+        c.drawRect(left, top.toFloat(), right, bottom.toFloat(), p)
+      }
     }
 
     p.style = originalStyle