@apollohg/react-native-rich-text-editor 2.0.0

package/dist/useEditorToolbarPresentation.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorToolbarPresentation = useEditorToolbarPresentation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const EditorToolbarVisuals_1 = require("./EditorToolbarVisuals");
+function useEditorToolbarPresentation(context) {
+    const { menuState, groupsByKey, theme, windowHeight, windowWidth, groupButtonRefs, handleToolbarPressIn, handleToolbarPressOut, handleGroupPress, handleButtonPress, rootRef, handleToolbarLayout, resolvedShowTopBorder, startItems, shouldRenderMentionSuggestions, mentionState, setMenuState, scrollItems, endItems, menuCardRef, handleMenuLayout, } = context;
+    const menuGroup = menuState != null ? (groupsByKey.get(menuState.groupKey) ?? null) : null;
+    const menuHeight = menuGroup ? menuGroup.children.length * 40 + 16 : 0;
+    // Sizing contract shared with ios/NativeEditorExpoView.swift
+    // (resolvedToolbarHeight/resolvedButtonSize) and
+    // android/NativeToolbar.kt (resolvedToolbarHeightDp/resolvedButtonSizeDp):
+    // an explicit theme height is honored as-is; buttons are
+    // max(1, min(MAX_BUTTON_SIZE, height - BUTTON_HEIGHT_INSET)).
+    const resolvedToolbarHeight = Math.max(theme?.height ?? EditorToolbarVisuals_1.BUTTON_VISIBLE + EditorToolbarVisuals_1.TOOLBAR_PADDING_V * 2, 1);
+    const resolvedButtonHeight = theme?.height == null
+        ? EditorToolbarVisuals_1.BUTTON_VISIBLE
+        : Math.max(1, Math.min(EditorToolbarVisuals_1.MAX_BUTTON_SIZE, resolvedToolbarHeight - EditorToolbarVisuals_1.BUTTON_HEIGHT_INSET));
+    const resolvedToolbarPaddingV = theme?.height == null
+        ? EditorToolbarVisuals_1.TOOLBAR_PADDING_V
+        : Math.max(0, (resolvedToolbarHeight - resolvedButtonHeight) / 2);
+    const resolvedSeparatorHeight = Math.max(16, resolvedButtonHeight - 12);
+    const menuTop = menuState == null
+        ? 0
+        : Math.max(EditorToolbarVisuals_1.MENU_MARGIN, Math.min(menuState.y + menuState.height + 8, windowHeight - menuHeight - EditorToolbarVisuals_1.MENU_MARGIN));
+    const menuLeft = menuState == null
+        ? 0
+        : Math.max(EditorToolbarVisuals_1.MENU_MARGIN, Math.min(menuState.x + menuState.width - EditorToolbarVisuals_1.MENU_WIDTH, windowWidth - EditorToolbarVisuals_1.MENU_WIDTH - EditorToolbarVisuals_1.MENU_MARGIN));
+    const resolveButtonVisuals = (button) => {
+        const activeColor = button.buttonStyle?.activeColor ?? theme?.buttonActiveColor ?? EditorToolbarVisuals_1.ACTIVE_COLOR;
+        const defaultColor = button.buttonStyle?.color ?? theme?.buttonColor ?? EditorToolbarVisuals_1.DEFAULT_COLOR;
+        const disabledColor = button.buttonStyle?.disabledColor ?? theme?.buttonDisabledColor ?? EditorToolbarVisuals_1.DISABLED_COLOR;
+        const backgroundColor = button.buttonStyle?.backgroundColor ?? theme?.buttonBackgroundColor ?? 'transparent';
+        const activeBackgroundColor = button.buttonStyle?.activeBackgroundColor ??
+            theme?.buttonActiveBackgroundColor ??
+            EditorToolbarVisuals_1.ACTIVE_BG;
+        const disabledBackgroundColor = button.buttonStyle?.disabledBackgroundColor ??
+            theme?.buttonDisabledBackgroundColor ??
+            (button.isActive ? activeBackgroundColor : backgroundColor);
+        const requestedIconSize = button.buttonStyle?.iconSize ?? theme?.buttonIconSize;
+        return {
+            color: button.isDisabled ? disabledColor : button.isActive ? activeColor : defaultColor,
+            backgroundColor: button.isDisabled
+                ? disabledBackgroundColor
+                : button.isActive
+                    ? activeBackgroundColor
+                    : backgroundColor,
+            iconSize: requestedIconSize != null &&
+                Number.isFinite(requestedIconSize) &&
+                requestedIconSize > 0
+                ? Math.min(requestedIconSize, resolvedButtonHeight)
+                : undefined,
+            borderRadius: Math.max(0, button.buttonStyle?.borderRadius ?? theme?.buttonBorderRadius ?? EditorToolbarVisuals_1.BUTTON_RADIUS),
+        };
+    };
+    const renderButton = (button, onPress, options) => {
+        const visuals = resolveButtonVisuals(button);
+        const anchorGroupKey = options?.anchorGroupKey;
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: anchorGroupKey == null
+                ? undefined
+                : (node) => {
+                    if (node) {
+                        groupButtonRefs.current.set(anchorGroupKey, node);
+                    }
+                    else {
+                        groupButtonRefs.current.delete(anchorGroupKey);
+                    }
+                }, collapsable: false, style: EditorToolbarVisuals_1.styles.buttonAnchor, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPressIn: handleToolbarPressIn, onPressOut: handleToolbarPressOut, onPress: onPress, disabled: button.isDisabled, style: [
+                        EditorToolbarVisuals_1.styles.button,
+                        {
+                            height: resolvedButtonHeight,
+                            borderRadius: visuals.borderRadius,
+                            backgroundColor: visuals.backgroundColor,
+                        },
+                    ], activeOpacity: 0.5, accessibilityRole: 'button', accessibilityLabel: button.label, accessibilityState: {
+                        selected: button.isActive,
+                        disabled: button.isDisabled,
+                        expanded: options?.showsDisclosure ? options.expanded : undefined,
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(EditorToolbarVisuals_1.ToolbarIcon, { icon: button.icon, color: visuals.color, size: visuals.iconSize }) }) }), options?.showsDisclosure ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [EditorToolbarVisuals_1.styles.groupDisclosure, { color: visuals.color }], children: '\u25BE' })) : null] }, button.key));
+    };
+    const renderSeparator = (key) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            EditorToolbarVisuals_1.styles.separator,
+            { height: resolvedSeparatorHeight },
+            theme?.separatorColor != null ? { backgroundColor: theme.separatorColor } : null,
+        ] }, key));
+    const renderToolbarItems = (items) => items.map((item) => {
+        if (item.type === 'separator') {
+            return renderSeparator(item.key);
+        }
+        if (item.type === 'group') {
+            return renderButton({
+                key: item.group.key,
+                label: item.group.label,
+                icon: item.group.icon,
+                buttonStyle: item.group.buttonStyle,
+                isActive: item.group.isActive,
+                isDisabled: item.group.isDisabled,
+            }, () => handleGroupPress(item.group), {
+                anchorGroupKey: item.group.key,
+                showsDisclosure: true,
+                expanded: item.group.isOpen,
+            });
+        }
+        return renderButton(item.button, () => handleButtonPress(item.button));
+    });
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: rootRef, testID: 'editor-toolbar-root', collapsable: false, onLayout: handleToolbarLayout, style: [
+            EditorToolbarVisuals_1.styles.container,
+            !resolvedShowTopBorder && EditorToolbarVisuals_1.styles.containerWithoutTopBorder,
+            {
+                minHeight: resolvedToolbarHeight,
+                paddingVertical: resolvedToolbarPaddingV,
+            },
+            theme?.backgroundColor != null ? { backgroundColor: theme.backgroundColor } : null,
+            theme?.borderColor != null
+                ? resolvedShowTopBorder
+                    ? { borderTopColor: theme.borderColor }
+                    : null
+                : null,
+            theme?.borderWidth != null
+                ? resolvedShowTopBorder
+                    ? { borderTopWidth: theme.borderWidth }
+                    : null
+                : null,
+            {
+                borderRadius: theme?.borderRadius ?? EditorToolbarVisuals_1.TOOLBAR_RADIUS,
+            },
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: EditorToolbarVisuals_1.styles.toolbarRow, children: [startItems.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [EditorToolbarVisuals_1.styles.fixedSection, EditorToolbarVisuals_1.styles.startFixedSection], children: renderToolbarItems(startItems) })) : null, shouldRenderMentionSuggestions && mentionState != null ? ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { testID: 'editor-toolbar-mention-suggestions', horizontal: true, showsHorizontalScrollIndicator: false, style: [
+                            EditorToolbarVisuals_1.styles.scrollSection,
+                            EditorToolbarVisuals_1.styles.mentionSuggestionsScroll,
+                            {
+                                backgroundColor: mentionState.theme?.suggestions?.backgroundColor ??
+                                    'transparent',
+                                borderColor: mentionState.theme?.suggestions?.borderColor ?? 'transparent',
+                                borderWidth: mentionState.theme?.suggestions?.borderWidth ?? 0,
+                                borderRadius: mentionState.theme?.suggestions?.borderRadius ?? 0,
+                            },
+                            mentionState.theme?.suggestions?.shadowColor != null
+                                ? {
+                                    shadowColor: mentionState.theme.suggestions.shadowColor,
+                                    shadowOpacity: 0.14,
+                                    shadowRadius: 12,
+                                    shadowOffset: { width: 0, height: 4 },
+                                    elevation: 8,
+                                }
+                                : null,
+                        ], contentContainerStyle: EditorToolbarVisuals_1.styles.mentionSuggestionsContent, keyboardShouldPersistTaps: 'always', children: mentionState.suggestions.map((suggestion) => {
+                            const label = (0, EditorToolbarVisuals_1.resolveMentionSuggestionDisplayLabel)(suggestion, mentionState.trigger);
+                            const optionTheme = (mentionState.suggestionThemes?.[suggestion.key] ??
+                                mentionState.theme)?.suggestions?.option;
+                            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 }) => [
+                                    EditorToolbarVisuals_1.styles.mentionSuggestion,
+                                    {
+                                        backgroundColor: pressed
+                                            ? (optionTheme?.highlightedBackgroundColor ??
+                                                'rgba(0, 122, 255, 0.12)')
+                                            : (optionTheme?.backgroundColor ?? '#F2F2F7'),
+                                        borderColor: optionTheme?.borderColor ?? 'transparent',
+                                        borderWidth: optionTheme?.borderWidth ?? 0,
+                                        borderRadius: optionTheme?.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: [
+                                                EditorToolbarVisuals_1.styles.mentionSuggestionTitle,
+                                                {
+                                                    fontWeight: optionTheme?.fontWeight ?? '600',
+                                                    color: pressed
+                                                        ? (optionTheme?.highlightedTextColor ??
+                                                            optionTheme?.textColor ??
+                                                            '#000000')
+                                                        : (optionTheme?.textColor ?? '#000000'),
+                                                },
+                                            ], children: label }), suggestion.subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                                                EditorToolbarVisuals_1.styles.mentionSuggestionSubtitle,
+                                                {
+                                                    color: optionTheme?.secondaryTextColor ??
+                                                        '#8E8E93',
+                                                },
+                                            ], children: suggestion.subtitle })) : null] })) }, suggestion.key));
+                        }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: EditorToolbarVisuals_1.styles.scrollSection, contentContainerStyle: EditorToolbarVisuals_1.styles.scrollContent, keyboardShouldPersistTaps: 'always', onScrollBeginDrag: () => setMenuState(null), children: renderToolbarItems(scrollItems) })), endItems.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [EditorToolbarVisuals_1.styles.fixedSection, EditorToolbarVisuals_1.styles.endFixedSection], children: renderToolbarItems(endItems) })) : null] }), !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: EditorToolbarVisuals_1.styles.menuBackdrop, onPress: () => setMenuState(null), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: menuCardRef, testID: 'editor-toolbar-menu-card', collapsable: false, onLayout: handleMenuLayout, style: [
+                            EditorToolbarVisuals_1.styles.menuCard,
+                            {
+                                top: menuTop,
+                                left: menuLeft,
+                                backgroundColor: theme?.backgroundColor ?? EditorToolbarVisuals_1.TOOLBAR_BG,
+                                borderColor: theme?.borderColor ?? EditorToolbarVisuals_1.MENU_BORDER,
+                            },
+                        ], children: menuGroup.children.map((button) => {
+                            const visuals = resolveButtonVisuals(button);
+                            return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPressIn: handleToolbarPressIn, onPressOut: handleToolbarPressOut, onPress: () => handleButtonPress(button), disabled: button.isDisabled, style: ({ pressed }) => [
+                                    EditorToolbarVisuals_1.styles.menuItem,
+                                    {
+                                        backgroundColor: visuals.backgroundColor,
+                                    },
+                                    pressed &&
+                                        !button.isDisabled && {
+                                        opacity: 0.75,
+                                    },
+                                ], accessibilityRole: 'button', accessibilityLabel: button.label, accessibilityState: {
+                                    selected: button.isActive,
+                                    disabled: button.isDisabled,
+                                }, children: [(0, jsx_runtime_1.jsx)(EditorToolbarVisuals_1.ToolbarIcon, { icon: button.icon, color: visuals.color, size: visuals.iconSize }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [EditorToolbarVisuals_1.styles.menuLabel, { color: visuals.color }], children: button.label })] }, button.key));
+                        }) }) }) })) : null] }));
+}

