react-native-marcus 0.1.1 → 0.2.0

package/apple/MarkdownFormatter.swift

@@ -11,27 +11,50 @@ import UIKit
   /// Font resolution is injected rather than reached for, so this file carries
   /// no React dependency and can be compiled on its own. The Objective-C entry
   /// point in `MarkdownFormatter+React.swift` supplies the production one.
+  /// `resetAttributes` distinguishes the two callers. A text input formats the
+  /// same live storage over and over, so it starts from a clean slate each
+  /// time. A paragraph is handed a string that was just built from the shadow
+  /// tree, already carrying the per-fragment attributes of every nested `Text`
+  /// -- and, where a `View` was passed as a child, an attachment that a reset
+  /// would throw away.
+  ///
+  /// `display` says which of the two is being formatted, which only the list
+  /// markers care about: a display 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.
   public static func format(
     _ attributedString: NSMutableAttributedString,
     defaultTextAttributes: [NSAttributedString.Key: Any],
     ranges: [MarcusRange],
     style: RCTMarcusStyle,
-    fonts: MarkdownFontProviding
+    fonts: MarkdownFontProviding,
+    resetAttributes: Bool = true,
+    display: Bool = false
   ) {
     let fullRange = NSRange(location: 0, length: attributedString.length)
 
     attributedString.beginEditing()
 
-    attributedString.setAttributes(defaultTextAttributes, range: fullRange)
+    if resetAttributes {
+      attributedString.setAttributes(defaultTextAttributes, range: fullRange)
 
-    // Forces the swizzled `_textOf:equals:` into string-only comparison.
-    attributedString.addAttribute(.marcusText, value: true, range: fullRange)
+      // Forces the swizzled `_textOf:equals:` into string-only comparison.
+      attributedString.addAttribute(.marcusText, value: true, range: fullRange)
+    }
 
     // Containers arrive per line, outermost first, each preceded by the run of
     // text its own marker takes up on that line. Laying a line out is a walk
     // left to right: reserve a container's gutter, step over its marker, repeat.
-    var line = BlockLayout()
+    var line = BlockLayout(
+      style: style,
+      display: display,
+      baseFontSize: (defaultTextAttributes[.font] as? UIFont)?.pointSize ?? 0
+    )
     var pendingPrefix: NSRange?
+    // 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.
+    var codeBlocks: [NSRange] = []
 
     for markdownRange in ranges {
       if markdownRange.type == "block-prefix" {
@@ -39,6 +62,11 @@ import UIKit
         continue
       }
 
+      if markdownRange.type == "codeblock" {
+        codeBlocks.append(markdownRange.range)
+        continue
+      }
+
       if let gutter = gutter(
         for: markdownRange.type,
         depth: Int(markdownRange.depth),
@@ -54,6 +82,22 @@ import UIKit
           defaultTextAttributes: defaultTextAttributes
         )
         pendingPrefix = nil
+
+        // The text of a quoted block, as opposed to the bar beside it. Applied
+        // here rather than in `apply` because a quote is a container and so
+        // never reaches the range walk below. 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(
+            style.blockquote,
+            to: attributedString,
+            range: markdownRange.range,
+            defaultTextAttributes: defaultTextAttributes,
+            fonts: fonts
+          )
+        }
+
         continue
       }
 
@@ -63,15 +107,51 @@ import UIKit
         range: markdownRange.range,
         depth: Int(markdownRange.depth),
         style: style,
+        defaultTextAttributes: defaultTextAttributes,
+        fonts: fonts
+      )
+    }
+
+    for codeBlock in codeBlocks {
+      box(
+        codeBlock,
+        in: attributedString,
+        style: style,
+        defaultTextAttributes: defaultTextAttributes
+      )
+    }
+
+    // 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 marker in line.markerRuns {
+      applyTextStyle(
+        marker.style,
+        to: attributedString,
+        range: marker.range,
+        defaultTextAttributes: defaultTextAttributes,
         fonts: fonts
       )
     }
 
