react-native-marcus 0.1.1 → 0.2.0

package/apple/MarkdownTextLayoutFragment.swift

@@ -1,8 +1,8 @@
 import UIKit
 
 /// Draws the parts of markdown rendering that plain attributed-string attributes
-/// can't express: blockquote ribbons down the left edge, and rounded background
-/// pills behind mentions.
+/// can't express: the box behind a code block, blockquote ribbons down the edge
+/// the text begins at, and rounded background pills behind mentions.
 ///
 /// Only constructed by `MarkdownTextLayoutManagerDelegate`, so it stays internal
 /// to the Swift half of the module.
@@ -10,17 +10,36 @@ final class MarkdownTextLayoutFragment: NSTextLayoutFragment {
 
   var markdownStyle: RCTMarcusStyle?
   var depth: Int = 0
-  /// Distance from the paragraph's left edge to the blockquote's own box:
+  /// Distance from the edge the line begins at to the blockquote's own box:
   /// whatever containers nesting outside it indent by, plus the room left for a
   /// list marker drawn in front of the ribbons.
   var outerIndent: CGFloat = 0
+  /// Which edge that is. Read from the string rather than resolved here: UIKit
+  /// answers the same question while laying the line out and keeps the answer,
+  /// so `MarkdownFormatter` works one out and leaves it under
+  /// `.marcusRightToLeft` for both drawing paths to share.
+  var rightToLeft = false
   var mentions: [MarkdownTextBackgroundWithRange] = []
+  /// The box this line belongs to, if it is part of a code block, and which of
+  /// the block's ends it is: a fragment is one line of the block, so the
+  /// corners are only rounded on the two that terminate it.
+  var codeBlock: MarkdownCodeBlock?
+  var opensCodeBlock = false
+  var closesCodeBlock = false
 
   // MARK: - NSTextLayoutFragment
 
   override var renderingSurfaceBounds: CGRect {
-    guard depth > 0 else { return super.renderingSurfaceBounds }
-    return boundingRect.union(super.renderingSurfaceBounds)
+    var bounds = super.renderingSurfaceBounds
+
+    if depth > 0 {
+      bounds = boundingRect.union(bounds)
+    }
+    if let codeBlockRect {
+      bounds = codeBlockRect.union(bounds)
+    }
+
+    return bounds
   }
 
   override func draw(at point: CGPoint, in context: CGContext) {
@@ -29,34 +48,123 @@ final class MarkdownTextLayoutFragment: NSTextLayoutFragment {
       return
     }
 
+    // Before the ribbons: a quoted block's box would otherwise cover the bar
+    // drawn beside it.
+    drawCodeBlock()
     drawBlockquoteRibbons()
     drawMentions()
 
     super.draw(at: point, in: context)
   }
 
+  // MARK: - Code block box
+
+  /// This line's slice of the box behind the block it is part of.
+  ///
+  /// The fragment's own frame rather than the text in it: the frame spans the
+  /// width the line was laid out in and carries the paragraph spacing that
+  /// holds the box's padding open, which is exactly what the box covers. The
+  /// paragraph is drawn the same way, one rect over all its lines, in
+  /// `MarkdownParagraphLayoutManager`.
+  private var codeBlockRect: CGRect? {
+    guard let block = codeBlock else { return nil }
+
+    let frame = layoutFragmentFrame
+    // The frame is in the container's coordinates and everything drawn here is
+    // in the fragment's own, so the container's edges arrive shifted by where
+    // the fragment sits in it.
+    let width = textLayoutManager?.textContainer?.size.width ?? frame.width
+    // 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 left = near - frame.origin.x
+    let right = width - frame.origin.x - far
+    let top = opensCodeBlock ? block.marginVertical : 0
+    let bottom = frame.height - (closesCodeBlock ? block.marginVertical : 0)
+
+    guard right > left, bottom > top else { return nil }
+
+    return CGRect(x: left, y: top, width: right - left, height: bottom - top)
+  }
+
+  private func drawCodeBlock() {
+    guard let block = codeBlock, let rect = codeBlockRect else { return }
+
+    var corners: UIRectCorner = []
+    if opensCodeBlock {
+      corners.insert([.topLeft, .topRight])
+    }
+    if closesCodeBlock {
+      corners.insert([.bottomLeft, .bottomRight])
+    }
+
+    let radius = block.borderRadius
+    let path =
+      corners.isEmpty || radius <= 0
+      ? UIBezierPath(rect: rect)
+      : UIBezierPath(
+        roundedRect: rect,
+        byRoundingCorners: corners,
+        cornerRadii: CGSize(width: radius, height: radius)
+      )
+
+    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 `MarkdownParagraphLayoutManager` draws for the same style.
+  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: - Custom elements
 
   private func drawBlockquoteRibbons() {
     guard depth > 0, let style = markdownStyle else { return }
 
-    let borderWidth = style.blockquoteBorderWidth
-    let shift =
-      style.blockquoteMarginLeft + borderWidth + style.blockquotePaddingLeft
+    let borderWidth = style.blockquote.borderWidth
+    let shift = style.blockquoteShift
+    let radius = style.blockquote.borderRadius
 
-    style.blockquoteBorderColor.setFill()
+    (style.blockquote.borderColor ?? .clear).setFill()
 
+    // `boundingRect` is the whole strip the bars fill, so the innermost one --
+    // the level nearest the text -- is at whichever of its sides the line
+    // begins at, and the rest step away from there.
     let bounds = boundingRect
     for level in 0..<depth {
-      let x = bounds.origin.x + CGFloat(level) * shift
-      UIRectFill(
-        CGRect(
-          x: x,
-          y: bounds.origin.y,
-          width: borderWidth,
-          height: bounds.size.height
-        )
+      let bar = CGRect(
+        x: rightToLeft
+          ? bounds.maxX - CGFloat(level) * shift - borderWidth
+          : bounds.minX + CGFloat(level) * shift,
+        y: bounds.origin.y,
+        width: borderWidth,
+        height: bounds.size.height
       )
+
+      if radius > 0 {
+        UIBezierPath(roundedRect: bar, cornerRadius: radius).fill()
+      } else {
+        UIRectFill(bar)
+      }
     }
   }
 
@@ -124,22 +232,31 @@ final class MarkdownTextLayoutFragment: NSTextLayoutFragment {
           ) as? UIFont
         else { continue }
 
+        // 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 = intersection.location == mention.range.location
+        let closes = NSMaxRange(intersection) == NSMaxRange(mention.range)
+        let background = mention.textBackground
+        let left = startLocation.x - (opens ? background.paddingHorizontal : 0)
+        let right = endLocation.x - (closes ? background.marginHorizontal : 0)
+
         let backgroundRect = CGRect(
-          x: lineBounds.origin.x + startLocation.x,
-          y: lineBounds.origin.y + startLocation.y - font.ascender,
-          width: endLocation.x - startLocation.x,
-          height: font.lineHeight
+          x: lineBounds.origin.x + left,
+          y: lineBounds.origin.y + startLocation.y - font.ascender
+            - background.paddingVertical,
+          width: right - left,
+          height: font.lineHeight + 2 * background.paddingVertical
         )
 
         var corners: UIRectCorner = []
-        if intersection.location == mention.range.location {
+        if opens {
           corners.insert([.topLeft, .bottomLeft])
         }
-        if NSMaxRange(intersection) == NSMaxRange(mention.range) {
+        if closes {
           corners.insert([.topRight, .bottomRight])
         }
 
-        let radius = mention.textBackground.borderRadius
+        let radius = background.borderRadius
         let path =
           corners.isEmpty
           ? UIBezierPath(rect: backgroundRect)
@@ -149,15 +266,18 @@ final class MarkdownTextLayoutFragment: NSTextLayoutFragment {
             cornerRadii: CGSize(width: radius, height: radius)
           )
 
-        mention.textBackground.color.setFill()
+        background.color.setFill()
         path.fill()
+
+        stroke(path, color: background.borderColor, width: background.borderWidth)
       }
     }
   }
 
   // MARK: - Helpers
 
-  /// The strip to the left of the text that the blockquote ribbons occupy.
+  /// The strip beside the text that the blockquote ribbons occupy, on whichever
+  /// side the line begins at.
   private var boundingRect: CGRect {
     var bounds = CGRect.null
     for lineFragment in textLineFragments
@@ -172,21 +292,27 @@ final class MarkdownTextLayoutFragment: NSTextLayoutFragment {
     // infinite rendering surface rather than an empty one.
     guard !bounds.isNull, let style = markdownStyle else { return bounds }
 
-    let borderWidth = style.blockquoteBorderWidth
-    let shift =
-      style.blockquoteMarginLeft + borderWidth + style.blockquotePaddingLeft
+    let borderWidth = style.blockquote.borderWidth
+    let shift = style.blockquoteShift
 
-    // The ribbons sit at a fixed offset from the paragraph's own left edge,
-    // which is the text origin less however far this line is indented. Walking
+    // The ribbons sit at a fixed offset from the edge the paragraph begins at,
+    // which is the end of the text that the indent holds off that edge. Walking
     // back from the text by the quote's own indent instead would move the bar
     // whenever the line's indent changes -- a list nested inside the quote adds
     // some, a marker drawn in front of the ribbon takes some away -- and split
     // the bar between the lines of one quote.
+    //
+    // A right-to-left line is indented from the right, so it is the far side of
+    // the text that the indent is added back to, and the strip then runs
+    // leftwards from there rather than rightwards.
     let indent =
       firstLineParagraphStyle?.firstLineHeadIndent ?? shift * CGFloat(depth)
+    let width = borderWidth + shift * CGFloat(depth - 1)
+    let offset = indent - (outerIndent + style.blockquote.marginStart)
 
-    bounds.origin.x -= indent - (outerIndent + style.blockquoteMarginLeft)
-    bounds.size.width = borderWidth + shift * CGFloat(depth - 1)
+    bounds.origin.x =
+      rightToLeft ? bounds.maxX + offset - width : bounds.origin.x - offset
+    bounds.size.width = width
     return bounds
   }
 

package/apple/MarkdownTextLayoutManagerDelegate.swift

@@ -8,9 +8,9 @@ public final class MarkdownTextLayoutManagerDelegate: NSObject,
 {
 
   private let textStorage: NSTextStorage
-  private let markdownUtils: RCTMarcusUtils
+  private let markdownUtils: MarkdownUtils
 
-  @objc public init(textStorage: NSTextStorage, markdownUtils: RCTMarcusUtils)
+  @objc public init(textStorage: NSTextStorage, markdownUtils: MarkdownUtils)
   {
     self.textStorage = textStorage
     self.markdownUtils = markdownUtils
@@ -69,7 +69,15 @@ public final class MarkdownTextLayoutManagerDelegate: NSObject,
       )
     }
 
-    guard depth != nil || !mentions.isEmpty else { return plain() }
+    let paragraphRange = NSRange(
+      location: index,
+      length: attributedString.length
+    )
+    let codeBlock = codeBlock(in: paragraphRange)
+
+    guard depth != nil || !mentions.isEmpty || codeBlock != nil else {
+      return plain()
+    }
 
     let fragment = MarkdownTextLayoutFragment(
       textElement: textElement,
@@ -78,7 +86,63 @@ public final class MarkdownTextLayoutManagerDelegate: NSObject,
     fragment.markdownStyle = markdownUtils.markdownStyle
     fragment.depth = depth?.intValue ?? 0
     fragment.outerIndent = CGFloat(outerIndent?.doubleValue ?? 0)
+    fragment.rightToLeft =
+      textStorage.attribute(
+        .marcusRightToLeft,
+        at: index,
+        effectiveRange: nil
+      ) != nil
     fragment.mentions = mentions
+    fragment.codeBlock = codeBlock?.block
+    fragment.opensCodeBlock = codeBlock.map {
+      $0.range.location >= paragraphRange.location
+    } ?? false
+    fragment.closesCodeBlock = codeBlock.map {
+      NSMaxRange($0.range) <= NSMaxRange(paragraphRange)
+    } ?? false
     return fragment
   }
+
+  /// The code block this paragraph is a line of, and how far that block reaches.
+  ///
+  /// Searched across the paragraph rather than read at its first character: a
+  /// block quoted with `>` begins after the marker that opens the line, so the
+  /// paragraph starts outside the block it belongs to.
+  private func codeBlock(
+    in paragraphRange: NSRange
+  ) -> (block: MarkdownCodeBlock, range: NSRange)? {
+    let clamped = NSIntersectionRange(
+      paragraphRange,
+      NSRange(location: 0, length: textStorage.length)
+    )
+    guard clamped.length > 0 else { return nil }
+
+    var found: MarkdownCodeBlock?
+    var location = NSNotFound
+
+    textStorage.enumerateAttribute(
+      .marcusCodeBlock,
+      in: clamped,
+      options: []
+    ) { value, range, stop in
+      guard let block = value as? MarkdownCodeBlock else { return }
+      found = block
+      location = range.location
+      stop.pointee = true
+    }
+
+    guard let block = found else { return nil }
+
+    // The run above is only this paragraph's share of the block. Which end of
+    // the block the paragraph is at needs the whole of it.
+    var blockRange = NSRange()
+    _ = textStorage.attribute(
+      .marcusCodeBlock,
+      at: location,
+      longestEffectiveRange: &blockRange,
+      in: NSRange(location: 0, length: textStorage.length)
+    )
+
+    return (block, blockRange)
+  }
 }

package/apple/MarkdownTextStorageDelegate.swift

@@ -10,9 +10,9 @@ public final class MarkdownTextStorageDelegate: NSObject, NSTextStorageDelegate
   // let the text view deallocate while this object is still installed as its
   // storage delegate and while KVO observers are registered on it.
   private let textView: RCTUITextView
-  private let markdownUtils: RCTMarcusUtils
+  private let markdownUtils: MarkdownUtils
 
-  @objc public init(textView: RCTUITextView, markdownUtils: RCTMarcusUtils) {
+  @objc public init(textView: RCTUITextView, markdownUtils: MarkdownUtils) {
     self.textView = textView
     self.markdownUtils = markdownUtils
     super.init()

package/apple/MarkdownTextViewObserver.swift

@@ -7,9 +7,9 @@ import UIKit
 
   // Strong on purpose -- see MarkdownTextStorageDelegate.
   private let textView: RCTUITextView
-  private let markdownUtils: RCTMarcusUtils
+  private let markdownUtils: MarkdownUtils
 
-  @objc public init(textView: RCTUITextView, markdownUtils: RCTMarcusUtils) {
+  @objc public init(textView: RCTUITextView, markdownUtils: MarkdownUtils) {
     self.textView = textView
     self.markdownUtils = markdownUtils
     super.init()

package/apple/MarkdownUtils.swift

@@ -0,0 +1,38 @@
+import Foundation
+
+/// Parses and formats in one step for the view layer.
+///
+/// Parsing is stateful -- the shared parser owns a memo cache -- so this holds
+/// the style and parser id that a text input's props supply, and hands both to
+/// the stateless formatter on each pass. One instance per text input, only ever
+/// touched on the main thread.
+///
+/// The `Text` side needs none of this: its ranges are parsed in JavaScript and
+/// arrive as props, so `MarcusTextLayoutManager` calls the formatter directly.
+@objc public final class MarkdownUtils: NSObject {
+
+  /// Both are assigned after init -- props arrive after the view hierarchy is
+  /// built -- and formatting bails out while either is still nil.
+  @objc public var markdownStyle: RCTMarcusStyle?
+  @objc public var parserId: NSNumber?
+
+  @objc public func applyMarkdownFormatting(
+    _ attributedString: NSMutableAttributedString,
+    withDefaultTextAttributes defaultTextAttributes: [NSAttributedString.Key:
+      Any]
+  ) {
+    guard let markdownStyle, let parserId else { return }
+
+    let ranges = MarkdownParser.sharedParser.parse(
+      attributedString.string,
+      withParserId: parserId
+    )
+
+    MarkdownFormatter.format(
+      attributedString,
+      defaultTextAttributes: defaultTextAttributes,
+      ranges: ranges,
+      style: markdownStyle
+    )
+  }
+}

package/apple/MarkdownWritingDirection.swift

@@ -0,0 +1,132 @@
+import Foundation
+
+/// Which way a line reads, worked out the way the Unicode Bidirectional
+/// Algorithm's rules P2 and P3 work it out: the first character with a strong
+/// direction decides, characters inside an isolate are not that character, and
+/// a line with no strong character at all reads left to right.
+///
+/// Worked out rather than read off the paragraph style, because there is
+/// nothing there to read. `NSWritingDirectionNatural` is what a paragraph
+/// carries by default and what React Native leaves it as -- `RCTTextAttributes`
+/// only writes the direction through when it is *not* natural -- and UIKit
+/// resolves it while laying the line out without writing the answer back. The
+/// layout that follows is already right, since a head indent opens its gutter
+/// on whichever edge the line begins at. It is only the shapes drawn beside the
+/// text by hand -- a quote's ribbons, a code block's box -- that have no way to
+/// ask, and this is what they ask instead.
+///
+/// A deliberate approximation of the real bidi classes, and one worth naming:
+/// classes R and AL are taken to be the letters of the right-to-left scripts,
+/// class L to be every other letter, and neither to be anything else. What that
+/// gets wrong is a line opening with a right-to-left *number* and continuing in
+/// Latin -- `١٢٣ abc`, which the algorithm calls left to right and so does this,
+/// but by skipping the digits as unclassified rather than by classifying them.
+/// The cases it gets right are every line that begins in a script, which is
+/// every line anyone writes. Being wrong here costs a bar on the far side of a
+/// quote; it cannot affect where the text itself goes, which stays UIKit's to
+/// decide, and that is the reason the guess is allowed to be a guess.
+enum MarkdownWritingDirection {
+
+  /// Whether the text in `range` reads right to left.
+  static func isRightToLeft(_ text: NSString, in range: NSRange) -> Bool {
+    var index = max(range.location, 0)
+    let end = min(NSMaxRange(range), text.length)
+    /// Unmatched isolate initiators still open. P2 skips everything between one
+    /// and its matching PDI, so an embedded run cannot decide the line holding
+    /// it: `\u{2066}LTR\u{2069} عربي` reads right to left despite opening with
+    /// three Latin letters.
+    var isolated = 0
+
+    while index < end {
+      let unit = text.character(at: index)
+      index += 1
+
+      var value = UInt32(unit)
+
+      // A surrogate pair is one character, and the planes past the first are
+      // where the historic right-to-left scripts live.
+      if UTF16.isLeadSurrogate(unit), index < end {
+        let trail = text.character(at: index)
+        if UTF16.isTrailSurrogate(trail) {
+          value =
+            (value - 0xD800) * 0x400 + (UInt32(trail) - 0xDC00) + 0x10000
+          index += 1
+        }
+      }
+
+      guard let scalar = UnicodeScalar(value) else { continue }
+
+      if isolateInitiators.contains(scalar) {
+        isolated += 1
+        continue
+      }
+      if scalar == popDirectionalIsolate {
+        isolated = max(isolated - 1, 0)
+        continue
+      }
+      if isolated > 0 {
+        continue
+      }
+
+      if rightToLeft.contains(scalar) {
+        return true
+      }
+      if strong.contains(scalar) {
+        return false
+      }
+    }
+
+    return false
+  }
+
+  // MARK: - Classes
+
+  /// Scalars of bidi class R or AL: the letters of the right-to-left scripts,
+  /// and the two zero-width marks that stand in for one.
+  ///
+  /// The blocks are taken whole and then intersected with the letters, which is
+  /// what keeps the Arabic-Indic digits and the Hebrew points out of it -- they
+  /// sit in the same blocks as the letters but decide nothing.
+  private static let rightToLeft: CharacterSet = {
+    var set = CharacterSet()
+
+    for block in [
+      0x0590...0x08FF,  // Hebrew through Arabic Extended-A
+      0xFB1D...0xFDFF,  // Hebrew and Arabic presentation forms A
+      0xFE70...0xFEFF,  // Arabic presentation forms B
+      0x10800...0x10FFF,  // Cypriot through Hanifi Rohingya
+      0x1E800...0x1EFFF,  // Mende Kikakui through Arabic mathematical
+    ] {
+      guard
+        let first = UnicodeScalar(UInt32(block.lowerBound)),
+        let last = UnicodeScalar(UInt32(block.upperBound))
+      else { continue }
+      set.insert(charactersIn: first...last)
+    }
+
+    return set.intersection(letters).union(
+      // ARABIC LETTER MARK, RIGHT-TO-LEFT MARK.
+      CharacterSet(charactersIn: "\u{061C}\u{200F}")
+    )
+  }()
+
+  /// Everything that decides a direction at all: the letters, plus the marks.
+  /// Whether a scalar in here decides on right or left is then `rightToLeft`.
+  private static let strong: CharacterSet = letters.union(
+    // ARABIC LETTER MARK, LEFT-TO-RIGHT MARK, RIGHT-TO-LEFT MARK.
+    CharacterSet(charactersIn: "\u{061C}\u{200E}\u{200F}")
+  )
+
+  /// Letters as the algorithm means them, which is the L\* categories alone.
+  /// Foundation's own set folds in the M\* ones, and a combining mark carries no
+  /// direction: a line opening with one is decided by whatever it is on.
+  private static let letters = CharacterSet.letters.subtracting(.nonBaseCharacters)
+
+  /// LEFT-TO-RIGHT, RIGHT-TO-LEFT and FIRST STRONG ISOLATE.
+  private static let isolateInitiators = CharacterSet(
+    charactersIn: "\u{2066}\u{2067}\u{2068}"
+  )
+
+  /// POP DIRECTIONAL ISOLATE.
+  private static let popDirectionalIsolate: UnicodeScalar = "\u{2069}"
+}