package/dist/useEditorToolbarState.d.ts

@@ -0,0 +1,63 @@
+import { View } from 'react-native';
+import { type EditorToolbarProps, type ToolbarMenuState } from './EditorToolbarTypes';
+export declare function useEditorToolbarState({ 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): {
+    onToggleMark: ((mark: string) => void) | undefined;
+    onToggleBold: () => void;
+    onToggleItalic: () => void;
+    onToggleUnderline: () => void;
+    onToggleStrike: () => void;
+    onToggleListType: ((listType: import("./EditorToolbarTypes").EditorToolbarListType) => void) | undefined;
+    onToggleBulletList: (() => void) | undefined;
+    onToggleOrderedList: (() => void) | undefined;
+    onRequestLink: (() => void) | undefined;
+    onRequestImage: (() => void) | undefined;
+    onToggleHeading: ((level: import("./EditorToolbarTypes").EditorToolbarHeadingLevel) => void) | undefined;
+    onToggleBlockquote: (() => void) | undefined;
+    onInsertNodeType: ((nodeType: string) => void) | undefined;
+    onInsertLineBreak: (() => void) | undefined;
+    onInsertHorizontalRule: (() => void) | undefined;
+    onRunCommand: ((command: import("./EditorToolbarTypes").EditorToolbarCommand) => void) | undefined;
+    onIndentList: (() => void) | undefined;
+    onOutdentList: (() => void) | undefined;
+    onUndo: () => void;
+    onRedo: () => void;
+    onToolbarAction: ((key: string) => void) | undefined;
+    isMarkActive: (mark: string) => boolean;
+    allowedMarks: readonly string[];
+    insertableNodes: readonly string[];
+    nodes: {
+        readonly [x: string]: boolean;
+    };
+    commands: {
+        readonly [x: string]: boolean;
+    };
+    canIndentList: boolean;
+    canOutdentList: boolean;
+    historyState: import("./NativeEditorTypes").HistoryState;
+    toolbarItems: readonly import("./EditorToolbarTypes").EditorToolbarItem[];
+    expandedGroupKey: string | null;
+    menuState: ToolbarMenuState | null;
+    showTopBorder: boolean | undefined;
+    theme: import("./EditorTheme").EditorToolbarTheme | undefined;
+    registrationIdRef: import("react").RefObject<number | null>;
+    rootRef: import("react").RefObject<View | null>;
+    publishesFocusFrames: boolean;
+    frameOwnerId: number | null;
+    framePublisherMountedRef: import("react").RefObject<boolean>;
+    publishesFocusFramesRef: import("react").RefObject<boolean>;
+    frameOwnerIdRef: import("react").RefObject<number | null>;
+    menuRegistrationIdRef: import("react").RefObject<number | null>;
+    menuCardRef: import("react").RefObject<View | null>;
+    menuStateRef: import("react").RefObject<ToolbarMenuState | null>;
+    framePublishAnimationFramesRef: import("react").RefObject<number[]>;
+    framePublishTimeoutsRef: import("react").RefObject<number[]>;
+    windowHeight: number;
+    windowWidth: number;
+    toolbarInteractionActiveRef: import("react").RefObject<boolean>;
+    setExpandedGroupKey: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    setMenuState: import("react").Dispatch<import("react").SetStateAction<ToolbarMenuState | null>>;
+    shouldRenderMentionSuggestions: boolean;
+    preserveEditorFocus: boolean;
+    groupButtonRefs: import("react").RefObject<Map<string, View | null>>;
+    mentionState: import("./EditorToolbarRegistry").EditorToolbarMentionState | null;
+};

package/dist/useEditorToolbarState.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorToolbarState = useEditorToolbarState;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const EditorToolbarItems_1 = require("./EditorToolbarItems");
+const EditorToolbarRegistry_1 = require("./EditorToolbarRegistry");
+function useEditorToolbarState({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems = EditorToolbarItems_1.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 frameOwnerId = (0, react_1.useContext)(EditorToolbarRegistry_1.EditorToolbarFrameOwnerContext);
+    const publishesFocusFrames = preserveEditorFocus || frameOwnerId != null;
+    const rootRef = (0, react_1.useRef)(null);
+    const menuCardRef = (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 frameOwnerIdRef = (0, react_1.useRef)(frameOwnerId);
+    frameOwnerIdRef.current = frameOwnerId;
+    const publishesFocusFramesRef = (0, react_1.useRef)(publishesFocusFrames);
+    publishesFocusFramesRef.current = publishesFocusFrames;
+    const menuStateRef = (0, react_1.useRef)(menuState);
+    menuStateRef.current = menuState;
+    const framePublisherMountedRef = (0, react_1.useRef)(false);
+    const mentionState = (0, EditorToolbarRegistry_1.useEditorToolbarMentionState)();
+    const toolbarInteractionActiveRef = (0, react_1.useRef)(false);
+    const framePublishAnimationFramesRef = (0, react_1.useRef)([]);
+    const framePublishTimeoutsRef = (0, react_1.useRef)([]);
+    const registrationIdRef = (0, react_1.useRef)(null);
+    const menuRegistrationIdRef = (0, react_1.useRef)(null);
+    if (registrationIdRef.current == null) {
+        registrationIdRef.current = (0, EditorToolbarRegistry_1.allocateEditorToolbarRegistrationId)();
+    }
+    if (menuRegistrationIdRef.current == null) {
+        menuRegistrationIdRef.current = (0, EditorToolbarRegistry_1.allocateEditorToolbarRegistrationId)();
+    }
+    (0, react_1.useEffect)(() => {
+        framePublisherMountedRef.current = true;
+        return () => {
+            framePublisherMountedRef.current = false;
+        };
+    }, []);
+    const isMarkActive = (0, react_1.useCallback)((mark) => !!marks[mark], [marks]);
+    const canIndentList = !!commands['indentList'];
+    const canOutdentList = !!commands['outdentList'];
+    const shouldRenderMentionSuggestions = publishesFocusFrames && mentionState != null && mentionState.suggestions.length > 0;
+    return {
+        onToggleMark,
+        onToggleBold,
+        onToggleItalic,
+        onToggleUnderline,
+        onToggleStrike,
+        onToggleListType,
+        onToggleBulletList,
+        onToggleOrderedList,
+        onRequestLink,
+        onRequestImage,
+        onToggleHeading,
+        onToggleBlockquote,
+        onInsertNodeType,
+        onInsertLineBreak,
+        onInsertHorizontalRule,
+        onRunCommand,
+        onIndentList,
+        onOutdentList,
+        onUndo,
+        onRedo,
+        onToolbarAction,
+        isMarkActive,
+        allowedMarks,
+        insertableNodes,
+        nodes,
+        commands,
+        canIndentList,
+        canOutdentList,
+        historyState,
+        toolbarItems,
+        expandedGroupKey,
+        menuState,
+        showTopBorder,
+        theme,
+        registrationIdRef,
+        rootRef,
+        publishesFocusFrames,
+        frameOwnerId,
+        framePublisherMountedRef,
+        publishesFocusFramesRef,
+        frameOwnerIdRef,
+        menuRegistrationIdRef,
+        menuCardRef,
+        menuStateRef,
+        framePublishAnimationFramesRef,
+        framePublishTimeoutsRef,
+        windowHeight,
+        windowWidth,
+        toolbarInteractionActiveRef,
+        setExpandedGroupKey,
+        setMenuState,
+        shouldRenderMentionSuggestions,
+        preserveEditorFocus,
+        groupButtonRefs,
+        mentionState,
+    };
+}

package/dist/useFocusPreservingFrames.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from 'react';
+import type { EditorToolbarFrame } from './EditorToolbar';
+export interface RichTextEditorFocusPreservingElement {
+    measureInWindow(callback: (x: number, y: number, width: number, height: number) => void): void;
+}
+export type RichTextEditorFocusPreservingRef = RefObject<RichTextEditorFocusPreservingElement | null>;
+export type RichTextEditorFocusPreservingRefs = RichTextEditorFocusPreservingRef | readonly RichTextEditorFocusPreservingRef[];
+export declare function useFocusPreservingFrames(refs: RichTextEditorFocusPreservingRefs | undefined, enabled: boolean): {
+    frames: readonly EditorToolbarFrame[];
+    refresh: () => void;
+};
+/** @deprecated Use RichTextEditorFocusPreservingElement instead. */
+export type NativeRichTextEditorFocusPreservingElement = RichTextEditorFocusPreservingElement;
+/** @deprecated Use RichTextEditorFocusPreservingRef instead. */
+export type NativeRichTextEditorFocusPreservingRef = RichTextEditorFocusPreservingRef;
+/** @deprecated Use RichTextEditorFocusPreservingRefs instead. */
+export type NativeRichTextEditorFocusPreservingRefs = RichTextEditorFocusPreservingRefs;

package/dist/useFocusPreservingFrames.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusPreservingFrames = useFocusPreservingFrames;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const EMPTY_FRAMES = [];
+function sameRefs(left, right) {
+    return left.length === right.length && left.every((ref, index) => ref === right[index]);
+}
+function sameFrames(left, right) {
+    return (left.length === right.length &&
+        left.every((frame, index) => {
+            const candidate = right[index];
+            return (frame.x === candidate.x &&
+                frame.y === candidate.y &&
+                frame.width === candidate.width &&
+                frame.height === candidate.height);
+        }));
+}
+function validFrame(x, y, width, height) {
+    if (![x, y, width, height].every(Number.isFinite) || width <= 0 || height <= 0) {
+        return null;
+    }
+    return { x, y, width, height };
+}
+function useFocusPreservingFrames(refs, enabled) {
+    const normalizedRefs = refs == null ? [] : Array.isArray(refs) ? refs : [refs];
+    const stableRefs = (0, react_1.useRef)(normalizedRefs);
+    if (!sameRefs(stableRefs.current, normalizedRefs)) {
+        stableRefs.current = normalizedRefs;
+    }
+    const currentRefs = stableRefs.current;
+    const generation = (0, react_1.useRef)(0);
+    const framesByRef = (0, react_1.useRef)(new Map());
+    const [frames, setFrames] = (0, react_1.useState)(EMPTY_FRAMES);
+    const publish = (0, react_1.useCallback)(() => {
+        const nextFrames = currentRefs.flatMap((ref) => {
+            const measurement = framesByRef.current.get(ref);
+            return measurement == null ? [] : [measurement.frame];
+        });
+        setFrames((current) => (sameFrames(current, nextFrames) ? current : nextFrames));
+    }, [currentRefs]);
+    const refresh = (0, react_1.useCallback)(() => {
+        const callbackGeneration = ++generation.current;
+        if (!enabled) {
+            framesByRef.current.clear();
+            setFrames((current) => (current.length === 0 ? current : EMPTY_FRAMES));
+            return;
+        }
+        const admittedRefs = new Set(currentRefs);
+        for (const ref of framesByRef.current.keys()) {
+            const measurement = framesByRef.current.get(ref);
+            if (!admittedRefs.has(ref) ||
+                ref.current == null ||
+                measurement?.target !== ref.current) {
+                framesByRef.current.delete(ref);
+            }
+        }
+        publish();
+        currentRefs.forEach((ref) => {
+            const target = ref.current;
+            if (target == null || typeof target.measureInWindow !== 'function') {
+                framesByRef.current.delete(ref);
+                publish();
+                return;
+            }
+            try {
+                target.measureInWindow((x, y, width, height) => {
+                    // An older measurement must not restore a removed or replaced target.
+                    if (generation.current !== callbackGeneration || ref.current !== target)
+                        return;
+                    const frame = validFrame(x, y, width, height);
+                    if (frame == null) {
+                        framesByRef.current.delete(ref);
+                    }
+                    else {
+                        framesByRef.current.set(ref, { target, frame });
+                    }
+                    publish();
+                });
+            }
+            catch {
+                if (generation.current !== callbackGeneration)
+                    return;
+                framesByRef.current.delete(ref);
+                publish();
+            }
+        });
+    }, [currentRefs, enabled, publish]);
+    (0, react_1.useLayoutEffect)(() => {
+        refresh();
+    });
+    (0, react_1.useEffect)(() => {
+        if (!enabled)
+            return;
+        const subscriptions = [
+            react_native_1.Keyboard.addListener('keyboardDidShow', refresh),
+            react_native_1.Keyboard.addListener('keyboardDidHide', refresh),
+            react_native_1.Keyboard.addListener('keyboardDidChangeFrame', refresh),
+        ];
+        return () => subscriptions.forEach((subscription) => subscription.remove());
+    }, [enabled, refresh]);
+    (0, react_1.useEffect)(() => () => {
+        generation.current += 1;
+        framesByRef.current.clear();
+    }, []);
+    return { frames, refresh };
+}

package/dist/useNativeEditor.d.ts

@@ -0,0 +1,66 @@
+import { type DocumentJSON, type HistoryState, type NativeEditorDocumentHandle, type NativeEditorDocumentOrigin, type NativeEditorDocumentState } from './NativeEditorBridge';
+/** Configuration for {@link useNativeEditorDocument}. */
+export interface UseNativeEditorDocumentOptions {
+    /** The shared document session. The binding never creates or destroys it. */
+    handle: NativeEditorDocumentHandle;
+    /** Controlled HTML content. */
+    value?: string;
+    /** Controlled ProseMirror JSON content (already normalized by the caller). Ignored when value is set. */
+    valueJSON?: DocumentJSON;
+    /** History policy for controlled replacements. Defaults to 'replace'. */
+    valueJSONUpdateMode?: 'replace' | 'reset';
+    /** External revision signal (e.g. from the collaboration controller) forcing an engine re-read. */
+    revisionSignal?: string | null;
+    onContentChange?: (html: string) => void;
+    onContentChangeJSON?: (json: DocumentJSON) => void;
+    onHistoryStateChange?: (state: HistoryState) => void;
+    /** Application notification after a successful local mutation. Transport does not depend on it. */
+    onLocalCommit?: () => void;
+}
+/** What {@link useNativeEditorDocument} returns. */
+export interface UseNativeEditorDocumentReturn {
+    /** True once the engine document is ready (LocalReady/RoomReady). */
+    isReady: boolean;
+    /** Raw engine readiness. Null before the first read. */
+    documentState: NativeEditorDocumentState | null;
+    /** Decimal-string engine document revision; null while awaiting the server document. */
+    documentRevision: string | null;
+    /** Trusted origin paired with documentRevision. */
+    documentOrigin: NativeEditorDocumentOrigin | null;
+    /** Current undo/redo availability. */
+    historyState: HistoryState;
+    /**
+     * Re-read the engine now, emitting content/history callbacks when the
+     * engine advanced. The interactive editor calls this when the native
+     * view reports an adapter-driven commit (typing, toolbar commands).
+     */
+    refresh(): void;
+    /** Current document as HTML. Empty until the document is ready. */
+    getContent(): string;
+    /** Current document as ProseMirror JSON. Empty until the document is ready. */
+    getContentJson(): DocumentJSON;
+    /** The engine's own answer for whether the document holds no content. */
+    getIsEmpty(): boolean;
+    /** Current document as plain text, with markup stripped. */
+    getTextContent(): string;
+    /** Replace the document with HTML, as one undoable step. */
+    setContent(html: string): void;
+    /** Replace the document with JSON, as one undoable step. */
+    setContentJson(doc: DocumentJSON): void;
+    /** Reset to the schema's empty document and clear undo history. */
+    clearContent(): void;
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+}
+/**
+ * Headless binding to a document handle: the same controlled content,
+ * getters, and history the editor exposes, with no view attached. Use it to
+ * read or drive a document that is not currently mounted — a preview, a
+ * background save, a test.
+ *
+ * `RichTextEditor` uses this internally, so mounting an editor on the
+ * same handle does not conflict with it.
+ */
+export declare function useNativeEditorDocument(options: UseNativeEditorDocumentOptions): UseNativeEditorDocumentReturn;