-    (attributedString.string as NSString).enumerateSubstrings(
+    let text = attributedString.string as NSString
+
+    text.enumerateSubstrings(
       in: fullRange,
       options: [.byLines, .substringNotRequired]
-    ) { _, _, enclosingRange, _ in
+    ) { _, lineRange, enclosingRange, _ in
       applyBaselineOffset(to: attributedString, range: enclosingRange)
+
+      applyWritingDirection(
+        to: attributedString,
+        line: lineRange,
+        enclosing: enclosingRange,
+        in: text,
+        defaultTextAttributes: defaultTextAttributes
+      )
     }
 
     attributedString.fixAttributes(in: fullRange)
@@ -81,174 +161,695 @@ import UIKit
 
   // MARK: - Per-range attributes
 
+  /// The entry a type is styled from, or nil 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 static func textStyle(
+    for type: String,
+    style: RCTMarcusStyle
+  ) -> RCTMarcusTextStyle? {
+    switch type {
+    case "syntax", "language":
+      return style.syntax
+    case "link":
+      return style.link
+    case "strong":
+      return style.strong
+    case "emphasis":
+      return style.emphasis
+    case "strikethrough":
+      return style.strikethrough
+    case "heading":
+      return style.heading
+    case "code":
+      return style.code
+    case "pre":
+      return style.pre
+    case "mention":
+      return style.mention
+    default:
+      return nil
+    }
+  }
+
   private static func apply(
     _ type: String,
     to attributedString: NSMutableAttributedString,
     range: NSRange,
     depth: Int,
     style: RCTMarcusStyle,
+    defaultTextAttributes: [NSAttributedString.Key: Any],
     fonts: MarkdownFontProviding
   ) {
+    if let textStyle = textStyle(for: type, style: style) {
+      applyTextStyle(
+        textStyle,
+        to: attributedString,
+        range: range,
+        // 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: type == "heading" ? headingFontSize(depth, style.heading) : nil,
+        defaultTextAttributes: defaultTextAttributes,
+        fonts: fonts
+      )
+    }
+
     switch type {
-    case "bold", "italic", "code", "pre", "heading", "emoji":
-      var font =
-        attributedString.attribute(
-          .font,
-          at: range.location,
-          effectiveRange: nil
-        ) as? UIFont
-      switch type {
-      case "bold":
-        font = fonts.update(font, weight: "bold")
-      case "italic":
-        font = fonts.update(font, style: "italic")
-      case "code":
-        font = fonts.update(
-          font,
-          family: style.codeFontFamily,
-          size: style.codeFontSize,
-          weight: nil
-        )
-      case "pre":
-        font = fonts.update(
-          font,
-          family: style.preFontFamily,
-          size: style.preFontSize,
-          weight: nil
-        )
-      case "heading":
-        // Level N is the base size scaled N-1 times, so a single pair of style
-        // values covers all six.
-        var size = style.headingFontSize
-        for _ in 1..<max(depth, 1) {
-          size *= style.headingScale
-        }
-        font = fonts.update(font, family: nil, size: size, weight: "bold")
-      case "emoji":
-        font = fonts.update(
-          font,
-          family: style.emojiFontFamily,
-          size: style.emojiFontSize,
-          weight: nil
-        )
-      default:
-        break
-      }
-      attributedString.addAttribute(.font, value: font as Any, range: range)
+    case "emoji":
+      applyEmoji(style.emoji, to: attributedString, range: range, fonts: fonts)
+
+    case "code":
+      chip(range, in: attributedString, style: style.code)
+
+    // Only the text attributes: what a block is drawn on is a box behind the
+    // whole of it, applied from the `codeblock` range in box(_:in:style:).
+    case "mention":
+      chip(range, in: attributedString, style: style.mention)
+
     default:
       break
     }
+  }
 
