@apollohg/react-native-prose-editor 0.5.14 → 0.5.16

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

@@ -7,6 +7,7 @@ import android.graphics.Rect
 import android.graphics.RectF
 import android.text.Annotation
 import android.text.Editable
+import android.text.InputType
 import android.text.Layout
 import android.text.Spanned
 import android.text.StaticLayout
@@ -17,8 +18,10 @@ import android.util.Log
 import android.util.TypedValue
 import android.view.KeyEvent
 import android.view.MotionEvent
+import android.view.inputmethod.BaseInputConnection
 import android.view.inputmethod.EditorInfo
 import android.view.inputmethod.InputConnection
+import android.view.inputmethod.InputMethodManager
 import androidx.appcompat.widget.AppCompatEditText
 import kotlin.math.roundToInt
 import uniffi.editor_core.*  // UniFFI-generated bindings
@@ -105,6 +108,13 @@ class EditorEditText @JvmOverloads constructor(
         val end: Int
     )
 
+    private data class NativeTextMutation(
+        val scalarFrom: Int,
+        val scalarTo: Int,
+        val replacementText: String,
+        val resultingText: String
+    )
+
     /**
      * Listener interface for editor events, parallel to iOS's EditorTextViewDelegate.
      */
@@ -162,6 +172,9 @@ class EditorEditText @JvmOverloads constructor(
     var heightBehavior: EditorHeightBehavior = EditorHeightBehavior.FIXED
         private set
     private var imageResizingEnabled = true
+    private var nativeAutoCapitalize = DEFAULT_AUTO_CAPITALIZE
+    private var nativeAutoCorrect = DEFAULT_AUTO_CORRECT
+    private var nativeKeyboardType = DEFAULT_KEYBOARD_TYPE
 
     private var contentInsets: EditorContentInsets? = null
     private var viewportBottomInsetPx: Int = 0
@@ -198,10 +211,7 @@ class EditorEditText @JvmOverloads constructor(
 
     init {
         // Configure for rich text editing.
-        inputType = EditorInfo.TYPE_CLASS_TEXT or
-                EditorInfo.TYPE_TEXT_FLAG_MULTI_LINE or
-                EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT or
-                EditorInfo.TYPE_TEXT_FLAG_CAP_SENTENCES
+        inputType = resolvedInputType()
 
         // Disable built-in spell checking to avoid conflicts with Rust state.
         // The Rust editor is the source of truth for text content.
@@ -224,6 +234,110 @@ class EditorEditText @JvmOverloads constructor(
         updateEffectivePadding()
     }
 
+    fun setAutoCapitalize(autoCapitalize: String?) {
+        val next = when (autoCapitalize) {
+            "none",
+            "sentences",
+            "words",
+            "characters" -> autoCapitalize
+            else -> DEFAULT_AUTO_CAPITALIZE
+        }
+        if (nativeAutoCapitalize == next) return
+        nativeAutoCapitalize = next
+        applyInputTraits()
+    }
+
+    fun setAutoCorrect(autoCorrect: Boolean?) {
+        val next = autoCorrect ?: DEFAULT_AUTO_CORRECT
+        if (nativeAutoCorrect == next) return
+        nativeAutoCorrect = next
+        applyInputTraits()
+    }
+
+    fun setKeyboardType(keyboardType: String?) {
+        val next = when (keyboardType) {
+            "default",
+            "email-address",
+            "numeric",
+            "phone-pad",
+            "ascii-capable",
+            "numbers-and-punctuation",
+            "url",
+            "number-pad",
+            "name-phone-pad",
+            "decimal-pad",
+            "twitter",
+            "web-search",
+            "visible-password",
+            "ascii-capable-number-pad" -> keyboardType
+            else -> DEFAULT_KEYBOARD_TYPE
+        }
+        if (nativeKeyboardType == next) return
+        nativeKeyboardType = next
+        applyInputTraits()
+    }
+
+    private fun applyInputTraits() {
+        val nextInputType = resolvedInputType()
+        if (inputType == nextInputType) return
+
+        val currentStart = selectionStart
+        val currentEnd = selectionEnd
+        setRawInputType(nextInputType)
+
+        val editable = text
+        if (
+            editable != null &&
+            currentStart >= 0 &&
+            currentEnd >= 0 &&
+            currentStart <= editable.length &&
+            currentEnd <= editable.length
+        ) {
+            setSelection(currentStart, currentEnd)
+        }
+
+        if (hasFocus()) {
+            val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+            imm?.restartInput(this)
+        }
+    }
+
+    private fun resolvedInputType(): Int {
+        var nextInputType = when (nativeKeyboardType) {
+            "email-address" -> InputType.TYPE_CLASS_TEXT or
+                InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS
+            "url" -> InputType.TYPE_CLASS_TEXT or
+                InputType.TYPE_TEXT_VARIATION_URI
+            "phone-pad" -> InputType.TYPE_CLASS_PHONE
+            "number-pad" -> InputType.TYPE_CLASS_NUMBER
+            "decimal-pad" -> InputType.TYPE_CLASS_NUMBER or
+                InputType.TYPE_NUMBER_FLAG_DECIMAL
+            "numeric" -> InputType.TYPE_CLASS_NUMBER or
+                InputType.TYPE_NUMBER_FLAG_DECIMAL or
+                InputType.TYPE_NUMBER_FLAG_SIGNED
+            "visible-password" -> InputType.TYPE_CLASS_TEXT or
+                InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
+            else -> InputType.TYPE_CLASS_TEXT
+        }
+
+        if ((nextInputType and InputType.TYPE_MASK_CLASS) == InputType.TYPE_CLASS_TEXT) {
+            nextInputType = nextInputType or InputType.TYPE_TEXT_FLAG_MULTI_LINE
+            nextInputType = nextInputType or when (nativeAutoCapitalize) {
+                "none" -> 0
+                "words" -> InputType.TYPE_TEXT_FLAG_CAP_WORDS
+                "characters" -> InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS
+                else -> InputType.TYPE_TEXT_FLAG_CAP_SENTENCES
+            }
+            nextInputType = nextInputType or if (nativeAutoCorrect) {
+                InputType.TYPE_TEXT_FLAG_AUTO_CORRECT
+            } else {
+                InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS
+            }
+        }
+
+        return nextInputType
+    }
+
     // ── InputConnection Override ────────────────────────────────────────
 
     /**
@@ -1117,6 +1231,66 @@ class EditorEditText @JvmOverloads constructor(
         applyUpdateJSON(updateJSON)
     }
 
+    private fun nativeTextMutationFromAuthorizedDiff(currentText: String): NativeTextMutation? {
+        val authorizedText = lastAuthorizedText
+        if (currentText == authorizedText) return null
+
+        var prefix = 0
+        val sharedLength = minOf(authorizedText.length, currentText.length)
+        while (
+            prefix < sharedLength &&
+            authorizedText[prefix] == currentText[prefix]
+        ) {
+            prefix++
+        }
+
+        var authorizedEnd = authorizedText.length
+        var currentEnd = currentText.length
+        while (
+            authorizedEnd > prefix &&
+            currentEnd > prefix &&
+            authorizedText[authorizedEnd - 1] == currentText[currentEnd - 1]
+        ) {
+            authorizedEnd--
+            currentEnd--
+        }
+
+        val replacementText = currentText.substring(prefix, currentEnd)
+        return NativeTextMutation(
+            scalarFrom = PositionBridge.utf16ToScalar(prefix, authorizedText),
+            scalarTo = PositionBridge.utf16ToScalar(authorizedEnd, authorizedText),
+            replacementText = replacementText,
+            resultingText = currentText
+        )
+    }
+
+    private fun shouldAdoptNativeTextMutation(editable: Editable?): Boolean {
+        if (!isEditable || !hasFocus()) return false
+        if (editable == null) return true
+
+        val composingStart = BaseInputConnection.getComposingSpanStart(editable)
+        val composingEnd = BaseInputConnection.getComposingSpanEnd(editable)
+        return composingStart < 0 || composingEnd < 0 || composingStart == composingEnd
+    }
+
+    private fun commitNativeTextMutation(mutation: NativeTextMutation) {
+        if ((text?.toString() ?: "") != mutation.resultingText) return
+
+        if (mutation.scalarFrom == mutation.scalarTo) {
+            if (mutation.replacementText.isNotEmpty()) {
+                insertTextInRust(mutation.replacementText, mutation.scalarFrom)
+            }
+        } else if (mutation.replacementText.isEmpty()) {
+            deleteRangeInRust(mutation.scalarFrom, mutation.scalarTo)
+        } else {
+            replaceTextRangeInRust(
+                mutation.scalarFrom,
+                mutation.scalarTo,
+                mutation.replacementText
+            )
+        }
+    }
+
     /**
      * Delete a scalar range via the Rust editor.
      *
@@ -1912,6 +2086,12 @@ class EditorEditText @JvmOverloads constructor(
             val currentText = s?.toString() ?: ""
             if (currentText == lastAuthorizedText) return
 
+            val mutation = nativeTextMutationFromAuthorizedDiff(currentText)
+            if (mutation != null && shouldAdoptNativeTextMutation(s)) {
+                commitNativeTextMutation(mutation)
+                return
+            }
+
             // Text has diverged from Rust's authorized state.
             reconciliationCount++
             Log.w(
@@ -1929,6 +2109,9 @@ class EditorEditText @JvmOverloads constructor(
     }
 
     companion object {
+        private const val DEFAULT_AUTO_CAPITALIZE = "sentences"
+        private const val DEFAULT_AUTO_CORRECT = true
+        private const val DEFAULT_KEYBOARD_TYPE = "default"
         private const val EMPTY_BLOCK_PLACEHOLDER = '\u200B'
         private const val LOG_TAG = "NativeEditor"
     }

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

@@ -181,6 +181,18 @@ class NativeEditorExpoView(
         focus()
     }
 
+    fun setAutoCapitalize(autoCapitalize: String?) {
+        richTextView.editorEditText.setAutoCapitalize(autoCapitalize)
+    }
+
+    fun setAutoCorrect(autoCorrect: Boolean?) {
+        richTextView.editorEditText.setAutoCorrect(autoCorrect)
+    }
+
+    fun setKeyboardType(keyboardType: String?) {
+        richTextView.editorEditText.setKeyboardType(keyboardType)
+    }
+
     fun setShowToolbar(showToolbar: Boolean) {
         showsToolbar = showToolbar
         updateKeyboardToolbarVisibility()

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

@@ -336,6 +336,15 @@ class NativeEditorModule : Module() {
             Prop("autoFocus") { view: NativeEditorExpoView, autoFocus: Boolean ->
                 view.setAutoFocus(autoFocus)
             }
+            Prop("autoCapitalize") { view: NativeEditorExpoView, autoCapitalize: String? ->
+                view.setAutoCapitalize(autoCapitalize)
+            }
+            Prop("autoCorrect") { view: NativeEditorExpoView, autoCorrect: Boolean? ->
+                view.setAutoCorrect(autoCorrect)
+            }
+            Prop("keyboardType") { view: NativeEditorExpoView, keyboardType: String? ->
+                view.setKeyboardType(keyboardType)
+            }
             Prop("showToolbar") { view: NativeEditorExpoView, showToolbar: Boolean ->
                 view.setShowToolbar(showToolbar)
             }

package/dist/EditorToolbar.d.ts

@@ -1,5 +1,6 @@
 import type { ActiveState, HistoryState } from './NativeEditorBridge';
-import type { EditorToolbarTheme } from './EditorTheme';
+import type { EditorMentionTheme, EditorToolbarTheme } from './EditorTheme';
+import type { MentionSuggestion } from './addons';
 export type EditorToolbarListType = 'bulletList' | 'orderedList';
 export type EditorToolbarHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export type EditorToolbarCommand = 'indentList' | 'outdentList' | 'undo' | 'redo';
@@ -97,8 +98,17 @@ export interface EditorToolbarFrame {
     width: number;
     height: number;
 }
+interface EditorToolbarMentionState {
+    ownerId: number;
+    trigger: string;
+    suggestions: readonly MentionSuggestion[];
+    theme?: EditorMentionTheme;
+    suggestionThemes?: Readonly<Record<string, EditorMentionTheme | undefined>>;
+    onSelectSuggestion: (suggestion: MentionSuggestion) => void;
+}
 export declare function isEditorToolbarFocusPreservationActive(): boolean;
 export declare function useEditorToolbarFrames(): readonly EditorToolbarFrame[];
+export declare function setEditorToolbarMentionState(ownerId: number, state: Omit<EditorToolbarMentionState, 'ownerId'> | null): void;
 export declare function _setEditorToolbarFrameForTests(id: number, frame: EditorToolbarFrame | null): void;
 export declare function _resetEditorToolbarFrameRegistryForTests(): void;
 export declare function _beginEditorToolbarInteractionForTests(): void;
@@ -164,3 +174,4 @@ export interface EditorToolbarProps {
     preserveEditorFocus?: boolean;
 }
 export declare function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems, theme, showTopBorder, preserveEditorFocus, }: EditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/EditorToolbar.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_EDITOR_TOOLBAR_ITEMS = void 0;
 exports.isEditorToolbarFocusPreservationActive = isEditorToolbarFocusPreservationActive;
 exports.useEditorToolbarFrames = useEditorToolbarFrames;
+exports.setEditorToolbarMentionState = setEditorToolbarMentionState;
 exports._setEditorToolbarFrameForTests = _setEditorToolbarFrameForTests;
 exports._resetEditorToolbarFrameRegistryForTests = _resetEditorToolbarFrameRegistryForTests;
 exports._beginEditorToolbarInteractionForTests = _beginEditorToolbarInteractionForTests;
@@ -14,9 +15,11 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const editorToolbarFrames = new Map();
 const editorToolbarFrameListeners = new Set();
+const editorToolbarMentionStateListeners = new Set();
 let nextEditorToolbarRegistrationId = 1;
 let activeEditorToolbarInteractions = 0;
 let editorToolbarFocusPreserveUntil = 0;
+let editorToolbarMentionState = null;
 const EDITOR_TOOLBAR_FOCUS_PRESERVE_MS = 750;
 function areToolbarFramesEqual(left, right) {
     return (left?.x === right?.x &&
@@ -27,9 +30,24 @@ function areToolbarFramesEqual(left, right) {
 function notifyEditorToolbarFrameListeners() {
     editorToolbarFrameListeners.forEach((listener) => listener());
 }
+function notifyEditorToolbarMentionStateListeners() {
+    editorToolbarMentionStateListeners.forEach((listener) => listener());
+}
 function getEditorToolbarFramesSnapshot() {
     return Array.from(editorToolbarFrames.values());
 }
+function subscribeEditorToolbarMentionState(listener) {
+    editorToolbarMentionStateListeners.add(listener);
+    return () => {
+        editorToolbarMentionStateListeners.delete(listener);
+    };
+}
+function getEditorToolbarMentionStateSnapshot() {
+    return editorToolbarMentionState;
+}
+function useEditorToolbarMentionState() {
+    return (0, react_1.useSyncExternalStore)(subscribeEditorToolbarMentionState, getEditorToolbarMentionStateSnapshot, getEditorToolbarMentionStateSnapshot);
+}
 function registerEditorToolbarFrame(id, frame) {
     if (frame == null || frame.width <= 0 || frame.height <= 0) {
         if (editorToolbarFrames.delete(id)) {
@@ -75,14 +93,31 @@ function useEditorToolbarFrames() {
     }, []);
     return frames;
 }
+function setEditorToolbarMentionState(ownerId, state) {
+    if (state == null) {
+        if (editorToolbarMentionState?.ownerId !== ownerId) {
+            return;
+        }
+        editorToolbarMentionState = null;
+        notifyEditorToolbarMentionStateListeners();
+        return;
+    }
+    editorToolbarMentionState = {
+        ownerId,
+        ...state,
+    };
+    notifyEditorToolbarMentionStateListeners();
+}
 function _setEditorToolbarFrameForTests(id, frame) {
     registerEditorToolbarFrame(id, frame);
 }
 function _resetEditorToolbarFrameRegistryForTests() {
     editorToolbarFrames.clear();
+    editorToolbarMentionState = null;
     activeEditorToolbarInteractions = 0;
     editorToolbarFocusPreserveUntil = 0;
     notifyEditorToolbarFrameListeners();
+    notifyEditorToolbarMentionStateListeners();
 }
 function _beginEditorToolbarInteractionForTests() {
     beginEditorToolbarInteraction();
@@ -194,6 +229,9 @@ const DEFAULT_MATERIAL_ICONS = {
     undo: 'undo',
     redo: 'redo',
 };
+function resolveMentionSuggestionLabel(suggestion, trigger) {
+    return suggestion.label?.trim() || `${trigger}${suggestion.title}`;
+}
 function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS, theme, showTopBorder, preserveEditorFocus = true, }) {
     const marks = activeState.marks ?? {};
     const nodes = activeState.nodes ?? {};
@@ -205,6 +243,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
     const { width: windowWidth, height: windowHeight } = (0, react_native_1.useWindowDimensions)();
     const [expandedGroupKey, setExpandedGroupKey] = (0, react_1.useState)(null);
     const [menuState, setMenuState] = (0, react_1.useState)(null);
+    const mentionState = useEditorToolbarMentionState();
     const toolbarInteractionActiveRef = (0, react_1.useRef)(false);
     const framePublishAnimationFramesRef = (0, react_1.useRef)([]);
     const framePublishTimeoutsRef = (0, react_1.useRef)([]);
@@ -216,6 +255,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
     const isInList = !!nodes['bulletList'] || !!nodes['orderedList'];
     const canIndentList = isInList && !!commands['indentList'];
     const canOutdentList = isInList && !!commands['outdentList'];
+    const shouldRenderMentionSuggestions = preserveEditorFocus && mentionState != null && mentionState.suggestions.length > 0;
     const getActionForItem = (0, react_1.useCallback)((item) => {
         switch (item.type) {
             case 'mark':
@@ -558,6 +598,12 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
             setMenuState(null);
         }
     }, [groupsByKey, menuState]);
+    (0, react_1.useEffect)(() => {
+        if (shouldRenderMentionSuggestions) {
+            setExpandedGroupKey(null);
+            setMenuState(null);
+        }
+    }, [shouldRenderMentionSuggestions]);
     const handleButtonPress = (0, react_1.useCallback)((button) => {
         button.action();
         if (button.groupKey) {
@@ -665,7 +711,65 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
             {
                 borderRadius: theme?.borderRadius ?? TOOLBAR_RADIUS,
             },
-        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.scrollContent, keyboardShouldPersistTaps: 'always', onScrollBeginDrag: () => setMenuState(null), children: renderedItems.map((item) => {
+        ], children: [shouldRenderMentionSuggestions && mentionState != null ? ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { testID: 'editor-toolbar-mention-suggestions', horizontal: true, showsHorizontalScrollIndicator: false, style: [
+                    styles.mentionSuggestionsScroll,
+                    {
+                        backgroundColor: mentionState.theme?.popoverBackgroundColor ??
+                            mentionState.theme?.backgroundColor ??
+                            'transparent',
+                        borderColor: mentionState.theme?.popoverBorderColor ??
+                            mentionState.theme?.borderColor ??
+                            'transparent',
+                        borderWidth: mentionState.theme?.popoverBorderWidth ??
+                            mentionState.theme?.borderWidth ??
+                            0,
+                        borderRadius: mentionState.theme?.popoverBorderRadius ??
+                            mentionState.theme?.borderRadius ??
+                            0,
+                    },
+                    mentionState.theme?.popoverShadowColor != null
+                        ? {
+                            shadowColor: mentionState.theme.popoverShadowColor,
+                            shadowOpacity: 0.14,
+                            shadowRadius: 12,
+                            shadowOffset: { width: 0, height: 4 },
+                            elevation: 8,
+                        }
+                        : null,
+                ], contentContainerStyle: styles.mentionSuggestionsContent, keyboardShouldPersistTaps: 'always', children: mentionState.suggestions.map((suggestion) => {
+                    const label = resolveMentionSuggestionLabel(suggestion, mentionState.trigger);
+                    const suggestionTheme = mentionState.suggestionThemes?.[suggestion.key] ?? mentionState.theme;
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `editor-toolbar-mention-suggestion-${suggestion.key}`, accessibilityRole: 'button', accessibilityLabel: label, onPressIn: handleToolbarPressIn, onPressOut: handleToolbarPressOut, onPress: () => mentionState.onSelectSuggestion(suggestion), style: ({ pressed }) => [
+                            styles.mentionSuggestion,
+                            {
+                                backgroundColor: pressed
+                                    ? (suggestionTheme?.optionHighlightedBackgroundColor ??
+                                        'rgba(0, 122, 255, 0.12)')
+                                    : (suggestionTheme?.backgroundColor ?? '#F2F2F7'),
+                                borderColor: suggestionTheme?.borderColor ?? 'transparent',
+                                borderWidth: suggestionTheme?.borderWidth ?? 0,
+                                borderRadius: suggestionTheme?.borderRadius ?? 12,
+                            },
+                        ], children: ({ pressed }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                                        styles.mentionSuggestionTitle,
+                                        {
+                                            fontWeight: suggestionTheme?.fontWeight ?? '600',
+                                            color: pressed
+                                                ? (suggestionTheme?.optionHighlightedTextColor ??
+                                                    suggestionTheme?.optionTextColor ??
+                                                    '#000000')
+                                                : (suggestionTheme?.optionTextColor ??
+                                                    suggestionTheme?.textColor ??
+                                                    '#000000'),
+                                        },
+                                    ], children: label }), suggestion.subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                                        styles.mentionSuggestionSubtitle,
+                                        {
+                                            color: suggestionTheme?.optionSecondaryTextColor ??
+                                                '#8E8E93',
+                                        },
+                                    ], children: suggestion.subtitle })) : null] })) }, suggestion.key));
+                }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.scrollContent, keyboardShouldPersistTaps: 'always', onScrollBeginDrag: () => setMenuState(null), children: renderedItems.map((item) => {
                     if (item.type === 'separator') {
                         return renderSeparator(item.key);
                     }
@@ -683,7 +787,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
                         });
                     }
                     return renderButton(item.button, () => handleButtonPress(item.button));
-                }) }), menuState != null && menuGroup != null ? ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: true, animationType: 'fade', onRequestClose: () => setMenuState(null), children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.menuBackdrop, onPress: () => setMenuState(null), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                }) })), !shouldRenderMentionSuggestions && menuState != null && menuGroup != null ? ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: true, animationType: 'fade', onRequestClose: () => setMenuState(null), children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.menuBackdrop, onPress: () => setMenuState(null), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                             styles.menuCard,
                             {
                                 top: menuTop,
@@ -760,6 +864,31 @@ const styles = react_native_1.StyleSheet.create({
         paddingHorizontal: TOOLBAR_PADDING_H,
         minWidth: '100%',
     },
+    mentionSuggestionsContent: {
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+        alignItems: 'center',
+        minWidth: '100%',
+    },
+    mentionSuggestionsScroll: {
+        overflow: 'hidden',
+    },
+    mentionSuggestion: {
+        minWidth: 88,
+        minHeight: 40,
+        marginRight: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        justifyContent: 'center',
+    },
+    mentionSuggestionTitle: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    mentionSuggestionSubtitle: {
+        marginTop: 1,
+        fontSize: 12,
+    },
     buttonAnchor: {
         position: 'relative',
     },

package/dist/NativeRichTextEditor.d.ts

@@ -7,6 +7,8 @@ import { type EditorAddons } from './addons';
 import { type ImageNodeAttributes, type SchemaDefinition } from './schemas';
 export type NativeRichTextEditorHeightBehavior = 'fixed' | 'autoGrow';
 export type NativeRichTextEditorToolbarPlacement = 'keyboard' | 'inline';
+export type NativeRichTextEditorAutoCapitalize = 'none' | 'sentences' | 'words' | 'characters';
+export type NativeRichTextEditorKeyboardType = 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'ascii-capable' | 'numbers-and-punctuation' | 'url' | 'number-pad' | 'name-phone-pad' | 'decimal-pad' | 'twitter' | 'web-search' | 'visible-password' | 'ascii-capable-number-pad';
 export interface RemoteSelectionDecoration {
     clientId: number;
     anchor: number;
@@ -49,6 +51,12 @@ export interface NativeRichTextEditorProps {
     maxLength?: number;
     /** Whether to auto-focus on mount. */
     autoFocus?: boolean;
+    /** Controls native keyboard auto-capitalization. Defaults to sentences. */
+    autoCapitalize?: NativeRichTextEditorAutoCapitalize;
+    /** Controls native keyboard autocorrection. Defaults to the platform-specific editor default. */
+    autoCorrect?: boolean;
+    /** Controls the native keyboard layout. Defaults to the platform default keyboard. */
+    keyboardType?: NativeRichTextEditorKeyboardType;
     /** Controls whether the editor scrolls internally or grows with content. */
     heightBehavior?: NativeRichTextEditorHeightBehavior;
     /** Whether to show the formatting toolbar. Defaults to true. */

package/dist/NativeRichTextEditor.js

@@ -98,6 +98,19 @@ function resolveMentionSuggestionAttrs(suggestion, trigger) {
     }
     return attrs;
 }
+function mergeMentionSuggestionTheme(baseTheme, resolvedTheme) {
+    if (baseTheme == null && resolvedTheme == null) {
+        return undefined;
+    }
+    const merged = {
+        ...(baseTheme ?? {}),
+        ...(resolvedTheme ?? {}),
+    };
+    if (resolvedTheme?.textColor != null && resolvedTheme.optionTextColor == null) {
+        merged.optionTextColor = resolvedTheme.textColor;
+    }
+    return merged;
+}
 const AUTO_LINK_URL_REGEX = /(?:https?:\/\/|www\.)\S+/giu;
 const AUTO_LINK_INLINE_PLACEHOLDER = '\uFFFC';
 const AUTO_LINK_LEADING_BOUNDARY_CHARS = new Set(['(', '[', '{', '<', '"', "'"]);
@@ -495,7 +508,7 @@ function useSerializedValue(value, serialize, revision) {
     };
     return serialized;
 }
-exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, valueJSONRevision, schema, placeholder, editable = true, maxLength, autoFocus = false, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, autoDetectLinks = false, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
+exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, valueJSONRevision, schema, placeholder, editable = true, maxLength, autoFocus = false, autoCapitalize, autoCorrect, keyboardType, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, autoDetectLinks = false, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
     const bridgeRef = (0, react_1.useRef)(null);
     const nativeViewRef = (0, react_1.useRef)(null);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
@@ -1215,6 +1228,88 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             return bridgeRef.current.canRedo();
         },
     }), [insertImage, runAndApply]);
