@apollohg/react-native-prose-editor 0.5.9 → 0.5.11

package/dist/EditorToolbar.js

@@ -1,11 +1,95 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_EDITOR_TOOLBAR_ITEMS = void 0;
+exports.isEditorToolbarFocusPreservationActive = isEditorToolbarFocusPreservationActive;
+exports.useEditorToolbarFrames = useEditorToolbarFrames;
+exports._setEditorToolbarFrameForTests = _setEditorToolbarFrameForTests;
+exports._resetEditorToolbarFrameRegistryForTests = _resetEditorToolbarFrameRegistryForTests;
+exports._beginEditorToolbarInteractionForTests = _beginEditorToolbarInteractionForTests;
+exports._endEditorToolbarInteractionForTests = _endEditorToolbarInteractionForTests;
 exports.EditorToolbar = EditorToolbar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const vector_icons_1 = require("@expo/vector-icons");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const editorToolbarFrames = new Map();
+const editorToolbarFrameListeners = new Set();
+let nextEditorToolbarRegistrationId = 1;
+let activeEditorToolbarInteractions = 0;
+let editorToolbarFocusPreserveUntil = 0;
+const EDITOR_TOOLBAR_FOCUS_PRESERVE_MS = 750;
+function areToolbarFramesEqual(left, right) {
+    return (left?.x === right?.x &&
+        left?.y === right?.y &&
+        left?.width === right?.width &&
+        left?.height === right?.height);
+}
+function notifyEditorToolbarFrameListeners() {
+    editorToolbarFrameListeners.forEach((listener) => listener());
+}
+function getEditorToolbarFramesSnapshot() {
+    return Array.from(editorToolbarFrames.values());
+}
+function registerEditorToolbarFrame(id, frame) {
+    if (frame == null || frame.width <= 0 || frame.height <= 0) {
+        if (editorToolbarFrames.delete(id)) {
+            notifyEditorToolbarFrameListeners();
+        }
+        return;
+    }
+    const currentFrame = editorToolbarFrames.get(id);
+    if (areToolbarFramesEqual(currentFrame, frame)) {
+        return;
+    }
+    editorToolbarFrames.set(id, frame);
+    notifyEditorToolbarFrameListeners();
+}
+function unregisterEditorToolbarFrame(id) {
+    if (editorToolbarFrames.delete(id)) {
+        notifyEditorToolbarFrameListeners();
+    }
+}
+function preserveEditorToolbarFocusForNextBlur() {
+    editorToolbarFocusPreserveUntil = Date.now() + EDITOR_TOOLBAR_FOCUS_PRESERVE_MS;
+}
+function beginEditorToolbarInteraction() {
+    activeEditorToolbarInteractions += 1;
+    preserveEditorToolbarFocusForNextBlur();
+}
+function endEditorToolbarInteraction() {
+    activeEditorToolbarInteractions = Math.max(0, activeEditorToolbarInteractions - 1);
+    preserveEditorToolbarFocusForNextBlur();
+}
+function isEditorToolbarFocusPreservationActive() {
+    return activeEditorToolbarInteractions > 0 || Date.now() <= editorToolbarFocusPreserveUntil;
+}
+function useEditorToolbarFrames() {
+    const [frames, setFrames] = (0, react_1.useState)(getEditorToolbarFramesSnapshot);
+    (0, react_1.useEffect)(() => {
+        const listener = () => setFrames(getEditorToolbarFramesSnapshot());
+        editorToolbarFrameListeners.add(listener);
+        listener();
+        return () => {
+            editorToolbarFrameListeners.delete(listener);
+        };
+    }, []);
+    return frames;
+}
+function _setEditorToolbarFrameForTests(id, frame) {
+    registerEditorToolbarFrame(id, frame);
+}
+function _resetEditorToolbarFrameRegistryForTests() {
+    editorToolbarFrames.clear();
+    activeEditorToolbarInteractions = 0;
+    editorToolbarFocusPreserveUntil = 0;
+    notifyEditorToolbarFrameListeners();
+}
+function _beginEditorToolbarInteractionForTests() {
+    beginEditorToolbarInteraction();
+}
+function _endEditorToolbarInteractionForTests() {
+    endEditorToolbarInteraction();
+}
 function defaultIcon(id) {
     return { type: 'default', id };
 }
