@apollohg/react-native-prose-editor 0.5.1 → 0.5.3

package/ios/NativeEditorExpoView.swift

@@ -2062,12 +2062,54 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
         onAddonEvent(["eventJson": json])
     }
 
-    private func emitMentionSelect(trigger: String, suggestion: NativeMentionSuggestion) {
+    private func resolvedMentionAttrs(
+        trigger: String,
+        suggestion: NativeMentionSuggestion
+    ) -> [String: Any] {
+        var attrs = suggestion.attrs
+        if attrs["label"] == nil {
+            attrs["label"] = suggestion.label
+        }
+        if attrs["mentionSuggestionChar"] == nil {
+            attrs["mentionSuggestionChar"] = trigger
+        }
+        return attrs
+    }
+
+    private func emitMentionSelect(
+        trigger: String,
+        suggestion: NativeMentionSuggestion,
+        attrs: [String: Any]
+    ) {
         let payload: [String: Any] = [
             "type": "mentionsSelect",
             "trigger": trigger,
             "suggestionKey": suggestion.key,
-            "attrs": suggestion.attrs,
+            "attrs": attrs,
+        ]
+        guard let data = try? JSONSerialization.data(withJSONObject: payload),
+              let json = String(data: data, encoding: .utf8)
+        else {
+            return
+        }
+        onAddonEvent(["eventJson": json])
+    }
+
+    private func emitMentionSelectRequest(
+        trigger: String,
+        suggestion: NativeMentionSuggestion,
+        attrs: [String: Any],
+        range: MentionQueryState
+    ) {
+        let payload: [String: Any] = [
+            "type": "mentionsSelectRequest",
+            "trigger": trigger,
+            "suggestionKey": suggestion.key,
+            "attrs": attrs,
+            "range": [
+                "anchor": Int(range.anchor),
+                "head": Int(range.head),
+            ],
         ]
         guard let data = try? JSONSerialization.data(withJSONObject: payload),
               let json = String(data: data, encoding: .utf8)
@@ -2175,9 +2217,17 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
             return
         }
 
-        var attrs = suggestion.attrs
-        if attrs["label"] == nil {
-            attrs["label"] = suggestion.label
+        let attrs = resolvedMentionAttrs(trigger: mentions.trigger, suggestion: suggestion)
+        if mentions.resolveSelectionAttrs {
+            emitMentionSelectRequest(
+                trigger: mentions.trigger,
+                suggestion: suggestion,
+                attrs: attrs,
+                range: queryState
+            )
+            lastMentionEventJSON = nil
+            clearMentionQueryStateAndHidePopover()
+            return
         }
         let payload: [String: Any] = [
             "type": "doc",
@@ -2199,7 +2249,7 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
             json: json
         )
         richTextView.textView.applyUpdateJSON(updateJSON)
-        emitMentionSelect(trigger: mentions.trigger, suggestion: suggestion)
+        emitMentionSelect(trigger: mentions.trigger, suggestion: suggestion, attrs: attrs)
         lastMentionEventJSON = nil
         clearMentionQueryStateAndHidePopover()
     }

package/ios/NativeEditorModule.swift

@@ -268,6 +268,13 @@ public class NativeEditorModule: Module {
             }
             return editorSetJson(id: editorId, json: json)
         }
+        Function("renderDocumentHtml") { (configJson: String, html: String) -> String in
+            let editorId = editorCreate(configJson: configJson)
+            defer {
+                editorDestroy(id: editorId)
+            }
+            return editorSetHtml(id: editorId, html: html)
+        }
         Function("editorReplaceHtml") { (id: Int, html: String) -> String in
             editorReplaceHtml(id: UInt64(id), html: html)
         }