-    switch type {
-    case "syntax":
-      attributedString.addAttribute(
-        .foregroundColor,
-        value: style.syntaxColor,
-        range: range
-      )
+  /// Level N is the base size scaled N-1 times, so a single pair of style values
+  /// covers all six. Zero when the style names no size, which reads as unset.
+  private static func headingFontSize(
+    _ depth: Int,
+    _ style: RCTMarcusHeadingStyle
+  ) -> CGFloat? {
+    guard style.fontSize > 0 else { return nil }
 
-    case "strikethrough":
-      attributedString.addAttribute(
-        .strikethroughStyle,
-        value: NSUnderlineStyle.single.rawValue,
-        range: range
+    var size = style.fontSize
+    for _ in 1..<max(depth, 1) {
+      size *= style.scale
+    }
+    return size
+  }
+
+  private static func applyEmoji(
+    _ style: RCTMarcusEmojiStyle,
+    to attributedString: NSMutableAttributedString,
+    range: NSRange,
+    fonts: MarkdownFontProviding
+  ) {
+    let current =
+      attributedString.attribute(.font, at: range.location, effectiveRange: nil)
+      as? UIFont
+
+    guard
+      let font = fonts.update(
+        current,
+        family: style.fontFamily,
+        size: style.fontSize > 0 ? style.fontSize : (current?.pointSize ?? 0),
+        weight: nil
       )
+    else { return }
 
-    case "code":
-      attributedString.addAttribute(
-        .foregroundColor,
-        value: style.codeColor,
-        range: range
+    attributedString.addAttribute(.font, value: font, range: range)
+  }
+
+  // MARK: - Text style
+
+  /// 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. `blockUtils` writes the same set as CSS, and
+  /// `MarkdownFormatter.kt` as spans.
+  ///
+  /// Everything unset is left alone rather than written as a zero, so a run
+  /// inherits whatever the prose around it is drawn in.
+  private static func applyTextStyle(
+    _ style: RCTMarcusTextStyle,
+    to attributedString: NSMutableAttributedString,
+    range: NSRange,
+    fontSize: CGFloat? = nil,
+    defaultTextAttributes: [NSAttributedString.Key: Any],
+    fonts: MarkdownFontProviding
+  ) {
+    guard range.length > 0, NSMaxRange(range) <= attributedString.length else {
+      return
+    }
+
+    applyFont(
+      style,
+      to: attributedString,
+      range: range,
+      fontSize: fontSize,
+      fonts: fonts
+    )
+
+    if let color = style.color {
+      attributedString.addAttribute(.foregroundColor, value: color, range: range)
+    }
+
+    applyLetterSpacing(style, to: attributedString, range: range)
+    applyDecoration(style, to: attributedString, range: range)
+    applyShadow(style, to: attributedString, range: range)
+    applyLineHeight(
+      style,
+      to: attributedString,
+      range: range,
+      defaultTextAttributes: defaultTextAttributes
+    )
+  }
+
+  /// The face, the size, the weight and the slant, in that order.
+  ///
+  /// The family and the size go together in one call because React Native's font
+  /// resolution takes them together, and the two traits follow so that a weight
+  /// asked for on top of a family survives the family being resolved.
+  private static func applyFont(
+    _ style: RCTMarcusTextStyle,
+    to attributedString: NSMutableAttributedString,
+    range: NSRange,
+    fontSize: CGFloat?,
+    fonts: MarkdownFontProviding
+  ) {
+    let size = fontSize ?? (style.fontSize > 0 ? style.fontSize : nil)
+
+    guard
+      size != nil || style.fontFamily != nil || style.fontWeight != nil
+        || style.fontStyle != nil
+    else { return }
+
+    var font =
+      attributedString.attribute(.font, at: range.location, effectiveRange: nil)
+      as? UIFont
+
+    if size != nil || style.fontFamily != nil {
+      font = fonts.update(
+        font,
+        family: style.fontFamily,
+        size: size ?? font?.pointSize ?? 0,
+        weight: nil
       )
+    }
+    if let weight = style.fontWeight {
+      font = fonts.update(font, weight: weight)
+    }
+    if let fontStyle = style.fontStyle {
+      font = fonts.update(font, style: fontStyle)
+    }
+
+    guard let font else { return }
+
+    attributedString.addAttribute(.font, value: font, range: range)
+  }
+
+  /// Added to whatever each character was already kerned by rather than written
+  /// over it, because kerning is also how a marker holds a gutter open and how
+  /// an inline box holds its own room: a run given letter spacing must not
+  /// swallow the space a container reserved after the marker it starts with.
+  private static func applyLetterSpacing(
+    _ style: RCTMarcusTextStyle,
+    to attributedString: NSMutableAttributedString,
+    range: NSRange
+  ) {
+    guard style.letterSpacing != 0 else { return }
+
+    var existing: [(NSRange, CGFloat)] = []
+    attributedString.enumerateAttribute(.kern, in: range, options: []) {
+      value, subrange, _ in
+      existing.append((subrange, CGFloat((value as? NSNumber)?.doubleValue ?? 0)))
+    }
+
+    for (subrange, kern) in existing {
       attributedString.addAttribute(
-        .backgroundColor,
-        value: style.codeBackgroundColor,
-        range: range
+        .kern,
+        value: kern + style.letterSpacing,
+        range: subrange
       )
+    }
+  }
 
-    case "mention-here":
-      applyMention(
-        to: attributedString,
-        range: range,
-        color: style.mentionHereColor,
-        backgroundColor: style.mentionHereBackgroundColor,
-        borderRadius: style.mentionHereBorderRadius
-      )
+  private static func applyDecoration(
+    _ style: RCTMarcusTextStyle,
+    to attributedString: NSMutableAttributedString,
+    range: NSRange
+  ) {
+    guard let line = style.textDecorationLine, line != "none" else { return }
 
-    case "mention-user":
-      // TODO: change mention color when it mentions current user
-      applyMention(
-        to: attributedString,
-        range: range,
-        color: style.mentionUserColor,
-        backgroundColor: style.mentionUserBackgroundColor,
-        borderRadius: style.mentionUserBorderRadius
-      )
+    let pattern = underlineStyle(style.textDecorationStyle).rawValue
 
-    case "mention-report":
-      applyMention(
-        to: attributedString,
-        range: range,
-        color: style.mentionReportColor,
-        backgroundColor: style.mentionReportBackgroundColor,
-        borderRadius: style.mentionReportBorderRadius
-      )
+    if line.contains("underline") {
+      attributedString.addAttribute(.underlineStyle, value: pattern, range: range)
+      if let color = style.textDecorationColor {
+        attributedString.addAttribute(.underlineColor, value: color, range: range)
+      }
+    }
 
-    case "link":
+    if line.contains("line-through") {
       attributedString.addAttribute(
-        .underlineStyle,
-        value: NSUnderlineStyle.single.rawValue,
+        .strikethroughStyle,
+        value: pattern,
         range: range
       )
-      attributedString.addAttribute(
-        .foregroundColor,
-        value: style.linkColor,
-        range: range
+      if let color = style.textDecorationColor {
+        attributedString.addAttribute(
+          .strikethroughColor,
+          value: color,
+          range: range
+        )
+      }
+    }
+  }
+
+  /// The CSS names for a decoration's line, as the patterns TextKit draws.
+  private static func underlineStyle(_ name: String?) -> NSUnderlineStyle {
+    switch name {
+    case "double":
+      return [.double]
+    case "dotted":
+      return [.single, .patternDot]
+    case "dashed":
+      return [.single, .patternDash]
+    default:
+      return .single
+    }
+  }
+
+  private static func applyShadow(
+    _ style: RCTMarcusTextStyle,
+    to attributedString: NSMutableAttributedString,
+    range: NSRange
+  ) {
+    guard
+      style.textShadowColor != nil || style.textShadowRadius > 0
+        || style.textShadowOffset != .zero
+    else { return }
+
+    let shadow = NSShadow()
+    shadow.shadowColor = style.textShadowColor
+    shadow.shadowOffset = style.textShadowOffset
+    shadow.shadowBlurRadius = style.textShadowRadius
+
+    attributedString.addAttribute(.shadow, value: shadow, range: range)
+  }
+
+  /// Line height is a paragraph attribute, and TextKit reads the paragraph style
+  /// of a paragraph's first character, so a run that asks for one raises the
+  /// whole line it sits on rather than only itself. Android's `LineHeightSpan`
+  /// behaves the same way, and the type declares as much.
+  private static func applyLineHeight(
+    _ style: RCTMarcusTextStyle,
+    to attributedString: NSMutableAttributedString,
+    range: NSRange,
+    defaultTextAttributes: [NSAttributedString.Key: Any]
+  ) {
+    guard style.lineHeight > 0 else { return }
+
+    let paragraph = (attributedString.string as NSString).paragraphRange(for: range)
+    let indents = paragraphStyle(
+      of: attributedString,
+      at: paragraph.location,
+      defaultTextAttributes: defaultTextAttributes
+    )
+
+    indents.minimumLineHeight = style.lineHeight
+    indents.maximumLineHeight = style.lineHeight
+
+    attributedString.addAttribute(
+      .paragraphStyle,
+      value: indents,
+      range: paragraph
+    )
+  }
+
+  // MARK: - Inline boxes
+
+  /// Boxes one run of text -- a mention, or an inline run of code: the room its
+  /// background takes up, and the background itself.
+  ///
+  /// The room is kerning, which is the one way a line can be made to leave space
+  /// around a run of itself: a paragraph's indent would move the whole line, and
+  /// a background colour would simply sit under whatever is next to it. The
+  /// character before the run holds the space in front of it and the run's own
+  /// last character the space behind, so both sides come out of an advance
+  /// rather than out of a glyph. Only the horizontal lengths are held open that
+  /// way; vertically the box grows into the line's own spacing, because one run
+  /// cannot push the lines around it apart.
+  ///
+  /// Nothing is kerned in front of a run that opens a line -- there is no
+  /// character there to widen -- and its box grows into the margin instead.
+  private static func chip(
+    _ range: NSRange,
+    in attributedString: NSMutableAttributedString,
+    style: RCTMarcusBoxStyle
+  ) {
+    let background = MarkdownTextBackground()
+    background.color = style.backgroundColor ?? .clear
+    background.borderWidth = style.borderWidth
+    // 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.
+    background.borderColor =
+      style.borderWidth > 0 ? (style.borderColor ?? style.color) : nil
+    background.borderRadius = style.borderRadius
+    background.paddingHorizontal = style.paddingHorizontal
+    background.paddingVertical = style.paddingVertical
+    background.marginHorizontal = style.marginHorizontal
+    attributedString.addAttribute(
+      .marcusTextBackground,
+      value: background,
+      range: range
+    )
+
+    let gap = style.paddingHorizontal + style.marginHorizontal
+    guard gap > 0, range.length > 0 else { return }
+
+    let text = attributedString.string as NSString
+    widen(NSMaxRange(range) - 1, by: gap, in: attributedString)
+
+    let before = range.location - 1
+    if before >= 0, !isLineBreak(text.character(at: before)) {
+      widen(before, by: gap, in: attributedString)
+    }
+  }
+
+  /// Adds to whatever the character at `index` was already kerned by, so a run
+  /// that opens right after a container's marker keeps the gutter that marker
+  /// was holding open.
+  private static func widen(
+    _ index: Int,
+    by gap: CGFloat,
+    in attributedString: NSMutableAttributedString
+  ) {
+    guard index >= 0, index < attributedString.length else { return }
+
+    let existing =
+      (attributedString.attribute(.kern, at: index, effectiveRange: nil)
+        as? NSNumber)?.doubleValue ?? 0
+
+    attributedString.addAttribute(
+      .kern,
+      value: CGFloat(existing) + gap,
+      range: NSRange(location: index, length: 1)
+    )
+  }
+
+  // MARK: - Code blocks
+
+  /// 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 padding and the margin are held open as indent on the leading edge and
+  /// as paragraph spacing above the first line and below the last, each axis
+  /// taking its own pair of lengths. Nothing is reserved on the trailing edge;
+  /// the box runs to the edge
+  /// of the text there, so a line long enough to wrap reaches the padding. A
+  /// paragraph cannot be given a trailing indent on Android at all, and a box
+  /// that stopped short on one platform only would be worse than one that
+  /// stops short on neither.
+  private static func box(
+    _ range: NSRange,
+    in attributedString: NSMutableAttributedString,
+    style: RCTMarcusStyle,
+    defaultTextAttributes: [NSAttributedString.Key: Any]
+  ) {
+    let text = attributedString.string as NSString
+    guard let body = body(of: range, in: text) else { return }
+
+    // Horizontally the room is an indent, vertically it is paragraph spacing, so
+    // the two axes are held open by different things and are worked out apart.
+    let insetX = style.pre.paddingHorizontal + style.pre.marginHorizontal
+    let insetY = style.pre.paddingVertical + style.pre.marginVertical
+    var paragraphs: [NSRange] = []
+    var location = body.location
+
+    while location < NSMaxRange(body) {
+      let paragraph = text.paragraphRange(
+        for: NSRange(location: location, length: 0)
       )
+      // A paragraph range always contains the location it was asked about, so
+      // this cannot loop; the guard is for a string that changed underneath.
+      guard paragraph.length > 0 else { break }
+      paragraphs.append(paragraph)
+      location = NSMaxRange(paragraph)
+    }
 
-    case "pre":
-      attributedString.addAttribute(
-        .foregroundColor,
-        value: style.preColor,
-        range: range
+    // 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. A head indent is measured from the edge the line begins at, so
+    // this is too, and `block.rightToLeft` is what says which edge that is.
+    var left = CGFloat.greatestFiniteMagnitude
+
+    for (index, paragraph) in paragraphs.enumerated() {
+      let indents = paragraphStyle(
+        of: attributedString,
+        at: paragraph.location,
+        defaultTextAttributes: defaultTextAttributes
       )
-      // A fenced block's range starts with the newline after the opening fence;
-      // the background should not cover it.
-      let text = attributedString.string as NSString
-      let rangeForBackground =
-        text.character(at: range.location) == unichar(10)
-        ? NSRange(location: range.location + 1, length: range.length - 1)
-        : range
+
+      left = min(left, indents.firstLineHeadIndent)
+      indents.firstLineHeadIndent += insetX
+      indents.headIndent += insetX
+
+      if index == 0 {
+        indents.paragraphSpacingBefore += insetY
+      }
+      if index == paragraphs.count - 1 {
+        indents.paragraphSpacing += insetY
+      }
+
       attributedString.addAttribute(
-        .backgroundColor,
-        value: style.preBackgroundColor,
-        range: rangeForBackground
+        .paragraphStyle,
+        value: indents,
+        range: paragraph
       )
+    }
+
+    guard left < .greatestFiniteMagnitude else { return }
+
+    let block = MarkdownCodeBlock()
+    block.color = style.pre.backgroundColor ?? .clear
+    block.borderWidth = style.pre.borderWidth
+    block.borderColor =
+      style.pre.borderWidth > 0 ? (style.pre.borderColor ?? style.pre.color) : nil
+    block.borderRadius = style.pre.borderRadius
+    block.marginHorizontal = style.pre.marginHorizontal
+    block.marginVertical = style.pre.marginVertical
+    block.leadingInset = left + style.pre.marginHorizontal
+    // The block's own text, and all of it rather than its first line: a fence
+    // is punctuation and decides nothing, and it is present in an input and
+    // stripped from a display, so a rule that stopped at the first line would
+    // answer differently in the two. The code inside is the same either way.
+    block.rightToLeft = MarkdownWritingDirection.isRightToLeft(text, in: body)
+
+    attributedString.addAttribute(.marcusCodeBlock, value: block, range: body)
+  }
+
+  /// 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 static func body(of range: NSRange, in text: NSString) -> NSRange? {
+    var start = range.location
+    var end = NSMaxRange(range)
+
+    while start < end, isLineBreak(text.character(at: start)) {
+      start += 1
+    }
+    while end > start, isLineBreak(text.character(at: end - 1)) {
+      end -= 1
+    }
+
+    return end > start
+      ? NSRange(location: start, length: end - start)
+      : nil
+  }
+
+  private static func isLineBreak(_ character: unichar) -> Bool {
+    character == unichar(10) || character == unichar(13)
+  }
+
+  // MARK: - List markers
+
+  /// A list marker that a display drew, and the style it is finished with once
+  /// the walk is over.
+  ///
+  /// Only ordered markers are recorded. An unordered one 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.
+  private struct MarkerRun {
+    let range: NSRange
+    let style: RCTMarcusTextStyle
+  }
 
+  /// 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 static func markerPadding(
+    for type: String,
+    style: RCTMarcusStyle,
+    display: Bool
+  ) -> CGFloat {
+    guard display else { return 0 }
+
+    switch type {
+    case "list-ordered":
+      return style.orderedList.markerPadding
+    case "list-unordered":
+      return style.unorderedList.markerPadding
     default:
-      break
+      return 0
     }
   }
 
-  private static func applyMention(
-    to attributedString: NSMutableAttributedString,
-    range: NSRange,
+  /// 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 static func placeMarker(
+    _ prefix: NSRange,
+    type: String,
+    decorate: Bool,
+    in attributedString: NSMutableAttributedString,
+    style: RCTMarcusStyle,
+    display: Bool,
+    baseFontSize: CGFloat,
+    runs: inout [MarkerRun]
+  ) -> CGFloat {
+    let text = attributedString.string as NSString
+
+    guard display, baseFontSize > 0, let marker = markerRun(prefix, in: text) else {
+      return measure(prefix, in: attributedString)
+    }
+
+    switch type {
+    case "list-unordered":
+      let diameter = baseFontSize * style.unorderedList.markerScale
+
+      if decorate {
+        bullet(
+          marker,
+          diameter: diameter,
+          color: style.unorderedList.marker.color ?? .clear,
+          in: attributedString
+        )
+      }
+
+      // 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.
+      return
+        (width(prefix, in: attributedString) - width(marker, in: attributedString)
+          + diameter).rounded(.up)
+
+    case "list-ordered":
+      if decorate {
+        scale(
+          marker,
+          to: baseFontSize * style.orderedList.markerScale,
+          in: attributedString
+        )
+        runs.append(MarkerRun(range: marker, style: style.orderedList.marker))
+      }
+
+      // Measured after the scaling, which is on the string by now, so this is
+      // the width the number will actually be drawn at.
+      return measure(prefix, in: attributedString)
+
+    default:
+      return measure(prefix, in: attributedString)
+    }
+  }
+
+  /// 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 static func markerRun(_ prefix: NSRange, in text: NSString) -> NSRange? {
+    var end = NSMaxRange(prefix)
+
+    while end > prefix.location, isBlank(text.character(at: end - 1)) {
+      end -= 1
+    }
+
+    var start = end
+
+    while start > prefix.location, !isBlank(text.character(at: start - 1)) {
+      start -= 1
+    }
+
+    return end > start ? NSRange(location: start, length: end - start) : nil
+  }
+
+  /// Leaves the marker's glyph undrawn and puts a circle in the advance it had.
+  ///
+  /// The character stays in the string -- it is what a reader copies and what
+  /// VoiceOver announces -- so hiding the glyph is a matter of colour, and the
+  /// kerning is what makes its advance the circle's width whatever glyph the
+  /// item happened to be written with.
+  private static func bullet(
+    _ marker: NSRange,
+    diameter: CGFloat,
     color: UIColor,
-    backgroundColor: UIColor,
-    borderRadius: CGFloat
+    in attributedString: NSMutableAttributedString
   ) {
-    attributedString.addAttribute(.foregroundColor, value: color, range: range)
+    let shape = MarkdownListBullet()
+    shape.color = color
+    shape.diameter = diameter
 
-    let textBackground = MarkdownTextBackground()
-    textBackground.color = backgroundColor
-    textBackground.borderRadius = borderRadius
+    attributedString.addAttribute(.marcusListBullet, value: shape, range: marker)
     attributedString.addAttribute(
-      .marcusTextBackground,
-      value: textBackground,
-      range: range
+      .foregroundColor,
+      value: UIColor.clear,
+      range: marker
+    )
+
+    widen(
+      NSMaxRange(marker) - 1,
+      by: diameter - width(marker, in: attributedString),
+      in: attributedString
     )
   }
 
+  /// Draws the marker at `size`, keeping the face it inherited.
+  private static func scale(
+    _ marker: NSRange,
+    to size: CGFloat,
+    in attributedString: NSMutableAttributedString
+  ) {
+    guard
+      let font = attributedString.attribute(
+        .font,
+        at: marker.location,
+        effectiveRange: nil
+      ) as? UIFont
+    else { return }
+
+    attributedString.addAttribute(
+      .font,
+      value: font.withSize(size),
+      range: marker
+    )
+  }
+
+  private static func isBlank(_ character: unichar) -> Bool {
+    character == unichar(32) || character == unichar(9)
+  }
+
   // MARK: - Block layout
 
   /// The gutter a container reserves for itself, or nil if the type is not one.
@@ -259,13 +860,13 @@ import UIKit
   ) -> CGFloat? {
     switch type {
     case "blockquote":
-      return (style.blockquoteMarginLeft + style.blockquoteBorderWidth
-        + style.blockquotePaddingLeft) * CGFloat(depth)
+      return (style.blockquote.marginStart + style.blockquote.borderWidth
+        + style.blockquote.paddingStart) * CGFloat(depth)
     case "list-ordered":
-      return (style.orderedListMarginLeft + style.orderedListPaddingLeft)
+      return (style.orderedList.marginStart + style.orderedList.paddingStart)
         * CGFloat(depth)
     case "list-unordered":
-      return (style.unorderedListMarginLeft + style.unorderedListPaddingLeft)
+      return (style.unorderedList.marginStart + style.unorderedList.paddingStart)
         * CGFloat(depth)
     default:
       return nil
@@ -284,8 +885,27 @@ import UIKit
   /// that opened it -- otherwise its text, and any ribbon beside it, would sit
   /// at a different offset than the line above and break the block in two.
   private struct BlockLayout {
+    let style: RCTMarcusStyle
+    /// Whether the markers are being rendered or shown; see `format`.
+    let display: Bool
+    /// The size the wrapped `Text` draws at, which is what a marker is drawn in
+    /// proportion to. Zero when the string carries no font at all, which leaves
+    /// the markers as they were typed.
+    let baseFontSize: CGFloat
+
     /// Last marker seen for each container type, for the lines that continue it.
     private var markers: [String: NSRange] = [:]
+    /// The markers this walk drew, styled once it is over. See `format`.
+    private(set) var markerRuns: [MarkerRun] = []
+
+    // Spelled out because a private type's memberwise initialiser is private to
+    // the type itself.
+    init(style: RCTMarcusStyle, display: Bool, baseFontSize: CGFloat) {
+      self.style = style
+      self.display = display
+      self.baseFontSize = baseFontSize
+    }
+
     private var lineStart = NSNotFound
     /// Offset reached so far, from the paragraph's own left edge.
     private var offset: CGFloat = 0
@@ -335,6 +955,16 @@ import UIKit
 
       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 kerning on the
+      // way out, which is the only thing that opens space after a character.
+      let marker = prefix ?? markers[type]
+      let padding =
+        marker == nil
+        ? 0 : MarkdownFormatter.markerPadding(for: type, style: style, display: display)
+
+      offset += padding
+
       if let prefix {
         markers[type] = prefix
         if textStart == nil {
@@ -342,8 +972,24 @@ import UIKit
         }
       }
 
-      if let marker = prefix ?? markers[type] {
-        offset += MarkdownFormatter.measure(marker, in: attributedString)
+      if let marker {
+        offset += MarkdownFormatter.placeMarker(
+          marker,
+          type: type,
+          // Only on the line the marker is written on: a line continuing the
+          // block reuses the one above, which has been drawn already.
+          decorate: prefix != nil,
+          in: attributedString,
+          style: style,
+          display: display,
+          baseFontSize: baseFontSize,
+          runs: &markerRuns
+        )
+        offset += padding
+
+        if prefix != nil {
+          MarkdownFormatter.pad(marker, by: padding, in: attributedString)
+        }
       }
 
       padded = prefix
@@ -389,6 +1035,71 @@ import UIKit
     attributedString.addAttribute(.paragraphStyle, value: style, range: range)
   }
 
+  /// Settles which way one line reads and writes the answer down twice: into
+  /// the paragraph style, which is what moves the text and its gutter, and
+  /// under `.marcusRightToLeft`, which is what the ribbons and boxes drawn by
+  /// hand are placed from. Two readers, one answer, and no way for the bar to
+  /// end up on the far side of the text from the quote it marks.
+  ///
+  /// Writing it into the paragraph style at all is the part worth explaining.
+  /// `NSWritingDirectionNatural` looks like it would do this by itself, and for
+  /// the glyphs it does -- an Arabic line is laid out right to left and aligned
+  /// to the right edge whatever the paragraph style says. What it does not do is
+  /// turn the indents round: a head indent under a natural direction is applied
+  /// from the left, so the quote's gutter opens on the side the text has just
+  /// left and the text itself ends up flush against the container's right edge.
+  /// Naming the direction is what makes `firstLineHeadIndent` mean the leading
+  /// edge, which is what it means on the other two platforms already.
+  ///
+  /// A direction that was named before this ran is left alone and believed: it
+  /// came from the `writingDirection` style prop, and an app that says which way
+  /// its text reads is not overruled by a guess about the characters in it.
+  private static func applyWritingDirection(
+    to attributedString: NSMutableAttributedString,
+    line: NSRange,
+    enclosing: NSRange,
+    in text: NSString,
+    defaultTextAttributes: [NSAttributedString.Key: Any]
+  ) {
+    let declared = paragraphStyle(
+      of: attributedString,
+      at: enclosing.location,
+      defaultTextAttributes: defaultTextAttributes
+    ).baseWritingDirection
+
+    let rightToLeft =
+      declared == .natural
+      ? MarkdownWritingDirection.isRightToLeft(text, in: line)
+      : declared == .rightToLeft
+
+    if declared == .natural {
+      // Run by run rather than over the line in one go: a list nested inside a
+      // quote indents its own share of the line, so one line can carry more
+      // than one paragraph style and flattening them would lose an indent.
+      attributedString.enumerateAttribute(
+        .paragraphStyle,
+        in: enclosing,
+        options: []
+      ) { _, range, _ in
+        let style = paragraphStyle(
+          of: attributedString,
+          at: range.location,
+          defaultTextAttributes: defaultTextAttributes
+        )
+        style.baseWritingDirection = rightToLeft ? .rightToLeft : .leftToRight
+        attributedString.addAttribute(.paragraphStyle, value: style, range: range)
+      }
+    }
+
+    if rightToLeft {
+      attributedString.addAttribute(
+        .marcusRightToLeft,
+        value: true,
+        range: enclosing
+      )
+    }
+  }
+
   private static func paragraphStyle(
     of attributedString: NSAttributedString,
     at location: Int,
@@ -410,6 +1121,10 @@ import UIKit
 
   /// Opens `width` of space after `range` without touching its glyphs, so a
   /// nested container's gutter can sit between one marker and the next.
+  ///
+  /// Added to whatever that character already holds: a marker padded in a
+  /// display is the same character a nested container then pads again, and the
+  /// second must not replace the first.
   private static func pad(
     _ range: NSRange,
     by width: CGFloat,
@@ -417,19 +1132,11 @@ import UIKit
   ) {
     guard width > 0, range.length > 0 else { return }
 
-    attributedString.addAttribute(
-      .kern,
-      value: width,
-      range: NSRange(location: NSMaxRange(range) - 1, length: 1)
-    )
+    widen(NSMaxRange(range) - 1, by: width, in: attributedString)
   }
 
   /// Width `range` takes up mid-line, rounded up to a whole point.
   ///
-  /// A sentinel is appended and its width taken back off again because `size()`
-  /// measures the range as a line of its own and drops trailing whitespace --
-  /// which a list-item prefix always ends in.
-  ///
   /// Rounding is what keeps a quote's ribbon in one piece. TextKit snaps every
   /// line's origin to the device pixel grid, so a line indented past a marker
   /// and a line indented past nothing land on different sides of a fractional
@@ -440,6 +1147,20 @@ import UIKit
   private static func measure(
     _ range: NSRange,
     in attributedString: NSAttributedString
+  ) -> CGFloat {
+    width(range, in: attributedString).rounded(.up)
+  }
+
+  /// The same width before it is rounded, for a caller adding to it: a marker
+  /// that is part glyphs and part drawn shape rounds once, at the end, rather
+  /// than once per part.
+  ///
+  /// A sentinel is appended and its width taken back off again because `size()`
+  /// measures the range as a line of its own and drops trailing whitespace --
+  /// which a list-item prefix always ends in.
+  private static func width(
+    _ range: NSRange,
+    in attributedString: NSAttributedString
   ) -> CGFloat {
     let text = NSMutableAttributedString(
       attributedString: attributedString.attributedSubstring(from: range)
@@ -460,7 +1181,7 @@ import UIKit
     )
     text.append(sentinel)
 
-    return (text.size().width - sentinel.size().width).rounded(.up)
+    return text.size().width - sentinel.size().width
   }
 
   // MARK: - Baseline