@@ -109,16 +193,22 @@ const DEFAULT_MATERIAL_ICONS = {
     undo: 'undo',
     redo: 'redo',
 };
-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, }) {
+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 ?? {};
     const commands = activeState.commands ?? {};
     const allowedMarks = activeState.allowedMarks ?? [];
     const insertableNodes = activeState.insertableNodes ?? [];
+    const rootRef = (0, react_1.useRef)(null);
     const groupButtonRefs = (0, react_1.useRef)(new Map());
     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 toolbarInteractionActiveRef = (0, react_1.useRef)(false);
+    const registrationIdRef = (0, react_1.useRef)(null);
+    if (registrationIdRef.current == null) {
+        registrationIdRef.current = nextEditorToolbarRegistrationId++;
+    }
     const isMarkActive = (0, react_1.useCallback)((mark) => !!marks[mark], [marks]);
     const isInList = !!nodes['bulletList'] || !!nodes['orderedList'];
     const canIndentList = isInList && !!commands['indentList'];
@@ -372,6 +462,56 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
         };
     }, [expandedGroupKey, menuState?.groupKey, resolveButton, toolbarItems]);
     const resolvedShowTopBorder = showTopBorder ?? theme?.showTopBorder ?? true;
+    const publishToolbarFrame = (0, react_1.useCallback)(() => {
+        const registrationId = registrationIdRef.current;
+        const toolbar = rootRef.current;
+        if (!preserveEditorFocus || registrationId == null || !toolbar) {
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+            return;
+        }
+        if (typeof toolbar.measureInWindow !== 'function') {
+            return;
+        }
+        toolbar.measureInWindow((x, y, width, height) => {
+            registerEditorToolbarFrame(registrationId, { x, y, width, height });
+        });
+    }, [preserveEditorFocus]);
+    const handleToolbarLayout = (0, react_1.useCallback)(() => {
+        requestAnimationFrame(publishToolbarFrame);
+    }, [publishToolbarFrame]);
+    (0, react_1.useEffect)(() => {
+        if (!preserveEditorFocus) {
+            const registrationId = registrationIdRef.current;
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+            return;
+        }
+        const frame = requestAnimationFrame(publishToolbarFrame);
+        return () => cancelAnimationFrame(frame);
+    }, [
+        expandedGroupKey,
+        menuState?.groupKey,
+        preserveEditorFocus,
+        publishToolbarFrame,
+        renderedItems.length,
+        windowHeight,
+        windowWidth,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const registrationId = registrationIdRef.current;
+        return () => {
+            if (toolbarInteractionActiveRef.current) {
+                toolbarInteractionActiveRef.current = false;
+                endEditorToolbarInteraction();
+            }
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         if (expandedGroupKey != null && !groupsByKey.has(expandedGroupKey)) {
             setExpandedGroupKey(null);
@@ -389,6 +529,18 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
         }
         setMenuState(null);
     }, []);
+    const handleToolbarPressIn = (0, react_1.useCallback)(() => {
+        if (preserveEditorFocus && !toolbarInteractionActiveRef.current) {
+            toolbarInteractionActiveRef.current = true;
+            beginEditorToolbarInteraction();
+        }
+    }, [preserveEditorFocus]);
+    const handleToolbarPressOut = (0, react_1.useCallback)(() => {
+        if (preserveEditorFocus && toolbarInteractionActiveRef.current) {
+            toolbarInteractionActiveRef.current = false;
+            endEditorToolbarInteraction();
+        }
+    }, [preserveEditorFocus]);
     const handleGroupPress = (0, react_1.useCallback)((group) => {
         if (group.isDisabled) {
             return;
@@ -442,7 +594,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
                     else {
                         groupButtonRefs.current.delete(anchorGroupKey);
                     }
-                }, collapsable: false, style: styles.buttonAnchor, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, disabled: button.isDisabled, style: [
+                }, collapsable: false, style: styles.buttonAnchor, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPressIn: handleToolbarPressIn, onPressOut: handleToolbarPressOut, onPress: onPress, disabled: button.isDisabled, style: [
                         styles.button,
                         {
                             borderRadius: theme?.buttonBorderRadius ?? BUTTON_RADIUS,
@@ -460,7 +612,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
             styles.separator,
             theme?.separatorColor != null ? { backgroundColor: theme.separatorColor } : null,
         ] }, key));
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: rootRef, collapsable: false, onLayout: handleToolbarLayout, style: [
             styles.container,
             !resolvedShowTopBorder && styles.containerWithoutTopBorder,
             theme?.backgroundColor != null ? { backgroundColor: theme.backgroundColor } : null,
@@ -512,7 +664,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
                                 : button.isDisabled
                                     ? disabledColor
                                     : defaultColor;
-                            return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => handleButtonPress(button), disabled: button.isDisabled, style: ({ pressed }) => [
+                            return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPressIn: handleToolbarPressIn, onPressOut: handleToolbarPressOut, onPress: () => handleButtonPress(button), disabled: button.isDisabled, style: ({ pressed }) => [
                                     styles.menuItem,
                                     button.isActive && {
                                         backgroundColor: theme?.buttonActiveBackgroundColor ?? ACTIVE_BG,

package/dist/NativeRichTextEditor.d.ts

@@ -135,6 +135,8 @@ export interface NativeRichTextEditorRef {
     getContentJson(): DocumentJSON;
     /** Get the plain text content (no markup). */
     getTextContent(): string;
+    /** Get the current caret rectangle in editor-local layout coordinates. */
+    getCaretRect(): Promise<NativeRichTextEditorCaretRect | null>;
     /** Undo the last operation. */
     undo(): void;
     /** Redo the last undone operation. */
@@ -144,4 +146,18 @@ export interface NativeRichTextEditorRef {
     /** Check if redo is available. */
     canRedo(): boolean;
 }
+export interface NativeRichTextEditorCaretRect {
+    /** Left edge of the caret, relative to the editor root view. */
+    x: number;
+    /** Top edge of the caret, relative to the editor root view. */
+    y: number;
+    /** Caret width. */
+    width: number;
+    /** Caret height. */
+    height: number;
+    /** Current editor root view width. */
+    editorWidth: number;
+    /** Current editor root view height. */
+    editorHeight: number;
+}
 export declare const NativeRichTextEditor: React.ForwardRefExoticComponent<NativeRichTextEditorProps & React.RefAttributes<NativeRichTextEditorRef>>;

package/dist/NativeRichTextEditor.js

@@ -423,6 +423,44 @@ function serializeRemoteSelections(remoteSelections) {
     }
     return stringifyCachedJson(remoteSelections);
 }
+function areToolbarFramesEqual(left, right) {
+    return (left?.x === right?.x &&
+        left?.y === right?.y &&
+        left?.width === right?.width &&
+        left?.height === right?.height);
+}
+function serializeToolbarFrames(frames) {
+    if (!frames || frames.length === 0) {
+        return undefined;
+    }
+    return JSON.stringify(frames.length === 1 ? frames[0] : { frames });
+}
+function parseCaretRectJson(raw) {
+    if (!raw) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        const x = typeof parsed.x === 'number' ? parsed.x : null;
+        const y = typeof parsed.y === 'number' ? parsed.y : null;
+        const width = typeof parsed.width === 'number' ? parsed.width : null;
+        const height = typeof parsed.height === 'number' ? parsed.height : null;
+        const editorWidth = typeof parsed.editorWidth === 'number' ? parsed.editorWidth : null;
+        const editorHeight = typeof parsed.editorHeight === 'number' ? parsed.editorHeight : null;
+        if (x == null ||
+            y == null ||
+            width == null ||
+            height == null ||
+            editorWidth == null ||
+            editorHeight == null) {
+            return null;
+        }
+        return { x, y, width, height, editorWidth, editorHeight };
+    }
+    catch {
+        return null;
+    }
+}
 const serializedJsonCache = new WeakMap();
 function stringifyCachedJson(value) {
     if (value != null && typeof value === 'object') {
@@ -463,7 +501,9 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     const [isReady, setIsReady] = (0, react_1.useState)(false);
     const [editorInstanceId, setEditorInstanceId] = (0, react_1.useState)(0);
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const [toolbarFrameJson, setToolbarFrameJson] = (0, react_1.useState)(undefined);
+    const isFocusedRef = (0, react_1.useRef)(false);
+    const [inlineToolbarFrame, setInlineToolbarFrame] = (0, react_1.useState)(null);
+    const registeredToolbarFrames = (0, EditorToolbar_1.useEditorToolbarFrames)();
     const [pendingNativeUpdate, setPendingNativeUpdate] = (0, react_1.useState)({
         json: undefined,
         revision: 0,
@@ -745,21 +785,21 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     const updateToolbarFrame = (0, react_1.useCallback)(() => {
         const toolbar = toolbarRef.current;
         if (!toolbar) {
-            setToolbarFrameJson(undefined);
+            setInlineToolbarFrame(null);
             return;
         }
         toolbar.measureInWindow((x, y, width, height) => {
             if (width <= 0 || height <= 0) {
-                setToolbarFrameJson(undefined);
+                setInlineToolbarFrame(null);
                 return;
             }
-            const nextJson = JSON.stringify({ x, y, width, height });
-            setToolbarFrameJson((prev) => (prev === nextJson ? prev : nextJson));
+            const nextFrame = { x, y, width, height };
+            setInlineToolbarFrame((prev) => areToolbarFramesEqual(prev, nextFrame) ? prev : nextFrame);
         });
     }, []);
     (0, react_1.useEffect)(() => {
         if (!(showToolbar && toolbarPlacement === 'inline' && isFocused && editable)) {
-            setToolbarFrameJson(undefined);
+            setInlineToolbarFrame(null);
             return;
         }
         const frame = requestAnimationFrame(() => {
@@ -836,19 +876,40 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         }
         onSelectionChangeRef.current?.(nextSelection);
     }, [syncSelectionStateFromUpdate]);
+    const refocusAfterToolbarInteraction = (0, react_1.useCallback)(() => {
+        nativeViewRef.current?.focus?.();
+        requestAnimationFrame(() => {
+            nativeViewRef.current?.focus?.();
+        });
+        setTimeout(() => {
+            nativeViewRef.current?.focus?.();
+        }, 50);
+    }, []);
     const handleFocusChange = (0, react_1.useCallback)((event) => {
         const { isFocused: focused } = event.nativeEvent;
+        if (!focused &&
+            editable &&
+            isFocusedRef.current &&
+            (0, EditorToolbar_1.isEditorToolbarFocusPreservationActive)()) {
+            setIsFocused(true);
+            refocusAfterToolbarInteraction();
+            return;
+        }
+        const wasFocused = isFocusedRef.current;
+        isFocusedRef.current = focused;
         setIsFocused(focused);
         if (!focused) {
             setMentionQueryEvent(null);
         }
         if (focused) {
-            onFocusRef.current?.();
+            if (!wasFocused) {
+                onFocusRef.current?.();
+            }
         }
-        else {
+        else if (wasFocused) {
             onBlurRef.current?.();
         }
-    }, []);
+    }, [editable, refocusAfterToolbarInteraction]);
     (0, react_1.useEffect)(() => {
         if (addons?.mentions != null) {
             return;
@@ -1130,6 +1191,13 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 return '';
             return bridgeRef.current.getHtml().replace(/<[^>]+>/g, '');
         },
+        async getCaretRect() {
+            const nativeView = nativeViewRef.current;
+            if (!nativeView?.getCaretRect)
+                return null;
+            const raw = await Promise.resolve(nativeView.getCaretRect());
+            return parseCaretRectJson(raw);
+        },
         undo() {
             runAndApply(() => bridgeRef.current?.undo() ?? null);
         },
@@ -1219,6 +1287,14 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         nativeViewStyleParts.push({ height: autoGrowHeight });
     }
     const nativeViewStyle = nativeViewStyleParts.length <= 1 ? nativeViewStyleParts[0] : nativeViewStyleParts;
+    const toolbarFrameJson = serializeToolbarFrames(isFocused && editable
+        ? [
+            ...(toolbarPlacement === 'inline' && inlineToolbarFrame != null
+                ? [inlineToolbarFrame]
+                : []),
+            ...registeredToolbarFrames,
+        ]
+        : undefined);
     const jsToolbar = ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: toolbarRef, testID: 'native-editor-js-toolbar', style: [
             styles.inlineToolbar,
             { marginTop: inlineToolbarMarginTop },
@@ -1270,7 +1346,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                                                 '#8E8E93',
                                         },
                                     ], children: suggestion.subtitle })) : null] })) }, suggestion.key));