@@ -375,7 +382,7 @@ public class NativeEditorModule: Module {
 
         View(NativeProseViewerExpoView.self) {
             ViewName("NativeProseViewer")
-            Events("onContentHeightChange", "onPressMention")
+            Events("onContentHeightChange", "onPressLink", "onPressMention")
 
             Prop("renderJson") { (view: NativeProseViewerExpoView, renderJson: String?) in
                 view.setRenderJson(renderJson)
@@ -383,6 +390,12 @@ public class NativeEditorModule: Module {
             Prop("themeJson") { (view: NativeProseViewerExpoView, themeJson: String?) in
                 view.setThemeJson(themeJson)
             }
+            Prop("enableLinkTaps") { (view: NativeProseViewerExpoView, enableLinkTaps: Bool?) in
+                view.setEnableLinkTaps(enableLinkTaps)
+            }
+            Prop("interceptLinkTaps") { (view: NativeProseViewerExpoView, interceptLinkTaps: Bool?) in
+                view.setInterceptLinkTaps(interceptLinkTaps)
+            }
         }
     }
 }

package/ios/NativeProseViewerExpoView.swift

@@ -3,6 +3,7 @@ import UIKit
 
 final class NativeProseViewerExpoView: ExpoView {
     let onContentHeightChange = EventDispatcher()
+    let onPressLink = EventDispatcher()
     let onPressMention = EventDispatcher()
 
     private let textView = EditorTextView(frame: .zero, textContainer: nil)
@@ -10,11 +11,14 @@ final class NativeProseViewerExpoView: ExpoView {
     private var lastThemeJSON: String?
     private var lastEmittedContentHeight: CGFloat = 0
     private var lastMeasuredWidth: CGFloat = 0
+    private var allowContentHeightShrink = true
+    private var enableLinkTaps = true
+    private var interceptLinkTaps = false
 
-    private lazy var mentionTapRecognizer: UITapGestureRecognizer = {
+    private lazy var interactiveTapRecognizer: UITapGestureRecognizer = {
         let recognizer = UITapGestureRecognizer(
             target: self,
-            action: #selector(handleMentionTap(_:))
+            action: #selector(handleInteractiveTap(_:))
         )
         recognizer.cancelsTouchesInView = false
         return recognizer
@@ -35,19 +39,29 @@ final class NativeProseViewerExpoView: ExpoView {
         textView.onHeightMayChange = { [weak self] measuredHeight in
             self?.emitContentHeightIfNeeded(measuredHeight: measuredHeight, force: true)
         }
-        textView.addGestureRecognizer(mentionTapRecognizer)
+        textView.addGestureRecognizer(interactiveTapRecognizer)
         addSubview(textView)
     }
 
+    func setEnableLinkTaps(_ enabled: Bool?) {
+        enableLinkTaps = enabled ?? true
+    }
+
+    func setInterceptLinkTaps(_ intercept: Bool?) {
+        interceptLinkTaps = intercept ?? false
+    }
+
     func setRenderJson(_ renderJson: String?) {
         guard lastRenderJSON != renderJson else { return }
         lastRenderJSON = renderJson
+        allowContentHeightShrink = true
         applyRenderJSON()
     }
 
     func setThemeJson(_ themeJson: String?) {
         guard lastThemeJSON != themeJson else { return }
         lastThemeJSON = themeJson
+        allowContentHeightShrink = true
         let theme = EditorTheme.from(json: themeJson)
         textView.applyTheme(theme)
         let cornerRadius = theme?.borderRadius ?? 0
@@ -87,31 +101,43 @@ final class NativeProseViewerExpoView: ExpoView {
             ? bounds.width
             : (superview?.bounds.width ?? UIScreen.main.bounds.width)
         let fittedHeight = measuredHeight
-            ?? textView.sizeThatFits(
-                CGSize(width: resolvedWidth, height: CGFloat.greatestFiniteMagnitude)
-            ).height
+            ?? textView.measuredAutoGrowHeightForTesting(width: resolvedWidth)
         let contentHeight = ceil(fittedHeight)
         guard contentHeight > 0 else { return }
+        guard allowContentHeightShrink || contentHeight >= lastEmittedContentHeight else { return }
+        allowContentHeightShrink = false
         guard force || abs(contentHeight - lastEmittedContentHeight) > 0.5 else { return }
         lastEmittedContentHeight = contentHeight
         invalidateIntrinsicContentSize()
         onContentHeightChange(["contentHeight": contentHeight])
     }
 
-    @objc private func handleMentionTap(_ recognizer: UITapGestureRecognizer) {
-        guard recognizer.state == .ended,
-              let mention = mentionHit(at: recognizer.location(in: textView))
-        else {
+    @objc private func handleInteractiveTap(_ recognizer: UITapGestureRecognizer) {
+        guard recognizer.state == .ended else {
+            return
+        }
+
+        let location = recognizer.location(in: textView)
+        if enableLinkTaps, let link = linkHit(at: location) {
+            if interceptLinkTaps {
+                onPressLink([
+                    "href": link.href,
+                    "text": link.text,
+                ])
+            } else {
+                openLink(link.href)
+            }
             return
         }
 
+        guard let mention = mentionHit(at: location) else { return }
         onPressMention([
             "docPos": mention.docPos,
             "label": mention.label,
         ])
     }
 
-    private func mentionHit(at location: CGPoint) -> (docPos: Int, label: String)? {
+    private func characterIndex(at location: CGPoint) -> Int? {
         let textStorage = textView.textStorage
         guard textStorage.length > 0 else { return nil }
 
@@ -130,6 +156,26 @@ final class NativeProseViewerExpoView: ExpoView {
         guard glyphIndex < layoutManager.numberOfGlyphs else { return nil }
         let characterIndex = layoutManager.characterIndexForGlyph(at: glyphIndex)
         guard characterIndex < textStorage.length else { return nil }
+        return characterIndex
+    }
+
+    private func linkHit(at location: CGPoint) -> (href: String, text: String)? {
+        let textStorage = textView.textStorage
+        guard let characterIndex = characterIndex(at: location) else { return nil }
+
+        var effectiveRange = NSRange(location: 0, length: 0)
+        let attrs = textStorage.attributes(at: characterIndex, effectiveRange: &effectiveRange)
+        guard let href = attrs[RenderBridgeAttributes.linkHref] as? String, !href.isEmpty else {
+            return nil
+        }
+
+        let text = (textStorage.string as NSString).substring(with: effectiveRange)
+        return (href: href, text: text)
+    }
+
+    private func mentionHit(at location: CGPoint) -> (docPos: Int, label: String)? {
+        let textStorage = textView.textStorage
+        guard let characterIndex = characterIndex(at: location) else { return nil }
 
         var effectiveRange = NSRange(location: 0, length: 0)
         let attrs = textStorage.attributes(at: characterIndex, effectiveRange: &effectiveRange)
@@ -143,4 +189,9 @@ final class NativeProseViewerExpoView: ExpoView {
         let label = (textStorage.string as NSString).substring(with: effectiveRange)
         return (docPos: docPos, label: label)
     }
+
+    private func openLink(_ href: String) {
+        guard let url = URL(string: href) else { return }
+        UIApplication.shared.open(url, options: [:], completionHandler: nil)
+    }
 }

package/ios/RenderBridge.swift

@@ -89,6 +89,9 @@ enum RenderBridgeAttributes {
     /// Stores the rendered list marker scale for unordered bullets.
     static let listMarkerScale = NSAttributedString.Key("com.apollohg.editor.listMarkerScale")
 
+    /// Stores the paragraph base font used to render the list marker.
+    static let listMarkerBaseFont = NSAttributedString.Key("com.apollohg.editor.listMarkerBaseFont")
+
     /// Stores the reserved list marker gutter width.
     static let listMarkerWidth = NSAttributedString.Key("com.apollohg.editor.listMarkerWidth")
 
@@ -104,6 +107,9 @@ enum RenderBridgeAttributes {
     /// Marks synthetic zero-width placeholders used only for UIKit layout.
     static let syntheticPlaceholder = NSAttributedString.Key("com.apollohg.editor.syntheticPlaceholder")
 
+    /// Stores the link href for visually styled link text without enabling UITextView's default link interaction.
+    static let linkHref = NSAttributedString.Key("com.apollohg.editor.linkHref")
+
     /// Stores the owning top-level document child index for partial native patching.
     static let topLevelChildIndex = NSAttributedString.Key("com.apollohg.editor.topLevelChildIndex")
 }
@@ -242,7 +248,8 @@ final class RenderBridge {
                 let attrs = applyBlockStyle(
                     to: baseAttrs,
                     blockStack: blockStack,
-                    theme: theme
+                    theme: theme,
+                    blockBaseFont: blockFont
                 )
                 let attributedText = NSAttributedString(string: text, attributes: attrs)
                 result.append(
@@ -322,6 +329,9 @@ final class RenderBridge {
                 let nodeType = element["nodeType"] as? String ?? ""
                 let label = element["label"] as? String ?? "?"
                 let docPos = jsonUInt32(element["docPos"])
+                let mentionTheme = (element["mentionTheme"] as? [String: Any]).map(
+                    EditorMentionTheme.init(dictionary:)
+                )
                 let attrStr = attributedStringForOpaqueInlineAtom(
                     nodeType: nodeType,
                     label: label,
@@ -330,7 +340,8 @@ final class RenderBridge {
                     textColor: textColor,
                     blockStack: blockStack,
                     topLevelChildIndex: topLevelChildIndex,
-                    theme: theme
+                    theme: theme,
+                    mentionTheme: mentionTheme
                 )
                 result.append(
                     attributedStringApplyingLeadingTopLevelChildIndexIfNeeded(
@@ -556,11 +567,11 @@ final class RenderBridge {
         var traits: UIFontDescriptor.SymbolicTraits = []
         var useMonospace = false
         for mark in marks {
+            let markObject = mark as? [String: Any]
             let markType: String
             if let markName = mark as? String {
                 markType = markName
-            } else if let markObject = mark as? [String: Any],
-                      let resolvedType = markObject["type"] as? String {
+            } else if let resolvedType = markObject?["type"] as? String {
                 markType = resolvedType
             } else {
                 continue
@@ -580,6 +591,9 @@ final class RenderBridge {
             case "link":
                 attrs[.underlineStyle] = NSUnderlineStyle.single.rawValue
                 attrs[.foregroundColor] = UIColor.systemBlue
+                if let href = markObject?["href"] as? String, !href.isEmpty {
+                    attrs[RenderBridgeAttributes.linkHref] = href
+                }
             default:
                 break
             }
@@ -635,7 +649,8 @@ final class RenderBridge {
         let styledAttrs = applyBlockStyle(
             to: attrs,
             blockStack: blockStack,
-            theme: theme
+            theme: theme,
+            blockBaseFont: blockFont
         )
 
         switch nodeType {
@@ -731,7 +746,8 @@ final class RenderBridge {
         textColor: UIColor,
         blockStack: [BlockContext],
         topLevelChildIndex _: Int?,
-        theme: EditorTheme?
+        theme: EditorTheme?,
+        mentionTheme: EditorMentionTheme?
     ) -> NSAttributedString {
         let blockFont = resolvedFont(for: blockStack, baseFont: baseFont, theme: theme)
         let blockColor = resolvedTextColor(for: blockStack, textColor: textColor, theme: theme)
@@ -739,9 +755,11 @@ final class RenderBridge {
         attrs[RenderBridgeAttributes.voidNodeType] = nodeType
         attrs[RenderBridgeAttributes.docPos] = docPos
         if nodeType == "mention" {
-            attrs[.foregroundColor] = theme?.mentions?.textColor ?? blockColor
-            attrs[.backgroundColor] = theme?.mentions?.backgroundColor ?? UIColor.systemBlue.withAlphaComponent(0.12)
-            if let mentionFont = mentionFont(from: blockFont, theme: theme?.mentions) {
+            let resolvedMentionTheme = theme?.mentions?.merged(with: mentionTheme) ?? mentionTheme
+            attrs[.foregroundColor] = resolvedMentionTheme?.textColor ?? blockColor
+            attrs[.backgroundColor] =
+                resolvedMentionTheme?.backgroundColor ?? UIColor.systemBlue.withAlphaComponent(0.12)
+            if let mentionFont = mentionFont(from: blockFont, theme: resolvedMentionTheme) {
                 attrs[.font] = mentionFont
             }
         } else {
@@ -750,7 +768,8 @@ final class RenderBridge {
         let styledAttrs = applyBlockStyle(
             to: attrs,
             blockStack: blockStack,
-            theme: theme
+            theme: theme,
+            blockBaseFont: blockFont
         )
 
         let visibleText = nodeType == "mention" ? label : "[\(label)]"
@@ -923,16 +942,18 @@ final class RenderBridge {
     private static func applyBlockStyle(
         to attrs: [NSAttributedString.Key: Any],
         blockStack: [BlockContext],
-        theme: EditorTheme?
+        theme: EditorTheme?,
+        blockBaseFont: UIFont? = nil
     ) -> [NSAttributedString.Key: Any] {
         guard let currentBlock = effectiveBlockContext(blockStack) else { return attrs }
         var mutableAttrs = attrs
-        let blockFont = mutableAttrs[.font] as? UIFont ?? .systemFont(ofSize: 16)
+        let renderedFont = mutableAttrs[.font] as? UIFont ?? .systemFont(ofSize: 16)
+        let paragraphBaseFont = blockBaseFont ?? renderedFont
         mutableAttrs[.paragraphStyle] = paragraphStyleForBlock(
             currentBlock,
             blockStack: blockStack,
             theme: theme,
-            baseFont: blockFont
+            baseFont: paragraphBaseFont
         )
         mutableAttrs[RenderBridgeAttributes.blockNodeType] = currentBlock.nodeType
         mutableAttrs[RenderBridgeAttributes.blockDepth] = currentBlock.depth
@@ -943,10 +964,11 @@ final class RenderBridge {
             mutableAttrs[RenderBridgeAttributes.listMarkerContext] = markerContext
             mutableAttrs[RenderBridgeAttributes.listMarkerColor] = theme?.list?.markerColor
             mutableAttrs[RenderBridgeAttributes.listMarkerScale] = theme?.list?.markerScale
+            mutableAttrs[RenderBridgeAttributes.listMarkerBaseFont] = paragraphBaseFont
             mutableAttrs[RenderBridgeAttributes.listMarkerWidth] = listMarkerWidth(
                 for: currentBlock,
                 theme: theme,
-                baseFont: blockFont
+                baseFont: paragraphBaseFont
             )
         }
         if blockquoteDepth(in: blockStack) > 0 {
@@ -977,7 +999,8 @@ final class RenderBridge {
         var attrs = applyBlockStyle(
             to: defaultAttributes(baseFont: baseFont, textColor: textColor),
             blockStack: blockStack,
-            theme: theme
+            theme: theme,
+            blockBaseFont: baseFont
         )
         if let topLevelChildIndex {
             attrs[RenderBridgeAttributes.topLevelChildIndex] = NSNumber(value: topLevelChildIndex)
@@ -1280,7 +1303,8 @@ final class RenderBridge {
         var styledAttrs = applyBlockStyle(
             to: attrs,
             blockStack: placeholderBlockStack,
-            theme: theme
+            theme: theme,
+            blockBaseFont: blockFont
         )
         if let paragraphStyle = (styledAttrs[.paragraphStyle] as? NSParagraphStyle)?.mutableCopy()
             as? NSMutableParagraphStyle

package/ios/RichTextEditorView.swift

@@ -858,6 +858,7 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
     /// The base background color before theme overrides.
     var baseBackgroundColor: UIColor = .systemBackground
     var baseTextContainerInset: UIEdgeInsets = .zero
+    var baseLineFragmentPadding: CGFloat = 0
 
     /// Optional render theme supplied by React.
     var theme: EditorTheme? {
@@ -872,8 +873,10 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
                     bottom: contentInsets.bottom ?? 0,
                     right: contentInsets.right ?? 0
                 )
+                textContainer.lineFragmentPadding = 0
             } else {
                 textContainerInset = baseTextContainerInset
+                textContainer.lineFragmentPadding = baseLineFragmentPadding
             }
             invalidateAutoGrowHeightMeasurement()
             setNeedsLayout()
@@ -1040,6 +1043,7 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
         textColor = baseTextColor
         backgroundColor = baseBackgroundColor
         baseTextContainerInset = textContainerInset
+        baseLineFragmentPadding = textContainer.lineFragmentPadding
         visibleSelectionTintColor = tintColor
 
         // Register as the text storage delegate so we can detect unauthorized

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apollohg/react-native-prose-editor",
-    "version": "0.5.1",
+    "version": "0.5.3",
     "description": "Native rich text editor with Rust core for React Native",
     "license": "Apache-2.0",
     "homepage": "https://github.com/apollohg/react-native-prose-editor",