@apollohg/react-native-prose-editor 0.5.17 → 0.5.19

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

@@ -390,6 +390,11 @@ class NativeEditorExpoView(
         val mentionQuery: String? = null
     )
 
+    private data class PendingEditorUpdateEvent(
+        val editorId: Long,
+        val updateJSON: String
+    )
+
     val richTextView: RichTextEditorView = RichTextEditorView(context)
     private val keyboardToolbarView = EditorKeyboardToolbarView(context)
     private val mainHandler = Handler(Looper.getMainLooper())
@@ -478,6 +483,9 @@ class NativeEditorExpoView(
     private var pendingNativeActionRetryGeneration = 0
     private var pendingNativeActionRetryAttempts = 0
     private var lastReadyEditorId: Long? = null
+    private val pendingEditorUpdateEvents = java.util.ArrayDeque<PendingEditorUpdateEvent>()
+    private var pendingEditorUpdateDispatchGeneration = 0
+    private var pendingEditorUpdateDispatchScheduled = false
 
     init {
         addView(richTextView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
@@ -1737,6 +1745,7 @@ class NativeEditorExpoView(
         isApplyingJSUpdate = true
         return try {
             richTextView.editorEditText.applyUpdateJSON(updateJson)
+            clearPendingEditorUpdateDispatchQueue("jsUpdate")
             true
         } catch (error: Throwable) {
             Log.w(LOG_TAG, "Failed to apply JS editor update", error)
@@ -1812,27 +1821,114 @@ class NativeEditorExpoView(
     }
 
     override fun onEditorUpdate(updateJSON: String) {
+        if (isApplyingJSUpdate) {
+            dispatchEditorUpdate(
+                PendingEditorUpdateEvent(
+                    editorId = richTextView.editorId,
+                    updateJSON = updateJSON
+                ),
+                emitToJS = false
+            )
+            return
+        }
+        pendingEditorUpdateEvents.addLast(
+            PendingEditorUpdateEvent(
+                editorId = richTextView.editorId,
+                updateJSON = updateJSON
+            )
+        )
+        richTextView.editorEditText.recordImeTraceForTesting(
+            "nativeViewEditorUpdateQueued",
+            "queue=${pendingEditorUpdateEvents.size} jsonLength=${updateJSON.length}"
+        )
+        schedulePendingEditorUpdateDispatch()
+    }
+
+    internal fun pendingEditorUpdateEventCountForTesting(): Int =
+        pendingEditorUpdateEvents.size
+
+    private fun schedulePendingEditorUpdateDispatch() {
+        pendingEditorUpdateDispatchScheduled = true
+        val generation = ++pendingEditorUpdateDispatchGeneration
+        mainHandler.postDelayed({
+            if (generation != pendingEditorUpdateDispatchGeneration) return@postDelayed
+            pendingEditorUpdateDispatchScheduled = false
+            drainPendingEditorUpdateEvents()
+        }, EDITOR_UPDATE_EVENT_DEBOUNCE_MS)
+    }
+
+    private fun drainPendingEditorUpdateEvents() {
+        if (pendingEditorUpdateEvents.isEmpty()) return
+        val startedAt = System.nanoTime()
+        var drainedCount = 0
+        while (pendingEditorUpdateEvents.isNotEmpty()) {
+            val event = pendingEditorUpdateEvents.removeFirst()
+            if (event.editorId != richTextView.editorId) {
+                richTextView.editorEditText.recordImeTraceForTesting(
+                    "nativeViewEditorUpdateSkipped",
+                    "reason=staleEditor queuedEditor=${event.editorId} currentEditor=${richTextView.editorId}"
+                )
+                continue
+            }
+            dispatchEditorUpdate(event, emitToJS = true)
+            drainedCount += 1
+        }
+        richTextView.editorEditText.recordImeTraceForTesting(
+            "nativeViewEditorUpdateDrained",
+            "count=$drainedCount totalUs=${nanosToMicros(System.nanoTime() - startedAt)}"
+        )
+    }
+
+    private fun clearPendingEditorUpdateDispatchQueue(reason: String) {
+        if (pendingEditorUpdateEvents.isEmpty() && !pendingEditorUpdateDispatchScheduled) return
+        val clearedCount = pendingEditorUpdateEvents.size
+        pendingEditorUpdateEvents.clear()
+        pendingEditorUpdateDispatchScheduled = false
+        pendingEditorUpdateDispatchGeneration += 1
+        richTextView.editorEditText.recordImeTraceForTesting(
+            "nativeViewEditorUpdateQueueCleared",
+            "reason=$reason count=$clearedCount"
+        )
+    }
+
+    private fun dispatchEditorUpdate(event: PendingEditorUpdateEvent, emitToJS: Boolean) {
+        val updateJSON = event.updateJSON
+        val startedAt = System.nanoTime()
         noteDocumentVersionFromUpdateJSON(updateJSON)
+        val noteNanos = System.nanoTime() - startedAt
+        val toolbarStartedAt = System.nanoTime()
         NativeToolbarState.fromUpdateJson(updateJSON)?.let { state ->
             toolbarState = state
             keyboardToolbarView.applyState(state)
         }
+        val toolbarNanos = System.nanoTime() - toolbarStartedAt
+        val mentionStartedAt = System.nanoTime()
         refreshMentionQuery()
+        val mentionNanos = System.nanoTime() - mentionStartedAt
+        val retryStartedAt = System.nanoTime()
         clearPendingNativeActionRetryIfScopeChanged()
         schedulePendingPreflightWake()
         richTextView.refreshRemoteSelections()
+        val retryNanos = System.nanoTime() - retryStartedAt
         if (heightBehavior == EditorHeightBehavior.AUTO_GROW) {
             post {
                 requestLayout()
                 emitContentHeightIfNeeded(force = false)
             }
         }
-        if (isApplyingJSUpdate) return
-        val event = mapOf<String, Any>(
-            "updateJson" to updateJSON,
-            "editorId" to richTextView.editorId
+        val emitStartedAt = System.nanoTime()
+        if (emitToJS) {
+            val payload = mapOf<String, Any>(
+                "updateJson" to updateJSON,
+                "editorId" to event.editorId
+            )
+            onEditorUpdate(payload)
+        }
+        val totalNanos = System.nanoTime() - startedAt
+        richTextView.editorEditText.recordImeTraceForTesting(
+            "nativeViewEditorUpdateDispatch",
+            "emitToJS=$emitToJS jsonLength=${updateJSON.length} noteUs=${nanosToMicros(noteNanos)} toolbarUs=${nanosToMicros(toolbarNanos)} mentionUs=${nanosToMicros(mentionNanos)} retryUs=${nanosToMicros(retryNanos)} emitUs=${nanosToMicros(System.nanoTime() - emitStartedAt)} totalUs=${nanosToMicros(totalNanos)}"
         )
-        onEditorUpdate(event)
     }
 
     private fun installOutsideTapBlurHandlerIfNeeded() {
@@ -2082,10 +2178,13 @@ class NativeEditorExpoView(
         private const val TOOLBAR_FOCUS_PRESERVE_MS = 750L
         private const val OUTSIDE_TAP_BLUR_DELAY_MS = 100L
         private const val NATIVE_ACTION_RETRY_DELAY_MS = 16L
+        private const val EDITOR_UPDATE_EVENT_DEBOUNCE_MS = 64L
         private const val PENDING_UPDATE_RECOVERY_RETRY_DELAY_MS = 250L
         private const val MAX_NATIVE_ACTION_RETRY_ATTEMPTS = 3
         private const val MAX_PENDING_UPDATE_RETRY_ATTEMPTS = 5
         private const val LOG_TAG = "NativeEditor"
+
+        private fun nanosToMicros(nanos: Long): Long = nanos / 1_000L
     }
 
     private fun resolveActivity(context: Context): Activity? {

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/EditorCore.xcframework/Info.plist

@@ -8,32 +8,32 @@
 			<key>BinaryPath</key>
 			<string>libeditor_core.a</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64</string>
+			<string>ios-arm64_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libeditor_core.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>BinaryPath</key>
 			<string>libeditor_core.a</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_x86_64-simulator</string>
+			<string>ios-arm64</string>
 			<key>LibraryPath</key>
 			<string>libeditor_core.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

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
     }