+    const activeMentionTrigger = mentionQueryEvent?.trigger || resolveMentionTrigger(addons);
+    const activeMentionSuggestions = (0, react_1.useMemo)(() => isFocused && mentionQueryEvent != null && addons?.mentions != null
+        ? filterMentionSuggestions(addons.mentions.suggestions ?? [], mentionQueryEvent.query, activeMentionTrigger)
+        : [], [activeMentionTrigger, addons?.mentions, isFocused, mentionQueryEvent]);
+    const inlineToolbarMentionTheme = theme?.mentions ?? addons?.mentions?.theme;
+    const activeMentionSuggestionThemes = (0, react_1.useMemo)(() => {
+        if (mentionQueryEvent == null ||
+            addons?.mentions == null ||
+            typeof addons.mentions.resolveTheme !== 'function' ||
+            activeMentionSuggestions.length === 0) {
+            return undefined;
+        }
+        const suggestionThemes = {};
+        for (const suggestion of activeMentionSuggestions) {
+            const selectionEvent = {
+                trigger: activeMentionTrigger,
+                suggestion,
+                attrs: resolveMentionSuggestionAttrs(suggestion, activeMentionTrigger),
+                range: mentionQueryEvent.range,
+            };
+            const attrs = resolveMentionSelectionAttrs(selectionEvent);
+            let resolvedTheme;
+            try {
+                const nextTheme = addons.mentions.resolveTheme({
+                    ...selectionEvent,
+                    attrs,
+                });
+                resolvedTheme = isRecord(nextTheme)
+                    ? nextTheme
+                    : undefined;
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('NativeRichTextEditor: mentions.resolveTheme threw', error);
+                }
+            }
+            const mergedTheme = mergeMentionSuggestionTheme(inlineToolbarMentionTheme, resolvedTheme);
+            if (mergedTheme != null) {
+                suggestionThemes[suggestion.key] = mergedTheme;
+            }
+        }
+        return Object.keys(suggestionThemes).length > 0 ? suggestionThemes : undefined;
+    }, [
+        activeMentionSuggestions,
+        activeMentionTrigger,
+        addons?.mentions,
+        inlineToolbarMentionTheme,
+        mentionQueryEvent,
+        resolveMentionSelectionAttrs,
+    ]);
+    const shouldPublishStandaloneMentionSuggestions = editable &&
+        !showToolbar &&
+        registeredToolbarFrames.length > 0 &&
+        mentionQueryEvent != null &&
+        activeMentionSuggestions.length > 0 &&
+        addons?.mentions != null;
+    (0, react_1.useEffect)(() => {
+        if (editorInstanceId === 0) {
+            return;
+        }
+        if (!shouldPublishStandaloneMentionSuggestions || mentionQueryEvent == null) {
+            (0, EditorToolbar_1.setEditorToolbarMentionState)(editorInstanceId, null);
+            return () => (0, EditorToolbar_1.setEditorToolbarMentionState)(editorInstanceId, null);
+        }
+        (0, EditorToolbar_1.setEditorToolbarMentionState)(editorInstanceId, {
+            trigger: activeMentionTrigger,
+            suggestions: activeMentionSuggestions,
+            theme: inlineToolbarMentionTheme,
+            suggestionThemes: activeMentionSuggestionThemes,
+            onSelectSuggestion: handleInlineMentionSuggestionPress,
+        });
+        return () => (0, EditorToolbar_1.setEditorToolbarMentionState)(editorInstanceId, null);
+    }, [
+        activeMentionSuggestions,
+        activeMentionSuggestionThemes,
+        activeMentionTrigger,
+        editorInstanceId,
+        handleInlineMentionSuggestionPress,
+        inlineToolbarMentionTheme,
+        mentionQueryEvent,
+        shouldPublishStandaloneMentionSuggestions,
+    ]);
     if (!isReady)
         return null;
     const isLinkActive = activeState.marks.link === true;
