react-native-marcus 0.1.0 → 0.2.0

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

@@ -1,27 +1,49 @@
 package app.getbullet.marcus
 
 import android.content.res.AssetManager
+import android.graphics.Color
 import android.os.Trace
 import android.text.SpannableStringBuilder
 import android.text.Spanned
+import android.text.TextDirectionHeuristics
 import android.text.TextPaint
+import android.text.style.AbsoluteSizeSpan
 import android.text.style.MetricAffectingSpan
-import app.getbullet.marcus.spans.MarkdownBackgroundColorSpan
+import androidx.annotation.ColorInt
+import app.getbullet.marcus.spans.MarkdownAbsoluteLineHeightSpan
 import app.getbullet.marcus.spans.MarkdownBackgroundSpan
 import app.getbullet.marcus.spans.MarkdownBlockIndentSpan
-import app.getbullet.marcus.spans.MarkdownBoldSpan
+import app.getbullet.marcus.spans.MarkdownBulletSpan
+import app.getbullet.marcus.spans.MarkdownCodeBlockSpan
 import app.getbullet.marcus.spans.MarkdownFontFamilySpan
 import app.getbullet.marcus.spans.MarkdownFontSizeSpan
+import app.getbullet.marcus.spans.MarkdownFontStyleSpan
+import app.getbullet.marcus.spans.MarkdownFontWeightSpan
 import app.getbullet.marcus.spans.MarkdownForegroundColorSpan
 import app.getbullet.marcus.spans.MarkdownGapSpan
-import app.getbullet.marcus.spans.MarkdownItalicSpan
+import app.getbullet.marcus.spans.MarkdownLetterSpacingSpan
 import app.getbullet.marcus.spans.MarkdownLineHeightSpan
 import app.getbullet.marcus.spans.MarkdownSpan
 import app.getbullet.marcus.spans.MarkdownStrikethroughSpan
+import app.getbullet.marcus.spans.MarkdownTextShadowSpan
 import app.getbullet.marcus.spans.MarkdownUnderlineSpan
 import com.facebook.react.uimanager.PixelUtil
