@apollohg/react-native-prose-editor 0.5.18 → 0.5.20

package/android/src/main/java/com/apollohg/editor/EditorEditText.kt

@@ -3779,8 +3779,13 @@ class EditorEditText @JvmOverloads constructor(
      *
      * @param updateJSON The JSON string from editor_insert_text, etc.
      */
-    fun applyUpdateJSON(updateJSON: String, notifyListener: Boolean = true) {
+    fun applyUpdateJSON(
+        updateJSON: String,
+        notifyListener: Boolean = true,
+        refreshInputConnectionForExternalUpdate: Boolean = false
+    ) {
         val totalStartedAt = System.nanoTime()
+        val previousVisibleText = text?.toString().orEmpty()
         val parseStartedAt = totalStartedAt
         val update = try {
             org.json.JSONObject(updateJSON)
@@ -3891,6 +3896,10 @@ class EditorEditText @JvmOverloads constructor(
         } else {
             preserveScrollPosition(previousScrollX, previousScrollY)
         }
+        refreshInputConnectionAfterExternalTextReplacementIfNeeded(
+            enabled = refreshInputConnectionForExternalUpdate,
+            previousVisibleText = previousVisibleText
+        )
         val postApplyNanos = System.nanoTime() - postApplyStartedAt
 
         val totalNanos = System.nanoTime() - totalStartedAt
@@ -3916,6 +3925,17 @@ class EditorEditText @JvmOverloads constructor(
         }
     }
 
+    private fun refreshInputConnectionAfterExternalTextReplacementIfNeeded(
+        enabled: Boolean,
+        previousVisibleText: String
+    ) {
+        if (!enabled || !hasFocus()) return
+        val currentVisibleText = text?.toString().orEmpty()
+        if (currentVisibleText == previousVisibleText) return
+        retireInputConnectionForEditor()
+        restartInputForEditor("externalUpdate")
+    }
+
     /**
      * Apply a render JSON string (just render elements, no update wrapper).
      *

package/android/src/main/java/com/apollohg/editor/NativeEditorExpoView.kt

@@ -1744,7 +1744,10 @@ class NativeEditorExpoView(
         }
         isApplyingJSUpdate = true
         return try {
-            richTextView.editorEditText.applyUpdateJSON(updateJson)
+            richTextView.editorEditText.applyUpdateJSON(
+                updateJson,
+                refreshInputConnectionForExternalUpdate = true
+            )
             clearPendingEditorUpdateDispatchQueue("jsUpdate")
             true
         } catch (error: Throwable) {

package/android/src/main/java/com/apollohg/editor/RichTextEditorView.kt

@@ -209,13 +209,21 @@ class RichTextEditorView @JvmOverloads constructor(
     fun setContent(html: String) {
         if (editorId == 0L) return
         editorSetHtml(editorId.toULong(), html)
-        editorEditText.applyUpdateJSON(editorGetCurrentState(editorId.toULong()), notifyListener = false)
+        editorEditText.applyUpdateJSON(
+            editorGetCurrentState(editorId.toULong()),
+            notifyListener = false,
+            refreshInputConnectionForExternalUpdate = true
+        )
     }
 
     fun setContent(json: org.json.JSONObject) {
         if (editorId == 0L) return
         editorSetJson(editorId.toULong(), json.toString())
-        editorEditText.applyUpdateJSON(editorGetCurrentState(editorId.toULong()), notifyListener = false)
+        editorEditText.applyUpdateJSON(
+            editorGetCurrentState(editorId.toULong()),
+            notifyListener = false,
+            refreshInputConnectionForExternalUpdate = true
+        )
     }
 
     internal fun rebindEditorIfNeeded(notifyListener: Boolean = true) {

package/dist/NativeRichTextEditor.js

@@ -567,6 +567,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     const pendingControlledSyncAfterNativeUpdateRef = (0, react_1.useRef)(false);
     const pendingBlockedNativeCommandRetryRef = (0, react_1.useRef)(false);
     const pendingNativeCommandRetryRef = (0, react_1.useRef)(null);
+    const pendingBridgeRecreationContentRef = (0, react_1.useRef)(null);
     const blockedNativeCommandRetryTimerRef = (0, react_1.useRef)(null);
     const [autoGrowHeight, setAutoGrowHeight] = (0, react_1.useState)(null);
     // Toolbar state from EditorUpdate events
@@ -1039,6 +1040,10 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         }
     }, [syncNativeUpdateFromBridge]);
     (0, react_1.useEffect)(() => {
+        const preservedUncontrolledContent = value == null && serializedValueJson == null
+            ? pendingBridgeRecreationContentRef.current
+            : null;
+        pendingBridgeRecreationContentRef.current = null;
         const bridgeConfig = maxLength != null || serializedSchemaJson || allowBase64Images
             ? {
                 maxLength,
@@ -1056,18 +1061,48 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         else if (serializedValueJson != null) {
             bridge.setJsonString(serializedValueJson);
         }
+        else if (preservedUncontrolledContent != null) {
+            bridge.setJsonString(preservedUncontrolledContent.jsonString);
+        }
         else if (serializedInitialJson != null) {
             bridge.setJsonString(serializedInitialJson);
         }
         else if (initialContent) {
             bridge.setHtml(initialContent);
         }
+        if (preservedUncontrolledContent != null) {
+            const preservedSelection = preservedUncontrolledContent.selection;
+            if (preservedSelection.type === 'text') {
+                const anchor = preservedSelection.anchor ?? 0;
+                const head = preservedSelection.head ?? anchor;
+                bridge.setSelection(anchor, head);
+            }
+            else if (preservedSelection.type === 'node' &&
+                typeof preservedSelection.pos === 'number') {
+                bridge.setSelection(preservedSelection.pos, preservedSelection.pos);
+            }
+        }
         syncStateFromUpdate(bridge.getCurrentState());
         setIsReady(true);
         return () => {
+            if (bridgeRef.current === bridge &&
+                value == null &&
+                serializedValueJson == null &&
+                !bridge.isDestroyed) {
+                try {
+                    pendingBridgeRecreationContentRef.current = {
+                        jsonString: bridge.getJsonString(),
+                        selection: selectionRef.current,
+                    };
+                }
+                catch {
+                    pendingBridgeRecreationContentRef.current = null;
+                }
+            }
             bridge.destroy();
-            bridgeRef.current = null;
-            nativeViewRef.current = null;
+            if (bridgeRef.current === bridge) {
+                bridgeRef.current = null;
+            }
             pendingNativeUpdateInFlightRef.current = null;
             pendingDetachedControlledSyncRef.current = false;
             pendingControlledSyncAfterNativeUpdateRef.current = false;

package/ios/EditorAddons.swift

@@ -131,6 +131,9 @@ func resolveMentionQueryState(
 }
 
 final class MentionSuggestionChipButton: UIButton {
+    private static let horizontalContentInset: CGFloat = 8
+    private static let verticalContentInset: CGFloat = 8
+
     private let titleLabelView = UILabel()
     private let subtitleLabelView = UILabel()
     private let stackView = UIStackView()
@@ -180,10 +183,10 @@ final class MentionSuggestionChipButton: UIButton {
         addSubview(stackView)
 
         NSLayoutConstraint.activate([
-            stackView.topAnchor.constraint(equalTo: topAnchor, constant: 8),
-            stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
-            stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12),
-            stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8),
+            stackView.topAnchor.constraint(equalTo: topAnchor, constant: Self.verticalContentInset),
+            stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: Self.horizontalContentInset),
+            stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -Self.horizontalContentInset),
+            stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -Self.verticalContentInset),
             heightAnchor.constraint(greaterThanOrEqualToConstant: 40),
         ])
 
@@ -213,6 +216,13 @@ final class MentionSuggestionChipButton: UIButton {
         }
     }
 
+    override func tintColorDidChange() {
+        super.tintColorDidChange()
+        if toolbarAppearance == .native {
+            updateAppearance(highlighted: isHighlighted)
+        }
+    }
+
     @objc private func handleTouchDown() {
         updateAppearance(highlighted: true)
     }
@@ -226,14 +236,46 @@ final class MentionSuggestionChipButton: UIButton {
             layer.cornerRadius = 18
             layer.borderColor = UIColor.clear.cgColor
             layer.borderWidth = 0
+            #if compiler(>=6.2)
+            if #available(iOS 26.0, *) {
+                stackView.isHidden = true
+                backgroundColor = .clear
+                var configuration = highlighted
+                    ? UIButton.Configuration.prominentGlass()
+                    : UIButton.Configuration.glass()
+                configuration.cornerStyle = .capsule
+                configuration.contentInsets = NSDirectionalEdgeInsets(
+                    top: Self.verticalContentInset,
+                    leading: Self.horizontalContentInset,
+                    bottom: Self.verticalContentInset,
+                    trailing: Self.horizontalContentInset
+                )
+                configuration.title = suggestion.label
+                configuration.subtitle = suggestion.subtitle
+                configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
+                    var outgoing = incoming
+                    outgoing.font = .systemFont(ofSize: 14, weight: .semibold)
+                    return outgoing
+                }
+                self.configuration = configuration
+                return
+            }
+            #endif
+            stackView.isHidden = false
             backgroundColor = highlighted
                 ? UIColor.white.withAlphaComponent(0.18)
                 : .clear
-            titleLabelView.textColor = .label
-            subtitleLabelView.textColor = .secondaryLabel
+            titleLabelView.textColor = tintColor
+            subtitleLabelView.textColor = tintColor.withAlphaComponent(0.72)
             return
         }
 
+        stackView.isHidden = false
+        if #available(iOS 15.0, *) {
+            var configuration = UIButton.Configuration.plain()
+            configuration.contentInsets = .zero
+            self.configuration = configuration
+        }
         backgroundColor = highlighted
             ? (theme?.optionHighlightedBackgroundColor ?? UIColor.systemBlue.withAlphaComponent(0.12))
             : (theme?.backgroundColor ?? UIColor.secondarySystemBackground)
@@ -252,4 +294,34 @@ final class MentionSuggestionChipButton: UIButton {
     func usesNativeAppearanceForTesting() -> Bool {
         toolbarAppearance == .native
     }
+
+    func titleTextColorForTesting() -> UIColor? {
+        titleLabelView.textColor
+    }
+
+    func subtitleTextColorForTesting() -> UIColor? {
+        subtitleLabelView.textColor
+    }
+
+    func usesNativeGlassTextRenderingForTesting() -> Bool {
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) {
+            return toolbarAppearance == .native
+                && stackView.isHidden
+                && configuration?.title == suggestion.label
+        }
+        #endif
+        return false
+    }
+
+    func usesNativeGlassSemiboldTitleForTesting() -> Bool {
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) {
+            return toolbarAppearance == .native
+                && stackView.isHidden
+                && configuration?.titleTextAttributesTransformer != nil
+        }
+        #endif
+        return false
+    }
 }

package/ios/NativeEditorExpoView.swift

@@ -691,6 +691,8 @@ final class EditorAccessoryToolbarView: UIInputView {
     private static let contentSpacing: CGFloat = 6
     private static let defaultHorizontalInset: CGFloat = 0
     private static let defaultKeyboardOffset: CGFloat = 0
+    private static let chromeTransitionDuration: TimeInterval = 0.18
+    private static let nativeDisabledButtonOpacity: CGFloat = 0.46
 
     private struct ButtonBinding {
         let item: NativeToolbarItem
@@ -727,6 +729,7 @@ final class EditorAccessoryToolbarView: UIInputView {
     private var currentState = NativeToolbarState.empty
     private var theme: EditorToolbarTheme?
     private var mentionTheme: EditorMentionTheme?
+    private var didAnimateChromeTransition = false
     fileprivate var onPressItem: ((NativeToolbarItem) -> Void)?
     var onSelectMentionSuggestion: ((NativeMentionSuggestion) -> Void)?
     var isShowingMentionSuggestions: Bool {
@@ -746,6 +749,16 @@ final class EditorAccessoryToolbarView: UIInputView {
     var chromeBorderWidthForTesting: CGFloat {
         chromeView.layer.borderWidth
     }
+    var nativeChromeIsTransparentForTesting: Bool {
+        blurView.isHidden
+            && glassTintView.isHidden
+            && chromeView.layer.borderWidth == 0
+            && chromeView.layer.shadowOpacity == 0
+            && (chromeView.backgroundColor ?? .clear) == .clear
+    }
+    var didAnimateChromeTransitionForTesting: Bool {
+        didAnimateChromeTransition
+    }
     var nativeToolbarVisibleWidthForTesting: CGFloat {
         activeNativeToolbarScrollViewForTesting.bounds.width
     }
@@ -849,15 +862,42 @@ final class EditorAccessoryToolbarView: UIInputView {
     func apply(mentionTheme: EditorMentionTheme?) {
         self.mentionTheme = mentionTheme
         for button in mentionButtons {
-            button.apply(theme: mentionTheme)
+            button.apply(theme: mentionTheme, toolbarAppearance: resolvedAppearance)
         }
     }
 
     func apply(theme: EditorToolbarTheme?) {
+        apply(theme: theme, animateChrome: false)
+    }
+
+    private func apply(theme: EditorToolbarTheme?, animateChrome: Bool) {
         self.theme = theme
         let usesNativeAppearance = resolvedAppearance == .native
+        let usesTransparentMentionChrome = self.usesTransparentMentionChrome
         let hasFloatingGlassButtons = self.usesFloatingGlassButtons
         let usesBarToolbar = usesNativeBarToolbar
+        let targetBlurHidden = usesTransparentMentionChrome || usesBarToolbar || !usesNativeAppearance
+        let targetBlurAlpha: CGFloat = usesNativeAppearance && !usesTransparentMentionChrome ? resolvedEffectAlpha : 0
+        let targetBlurEffect = usesNativeAppearance && !usesTransparentMentionChrome ? resolvedBlurEffect() : nil
+        let targetGlassHidden = usesTransparentMentionChrome || usesBarToolbar || !usesNativeAppearance
+        let targetGlassBackground = usesNativeAppearance && !usesTransparentMentionChrome
+            ? UIColor.systemBackground.withAlphaComponent(resolvedGlassTintAlpha)
+            : .clear
+        let targetGlassAlpha: CGFloat = targetGlassHidden ? 0 : 1
+        let targetBorderColor = usesTransparentMentionChrome ? UIColor.clear : resolvedBorderColor
+        let targetBorderWidth: CGFloat = usesTransparentMentionChrome || usesBarToolbar
+            ? 0
+            : (usesNativeAppearance
+            ? (1 / UIScreen.main.scale)
+            : resolvedBorderWidth)
+        let targetClipsToBounds =
+            !usesTransparentMentionChrome
+            && ((usesNativeAppearance && !hasFloatingGlassButtons && !usesBarToolbar) || resolvedBorderRadius > 0)
+        let targetShadowOpacity: Float =
+            usesNativeAppearance && !usesTransparentMentionChrome && !hasFloatingGlassButtons && !usesBarToolbar ? 0.08 : 0
+        let targetShadowRadius: CGFloat =
+            usesNativeAppearance && !usesTransparentMentionChrome && !hasFloatingGlassButtons && !usesBarToolbar ? 10 : 0
+
         chromeView.backgroundColor = usesNativeAppearance
             ? .clear
             : (theme?.backgroundColor ?? .systemBackground)
@@ -865,19 +905,6 @@ final class EditorAccessoryToolbarView: UIInputView {
             ? nil
             : (theme?.buttonColor ?? tintColor)
         chromeView.isOpaque = false
-        blurView.isHidden = usesBarToolbar || !usesNativeAppearance
-        blurView.effect = usesNativeAppearance ? resolvedBlurEffect() : nil
-        blurView.alpha = usesNativeAppearance ? resolvedEffectAlpha : 1
-        glassTintView.isHidden = usesBarToolbar || !usesNativeAppearance
-        glassTintView.backgroundColor = usesNativeAppearance
-            ? UIColor.systemBackground.withAlphaComponent(resolvedGlassTintAlpha)
-            : .clear
-        chromeView.layer.borderColor = resolvedBorderColor.cgColor
-        chromeView.layer.borderWidth = usesBarToolbar
-            ? 0
-            : (usesNativeAppearance
-            ? (1 / UIScreen.main.scale)
-            : resolvedBorderWidth)
         chromeView.layer.cornerRadius = resolvedBorderRadius
         if #available(iOS 13.0, *) {
             chromeView.layer.cornerCurve = .continuous
@@ -892,11 +919,68 @@ final class EditorAccessoryToolbarView: UIInputView {
             glassTintView.cornerConfiguration = cornerConfig
         }
         #endif
-        chromeView.clipsToBounds = (usesNativeAppearance && !hasFloatingGlassButtons && !usesBarToolbar) || resolvedBorderRadius > 0
-        chromeView.layer.shadowOpacity = usesNativeAppearance && !hasFloatingGlassButtons && !usesBarToolbar ? 0.08 : 0
-        chromeView.layer.shadowRadius = usesNativeAppearance && !hasFloatingGlassButtons && !usesBarToolbar ? 10 : 0
         chromeView.layer.shadowOffset = CGSize(width: 0, height: 2)
         chromeView.layer.shadowColor = UIColor.black.cgColor
+
+        let applyChromeProperties = {
+            self.blurView.alpha = targetBlurAlpha
+            self.glassTintView.alpha = targetGlassAlpha
+            self.chromeView.layer.borderColor = targetBorderColor.cgColor
+            self.chromeView.layer.borderWidth = targetBorderWidth
+            self.chromeView.layer.shadowOpacity = targetShadowOpacity
+            self.chromeView.layer.shadowRadius = targetShadowRadius
+        }
+        let finishChromeProperties = {
+            self.blurView.isHidden = targetBlurHidden
+            self.blurView.effect = targetBlurEffect
+            self.blurView.alpha = targetBlurAlpha
+            self.glassTintView.isHidden = targetGlassHidden
+            self.glassTintView.backgroundColor = targetGlassHidden ? .clear : targetGlassBackground
+            self.glassTintView.alpha = targetGlassAlpha
+            self.chromeView.layer.borderColor = targetBorderColor.cgColor
+            self.chromeView.layer.borderWidth = targetBorderWidth
+            self.chromeView.layer.shadowOpacity = targetShadowOpacity
+            self.chromeView.layer.shadowRadius = targetShadowRadius
+            self.chromeView.clipsToBounds = targetClipsToBounds
+        }
+
+        let shouldAnimateChrome = animateChrome && UIView.areAnimationsEnabled && window != nil
+        didAnimateChromeTransition = shouldAnimateChrome
+        if shouldAnimateChrome {
+            let blurWasHidden = blurView.isHidden
+            let glassWasHidden = glassTintView.isHidden
+            if !targetBlurHidden {
+                blurView.effect = targetBlurEffect
+            }
+            if !targetBlurHidden || !blurWasHidden {
+                blurView.isHidden = false
+            }
+            if blurWasHidden && !targetBlurHidden {
+                blurView.alpha = 0
+            }
+            if !targetGlassHidden {
+                glassTintView.backgroundColor = targetGlassBackground
+            }
+            if !targetGlassHidden || !glassWasHidden {
+                glassTintView.isHidden = false
+            }
+            if glassWasHidden && !targetGlassHidden {
+                glassTintView.alpha = 0
+            }
+            chromeView.clipsToBounds = targetClipsToBounds
+            UIView.animate(
+                withDuration: Self.chromeTransitionDuration,
+                delay: 0,
+                options: [.beginFromCurrentState, .allowUserInteraction, .curveEaseOut],
+                animations: applyChromeProperties,
+                completion: { _ in
+                    finishChromeProperties()
+                }
+            )
+        } else {
+            finishChromeProperties()
+        }
+
         chromeLeadingConstraint?.constant = resolvedHorizontalInset
         chromeTrailingConstraint?.constant = -resolvedHorizontalInset
         chromeBottomConstraint?.constant = -resolvedKeyboardOffset
@@ -949,6 +1033,7 @@ final class EditorAccessoryToolbarView: UIInputView {
         mentionScrollView.isHidden = !hasSuggestions
         scrollView.isHidden = hasSuggestions
         mentionRowHeightConstraint?.constant = hasSuggestions ? Self.mentionRowHeight : 0
+        apply(theme: theme, animateChrome: hadSuggestions != hasSuggestions)
         invalidateIntrinsicContentSize()
         setNeedsLayout()
         return hadSuggestions != hasSuggestions
@@ -988,6 +1073,9 @@ final class EditorAccessoryToolbarView: UIInputView {
     var firstButtonTintColorForTesting: UIColor? {
         buttonBindings.first?.button.tintColor
     }
+    func firstButtonTitleColorForTesting(_ state: UIControl.State) -> UIColor? {
+        buttonBindings.first?.button.titleColor(for: state)
+    }
     var firstButtonTintAdjustmentModeForTesting: UIView.TintAdjustmentMode {
         buttonBindings.first?.button.tintAdjustmentMode ?? .automatic
     }
@@ -1552,7 +1640,10 @@ final class EditorAccessoryToolbarView: UIInputView {
         #endif
 
         if resolvedAppearance == .native {
-            button.tintColor = enabled ? nil : .systemGray
+            let tintColor = enabled ? theme?.buttonColor : resolvedNativeDisabledButtonTintColor()
+            button.tintColor = tintColor
+            button.setTitleColor(tintColor, for: .normal)
+            button.setTitleColor(resolvedNativeDisabledButtonTintColor(), for: .disabled)
             button.tintAdjustmentMode = enabled ? .automatic : .normal
             button.alpha = 1
             button.backgroundColor = active
@@ -1602,10 +1693,28 @@ final class EditorAccessoryToolbarView: UIInputView {
         theme?.resolvedButtonBorderRadius ?? 8
     }
 
+    private func resolvedNativeDisabledButtonTintColor() -> UIColor {
+        theme?.buttonDisabledColor ?? resolvedNativeButtonTintColor.withAlphaComponent(Self.nativeDisabledButtonOpacity)
+    }
+
+    private var resolvedNativeButtonTintColor: UIColor {
+        theme?.buttonColor ?? tintColor ?? .label
+    }
+
     private var usesFloatingGlassButtons: Bool {
         return false
     }
 
+    private var usesTransparentMentionChrome: Bool {
+        guard resolvedAppearance == .native, !mentionButtons.isEmpty else { return false }
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) {
+            return true
+        }
+        #endif
+        return false
+    }
+
     private var usesNativeBarToolbar: Bool {
         return false
     }

package/ios/RenderBridge.swift

@@ -1104,10 +1104,12 @@ final class RenderBridge {
         }
 
         let tagged = NSMutableAttributedString(attributedString: attributedString)
+        let firstComposedCharacterRange = (tagged.string as NSString)
+            .rangeOfComposedCharacterSequence(at: 0)
         tagged.addAttribute(
             RenderBridgeAttributes.topLevelChildIndex,
             value: NSNumber(value: topLevelChildIndex),
-            range: NSRange(location: 0, length: 1)
+            range: firstComposedCharacterRange
         )
         return tagged
     }

package/package.json

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