@@ -1258,19 +1353,13 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     };
     const inlineToolbarMarginTop = theme?.toolbar?.marginTop ?? 8;
     const inlineToolbarShowTopBorder = theme?.toolbar?.showTopBorder ?? false;
-    const inlineToolbarMentionTheme = theme?.mentions ?? addons?.mentions?.theme;
     const inlineToolbarContentTopBorderStyle = inlineToolbarShowTopBorder
         ? {
             borderTopWidth: theme?.toolbar?.borderWidth ?? react_native_1.StyleSheet.hairlineWidth,
             borderTopColor: theme?.toolbar?.borderColor ?? INLINE_TOOLBAR_BORDER_COLOR,
         }
         : null;
-    const inlineMentionSuggestions = toolbarPlacement === 'inline' &&
-        isFocused &&
-        mentionQueryEvent != null &&
-        addons?.mentions != null
-        ? filterMentionSuggestions(addons.mentions.suggestions ?? [], mentionQueryEvent.query, mentionQueryEvent.trigger || resolveMentionTrigger(addons))
-        : [];
+    const inlineMentionSuggestions = toolbarPlacement === 'inline' ? activeMentionSuggestions : [];
     const shouldShowInlineMentionSuggestions = shouldRenderJsToolbar &&
         toolbarPlacement === 'inline' &&
         isFocused &&