-
-class MarkdownFormatter(private val assetManager: AssetManager) {
+import kotlin.math.ceil
+
+/**
+ * @param backgroundPass set for an input, where the view paints the markdown
+ *   backgrounds itself so that the caret stays visible, and handed on to the
+ *   spans that would otherwise paint themselves. Null for a `Text`.
+ * @param display whether the list markers are rendered or shown. A `Text` draws
+ *   them -- a bullet for an unordered item, the number at its own scale for an
+ *   ordered one -- where an input shows the marker you typed, in the base font,
+ *   because there it is text being edited rather than a rendering of it.
+ */
+class MarkdownFormatter(
+  private val assetManager: AssetManager,
+  private val backgroundPass: MarkdownBackgroundPass? = null,
+  private val display: Boolean = false
+) {
 
   fun format(
     ssb: SpannableStringBuilder,
@@ -60,8 +82,11 @@ class MarkdownFormatter(private val assetManager: AssetManager) {
       Trace.beginSection("applyRanges")
       // Containers arrive per line, outermost first, each preceded by the run of
       // text its own marker takes up on that line.
-      val line = BlockLayout(markdownStyle, textPaint)
+      val line = BlockLayout(markdownStyle, textPaint, display)
       var prefix: MarkdownRange? = null
+      // Boxed once the walk is over: a block's own indent is whatever its lines
+      // ended up with, and the containers around it are still being placed here.
+      val codeBlocks = mutableListOf<MarkdownRange>()
 
       for (markdownRange in markdownRanges) {
         if (markdownRange.type == "block-prefix") {
@@ -69,34 +94,248 @@ class MarkdownFormatter(private val assetManager: AssetManager) {
           continue
         }
 
+        if (markdownRange.type == "codeblock") {
+          codeBlocks.add(markdownRange)
+          continue
+        }
+
         val gutter = gutterOf(markdownRange, markdownStyle)
 
         if (gutter != null) {
           line.add(ssb, markdownRange, gutter, prefix)
           prefix = null
+
+          // The text of a quoted block, as opposed to the bar beside it.
+          // Applied here rather than in `applyRange` because a quote is a
+          // container and so never reaches it. It covers the line's markers as
+          // well as its prose, which is why it goes on before the `syntax`
+          // ranges that arrive later and paint over it.
+          if (markdownRange.type == "blockquote") {
+            applyTextStyle(ssb, markdownStyle.blockquote, markdownRange.start, markdownRange.end)
+          }
+
           continue
         }
 
         applyRange(ssb, markdownRange, markdownStyle)
       }
+
+      for (codeBlock in codeBlocks) {
+        box(ssb, codeBlock, markdownStyle)
+      }
+
+      // Last, so that a marker's own style wins over the `syntax` range that
+      // also covers it -- a display keeps that one range of markup and draws it,
+      // where everything else the colour is for has been stripped out. Only the
+      // scale reaches the width the text was indented past, so a marker style
+      // that changes the face or the size changes how the marker looks and not
+      // how much room it was given.
+      for ((start, end) in line.markerRuns) {
+        applyTextStyle(ssb, markdownStyle.orderedList.marker, start, end)
+      }
     } finally {
       Trace.endSection()
     }
   }
 
+  /**
+   * Boxes one fenced or indented block: the room its background takes up, and
+   * the background itself.
+   *
+   * Run after the container walk rather than during it, because a block is not a
+   * container -- its range covers every line at once, where a container arrives
+   * one line at a time -- and because what it indents by is whatever the
+   * containers around it left its lines at.
+   *
+   * The indent is added to the spans those containers already left on the block's
+   * lines, rather than laid on top as a second one: a line has one authority for
+   * how far in it starts, and a quote's ribbons are drawn from that same span.
+   */
+  private fun box(
+    ssb: SpannableStringBuilder,
+    markdownRange: MarkdownRange,
+    markdownStyle: MarkdownStyle
+  ) {
+    val (start, end) = body(ssb, markdownRange) ?: return
+
+    // Horizontally the room is an indent, vertically it is space held open
+    // above and below the block, so the two axes are worked out apart.
+    val insetX = PixelUtil.toPixelFromDIP(
+      markdownStyle.pre.paddingHorizontal + markdownStyle.pre.marginHorizontal
+    )
+    val marginHorizontal = PixelUtil.toPixelFromDIP(markdownStyle.pre.marginHorizontal)
+
+    // Where the box's near edge goes: the least far in any of the block's own
+    // lines start, taken before they are moved over to make room for the padding.
+    // A line that opens with a marker starts at its marker, so the box covers
+    // that -- the `>` of a quoted block is inside the block being quoted.
+    //
+    // An indent is measured from the edge the line begins at, so this is too, and
+    // `rightToLeft` below is what says which edge that is.
+    val indents = ssb.getSpans(start, end, MarkdownBlockIndentSpan::class.java)
+    var left = 0f
+
+    if (indents.isEmpty()) {
+      setSpan(
+        ssb,
+        MarkdownBlockIndentSpan().also {
+          it.firstLineIndent = insetX
+          it.indent = insetX
+        },
+        start,
+        end
+      )
+    } else {
+      left = indents.minOf { it.firstLineIndent }
+      for (indent in indents) {
+        indent.firstLineIndent += insetX
+        indent.indent += insetX
+      }
+    }
+
+    setSpan(
+      ssb,
+      MarkdownCodeBlockSpan(
+        markdownStyle.pre.backgroundColor ?: Color.TRANSPARENT,
+        PixelUtil.toPixelFromDIP(markdownStyle.pre.borderRadius),
+        PixelUtil.toPixelFromDIP(markdownStyle.pre.paddingVertical),
+        marginHorizontal,
+        PixelUtil.toPixelFromDIP(markdownStyle.pre.marginVertical),
+        left + marginHorizontal,
+        rightToLeft(ssb, start, end),
+        start,
+        end,
+        // A border that names no colour takes the run's own, which is the one
+        // colour the style is certain to have an opinion about.
+        markdownStyle.pre.borderColor ?: markdownStyle.pre.color,
+        PixelUtil.toPixelFromDIP(markdownStyle.pre.borderWidth),
+        backgroundPass
+      ),
+      start,
+      end
+    )
+  }
+
+  /**
+   * Whether a run of the text reads right to left, which is what says which edge
+   * the shapes drawn beside it hang off.
+   *
+   * The framework's own first-strong heuristic, and deliberately so: it is the
+   * same rule a `TextView` resolves a paragraph with by default, and so the same
+   * answer `MarkdownBlockIndentSpan` is handed as `dir` when it draws a quote's
+   * ribbons on the very same line. Reimplementing it here would be one more
+   * place for the bars and the box to disagree. iOS has to work the rule out
+   * itself, in `MarkdownWritingDirection`, only because UIKit keeps its answer.
+   *
+   * `FIRSTSTRONG_LTR` rather than the view's resolved heuristic, which the
+   * formatter has no view to ask for: the two differ only over text with no
+   * strong character at all -- code that is punctuation and digits throughout --
+   * and only in an app whose own layout direction is right to left.
+   */
+  private fun rightToLeft(ssb: SpannableStringBuilder, start: Int, end: Int): Boolean =
+    TextDirectionHeuristics.FIRSTSTRONG_LTR.isRtl(ssb, start, end - start)
+
+  /**
+   * Boxes one inline run -- a mention, or a run of code: the room its background
+   * takes up, and the background itself.
+   *
+   * The room is held open by widening the characters the run starts and ends
+   * with, which is the one way a line can be made to leave space around a run
+   * of itself: a paragraph span would move the whole line, and a background
+   * colour would simply sit under whatever is next to it. Only the horizontal
+   * lengths are held open that way; vertically the box grows into the line's own
+   * spacing instead -- one run cannot push the lines around it apart.
+   *
+   * The lengths arrive in dp, as they are written in a style.
+   */
+  private fun chip(
+    ssb: SpannableStringBuilder,
+    start: Int,
+    end: Int,
+    style: MarkdownBoxStyle
+  ) {
+    val padding = PixelUtil.toPixelFromDIP(style.paddingHorizontal)
+    val margin = PixelUtil.toPixelFromDIP(style.marginHorizontal)
+
+    setSpan(
+      ssb,
+      MarkdownBackgroundSpan(
+        style.backgroundColor ?: Color.TRANSPARENT,
+        PixelUtil.toPixelFromDIP(style.borderRadius),
+        start,
+        end,
+        PixelUtil.toPixelFromDIP(style.paddingVertical),
+        margin,
+        // A border that names no colour takes the run's own, which is the one
+        // colour the style is certain to have an opinion about.
+        style.borderColor ?: style.color,
+        PixelUtil.toPixelFromDIP(style.borderWidth),
+        backgroundPass
+      ),
+      start,
+      end
+    )
+
+    val gap = padding + margin
+    if (gap <= 0f) {
+      return
+    }
+
+    // The gap spans stand in for the characters they cover, so they draw them
+    // too and need the colour the run is drawn in.
+    val color = style.color ?: Color.BLACK
+
+    // Whole code points, so a gap never lands on half a surrogate pair.
+    val afterFirst = Character.offsetByCodePoints(ssb, start, 1)
+    val beforeLast = Character.offsetByCodePoints(ssb, end, -1)
+
+    if (afterFirst >= end) {
+      // One character long: it opens and closes the run at once.
+      setSpan(ssb, MarkdownGapSpan(gap, gap, color), start, end)
+      return
+    }
+
+    setSpan(ssb, MarkdownGapSpan(leading = gap, color = color), start, afterFirst)
+    setSpan(ssb, MarkdownGapSpan(trailing = gap, color = color), beforeLast, end)
+  }
+
+  /**
+   * The lines a block actually occupies: its range with the line breaks it opens
+   * and closes with taken off.
+   *
+   * A display renderer removes the opening fence and leaves the break that ended
+   * it, so a block's range there begins on the line above its first line of code.
+   * Boxing that break would paint a box around the line above.
+   */
+  private fun body(ssb: SpannableStringBuilder, markdownRange: MarkdownRange): Pair<Int, Int>? {
+    var start = markdownRange.start
+    var end = markdownRange.end
+
+    while (start < end && isLineBreak(ssb[start])) {
+      start++
+    }
+    while (end > start && isLineBreak(ssb[end - 1])) {
+      end--
+    }
+
+    return if (end > start) start to end else null
+  }
+
+  private fun isLineBreak(character: Char): Boolean = character == '\n' || character == '\r'
+
   /** The gutter a container reserves for itself, or null if it is not one. */
   private fun gutterOf(markdownRange: MarkdownRange, markdownStyle: MarkdownStyle): Float? {
     val step = when (markdownRange.type) {
       "blockquote" ->
-        markdownStyle.blockquoteMarginLeft +
-          markdownStyle.blockquoteBorderWidth +
-          markdownStyle.blockquotePaddingLeft
+        markdownStyle.blockquote.marginStart +
+          markdownStyle.blockquote.borderWidth +
+          markdownStyle.blockquote.paddingStart
 
       "list-ordered" ->
-        markdownStyle.orderedListMarginLeft + markdownStyle.orderedListPaddingLeft
+        markdownStyle.orderedList.marginStart + markdownStyle.orderedList.paddingStart
 
       "list-unordered" ->
-        markdownStyle.unorderedListMarginLeft + markdownStyle.unorderedListPaddingLeft
+        markdownStyle.unorderedList.marginStart + markdownStyle.unorderedList.paddingStart
 
       else -> return null
     }
@@ -119,13 +358,28 @@ class MarkdownFormatter(private val assetManager: AssetManager) {
    */
   private class BlockLayout(
     private val markdownStyle: MarkdownStyle,
-    private val textPaint: TextPaint?
+    private val textPaint: TextPaint?,
+    private val display: Boolean
   ) {
     /** Scratch paint, reset from [textPaint] before each measurement. */
     private val measurePaint = TextPaint()
 
+    /** The size the wrapped `Text` draws at, in pixels; -1 until it is asked for. */
+    private var baseSize = -1f
+
     /** Last marker seen for each container type, for the lines that continue it. */
     private val markers = HashMap<String, MarkdownRange>()
+
+    /**
+     * The ordered markers this walk drew, styled once it is over. See
+     * [applyRanges].
+     *
+     * Unordered ones are left out: an unordered marker has no glyph left to
+     * style -- its character is drawn clear and a circle put in its advance, in
+     * the same colour this would have applied -- and painting a foreground
+     * colour back over it would bring the character out of hiding.
+     */
+    val markerRuns = mutableListOf<Pair<Int, Int>>()
     private var lineStart = -1
     /** Offset reached so far, from the line's own left edge. */
     private var offset = 0f
@@ -150,13 +404,14 @@ class MarkdownFormatter(private val assetManager: AssetManager) {
         textStart = -1f
         padded = null
         span = MarkdownBlockIndentSpan(
-          markdownStyle.blockquoteBorderColor,
-          PixelUtil.toPixelFromDIP(markdownStyle.blockquoteBorderWidth),
+          markdownStyle.blockquote.borderColor ?: Color.TRANSPARENT,
+          PixelUtil.toPixelFromDIP(markdownStyle.blockquote.borderWidth),
           PixelUtil.toPixelFromDIP(
-            markdownStyle.blockquoteMarginLeft +
-              markdownStyle.blockquoteBorderWidth +
-              markdownStyle.blockquotePaddingLeft
-          )
+            markdownStyle.blockquote.marginStart +
+              markdownStyle.blockquote.borderWidth +
+              markdownStyle.blockquote.paddingStart
+          ),
+          PixelUtil.toPixelFromDIP(markdownStyle.blockquote.borderRadius)
         ).also {
           ssb.setSpan(it, markdownRange.start, markdownRange.end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
         }
@@ -164,22 +419,24 @@ class MarkdownFormatter(private val assetManager: AssetManager) {
 
       val indent = span ?: return
 
-      padded?.let {
-        ssb.setSpan(
-          MarkdownGapSpan(gutter, markdownStyle.syntaxColor),
-          it.end - 1,
-          it.end,
-          Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
-        )
-      }
+      padded?.let { hold(ssb, it, gutter) }
 
       if (markdownRange.type == "blockquote") {
-        indent.ribbonOffset = offset + PixelUtil.toPixelFromDIP(markdownStyle.blockquoteMarginLeft)
+        indent.ribbonOffset =
+          offset + PixelUtil.toPixelFromDIP(markdownStyle.blockquote.marginStart)
         indent.depth = markdownRange.depth
       }
 
       offset += gutter
 
+      // The room either side of a list marker is indent on the way in -- the
+      // marker moves right with the text -- and held open with a gap on the way
+      // out, which is the only thing that opens space after a character.
+      val marker = prefix ?: markers[markdownRange.type]
+      val padding = if (marker == null) 0f else markerPadding(markdownRange.type)
+
+      offset += padding
+
       if (prefix != null) {
         markers[markdownRange.type] = prefix
         if (textStart < 0f) {
@@ -187,8 +444,15 @@ class MarkdownFormatter(private val assetManager: AssetManager) {
         }
       }
 
-      (prefix ?: markers[markdownRange.type])?.let {
-        offset += measure(ssb, it.start, it.end)
+      if (marker != null) {
+        // Only decorated on the line the marker is written on: a line continuing
+        // the block reuses the one above, which has been drawn already.
+        offset += placeMarker(ssb, marker, markdownRange.type, prefix != null)
+        offset += padding
+
+        if (prefix != null) {
+          hold(ssb, marker, padding)
+        }
       }
 
       padded = prefix
@@ -196,6 +460,195 @@ class MarkdownFormatter(private val assetManager: AssetManager) {
       indent.indent = offset
     }
 
+    /**
+     * Holds `amount` of space open after a marker, adding to whatever is already
+     * holding some.
+     *
+     * The padding around a marker and the gutter of the container nested inside
+     * it land on the same character, and a second replacement span there would
+     * replace the first rather than add to it -- only one of them is ever asked
+     * for a width.
+     */
+    private fun hold(ssb: SpannableStringBuilder, marker: MarkdownRange, amount: Float) {
+      if (amount <= 0f) {
+        return
+      }
+
+      val slot = marker.end - 1
+
+      ssb.getSpans(slot, marker.end, MarkdownBulletSpan::class.java)
+        .firstOrNull { ssb.getSpanStart(it) == slot }
+        ?.let {
+          it.trailing += amount
+          return
+        }
+
+      ssb.getSpans(slot, marker.end, MarkdownGapSpan::class.java)
+        .firstOrNull { ssb.getSpanStart(it) == slot }
+        ?.let {
+          it.trailing += amount
+          return
+        }
+
+      ssb.setSpan(
+        MarkdownGapSpan(trailing = amount, color = markdownStyle.syntax.color ?: Color.BLACK),
+        slot,
+        marker.end,
+        Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+      )
+    }
+
+    /**
+     * Room held open either side of a list's marker, or nothing at all for a
+     * container whose marker is shown rather than rendered.
+     */
+    private fun markerPadding(type: String): Float {
+      if (!display) {
+        return 0f
+      }
+
+      return PixelUtil.toPixelFromDIP(
+        when (type) {
+          "list-ordered" -> markdownStyle.orderedList.markerPadding
+          "list-unordered" -> markdownStyle.unorderedList.markerPadding
+          else -> return 0f
+        }
+      )
+    }
+
+    /**
+     * The width a prefix's glyphs take up, drawing whatever a display draws its
+     * marker as on the way past.
+     *
+     * A display renders the marker rather than showing it: an unordered item's
+     * `-` becomes a circle, an ordered item's `1.` stays the number it means but
+     * at its own scale. Both change how wide the prefix comes out, and the
+     * containers nested inside it start after that width, so the two are worked
+     * out in one place.
+     */
+    private fun placeMarker(
+      ssb: SpannableStringBuilder,
+      marker: MarkdownRange,
+      type: String,
+      decorate: Boolean
+    ): Float {
+      val width = measure(ssb, marker.start, marker.end)
+
+      if (!display) {
+        return width
+      }
+
+      val run = markerRun(ssb, marker) ?: return width
+      val base = baseTextSize(ssb)
+
+      if (base <= 0f) {
+        return width
+      }
+
+      return when (type) {
+        "list-unordered" -> {
+          val diameter = base * markdownStyle.unorderedList.markerScale
+          // A whole pixel, because that is what the span can report as an
+          // advance, and the indent has to agree with it exactly.
+          val box = ceil(diameter).toInt()
+
+          if (decorate) {
+            ssb.setSpan(
+              MarkdownBulletSpan(
+                markdownStyle.unorderedList.marker.color ?: Color.BLACK,
+                diameter,
+                box
+              ),
+              run.first,
+              run.second,
+              Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+            )
+          }
+
+          // The marker's own glyph is not drawn, so the circle's width stands in
+          // for it and the rest of the prefix -- an indent in front, the space
+          // behind -- measures as it always did.
+          width - measure(ssb, run.first, run.second) + box
+        }
+
+        "list-ordered" -> {
+          if (!decorate) {
+            // The scaling is already on the string, so the width above is the
+            // one the number is drawn at.
+            return width
+          }
+
+          ssb.setSpan(
+            MarkdownFontSizeSpan(
+              PixelUtil.toDIPFromPixel(base * markdownStyle.orderedList.markerScale)
+            ),
+            run.first,
+            run.second,
+            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+          )
+          markerRuns.add(run)
+
+          measure(ssb, marker.start, marker.end)
+        }
+
+        else -> width
+      }
+    }
+
+    /**
+     * The marker at the end of a prefix: the `-` of a bullet or the `1.` of a
+     * numbered item, without the indent in front of it or the space after it.
+     *
+     * Read off the text rather than taken from the `syntax` range covering it,
+     * because a prefix runs from wherever the previous container's marker ended
+     * and so can carry another container's marker with it -- the ordered list in
+     * `- > 1. ` is handed `> 1. `. The last run of non-blanks is this
+     * container's own.
+     */
+    private fun markerRun(ssb: SpannableStringBuilder, prefix: MarkdownRange): Pair<Int, Int>? {
+      var end = prefix.end
+      while (end > prefix.start && isBlank(ssb[end - 1])) {
+        end--
+      }
+
+      var start = end
+      while (start > prefix.start && !isBlank(ssb[start - 1])) {
+        start--
+      }
+
+      return if (end > start) start to end else null
+    }
+
+    private fun isBlank(character: Char): Boolean = character == ' ' || character == '\t'
+
+    /**
+     * The size the wrapped `Text` draws at, which is what a marker is drawn in
+     * proportion to.
+     *
+     * The view's own paint knows it; the measure path has no view, and takes it
+     * from the size React Native left over the whole string. Only a span
+     * covering all of it will do -- one covering part of it is a nested `Text`
+     * or a heading, neither of which is the base.
+     */
+    private fun baseTextSize(ssb: SpannableStringBuilder): Float {
+      if (baseSize >= 0f) {
+        return baseSize
+      }
+
+      baseSize = textPaint?.textSize
+        ?: ssb.getSpans(0, ssb.length, AbsoluteSizeSpan::class.java)
+          .firstOrNull {
+            it !is MarkdownSpan &&
+              ssb.getSpanStart(it) == 0 &&
+              ssb.getSpanEnd(it) == ssb.length
+          }
+          ?.size
+          ?.toFloat()
+        ?: 0f
+
+      return baseSize
+    }
+
     /**
      * Width a marker renders at.
      *
@@ -219,6 +672,28 @@ class MarkdownFormatter(private val assetManager: AssetManager) {
     }
   }
 
+  /**
+   * The entry a type is styled from, or null for a type that carries no text
+   * attributes of its own.
+   *
+   * A fenced block's language is its own type so that something can read it, but
+   * in an input it is part of the fence you are typing and reads as markup, so it
+   * is styled like the rest of it.
+   */
+  private fun textStyleOf(type: String, markdownStyle: MarkdownStyle): MarkdownTextStyle? =
+    when (type) {
+      "syntax", "language" -> markdownStyle.syntax
+      "link" -> markdownStyle.link
+      "strong" -> markdownStyle.strong
+      "emphasis" -> markdownStyle.emphasis
+      "strikethrough" -> markdownStyle.strikethrough
+      "heading" -> markdownStyle.heading
+      "code" -> markdownStyle.code
+      "pre" -> markdownStyle.pre
+      "mention" -> markdownStyle.mention
+      else -> null
+    }
+
   private fun applyRange(
     ssb: SpannableStringBuilder,
     markdownRange: MarkdownRange,
@@ -226,104 +701,168 @@ class MarkdownFormatter(private val assetManager: AssetManager) {
   ) {
     val start = markdownRange.start
     val end = markdownRange.end
-    when (markdownRange.type) {
-      "bold" -> setSpan(ssb, MarkdownBoldSpan(), start, end)
 
-      "italic" -> setSpan(ssb, MarkdownItalicSpan(), start, end)
+    // Before the text style, because the size span it ends with has to be set
+    // after any line-height span or the line jumps as it is measured again.
+    if (markdownRange.type == "heading") {
+      applyHeadingLineHeight(ssb, markdownRange, markdownStyle, start, end)
+    }
 
-      "strikethrough" -> setSpan(ssb, MarkdownStrikethroughSpan(), start, end)
+    textStyleOf(markdownRange.type, markdownStyle)?.let { style ->
+      applyTextStyle(
+        ssb,
+        style,
+        start,
+        end,
+        // A heading's size is the one thing a style cannot state outright: level
+        // N is the base size scaled N-1 times, and the level only arrives here.
+        fontSize = if (markdownRange.type == "heading") {
+          headingFontSize(markdownRange.depth, markdownStyle.heading)
+        } else {
+          null
+        }
+      )
+    }
 
+    when (markdownRange.type) {
       "emoji" -> {
-        setSpan(
-          ssb,
-          MarkdownFontFamilySpan(markdownStyle.emojiFontFamily, assetManager),
-          start,
-          end
-        )
-        setSpan(ssb, MarkdownFontSizeSpan(markdownStyle.emojiFontSize), start, end)
+        markdownStyle.emoji.fontFamily?.let {
+          setSpan(ssb, MarkdownFontFamilySpan(it, assetManager), start, end)
+        }
+        if (markdownStyle.emoji.fontSize > 0f) {
+          setSpan(ssb, MarkdownFontSizeSpan(markdownStyle.emoji.fontSize), start, end)
+        }
       }
 
-      "mention-here" -> {
-        setSpan(ssb, MarkdownForegroundColorSpan(markdownStyle.mentionHereColor), start, end)
-        setSpan(
-          ssb,
-          MarkdownBackgroundSpan(
-            markdownStyle.mentionHereBackgroundColor,
-            markdownStyle.mentionHereBorderRadius,
-            start,
-            end
-          ),
-          start,
-          end
-        )
-      }
+      "mention" -> chip(ssb, start, end, markdownStyle.mention)
 
-      "mention-user" -> {
-        // TODO: change mention color when it mentions current user
-        setSpan(ssb, MarkdownForegroundColorSpan(markdownStyle.mentionUserColor), start, end)
-        setSpan(
-          ssb,
-          MarkdownBackgroundSpan(
-            markdownStyle.mentionUserBackgroundColor,
-            markdownStyle.mentionUserBorderRadius,
-            start,
-            end
-          ),
-          start,
-          end
-        )
-      }
+      // `pre` gets only its text attributes: what a block is drawn on is a box
+      // behind the whole of it, applied from the `codeblock` range in box().
+      "code" -> chip(ssb, start, end, markdownStyle.code)
+    }
+  }
 
-      "mention-report" -> {
-        setSpan(ssb, MarkdownForegroundColorSpan(markdownStyle.mentionReportColor), start, end)
-        setSpan(
-          ssb,
-          MarkdownBackgroundSpan(
-            markdownStyle.mentionReportBackgroundColor,
-            markdownStyle.mentionReportBorderRadius,
-            start,
-            end
-          ),
-          start,
-          end
-        )
-      }
+  /**
+   * Level N is the base size scaled N-1 times, so a single pair of style values
+   * covers all six. Null when the style names no size, which reads as unset.
+   */
+  private fun headingFontSize(depth: Int, style: MarkdownHeadingStyle): Float? {
+    if (style.fontSize <= 0f) {
+      return null
+    }
 
-      "syntax" -> setSpan(ssb, MarkdownForegroundColorSpan(markdownStyle.syntaxColor), start, end)
+    var fontSize = style.fontSize
+    repeat(maxOf(depth, 1) - 1) { fontSize *= style.scale }
+    return fontSize
+  }
 
-      "link" -> {
-        setSpan(ssb, MarkdownUnderlineSpan(), start, end)
-        setSpan(ssb, MarkdownForegroundColorSpan(markdownStyle.linkColor), start, end)
-      }
+  /**
+   * Grows a heading's line so that the larger type has somewhere to sit.
+   *
+   * Only where the style has not asked for a line height of its own: an explicit
+   * `heading.lineHeight` is the author saying what the line should be, and two
+   * line-height spans on one line would fight.
+   */
+  private fun applyHeadingLineHeight(
+    ssb: SpannableStringBuilder,
+    markdownRange: MarkdownRange,
+    markdownStyle: MarkdownStyle,
+    start: Int,
+    end: Int
+  ) {
+    val style = markdownStyle.heading
+    val fontSize = headingFontSize(markdownRange.depth, style) ?: return
 
-      "code" -> {
-        setSpan(ssb, MarkdownFontFamilySpan(markdownStyle.codeFontFamily, assetManager), start, end)
-        setSpan(ssb, MarkdownFontSizeSpan(markdownStyle.codeFontSize), start, end)
-        setSpan(ssb, MarkdownForegroundColorSpan(markdownStyle.codeColor), start, end)
-        setSpan(ssb, MarkdownBackgroundColorSpan(markdownStyle.codeBackgroundColor), start, end)
-      }
+    if (style.lineHeight > 0f) {
+      return
+    }
 
-      "pre" -> {
-        setSpan(ssb, MarkdownFontFamilySpan(markdownStyle.preFontFamily, assetManager), start, end)
-        setSpan(ssb, MarkdownFontSizeSpan(markdownStyle.preFontSize), start, end)
-        setSpan(ssb, MarkdownForegroundColorSpan(markdownStyle.preColor), start, end)
-        setSpan(ssb, MarkdownBackgroundColorSpan(markdownStyle.preBackgroundColor), start, end)
-      }
+    val lineHeight = ReactLineHeight.find(ssb)
+    if (lineHeight >= 0) {
+      setSpan(
+        ssb,
+        MarkdownLineHeightSpan(lineHeight * (fontSize / style.fontSize) * 1.5f),
+        start,
+        end
+      )
+    }
+  }
 
-      "heading" -> {
-        setSpan(ssb, MarkdownBoldSpan(), start, end)
-        // Level N is the base size scaled N-1 times, so a single pair of style
-        // values covers all six.
-        var fontSize = markdownStyle.headingFontSize
-        repeat(maxOf(markdownRange.depth, 1) - 1) { fontSize *= markdownStyle.headingScale }
-        val lineHeight = ReactLineHeight.find(ssb)
-        if (lineHeight >= 0) {
-          setSpan(ssb, MarkdownLineHeightSpan(lineHeight * (fontSize / markdownStyle.headingFontSize) * 1.5f), start, end)
-        }
-        // NOTE: size span must be set after line height span to avoid height jumps
-        setSpan(ssb, MarkdownFontSizeSpan(fontSize), start, end)
-      }
+  /**
+   * Puts one text style on one run.
+   *
+   * One function rather than a case per type, because every styled type now
+   * carries the same set of attributes: what tells a mention from a heading is
+   * the box around it and the size it is given, not which properties it
+   * understands. `MarkdownFormatter.swift` applies the same set as attributed
+   * string attributes, and `blockUtils` writes it as CSS.
+   *
+   * Everything unset is left alone rather than written as a zero, so a run
+   * inherits whatever the prose around it is drawn in.
+   */
+  private fun applyTextStyle(
+    ssb: SpannableStringBuilder,
+    style: MarkdownTextStyle,
+    start: Int,
+    end: Int,
+    fontSize: Float? = null
+  ) {
+    if (end <= start) {
+      return
+    }
+
+    style.fontFamily?.let { setSpan(ssb, MarkdownFontFamilySpan(it, assetManager), start, end) }
+    style.fontWeight?.let { setSpan(ssb, MarkdownFontWeightSpan(it), start, end) }
+    style.fontStyle?.let { setSpan(ssb, MarkdownFontStyleSpan(it), start, end) }
+    style.color?.let { setSpan(ssb, MarkdownForegroundColorSpan(it), start, end) }
+
+    if (style.letterSpacing != 0f) {
+      setSpan(ssb, MarkdownLetterSpacingSpan(style.letterSpacing), start, end)
+    }
+
+    applyDecoration(ssb, style, start, end)
 
+    if (style.textShadowColor != null ||
+      style.textShadowRadius > 0f ||
+      style.textShadowOffsetX != 0f ||
+      style.textShadowOffsetY != 0f
+    ) {
+      setSpan(
+        ssb,
+        MarkdownTextShadowSpan(
+          style.textShadowColor ?: Color.BLACK,
+          style.textShadowOffsetX,
+          style.textShadowOffsetY,
+          style.textShadowRadius
+        ),
+        start,
+        end
+      )
+    }
+
+    // The line height goes on before the size, so that a line already told how
+    // tall to be is not measured again from the larger type and made to jump.
+    if (style.lineHeight > 0f) {
+      setSpan(ssb, MarkdownAbsoluteLineHeightSpan(style.lineHeight), start, end)
+    }
+
+    val size = fontSize ?: style.fontSize.takeIf { it > 0f }
+    size?.let { setSpan(ssb, MarkdownFontSizeSpan(it), start, end) }
+  }
+
+  private fun applyDecoration(
+    ssb: SpannableStringBuilder,
+    style: MarkdownTextStyle,
+    start: Int,
+    end: Int
+  ) {
+    val line = style.textDecorationLine ?: return
+
+    if (line.contains("underline")) {
+      setSpan(ssb, MarkdownUnderlineSpan(), start, end)
+    }
+    if (line.contains("line-through")) {
+      setSpan(ssb, MarkdownStrikethroughSpan(), start, end)
     }
   }