react-native-marcus 0.1.0 → 0.2.0

package/apple/MarkdownParagraphLayoutManager.swift

@@ -0,0 +1,455 @@
+import UIKit
+
+/// Draws the parts of markdown rendering that attributed-string attributes
+/// cannot express -- the box behind a code block, blockquote ribbons, rounded
+/// mention pills and a list's bullets -- for a `Text` rather than a `TextInput`.
+///
+/// The input draws these in TextKit 2, from `MarkdownTextLayoutFragment`, which
+/// is only reachable through a text view's own `NSTextLayoutManager`. A
+/// paragraph is laid out and drawn by `RCTTextLayoutManager`, which is TextKit
+/// 1, so the same shapes are drawn here instead -- during the background pass,
+/// which is exactly where something belongs that has to sit under the glyphs and
+/// over nothing.
+///
+/// The geometry is the same in both, and deliberately expressed the same way:
+/// a code block's box spans the lines it covers, a ribbon sits at a fixed
+/// offset from the edge the line begins at, and a pill is a font-height box
+/// around the run's baseline. The bullets are the one shape with no counterpart
+/// in the input, which shows the marker that was typed rather than drawing one.
+@objc public final class MarkdownParagraphLayoutManager: NSLayoutManager {
+
+  @objc public var markdownStyle: RCTMarcusStyle?
+
+  public override func drawBackground(
+    forGlyphRange glyphsToShow: NSRange,
+    at origin: CGPoint
+  ) {
+    super.drawBackground(forGlyphRange: glyphsToShow, at: origin)
+
+    guard markdownStyle != nil, let textStorage else { return }
+
+    let characterRange = self.characterRange(
+      forGlyphRange: glyphsToShow,
+      actualGlyphRange: nil
+    )
+
+    // Before the ribbons: a quoted block's box would otherwise cover the bar
+    // drawn beside it.
+    drawCodeBlocks(in: textStorage, characterRange, at: origin)
+    drawBlockquoteRibbons(in: textStorage, glyphsToShow, at: origin)
+    drawMentions(in: textStorage, characterRange, at: origin)
+    drawListBullets(in: textStorage, characterRange, at: origin)
+  }
+
+  // MARK: - Code blocks
+
+  /// One box per fenced or indented block, drawn behind the whole of it.
+  ///
+  /// The whole block at once rather than a rect per line: the fills of two
+  /// abutting lines each antialias their shared edge, and the pair of
+  /// half-covered rows reads as a seam across the box. It is the same reason
+  /// the ribbons below are drawn per run of lines rather than per line.
+  private func drawCodeBlocks(
+    in textStorage: NSTextStorage,
+    _ characterRange: NSRange,
+    at origin: CGPoint
+  ) {
+    textStorage.enumerateAttribute(
+      .marcusCodeBlock,
+      in: characterRange,
+      options: []
+    ) { value, range, _ in
+      guard let block = value as? MarkdownCodeBlock else { return }
+
+      // The visible range can start mid-block while scrolling, and a box drawn
+      // to that would round its corners in the middle of the code. Ask the
+      // storage for the block's whole extent instead.
+      var blockRange = range
+      _ = textStorage.attribute(
+        .marcusCodeBlock,
+        at: range.location,
+        longestEffectiveRange: &blockRange,
+        in: NSRange(location: 0, length: textStorage.length)
+      )
+
+      drawCodeBlock(block, blockRange, at: origin)
+    }
+  }
+
+  private func drawCodeBlock(
+    _ block: MarkdownCodeBlock,
+    _ range: NSRange,
+    at origin: CGPoint
+  ) {
+    let blockGlyphRange = glyphRange(
+      forCharacterRange: range,
+      actualCharacterRange: nil
+    )
+
+    // Line fragment rects rather than the text inside them: a fragment spans
+    // the width the line was laid out in and carries the paragraph spacing that
+    // holds the box's own padding open, which is exactly the box.
+    var bounds = CGRect.null
+    var glyphIndex = blockGlyphRange.location
+
+    while glyphIndex < NSMaxRange(blockGlyphRange) {
+      var lineGlyphRange = NSRange()
+      let lineRect = lineFragmentRect(
+        forGlyphAt: glyphIndex,
+        effectiveRange: &lineGlyphRange
+      )
+
+      // An empty effective range would spin here rather than crash, which is
+      // worse; bail instead.
+      guard lineGlyphRange.length > 0 else { break }
+
+      bounds = bounds.isNull ? lineRect : bounds.union(lineRect)
+      glyphIndex = NSMaxRange(lineGlyphRange)
+    }
+
+    guard !bounds.isNull else { return }
+
+    // The insets are measured from the edge the block's lines begin at, so in a
+    // right-to-left block they swap sides: the padded one is the right, and the
+    // bare margin is all that is left on the far side.
+    let near = block.rightToLeft ? block.marginHorizontal : block.leadingInset
+    let far = block.rightToLeft ? block.leadingInset : block.marginHorizontal
+
+    let rect = CGRect(
+      x: origin.x + bounds.minX + near,
+      y: origin.y + bounds.minY + block.marginVertical,
+      width: bounds.width - near - far,
+      height: bounds.height - 2 * block.marginVertical
+    )
+
+    guard rect.width > 0, rect.height > 0 else { return }
+
+    let path = UIBezierPath(roundedRect: rect, cornerRadius: block.borderRadius)
+    block.color.setFill()
+    path.fill()
+
+    stroke(path, color: block.borderColor, width: block.borderWidth)
+  }
+
+  /// Draws a box's border on the inside of the box.
+  ///
+  /// Clipped to the path and stroked at twice the width, so the outer half of
+  /// the stroke is trimmed away: a bordered box then covers exactly the room an
+  /// unbordered one does, which is what a border on an element does on the web
+  /// and what the Android spans draw.
+  private func stroke(_ path: UIBezierPath, color: UIColor?, width: CGFloat) {
+    guard let color, width > 0, let context = UIGraphicsGetCurrentContext() else {
+      return
+    }
+
+    context.saveGState()
+    path.addClip()
+    color.setStroke()
+    path.lineWidth = width * 2
+    path.stroke()
+    context.restoreGState()
+  }
+
+  // MARK: - Blockquote ribbons
+
+  /// One ribbon per run of consecutive lines at the same nesting.
+  ///
+  /// Walked a line fragment at a time rather than per attribute run, because
+  /// the line that opens a quote steps over a marker and the ones continuing it
+  /// do not, so consecutive lines share the attribute but not their indent.
+  /// Lines that do agree are then filled as a single rect: two abutting fills
+  /// at a fractional boundary each antialias their shared edge, and the pair of
+  /// half-covered rows reads as a seam across the bar.
+  private func drawBlockquoteRibbons(
+    in textStorage: NSTextStorage,
+    _ glyphsToShow: NSRange,
+    at origin: CGPoint
+  ) {
+    guard let style = markdownStyle else { return }
+
+    var pending: (depth: Int, indent: CGFloat, rightToLeft: Bool, rect: CGRect)?
+    var didSetFill = false
+    var glyphIndex = glyphsToShow.location
+
+    func flush() {
+      guard let run = pending else { return }
+      pending = nil
+
+      if !didSetFill {
+        (style.blockquote.borderColor ?? .clear).setFill()
+        didSetFill = true
+      }
+
+      // Measured from the edge the line begins at, never from the text: a list
+      // nested inside the quote adds indent and a marker drawn in front of the
+      // ribbon takes some away, and either would split the bar. The line
+      // fragment spans the width the line was laid out in, so its two sides are
+      // the two candidate edges and the line's own direction picks one.
+      //
+      // Everything past that point is then a signed distance, the way Android
+      // writes the same arithmetic in `MarkdownBlockIndentSpan`: `step` carries
+      // the direction, and each bar is normalised into a rect at the end.
+      let step: CGFloat = run.rightToLeft ? -1 : 1
+      let edge = run.rightToLeft ? run.rect.maxX : run.rect.minX
+      let first =
+        origin.x + edge + step * (run.indent + style.blockquote.marginStart)
+      let radius = style.blockquote.borderRadius
+
+      for level in 0..<run.depth {
+        let near = first + step * CGFloat(level) * style.blockquoteShift
+        let far = near + step * style.blockquote.borderWidth
+        let bar = CGRect(
+          x: min(near, far),
+          y: origin.y + run.rect.minY,
+          width: style.blockquote.borderWidth,
+          height: run.rect.height
+        )
+
+        if radius > 0 {
+          UIBezierPath(roundedRect: bar, cornerRadius: radius).fill()
+        } else {
+          UIRectFill(bar)
+        }
+      }
+    }
+
+    while glyphIndex < NSMaxRange(glyphsToShow) {
+      var lineGlyphRange = NSRange()
+      let lineRect = lineFragmentRect(
+        forGlyphAt: glyphIndex,
+        effectiveRange: &lineGlyphRange
+      )
+
+      // An empty effective range would spin here rather than crash, which is
+      // worse; bail instead.
+      guard lineGlyphRange.length > 0 else { break }
+
+      let line = characterRange(
+        forGlyphRange: lineGlyphRange,
+        actualGlyphRange: nil
+      )
+
+      if line.location < textStorage.length,
+        let depth = textStorage.attribute(
+          .marcusBlockquoteDepth,
+          at: line.location,
+          effectiveRange: nil
+        ) as? NSNumber,
+        depth.intValue > 0
+      {
+        let indent = CGFloat(
+          (textStorage.attribute(
+            .marcusBlockquoteIndent,
+            at: line.location,
+            effectiveRange: nil
+          ) as? NSNumber)?.doubleValue ?? 0
+        )
+
+        let rightToLeft =
+          textStorage.attribute(
+            .marcusRightToLeft,
+            at: line.location,
+            effectiveRange: nil
+          ) != nil
+
+        // A line that turns round starts a new run even at the same depth and
+        // indent: its bars hang from the other side, so there is no single rect
+        // the two could share.
+        if let run = pending, run.depth == depth.intValue, run.indent == indent,
+          run.rightToLeft == rightToLeft
+        {
+          pending?.rect = run.rect.union(lineRect)
+        } else {
+          flush()
+          pending = (depth.intValue, indent, rightToLeft, lineRect)
+        }
+      } else {
+        flush()
+      }
+
+      glyphIndex = NSMaxRange(lineGlyphRange)
+    }
+
+    flush()
+  }
+
+  // MARK: - Mention pills
+
+  private func drawMentions(
+    in textStorage: NSTextStorage,
+    _ characterRange: NSRange,
+    at origin: CGPoint
+  ) {
+    guard let textContainer = textContainers.first else { return }
+
+    textStorage.enumerateAttribute(
+      .marcusTextBackground,
+      in: characterRange,
+      options: []
+    ) { value, mentionRange, _ in
+      guard let background = value as? MarkdownTextBackground else { return }
+
+      drawMention(
+        background,
+        in: textStorage,
+        mentionRange,
+        textContainer: textContainer,
+        at: origin
+      )
+    }
+  }
+
+  /// Fills one mention, a line fragment at a time.
+  ///
+  /// Soft wrapping can split a mention, so each piece is filled on its own and
+  /// only the sides that actually terminate the mention are rounded -- the
+  /// break itself stays square, so the two halves read as one run.
+  private func drawMention(
+    _ background: MarkdownTextBackground,
+    in textStorage: NSTextStorage,
+    _ mentionRange: NSRange,
+    textContainer: NSTextContainer,
+    at origin: CGPoint
+  ) {
+    let mentionGlyphRange = glyphRange(
+      forCharacterRange: mentionRange,
+      actualCharacterRange: nil
+    )
+    let radius = background.borderRadius
+    background.color.setFill()
+
+    var glyphIndex = mentionGlyphRange.location
+
+    while glyphIndex < NSMaxRange(mentionGlyphRange) {
+      var lineGlyphRange = NSRange()
+      let lineRect = lineFragmentRect(
+        forGlyphAt: glyphIndex,
+        effectiveRange: &lineGlyphRange
+      )
+
+      guard lineGlyphRange.length > 0 else { return }
+
+      let segment = NSIntersectionRange(lineGlyphRange, mentionGlyphRange)
+
+      guard segment.length > 0 else {
+        glyphIndex = NSMaxRange(lineGlyphRange)
+        continue
+      }
+
+      let box = boundingRect(forGlyphRange: segment, in: textContainer)
+      let segmentCharacters = characterRange(
+        forGlyphRange: segment,
+        actualGlyphRange: nil
+      )
+
+      // The pill is a font-height box around the baseline, not the line
+      // fragment: an explicit `lineHeight` makes the fragment taller than the
+      // text, and a pill drawn to that height would swallow the gap between
+      // two lines.
+      if box.width > 0,
+        segmentCharacters.location < textStorage.length,
+        let font = textStorage.attribute(
+          .font,
+          at: segmentCharacters.location,
+          effectiveRange: nil
+        ) as? UIFont
+      {
+        // Where the run's own ends fall on this line, which is what the kerning
+        // reserved space against and what the corners are rounded on.
+        let opens = segment.location == mentionGlyphRange.location
+        let closes = NSMaxRange(segment) == NSMaxRange(mentionGlyphRange)
+        let baseline = lineRect.minY + location(forGlyphAt: segment.location).y
+        let left = box.minX - (opens ? background.paddingHorizontal : 0)
+        let right = box.maxX - (closes ? background.marginHorizontal : 0)
+        let rect = CGRect(
+          x: origin.x + left,
+          y: origin.y + baseline - font.ascender - background.paddingVertical,
+          width: right - left,
+          height: font.lineHeight + 2 * background.paddingVertical
+        )
+
+        var corners: UIRectCorner = []
+        if opens {
+          corners.insert([.topLeft, .bottomLeft])
+        }
+        if closes {
+          corners.insert([.topRight, .bottomRight])
+        }
+
+        let path =
+          corners.isEmpty || radius <= 0
+          ? UIBezierPath(rect: rect)
+          : UIBezierPath(
+            roundedRect: rect,
+            byRoundingCorners: corners,
+            cornerRadii: CGSize(width: radius, height: radius)
+          )
+        if rect.width > 0 {
+          path.fill()
+          stroke(path, color: background.borderColor, width: background.borderWidth)
+        }
+      }
+
+      glyphIndex = NSMaxRange(lineGlyphRange)
+    }
+  }
+  // MARK: - List bullets
+
+  /// One circle per unordered list item, in the advance its marker character
+  /// was left holding.
+  ///
+  /// `MarkdownFormatter` kerned that character to exactly the circle's width and
+  /// left its glyph undrawn, so the shape is the marker: it starts where the
+  /// glyph run starts and needs no measuring of its own. Only the height is a
+  /// question, and the answer is the line's -- a bullet marks the line rather
+  /// than sitting on its baseline, so it is centred on the line's own box the
+  /// way it is on every other platform.
+  private func drawListBullets(
+    in textStorage: NSTextStorage,
+    _ characterRange: NSRange,
+    at origin: CGPoint
+  ) {
+    guard let textContainer = textContainers.first else { return }
+
+    textStorage.enumerateAttribute(
+      .marcusListBullet,
+      in: characterRange,
+      options: []
+    ) { value, markerRange, _ in
+      guard let bullet = value as? MarkdownListBullet, bullet.diameter > 0 else {
+        return
+      }
+
+      let markerGlyphRange = glyphRange(
+        forCharacterRange: markerRange,
+        actualCharacterRange: nil
+      )
+
+      guard markerGlyphRange.length > 0 else { return }
+
+      let box = boundingRect(forGlyphRange: markerGlyphRange, in: textContainer)
+      let line = lineFragmentUsedRect(
+        forGlyphAt: markerGlyphRange.location,
+        effectiveRange: nil
+      )
+
+      let rect = CGRect(
+        x: origin.x + box.minX,
+        y: origin.y + line.midY - bullet.diameter / 2,
+        width: bullet.diameter,
+        height: bullet.diameter
+      )
+
+      bullet.color.setFill()
+      UIBezierPath(ovalIn: rect).fill()
+    }
+  }
+}
+
+extension RCTMarcusStyle {
+  /// Width one level of blockquote nesting takes up: its own margin, the ribbon
+  /// itself, and the padding between the ribbon and the text.
+  var blockquoteShift: CGFloat {
+    blockquote.marginStart + blockquote.borderWidth + blockquote.paddingStart
+  }
+}