@@ -1315,34 +1404,38 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 inlineToolbarContentTopBorderStyle,
             ], children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.inlineMentionSuggestionsContent, keyboardShouldPersistTaps: 'always', children: inlineMentionSuggestions.map((suggestion) => {
                     const label = resolveMentionSuggestionLabel(suggestion, mentionQueryEvent?.trigger ?? resolveMentionTrigger(addons));
+                    const suggestionTheme = activeMentionSuggestionThemes?.[suggestion.key] ??
+                        inlineToolbarMentionTheme;
                     return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `native-editor-inline-mention-suggestion-${suggestion.key}`, onPress: () => handleInlineMentionSuggestionPress(suggestion), accessibilityRole: 'button', accessibilityLabel: label, style: ({ pressed }) => [
                             styles.inlineMentionSuggestion,
                             {
                                 backgroundColor: pressed
-                                    ? (inlineToolbarMentionTheme?.optionHighlightedBackgroundColor ??
+                                    ? (suggestionTheme?.optionHighlightedBackgroundColor ??
                                         'rgba(0, 122, 255, 0.12)')
-                                    : (inlineToolbarMentionTheme?.backgroundColor ??
+                                    : (suggestionTheme?.backgroundColor ??
                                         '#F2F2F7'),
-                                borderColor: inlineToolbarMentionTheme?.borderColor ??
+                                borderColor: suggestionTheme?.borderColor ??
                                     'transparent',
-                                borderWidth: inlineToolbarMentionTheme?.borderWidth ?? 0,
-                                borderRadius: inlineToolbarMentionTheme?.borderRadius ?? 12,
+                                borderWidth: suggestionTheme?.borderWidth ?? 0,
+                                borderRadius: suggestionTheme?.borderRadius ?? 12,
                             },
                         ], children: ({ pressed }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
                                         styles.inlineMentionSuggestionTitle,
                                         {
+                                            fontWeight: suggestionTheme?.fontWeight ??
+                                                '600',
                                             color: pressed
-                                                ? (inlineToolbarMentionTheme?.optionHighlightedTextColor ??
-                                                    inlineToolbarMentionTheme?.optionTextColor ??
+                                                ? (suggestionTheme?.optionHighlightedTextColor ??
+                                                    suggestionTheme?.optionTextColor ??
                                                     '#000000')
-                                                : (inlineToolbarMentionTheme?.optionTextColor ??
-                                                    inlineToolbarMentionTheme?.textColor ??
+                                                : (suggestionTheme?.optionTextColor ??
+                                                    suggestionTheme?.textColor ??
                                                     '#000000'),
                                         },
                                     ], children: label }), suggestion.subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
                                         styles.inlineMentionSuggestionSubtitle,
                                         {
-                                            color: inlineToolbarMentionTheme?.optionSecondaryTextColor ??
+                                            color: suggestionTheme?.optionSecondaryTextColor ??
                                                 '#8E8E93',
                                         },
                                     ], children: suggestion.subtitle })) : null] })) }, suggestion.key));
