@apollohg/react-native-prose-editor 0.5.0 → 0.5.2

package/ios/EditorLayoutManager.swift

@@ -140,7 +140,7 @@ final class EditorLayoutManager: NSLayoutManager {
         let lineFragmentRect = self.lineFragmentRect(forGlyphAt: glyphIndex, effectiveRange: nil)
         let attrs = textStorage.attributes(at: paragraphStart, effectiveRange: nil)
 
-        let baseFont = attrs[.font] as? UIFont ?? .systemFont(ofSize: 16)
+        let baseFont = Self.markerBaseFont(from: attrs)
         let textColor = attrs[RenderBridgeAttributes.listMarkerColor] as? UIColor
             ?? attrs[.foregroundColor] as? UIColor
             ?? .label
@@ -465,6 +465,15 @@ final class EditorLayoutManager: NSLayoutManager {
         return baseFont.withSize(baseFont.pointSize * markerScale)
     }
 
+    static func markerBaseFont(
+        from attrs: [NSAttributedString.Key: Any],
+        fallback fallbackFont: UIFont = .systemFont(ofSize: 16)
+    ) -> UIFont {
+        (attrs[RenderBridgeAttributes.listMarkerBaseFont] as? UIFont)
+            ?? (attrs[.font] as? UIFont)
+            ?? fallbackFont
+    }
+
     private static func unorderedBulletGlyphBounds(for font: UIFont) -> CGRect {
         let ctFont = font as CTFont
         let bullet = UniChar(0x2022)

package/ios/EditorTheme.swift

@@ -139,6 +139,31 @@ struct EditorMentionTheme {
     var optionHighlightedBackgroundColor: UIColor?
     var optionHighlightedTextColor: UIColor?
 
+    func merged(with override: EditorMentionTheme?) -> EditorMentionTheme {
+        guard let override else { return self }
+        var merged = self
+        merged.textColor = override.textColor ?? merged.textColor
+        merged.backgroundColor = override.backgroundColor ?? merged.backgroundColor
+        merged.borderColor = override.borderColor ?? merged.borderColor
+        merged.borderWidth = override.borderWidth ?? merged.borderWidth
+        merged.borderRadius = override.borderRadius ?? merged.borderRadius
+        merged.fontWeight = override.fontWeight ?? merged.fontWeight
+        merged.popoverBackgroundColor =
+            override.popoverBackgroundColor ?? merged.popoverBackgroundColor
+        merged.popoverBorderColor = override.popoverBorderColor ?? merged.popoverBorderColor
+        merged.popoverBorderWidth = override.popoverBorderWidth ?? merged.popoverBorderWidth
+        merged.popoverBorderRadius = override.popoverBorderRadius ?? merged.popoverBorderRadius
+        merged.popoverShadowColor = override.popoverShadowColor ?? merged.popoverShadowColor
+        merged.optionTextColor = override.optionTextColor ?? merged.optionTextColor
+        merged.optionSecondaryTextColor =
+            override.optionSecondaryTextColor ?? merged.optionSecondaryTextColor
+        merged.optionHighlightedBackgroundColor =
+            override.optionHighlightedBackgroundColor ?? merged.optionHighlightedBackgroundColor
+        merged.optionHighlightedTextColor =
+            override.optionHighlightedTextColor ?? merged.optionHighlightedTextColor
+        return merged
+    }
+
     init(dictionary: [String: Any]) {
         textColor = EditorTheme.color(from: dictionary["textColor"])
         backgroundColor = EditorTheme.color(from: dictionary["backgroundColor"])

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/NativeProseViewerExpoView.swift

@@ -10,6 +10,7 @@ final class NativeProseViewerExpoView: ExpoView {
     private var lastThemeJSON: String?
     private var lastEmittedContentHeight: CGFloat = 0
     private var lastMeasuredWidth: CGFloat = 0
+    private var allowContentHeightShrink = true
 
     private lazy var mentionTapRecognizer: UITapGestureRecognizer = {
         let recognizer = UITapGestureRecognizer(
@@ -42,12 +43,14 @@ final class NativeProseViewerExpoView: ExpoView {
     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,11 +90,11 @@ 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()

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")
 
@@ -242,7 +245,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 +326,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 +337,8 @@ final class RenderBridge {
                     textColor: textColor,
                     blockStack: blockStack,
                     topLevelChildIndex: topLevelChildIndex,
-                    theme: theme
+                    theme: theme,
+                    mentionTheme: mentionTheme
                 )
                 result.append(
                     attributedStringApplyingLeadingTopLevelChildIndexIfNeeded(
@@ -635,7 +643,8 @@ final class RenderBridge {
         let styledAttrs = applyBlockStyle(
             to: attrs,
             blockStack: blockStack,
-            theme: theme
+            theme: theme,
+            blockBaseFont: blockFont
         )
 
         switch nodeType {
@@ -731,7 +740,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 +749,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 +762,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 +936,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 +958,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 +993,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 +1297,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.0",
+    "version": "0.5.2",
     "description": "Native rich text editor with Rust core for React Native",
     "license": "Apache-2.0",
     "homepage": "https://github.com/apollohg/react-native-prose-editor",
@@ -67,7 +67,8 @@
         "babel-jest": "^29.7.0",
         "jest": "^29.7.0",
         "react-test-renderer": "^19.1.0",
-        "typescript": "^5.9.3"
+        "typescript": "^5.9.3",
+        "prettier": "^3.8.1"
     },
     "files": [
         "README.md",
@@ -84,8 +85,5 @@
         "rust/android",
         "rust/bindings/kotlin",
         "expo-module.config.json"
-    ],
-    "dependencies": {
-        "prettier": "^3.8.1"
-    }
+    ]
 }