package/apple/MarkdownSwiftInterop.h

@@ -14,7 +14,6 @@
 
 #import <RNMarcus/MarcusRange.h>
 #import <RNMarcus/RCTMarcusStyle.h>
-#import <RNMarcus/RCTMarcusUtils.h>
 
 #if __has_include(<RNMarcus/RNMarcus-Swift.h>)
 #import <RNMarcus/RNMarcus-Swift.h>

package/apple/MarkdownTextBackground.swift

@@ -1,12 +1,27 @@
 import UIKit
 
-/// The rounded background drawn behind a mention.
+/// The rounded box drawn behind a run of text: a mention's pill, or an inline
+/// run of code.
 ///
 /// Stored as an attributed-string attribute value under
 /// `.marcusTextBackground`, so it stays an object rather than a struct.
+///
+/// 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 kerning `MarkdownFormatter` puts on the characters the run starts
+/// and ends with, so all that is left when drawing is to place the edges inside
+/// the space they reserved. Vertically only the padding is used, and the box
+/// grows out of the font's own box into the line's spacing: a line cannot be
+/// pushed apart for one run on it, so there is nothing a vertical margin could
+/// hold open.
 final class MarkdownTextBackground: NSObject {
   var color: UIColor = .clear
+  var borderColor: UIColor?
+  var borderWidth: CGFloat = 0
   var borderRadius: CGFloat = 0
+  var paddingHorizontal: CGFloat = 0
+  var paddingVertical: CGFloat = 0
+  var marginHorizontal: CGFloat = 0
 }
 
 /// A `MarkdownTextBackground` paired with the range it applies to. Only ever a
