@apollohg/react-native-prose-editor 0.1.1 → 0.3.0

package/ios/EditorLayoutManager.swift

@@ -5,6 +5,54 @@ import CoreText
 /// editable text storage. This keeps UIKit paragraph-start behaviors, such as
 /// sentence auto-capitalization, working naturally inside list items.
 final class EditorLayoutManager: NSLayoutManager {
+    private(set) var blockquoteStripeDrawPassesForTesting: [[CGRect]] = []
+
+    func blockquoteStripeRectsForTesting(
+        in textStorage: NSTextStorage,
+        visibleGlyphRange: NSRange? = nil,
+        origin: CGPoint = .zero
+    ) -> [CGRect] {
+        let glyphsToShow = visibleGlyphRange ?? NSRange(location: 0, length: numberOfGlyphs)
+        guard glyphsToShow.length > 0 else { return [] }
+
+        let characterRange = characterRange(forGlyphRange: glyphsToShow, actualGlyphRange: nil)
+        let nsString = textStorage.string as NSString
+        var drawnBlockquoteStarts = Set<Int>()
+        var rects: [CGRect] = []
+
+        textStorage.enumerateAttribute(
+            RenderBridgeAttributes.blockquoteBorderColor,
+            in: characterRange,
+            options: []
+        ) { value, range, _ in
+            guard range.length > 0, let color = value as? UIColor else { return }
+
+            let paragraphRange = nsString.paragraphRange(for: NSRange(location: range.location, length: 0))
+            let paragraphStart = paragraphRange.location
+            let groupRange = Self.blockquoteGroupCharacterRange(
+                containing: paragraphStart,
+                in: textStorage,
+                nsString: nsString
+            )
+            let groupStart = groupRange.location
+            guard drawnBlockquoteStarts.insert(groupStart).inserted else { return }
+            guard let rect = blockquoteStripeRect(
+                characterRange: groupRange,
+                color: color,
+                textStorage: textStorage,
+                origin: origin
+            ) else {
+                return
+            }
+            rects.append(rect)
+        }
+
+        return rects
+    }
+
+    func resetBlockquoteStripeDrawPassesForTesting() {
+        blockquoteStripeDrawPassesForTesting.removeAll()
+    }
 
     override func drawGlyphs(forGlyphRange glyphsToShow: NSRange, at origin: CGPoint) {
         super.drawGlyphs(forGlyphRange: glyphsToShow, at: origin)
@@ -14,6 +62,8 @@ final class EditorLayoutManager: NSLayoutManager {
         let characterRange = characterRange(forGlyphRange: glyphsToShow, actualGlyphRange: nil)
         let nsString = textStorage.string as NSString
         var drawnParagraphStarts = Set<Int>()
+        var drawnBlockquoteStarts = Set<Int>()
+        var drawnStripeRects: [CGRect] = []
 
         textStorage.enumerateAttribute(
             RenderBridgeAttributes.listMarkerContext,
@@ -36,6 +86,42 @@ final class EditorLayoutManager: NSLayoutManager {
                 textStorage: textStorage
             )
         }
+
+        textStorage.enumerateAttribute(
+            RenderBridgeAttributes.blockquoteBorderColor,
+            in: characterRange,
+            options: []
+        ) { value, range, _ in
+            guard range.length > 0, let color = value as? UIColor else { return }
+
+            let paragraphRange = nsString.paragraphRange(for: NSRange(location: range.location, length: 0))
+            let paragraphStart = paragraphRange.location
+            let groupRange = Self.blockquoteGroupCharacterRange(
+                containing: paragraphStart,
+                in: textStorage,
+                nsString: nsString
+            )
+            let groupStart = groupRange.location
+            guard drawnBlockquoteStarts.insert(groupStart).inserted else { return }
+
+            guard let stripeRect = self.blockquoteStripeRect(
+                characterRange: groupRange,
+                color: color,
+                textStorage: textStorage,
+                origin: origin
+            ) else {
+                return
+            }
+            self.drawBlockquoteBorder(
+                stripeRect: stripeRect,
+                color: color
+            )
+            drawnStripeRects.append(stripeRect)
+        }
+
+        if !drawnStripeRects.isEmpty {
+            blockquoteStripeDrawPassesForTesting.append(drawnStripeRects)
+        }
     }
 
     private func drawListMarker(
@@ -107,6 +193,156 @@ final class EditorLayoutManager: NSLayoutManager {
         path.fill()
     }
 
+    private func blockquoteStripeRect(
+        characterRange: NSRange,
+        color: UIColor,
+        textStorage: NSTextStorage,
+        origin: CGPoint
+    ) -> CGRect? {
+        guard characterRange.location < textStorage.length, !textContainers.isEmpty else {
+            return nil
+        }
+
+        ensureLayout(forCharacterRange: characterRange)
+        let glyphRange = self.glyphRange(forCharacterRange: characterRange, actualCharacterRange: nil)
+        guard glyphRange.length > 0 else { return nil }
+
+        var topEdge: CGFloat?
+        var bottomEdge: CGFloat?
+        var textLeadingEdge: CGFloat?
+        enumerateLineFragments(forGlyphRange: glyphRange) { lineFragmentRect, usedRect, _, _, _ in
+            let verticalReferenceRect = usedRect.height > 0 ? usedRect : lineFragmentRect
+            if let currentTop = topEdge {
+                topEdge = min(currentTop, lineFragmentRect.minY)
+            } else {
+                topEdge = lineFragmentRect.minY
+            }
+            if let currentBottom = bottomEdge {
+                bottomEdge = max(currentBottom, verticalReferenceRect.maxY)
+            } else {
+                bottomEdge = verticalReferenceRect.maxY
+            }
+            let referenceMinX = usedRect.width > 0 ? usedRect.minX : lineFragmentRect.minX
+            if let current = textLeadingEdge {
+                textLeadingEdge = min(current, referenceMinX)
+            } else {
+                textLeadingEdge = referenceMinX
+            }
+        }
+        guard let topEdge, let bottomEdge, bottomEdge > topEdge, let textLeadingEdge else { return nil }
+
+        let attrs = textStorage.attributes(at: characterRange.location, effectiveRange: nil)
+        let borderWidth = (attrs[RenderBridgeAttributes.blockquoteBorderWidth] as? NSNumber)
+            .map { CGFloat(truncating: $0) }
+            ?? LayoutConstants.blockquoteBorderWidth
+        let gap = (attrs[RenderBridgeAttributes.blockquoteMarkerGap] as? NSNumber)
+            .map { CGFloat(truncating: $0) }
+            ?? LayoutConstants.blockquoteMarkerGap
+
+        let stripeX = origin.x + textLeadingEdge - gap - borderWidth
+        let stripeRect = CGRect(
+            x: stripeX,
+            y: origin.y + topEdge,
+            width: borderWidth,
+            height: bottomEdge - topEdge
+        )
+        return stripeRect
+    }
+
+    private func drawBlockquoteBorder(
+        stripeRect: CGRect,
+        color: UIColor
+    ) {
+        color.setFill()
+        UIBezierPath(rect: stripeRect).fill()
+    }
+
+    private static func blockquoteGroupCharacterRange(
+        containing paragraphStart: Int,
+        in textStorage: NSTextStorage,
+        nsString: NSString
+    ) -> NSRange {
+        let initialParagraphRange = nsString.paragraphRange(
+            for: NSRange(location: paragraphStart, length: 0)
+        )
+        var groupStart = initialParagraphRange.location
+        var groupEnd = NSMaxRange(initialParagraphRange)
+
+        var probeStart = groupStart
+        while probeStart > 0 {
+            let previousParagraphRange = nsString.paragraphRange(
+                for: NSRange(location: probeStart - 1, length: 0)
+            )
+            let previousStart = previousParagraphRange.location
+            guard paragraphHasBlockquoteBorder(
+                      previousParagraphRange,
+                      in: textStorage
+                  )
+            else {
+                break
+            }
+
+            groupStart = previousStart
+            probeStart = previousStart
+        }
+
+        var nextParagraphLocation = groupEnd
+        while nextParagraphLocation < textStorage.length {
+            let nextParagraphRange = nsString.paragraphRange(
+                for: NSRange(location: nextParagraphLocation, length: 0)
+            )
+            guard paragraphHasBlockquoteBorder(
+                      nextParagraphRange,
+                      in: textStorage
+                  )
+            else {
+                break
+            }
+
+            groupEnd = NSMaxRange(nextParagraphRange)
+            nextParagraphLocation = groupEnd
+        }
+
+        return NSRange(location: groupStart, length: groupEnd - groupStart)
+    }
+
+    private static func paragraphHasBlockquoteBorder(
+        _ paragraphRange: NSRange,
+        in textStorage: NSTextStorage
+    ) -> Bool {
+        guard paragraphRange.length > 0 else { return false }
+        let nsString = textStorage.string as NSString
+        var sawQuotedContent = false
+        var sawAnyQuotedCharacter = false
+
+        for offset in 0..<paragraphRange.length {
+            let index = paragraphRange.location + offset
+            guard index < textStorage.length else { break }
+
+            let hasBorder = textStorage.attribute(
+                RenderBridgeAttributes.blockquoteBorderColor,
+                at: index,
+                effectiveRange: nil
+            ) != nil
+            guard hasBorder else { continue }
+            sawAnyQuotedCharacter = true
+
+            let scalar = nsString.character(at: index)
+            if scalar != 0x000A, scalar != 0x000D {
+                sawQuotedContent = true
+                break
+            }
+        }
+
+        if sawQuotedContent {
+            return true
+        }
+
+        let trimmed = nsString.substring(with: paragraphRange)
+            .trimmingCharacters(in: .newlines)
+        return trimmed.isEmpty && sawAnyQuotedCharacter
+    }
+
     static func markerParagraphStyle(from attrs: [NSAttributedString.Key: Any]) -> NSMutableParagraphStyle {
         let markerStyle = NSMutableParagraphStyle()
         let sourceStyle = attrs[.paragraphStyle] as? NSParagraphStyle

package/ios/EditorTheme.swift

@@ -104,6 +104,24 @@ struct EditorHorizontalRuleTheme {
     }
 }
 
+struct EditorBlockquoteTheme {
+    var text: EditorTextStyle?
+    var indent: CGFloat?
+    var borderColor: UIColor?
+    var borderWidth: CGFloat?
+    var markerGap: CGFloat?
+
+    init(dictionary: [String: Any]) {
+        if let text = dictionary["text"] as? [String: Any] {
+            self.text = EditorTextStyle(dictionary: text)
+        }
+        indent = EditorTheme.cgFloat(dictionary["indent"])
+        borderColor = EditorTheme.color(from: dictionary["borderColor"])
+        borderWidth = EditorTheme.cgFloat(dictionary["borderWidth"])
+        markerGap = EditorTheme.cgFloat(dictionary["markerGap"])
+    }
+}
+
 struct EditorMentionTheme {
     var textColor: UIColor?
     var backgroundColor: UIColor?
@@ -140,7 +158,13 @@ struct EditorMentionTheme {
     }
 }
 
+enum EditorToolbarAppearance: String {
+    case custom
+    case native
+}
+
 struct EditorToolbarTheme {
+    var appearance: EditorToolbarAppearance?
     var backgroundColor: UIColor?
     var borderColor: UIColor?
     var borderWidth: CGFloat?
@@ -155,6 +179,7 @@ struct EditorToolbarTheme {
     var buttonBorderRadius: CGFloat?
 
     init(dictionary: [String: Any]) {
+        appearance = (dictionary["appearance"] as? String).flatMap(EditorToolbarAppearance.init(rawValue:))
         backgroundColor = EditorTheme.color(from: dictionary["backgroundColor"])
         borderColor = EditorTheme.color(from: dictionary["borderColor"])
         borderWidth = EditorTheme.cgFloat(dictionary["borderWidth"])
@@ -168,6 +193,26 @@ struct EditorToolbarTheme {
         buttonActiveBackgroundColor = EditorTheme.color(from: dictionary["buttonActiveBackgroundColor"])
         buttonBorderRadius = EditorTheme.cgFloat(dictionary["buttonBorderRadius"])
     }
+
+    var resolvedKeyboardOffset: CGFloat {
+        keyboardOffset ?? (appearance == .native ? 6 : 0)
+    }
+
+    var resolvedHorizontalInset: CGFloat {
+        horizontalInset ?? (appearance == .native ? 10 : 0)
+    }
+
+    var resolvedBorderRadius: CGFloat {
+        borderRadius ?? (appearance == .native ? 20 : 0)
+    }
+
+    var resolvedBorderWidth: CGFloat {
+        borderWidth ?? (appearance == .native ? 0 : 0.5)
+    }
+
+    var resolvedButtonBorderRadius: CGFloat {
+        buttonBorderRadius ?? (appearance == .native ? 10 : 8)
+    }
 }
 
 struct EditorContentInsets {
@@ -187,6 +232,7 @@ struct EditorContentInsets {
 struct EditorTheme {
     var text: EditorTextStyle?
     var paragraph: EditorTextStyle?
+    var blockquote: EditorBlockquoteTheme?
     var headings: [String: EditorTextStyle] = [:]
     var list: EditorListTheme?
     var horizontalRule: EditorHorizontalRuleTheme?
@@ -213,6 +259,9 @@ struct EditorTheme {
         if let paragraph = dictionary["paragraph"] as? [String: Any] {
             self.paragraph = EditorTextStyle(dictionary: paragraph)
         }
+        if let blockquote = dictionary["blockquote"] as? [String: Any] {
+            self.blockquote = EditorBlockquoteTheme(dictionary: blockquote)
+        }
         if let headings = dictionary["headings"] as? [String: Any] {
             for level in ["h1", "h2", "h3", "h4", "h5", "h6"] {
                 if let style = headings[level] as? [String: Any] {
@@ -239,8 +288,9 @@ struct EditorTheme {
         }
     }
 
-    func effectiveTextStyle(for nodeType: String) -> EditorTextStyle {
+    func effectiveTextStyle(for nodeType: String, inBlockquote: Bool = false) -> EditorTextStyle {
         var style = text ?? EditorTextStyle()
+        style = style.merged(with: inBlockquote ? blockquote?.text : nil)
         if nodeType == "paragraph" {
             style = style.merged(with: paragraph)
             if paragraph?.lineHeight == nil {