@@ -1372,7 +1465,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             }), onToggleStrike: () => runAndApply(() => bridgeRef.current?.toggleMark('strike') ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
             }), onToggleBulletList: () => runAndApply(() => bridgeRef.current?.toggleList('bulletList') ?? null), onToggleOrderedList: () => runAndApply(() => bridgeRef.current?.toggleList('orderedList') ?? null), onIndentList: () => runAndApply(() => bridgeRef.current?.indentListItem() ?? null), onOutdentList: () => runAndApply(() => bridgeRef.current?.outdentListItem() ?? null), onInsertHorizontalRule: () => runAndApply(() => bridgeRef.current?.insertNode('horizontalRule') ?? null), onInsertLineBreak: () => runAndApply(() => bridgeRef.current?.insertNode('hardBreak') ?? null), onUndo: () => runAndApply(() => bridgeRef.current?.undo() ?? null), onRedo: () => runAndApply(() => bridgeRef.current?.redo() ?? null) })) }));
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, containerStyle], children: [(0, jsx_runtime_1.jsx)(NativeEditorView, { ref: nativeViewRef, style: nativeViewStyle, editorId: editorInstanceId, placeholder: placeholder, editable: editable, autoFocus: autoFocus, showToolbar: showToolbar, toolbarPlacement: toolbarPlacement, heightBehavior: heightBehavior, allowImageResizing: allowImageResizing, themeJson: themeJson, addonsJson: addonsJson, toolbarItemsJson: toolbarItemsJson, remoteSelectionsJson: remoteSelectionsJson, toolbarFrameJson: toolbarFrameJson, editorUpdateJson: pendingNativeUpdate.json, editorUpdateRevision: pendingNativeUpdate.revision, onEditorUpdate: handleUpdate, onSelectionChange: handleSelectionChange, onFocusChange: handleFocusChange, onContentHeightChange: handleContentHeightChange, onToolbarAction: handleToolbarAction, onAddonEvent: handleAddonEvent }, DEV_NATIVE_VIEW_KEY), shouldRenderJsToolbar && jsToolbar] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, containerStyle], children: [(0, jsx_runtime_1.jsx)(NativeEditorView, { ref: nativeViewRef, style: nativeViewStyle, editorId: editorInstanceId, placeholder: placeholder, editable: editable, autoFocus: autoFocus, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, keyboardType: keyboardType, showToolbar: showToolbar, toolbarPlacement: toolbarPlacement, heightBehavior: heightBehavior, allowImageResizing: allowImageResizing, themeJson: themeJson, addonsJson: addonsJson, toolbarItemsJson: toolbarItemsJson, remoteSelectionsJson: remoteSelectionsJson, toolbarFrameJson: toolbarFrameJson, editorUpdateJson: pendingNativeUpdate.json, editorUpdateRevision: pendingNativeUpdate.revision, onEditorUpdate: handleUpdate, onSelectionChange: handleSelectionChange, onFocusChange: handleFocusChange, onContentHeightChange: handleContentHeightChange, onToolbarAction: handleToolbarAction, onAddonEvent: handleAddonEvent }, DEV_NATIVE_VIEW_KEY), shouldRenderJsToolbar && jsToolbar] }));
 });
 const styles = react_native_1.StyleSheet.create({
     container: {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { NativeRichTextEditor, type NativeRichTextEditorProps, type NativeRichTextEditorRef, type NativeRichTextEditorCaretRect, type NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, type RemoteSelectionDecoration, type LinkRequestContext, type ImageRequestContext, } from './NativeRichTextEditor';
+export { NativeRichTextEditor, type NativeRichTextEditorProps, type NativeRichTextEditorRef, type NativeRichTextEditorCaretRect, type NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, type NativeRichTextEditorAutoCapitalize, type NativeRichTextEditorKeyboardType, type RemoteSelectionDecoration, type LinkRequestContext, type ImageRequestContext, } from './NativeRichTextEditor';
 export { NativeProseViewer, type NativeProseViewerProps, type NativeProseViewerAddons, type NativeProseViewerMentionsAddonConfig, type NativeProseViewerMentionPrefix, type NativeProseViewerLinkPressEvent, type NativeProseViewerMentionRenderContext, type NativeProseViewerMentionPressEvent, } from './NativeProseViewer';
 export { EditorToolbar, DEFAULT_EDITOR_TOOLBAR_ITEMS, type EditorToolbarProps, type EditorToolbarItem, type EditorToolbarLeafItem, type EditorToolbarGroupChildItem, type EditorToolbarGroupItem, type EditorToolbarGroupPresentation, type EditorToolbarIcon, type EditorToolbarDefaultIconId, type EditorToolbarSFSymbolIcon, type EditorToolbarMaterialIcon, type EditorToolbarCommand, type EditorToolbarHeadingLevel, type EditorToolbarListType, } from './EditorToolbar';
 export type { EditorContentInsets, EditorTheme, EditorTextStyle, EditorLinkTheme, EditorHeadingTheme, EditorListTheme, EditorHorizontalRuleTheme, EditorMentionTheme, EditorToolbarTheme, EditorToolbarAppearance, EditorFontStyle, EditorFontWeight, } from './EditorTheme';

package/ios/NativeEditorExpoView.swift

@@ -1802,6 +1802,18 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
         focus()
     }
 
+    func setAutoCapitalize(_ autoCapitalize: String?) {
+        richTextView.textView.setAutoCapitalize(autoCapitalize)
+    }
+
+    func setAutoCorrect(_ autoCorrect: Bool?) {
+        richTextView.textView.setAutoCorrect(autoCorrect)
+    }
+
+    func setKeyboardType(_ keyboardType: String?) {
+        richTextView.textView.setKeyboardType(keyboardType)
+    }
+
     func setShowToolbar(_ showToolbar: Bool) {
         showsToolbar = showToolbar
         updateAccessoryToolbarVisibility()
@@ -1913,7 +1925,7 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
     // MARK: - Focus Commands
 
     func focus() {
-        richTextView.textView.becomeFirstResponder()
+        _ = richTextView.textView.becomeFirstResponder()
     }
 
     func blur() {
@@ -1956,7 +1968,7 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
     @objc private func textViewDidEndEditing(_ notification: Notification) {
         if shouldPreserveFocusAfterToolbarTouch() {
             DispatchQueue.main.async { [weak self] in
-                self?.richTextView.textView.becomeFirstResponder()
+                _ = self?.richTextView.textView.becomeFirstResponder()
             }
             return
         }

package/ios/NativeEditorModule.swift

@@ -340,6 +340,15 @@ public class NativeEditorModule: Module {
             Prop("autoFocus") { (view: NativeEditorExpoView, autoFocus: Bool) in
                 view.setAutoFocus(autoFocus)
             }
+            Prop("autoCapitalize") { (view: NativeEditorExpoView, autoCapitalize: String?) in
+                view.setAutoCapitalize(autoCapitalize)
+            }
+            Prop("autoCorrect") { (view: NativeEditorExpoView, autoCorrect: Bool?) in
+                view.setAutoCorrect(autoCorrect)
+            }
+            Prop("keyboardType") { (view: NativeEditorExpoView, keyboardType: String?) in
+                view.setKeyboardType(keyboardType)
+            }
             Prop("showToolbar") { (view: NativeEditorExpoView, showToolbar: Bool) in
                 view.setShowToolbar(showToolbar)
             }

package/ios/RichTextEditorView.swift

@@ -819,6 +819,13 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
         let entries: [TopLevelChildMetadata]
     }
 
+    private struct NativeTextMutation {
+        let from: UInt32
+        let to: UInt32
+        let replacementText: String
+        let resultingText: String
+    }
+
     private enum PositionCacheUpdate {
         case scan
         case invalidate
@@ -964,6 +971,8 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
     /// trailing UIKit text-storage callbacks that arrive on the next run loop.
     private var interceptedInputDepth = 0
     private var reconciliationWorkScheduled = false
+    private var nativeTextMutationCommitScheduled = false
+    private var pendingNativeTextMutation: NativeTextMutation?
 
     /// Coalesces selection sync until UIKit has finished resolving the
     /// current tap/drag gesture's final caret position.
@@ -1031,9 +1040,9 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
         // Configure the text view as a Rust-controlled editor surface.
         // UIKit smart-edit features mutate text storage outside our transaction
         // pipeline and can race with stored-mark typing after toolbar actions.
-        autocorrectionType = .no
-        autocapitalizationType = .sentences
-        spellCheckingType = .no
+        setAutoCorrect(nil)
+        setAutoCapitalize(nil)
+        setKeyboardType(nil)
         smartQuotesType = .no
         smartDashesType = .no
         smartInsertDeleteType = .no
@@ -1063,6 +1072,63 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
         refreshNativeSelectionChromeVisibility()
     }
 
+    func setAutoCapitalize(_ autoCapitalize: String?) {
+        switch autoCapitalize {
+        case "none":
+            autocapitalizationType = .none
+        case "words":
+            autocapitalizationType = .words
+        case "characters":
+            autocapitalizationType = .allCharacters
+        default:
+            autocapitalizationType = .sentences
+        }
+    }
+
+    func setAutoCorrect(_ autoCorrect: Bool?) {
+        let isEnabled = autoCorrect ?? false
+        autocorrectionType = isEnabled ? .yes : .no
+        spellCheckingType = isEnabled ? .default : .no
+    }
+
+    func setKeyboardType(_ keyboardType: String?) {
+        self.keyboardType = Self.resolvedKeyboardType(from: keyboardType)
+        if isFirstResponder {
+            reloadInputViews()
+        }
+    }
+
+    private static func resolvedKeyboardType(from keyboardType: String?) -> UIKeyboardType {
+        switch keyboardType {
+        case "ascii-capable":
+            return .asciiCapable
+        case "numbers-and-punctuation":
+            return .numbersAndPunctuation
+        case "url":
+            return .URL
+        case "number-pad":
+            return .numberPad
+        case "phone-pad":
+            return .phonePad
+        case "name-phone-pad":
+            return .namePhonePad
+        case "email-address":
+            return .emailAddress
+        case "decimal-pad", "numeric":
+            return .decimalPad
+        case "twitter":
+            return .twitter
+        case "web-search":
+            return .webSearch
+        case "ascii-capable-number-pad":
+            return .asciiCapableNumberPad
+        case "visible-password":
+            return .asciiCapable
+        default:
+            return .default
+        }
+    }
+
     override func didMoveToWindow() {
         super.didMoveToWindow()
         installImageSelectionTapDependencies()
@@ -2152,7 +2218,7 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
     func textViewDidChangeSelection(_ textView: UITextView) {
         guard textView === self else { return }
         ensureInternalTextViewDelegate()
-        guard !isApplyingRustState, !isComposing else { return }
+        guard !isApplyingRustState, !isComposing, !nativeTextMutationCommitScheduled else { return }
         if normalizeSelectionForEmptyBlockAutocapitalizationIfNeeded() {
             return
         }
@@ -2333,7 +2399,13 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
     }
 
     private func syncSelectionToRustAndNotifyDelegate() {
-        guard !isApplyingRustState, !isComposing, editorId != 0 else { return }
+        guard !isApplyingRustState,
+              !isComposing,
+              !nativeTextMutationCommitScheduled,
+              editorId != 0
+        else {
+            return
+        }
         guard let range = selectedTextRange else { return }
 
         let anchor = PositionBridge.textViewToScalar(range.start, in: self)
@@ -2940,6 +3012,94 @@ final class EditorTextView: UITextView, UITextViewDelegate, UIGestureRecognizerD
         applyUpdateJSON(updateJSON)
     }
 
+    private func nativeTextMutationFromAuthorizedDiff(
+        currentText: String
+    ) -> NativeTextMutation? {
+        let authorizedText = lastAuthorizedText
+        guard currentText != authorizedText else { return nil }
+
+        let authorized = authorizedText as NSString
+        let current = currentText as NSString
+        let sharedLength = min(authorized.length, current.length)
+        var prefix = 0
+        while prefix < sharedLength,
+              authorized.character(at: prefix) == current.character(at: prefix) {
+            prefix += 1
+        }
+
+        var authorizedEnd = authorized.length
+        var currentEnd = current.length
+        while authorizedEnd > prefix,
+              currentEnd > prefix,
+              authorized.character(at: authorizedEnd - 1) == current.character(at: currentEnd - 1) {
+            authorizedEnd -= 1
+            currentEnd -= 1
+        }
+
+        let replacementLength = currentEnd - prefix
+        guard replacementLength >= 0 else { return nil }
+        let replacementText = current.substring(
+            with: NSRange(location: prefix, length: replacementLength)
+        )
+
+        return NativeTextMutation(
+            from: PositionBridge.utf16OffsetToScalar(prefix, in: authorizedText),
+            to: PositionBridge.utf16OffsetToScalar(authorizedEnd, in: authorizedText),
+            replacementText: replacementText,
+            resultingText: currentText
+        )
+    }
+
+    private func shouldAdoptNativeTextStorageMutation() -> Bool {
+        isFirstResponder && isEditable
+    }
+
+    private func scheduleNativeTextMutationCommit(_ mutation: NativeTextMutation) {
+        pendingNativeTextMutation = mutation
+        guard !nativeTextMutationCommitScheduled else { return }
+
+        nativeTextMutationCommitScheduled = true
+        DispatchQueue.main.async { [weak self] in
+            guard let self else { return }
+            self.nativeTextMutationCommitScheduled = false
+            guard let mutation = self.pendingNativeTextMutation else { return }
+            self.pendingNativeTextMutation = nil
+
+            guard self.editorId != 0,
+                  !self.isApplyingRustState,
+                  !self.isInterceptingInput,
+                  !self.isComposing,
+                  self.shouldAdoptNativeTextStorageMutation()
+            else {
+                if self.textStorage.string != self.lastAuthorizedText {
+                    self.scheduleReconciliationFromRust()
+                }
+                return
+            }
+            guard self.textStorage.string == mutation.resultingText else {
+                if self.textStorage.string != self.lastAuthorizedText {
+                    self.scheduleReconciliationFromRust()
+                }
+                return
+            }
+
+            self.performInterceptedInput {
+                if mutation.from == mutation.to {
+                    guard !mutation.replacementText.isEmpty else { return }
+                    self.insertTextInRust(mutation.replacementText, at: mutation.from)
+                } else if mutation.replacementText.isEmpty {
+                    self.deleteScalarRangeInRust(from: mutation.from, to: mutation.to)
+                } else {
+                    self.replaceTextRangeInRust(
+                        from: mutation.from,
+                        to: mutation.to,
+                        with: mutation.replacementText
+                    )
+                }
+            }
+        }
+    }
+
     private func insertNodeInRust(_ nodeType: String) {
         guard let selection = currentScalarSelection() else { return }
         Self.inputLog.debug(
@@ -4386,6 +4546,13 @@ extension EditorTextView: NSTextStorageDelegate {
         let currentText = textStorage.string
         guard currentText != lastAuthorizedText else { return }
         currentTopLevelChildMetadata = nil
+
+        if shouldAdoptNativeTextStorageMutation(),
+           let mutation = nativeTextMutationFromAuthorizedDiff(currentText: currentText) {
+            scheduleNativeTextMutationCommit(mutation)
+            return
+        }
+
         let authorizedPreview = preview(lastAuthorizedText)
         let storagePreview = preview(currentText)
 

package/package.json

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