@@ -15,3 +30,46 @@ struct MarkdownTextBackgroundWithRange {
   let textBackground: MarkdownTextBackground
   let range: NSRange
 }
+
+/// The box drawn behind a fenced or indented code block.
+///
+/// Stored under `.marcusCodeBlock` over the block's own text, and read by both
+/// drawing paths -- `MarkdownTextLayoutFragment` in an input,
+/// `MarkdownParagraphLayoutManager` in a paragraph -- so that the two draw the
+/// same box from the same numbers.
+///
+/// `leadingInset` is where the box's near edge sits, measured from the edge the
+/// block's lines begin at: the indent they already carried, plus the horizontal
+/// margin. It is worked out while formatting, where the indents are, rather
+/// than rediscovered from a paragraph style at every frame.
+///
+/// Which edge that is comes from `rightToLeft`, taken from the block's first
+/// line. One answer for the whole box rather than one per line, because the box
+/// is one rect over all of them -- the same reason there is a single inset for
+/// lines that could each have been indented differently.
+final class MarkdownCodeBlock: NSObject {
+  var color: UIColor = .clear
+  var borderColor: UIColor?
+  var borderWidth: CGFloat = 0
+  var borderRadius: CGFloat = 0
+  var marginHorizontal: CGFloat = 0
+  var marginVertical: CGFloat = 0
+  var leadingInset: CGFloat = 0
+  var rightToLeft = false
+}
+
+/// The bullet drawn in place of an unordered item's marker.
+///
+/// Stored under `.marcusListBullet` over the marker character itself, whose own
+/// glyph is left undrawn: the character stays in the string -- it is what a
+/// reader copies and what VoiceOver announces -- and the circle is drawn in the
+/// advance it would have taken.
+///
+/// `diameter` comes from the base font size rather than from a length of its
+/// own, so a list marks itself in proportion to the prose it marks. The marker's
+/// advance is exactly this wide, which is what lets the circle be drawn from the
+/// left edge of the glyph run and nothing else.
+final class MarkdownListBullet: NSObject {
+  var color: UIColor = .clear
+  var diameter: CGFloat = 0
+}

package/apple/MarkdownTextFieldObserver.swift

@@ -8,12 +8,12 @@ import UIKit
 
   // Strong on purpose -- see MarkdownTextStorageDelegate.
   private let textField: RCTUITextField
-  private let markdownUtils: RCTMarcusUtils
+  private let markdownUtils: MarkdownUtils
 
   /// Guards against the KVO observer re-entering while we assign `attributedText`.
   private var active = true
 
-  @objc public init(textField: RCTUITextField, markdownUtils: RCTMarcusUtils)
+  @objc public init(textField: RCTUITextField, markdownUtils: MarkdownUtils)
   {
     self.textField = textField
     self.markdownUtils = markdownUtils