-                }) }) })) : ((0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { activeState: activeState, historyState: historyState, toolbarItems: toolbarItems, theme: theme?.toolbar, showTopBorder: inlineToolbarShowTopBorder, onToggleMark: (mark) => runAndApply(() => bridgeRef.current?.toggleMark(mark) ?? null, {
+                }) }) })) : ((0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { activeState: activeState, historyState: historyState, toolbarItems: toolbarItems, theme: theme?.toolbar, showTopBorder: inlineToolbarShowTopBorder, preserveEditorFocus: false, onToggleMark: (mark) => runAndApply(() => bridgeRef.current?.toggleMark(mark) ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
             }), onToggleListType: (listType) => runAndApply(() => bridgeRef.current?.toggleList(listType) ?? null), onToggleHeading: (level) => runAndApply(() => bridgeRef.current?.toggleHeading(level) ?? null), onToggleBlockquote: () => runAndApply(() => bridgeRef.current?.toggleBlockquote() ?? null), onInsertNodeType: (nodeType) => runAndApply(() => bridgeRef.current?.insertNode(nodeType) ?? null), onRunCommand: (command) => {
                 switch (command) {
@@ -1296,7 +1372,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: toolbarPlacement === 'inline' && isFocused ? toolbarFrameJson : undefined, 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, 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 NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, type RemoteSelectionDecoration, type LinkRequestContext, type ImageRequestContext, } from './NativeRichTextEditor';
+export { NativeRichTextEditor, type NativeRichTextEditorProps, type NativeRichTextEditorRef, type NativeRichTextEditorCaretRect, type NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, 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

@@ -1626,7 +1626,8 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
         inputViewStyle: .keyboard
     )
     private let accessoryPlaceholder = EditorAccessoryPlaceholderView(frame: .zero)
-    private var toolbarFrameInWindow: CGRect?
+    private var toolbarFramesInWindow: [CGRect] = []
+    private var lastToolbarTouchUptime: TimeInterval = -Double.infinity
     private var didApplyAutoFocus = false
     private var toolbarState = NativeToolbarState.empty
     private var toolbarItems: [NativeToolbarItem] = NativeToolbarItem.defaults
@@ -1855,17 +1856,32 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
         lastToolbarFrameJSON = toolbarFrameJson
         guard let toolbarFrameJson,
               let data = toolbarFrameJson.data(using: .utf8),
-              let raw = try? JSONSerialization.jsonObject(with: data) as? [String: Any],
-              let x = (raw["x"] as? NSNumber)?.doubleValue,
+              let raw = try? JSONSerialization.jsonObject(with: data) as? [String: Any]
+        else {
+            toolbarFramesInWindow = []
+            return
+        }
+
+        if let frameDictionaries = raw["frames"] as? [[String: Any]] {
+            toolbarFramesInWindow = frameDictionaries.compactMap(Self.toolbarFrame(from:))
+            return
+        }
+
+        toolbarFramesInWindow = Self.toolbarFrame(from: raw).map { [$0] } ?? []
+    }
+
+    private static func toolbarFrame(from raw: [String: Any]) -> CGRect? {
+        guard let x = (raw["x"] as? NSNumber)?.doubleValue,
               let y = (raw["y"] as? NSNumber)?.doubleValue,
               let width = (raw["width"] as? NSNumber)?.doubleValue,
-              let height = (raw["height"] as? NSNumber)?.doubleValue
+              let height = (raw["height"] as? NSNumber)?.doubleValue,
+              width > 0,
+              height > 0
         else {
-            toolbarFrameInWindow = nil
-            return
+            return nil
         }
 
-        toolbarFrameInWindow = CGRect(x: x, y: y, width: width, height: height)
+        return CGRect(x: x, y: y, width: width, height: height)
     }
 
     func setPendingEditorUpdateJson(_ editorUpdateJson: String?) {
@@ -1904,6 +1920,30 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
         richTextView.textView.resignFirstResponder()
     }
 
+    func getCaretRectJson() -> String? {
+        layoutIfNeeded()
+        richTextView.layoutIfNeeded()
+
+        guard let caretRect = richTextView.currentCaretRect() else {
+            return nil
+        }
+        let editorRect = richTextView.convert(caretRect, to: self)
+        let payload: [String: Any] = [
+            "x": editorRect.minX,
+            "y": editorRect.minY,
+            "width": editorRect.width,
+            "height": editorRect.height,
+            "editorWidth": bounds.width,
+            "editorHeight": bounds.height,
+        ]
+        guard let data = try? JSONSerialization.data(withJSONObject: payload),
+              let json = String(data: data, encoding: .utf8)
+        else {
+            return nil
+        }
+        return json
+    }
+
     // MARK: - Focus Notifications
 
     @objc private func textViewDidBeginEditing(_ notification: Notification) {
@@ -1914,6 +1954,13 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
     }
 
     @objc private func textViewDidEndEditing(_ notification: Notification) {
+        if shouldPreserveFocusAfterToolbarTouch() {
+            DispatchQueue.main.async { [weak self] in
+                self?.richTextView.textView.becomeFirstResponder()
+            }
+            return
+        }
+
         uninstallOutsideTapRecognizer()
         richTextView.textView.refreshSelectionVisualState()
         clearMentionQueryStateAndHidePopover()
@@ -1952,6 +1999,9 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
         guard gestureRecognizer === outsideTapGestureRecognizer else { return true }
         guard let tapWindow = gestureWindow ?? window else { return true }
         let locationInWindow = touch.location(in: tapWindow)
+        if isLocationInStandaloneToolbarFrame(locationInWindow) {
+            markRecentToolbarTouch()
+        }
         let result = shouldHandleOutsideTap(
             locationInWindow: locationInWindow,
             touchedView: touch.view
@@ -1959,6 +2009,18 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
         return result
     }
 
+    private func markRecentToolbarTouch() {
+        lastToolbarTouchUptime = ProcessInfo.processInfo.systemUptime
+    }
+
+    private func shouldPreserveFocusAfterToolbarTouch() -> Bool {
+        ProcessInfo.processInfo.systemUptime - lastToolbarTouchUptime <= 0.75
+    }
+
+    private func isLocationInStandaloneToolbarFrame(_ locationInWindow: CGPoint) -> Bool {
+        toolbarFramesInWindow.contains(where: { $0.contains(locationInWindow) })
+    }
+
     private func shouldHandleOutsideTap(
         locationInWindow: CGPoint,
         touchedView: UIView?
@@ -1975,7 +2037,7 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
         if let touchedView, touchedView.isDescendant(of: accessoryToolbar) {
             return false
         }
-        if let toolbarFrameInWindow, toolbarFrameInWindow.contains(locationInWindow) {
+        if isLocationInStandaloneToolbarFrame(locationInWindow) {
             return false
         }
         return true

package/ios/NativeEditorModule.swift

@@ -386,6 +386,9 @@ public class NativeEditorModule: Module {
             AsyncFunction("blur") { (view: NativeEditorExpoView) in
                 view.blur()
             }
+            AsyncFunction("getCaretRect") { (view: NativeEditorExpoView) -> String? in
+                view.getCaretRectJson()
+            }
         }
 
         View(NativeProseViewerExpoView.self) {