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

package/dist/EditorToolbarTypes.d.ts

@@ -0,0 +1,273 @@
+import type { HistoryState, ReadonlyActiveState } from './NativeEditorBridge';
+import type { EditorToolbarTheme } from './EditorTheme';
+/** List kinds a first-class `list` toolbar item can toggle. */
+export type EditorToolbarListType = 'bullet_list' | 'ordered_list' | 'bulletList' | 'orderedList';
+/** Heading levels the toolbar and `toggleHeading` accept. */
+export type EditorToolbarHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** Commands a `command` toolbar item can run. */
+export type EditorToolbarCommand = 'indentList' | 'outdentList' | 'undo' | 'redo';
+/**
+ * How a group's children are shown: `'expand'` reveals them inline in the
+ * toolbar row, `'menu'` opens them in a popover.
+ */
+export type EditorToolbarGroupPresentation = 'expand' | 'menu';
+/**
+ * Which region of the toolbar an item sits in. `'start'` and `'end'` pin the
+ * item to that edge; `'scroll'` (the default) puts it in the scrolling middle
+ * row.
+ */
+export type EditorToolbarItemPlacement = 'start' | 'scroll' | 'end';
+/** Icons the package draws itself, on both platforms. */
+export type EditorToolbarDefaultIconId = 'bold' | 'italic' | 'underline' | 'strike' | 'link' | 'image' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'blockquote' | 'bulletList' | 'orderedList' | 'indentList' | 'outdentList' | 'lineBreak' | 'horizontalRule' | 'undo' | 'redo';
+/** An SF Symbol, used for the iOS half of a `platform` icon. */
+export interface EditorToolbarSFSymbolIcon {
+    type: 'sfSymbol';
+    /** SF Symbol name, e.g. `'bold'`. */
+    name: string;
+}
+/** A Material icon, used for the Android half of a `platform` icon. */
+export interface EditorToolbarMaterialIcon {
+    type: 'material';
+    /** Material icon name, e.g. `'format_bold'`. */
+    name: string;
+}
+/**
+ * A toolbar button's icon:
+ *
+ * - `default` — one of the package's built-in icons.
+ * - `glyph` — arbitrary text or an emoji, drawn as-is.
+ * - `platform` — per-platform native icons, with `fallbackText` when the
+ *   platform cannot resolve the named icon.
+ */
+export type EditorToolbarIcon = {
+    type: 'default';
+    id: EditorToolbarDefaultIconId;
+} | {
+    type: 'glyph';
+    text: string;
+} | {
+    type: 'platform';
+    ios?: EditorToolbarSFSymbolIcon;
+    android?: EditorToolbarMaterialIcon;
+    fallbackText?: string;
+};
+/** Visual overrides for one toolbar button. */
+export interface EditorToolbarButtonStyle {
+    iconSize?: number;
+    color?: string;
+    backgroundColor?: string;
+    activeColor?: string;
+    disabledColor?: string;
+    activeBackgroundColor?: string;
+    disabledBackgroundColor?: string;
+    borderRadius?: number;
+}
+/**
+ * A single toolbar button. Every variant takes a `label` (its accessible
+ * name), an `icon`, an optional `key` (defaults to something derived from the
+ * variant), and an optional `placement`.
+ *
+ * - `mark` — toggles the named mark; active and enabled state come from the engine.
+ * - `link` / `image` — calls the editor's `onRequestLink` / `onRequestImage`.
+ * - `heading` — toggles the given heading level.
+ * - `blockquote` — toggles blockquote wrapping.
+ * - `list` — toggles the given list type.
+ * - `command` — runs an {@link EditorToolbarCommand}.
+ * - `node` — inserts the named node type, e.g. `'horizontalRule'`.
+ * - `action` — host-defined; calls `onToolbarAction` with its `key`, and the
+ *   host supplies `isActive`/`isDisabled` since the engine knows nothing about it.
+ */
+export type EditorToolbarLeafItem = ({
+    type: 'mark';
+    mark: string;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+    placement?: EditorToolbarItemPlacement;
+} | {
+    type: 'link';
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+    placement?: EditorToolbarItemPlacement;
+} | {
+    type: 'image';
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+    placement?: EditorToolbarItemPlacement;
+} | {
+    type: 'heading';
+    level: EditorToolbarHeadingLevel;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+    placement?: EditorToolbarItemPlacement;
+} | {
+    type: 'blockquote';
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+    placement?: EditorToolbarItemPlacement;
+} | {
+    type: 'list';
+    listType: EditorToolbarListType;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+    placement?: EditorToolbarItemPlacement;
+} | {
+    type: 'command';
+    command: EditorToolbarCommand;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+    placement?: EditorToolbarItemPlacement;
+} | {
+    type: 'node';
+    nodeType: string;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+    placement?: EditorToolbarItemPlacement;
+} | {
+    type: 'action';
+    key: string;
+    label: string;
+    icon: EditorToolbarIcon;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    placement?: EditorToolbarItemPlacement;
+}) & {
+    buttonStyle?: EditorToolbarButtonStyle;
+};
+/** What a group may contain. Groups do not nest. */
+export type EditorToolbarGroupChildItem = EditorToolbarLeafItem;
+/**
+ * Several buttons collapsed behind one — heading levels, say. The group
+ * reports active when any child is active, and disabled when every child is.
+ */
+export interface EditorToolbarGroupItem {
+    type: 'group';
+    /** Identity of the group. Required, unlike a leaf item's key. */
+    key: string;
+    /** Accessible name for the group button. */
+    label: string;
+    icon: EditorToolbarIcon;
+    /** How the children are revealed. Defaults to `'expand'`. */
+    presentation?: EditorToolbarGroupPresentation;
+    placement?: EditorToolbarItemPlacement;
+    buttonStyle?: EditorToolbarButtonStyle;
+    items: readonly EditorToolbarGroupChildItem[];
+}
+/**
+ * One entry in `toolbarItems`: a button, a group of buttons, or a separator.
+ * The same list drives the JavaScript `EditorToolbar` and the native keyboard
+ * toolbar.
+ */
+export type EditorToolbarItem = EditorToolbarLeafItem | EditorToolbarGroupItem | {
+    type: 'separator';
+    key?: string;
+    placement?: EditorToolbarItemPlacement;
+};
+export interface ToolbarButton {
+    key: string;
+    label: string;
+    icon: EditorToolbarIcon;
+    buttonStyle?: EditorToolbarButtonStyle;
+    action: () => void;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    groupKey?: string;
+    placement: EditorToolbarItemPlacement;
+}
+export interface ToolbarGroupButton {
+    key: string;
+    label: string;
+    icon: EditorToolbarIcon;
+    buttonStyle?: EditorToolbarButtonStyle;
+    presentation: EditorToolbarGroupPresentation;
+    placement: EditorToolbarItemPlacement;
+    children: readonly ToolbarButton[];
+    isActive: boolean;
+    isDisabled: boolean;
+    isExpanded: boolean;
+    isOpen: boolean;
+}
+export interface ToolbarMenuState {
+    groupKey: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type ToolbarRenderedItem = {
+    type: 'separator';
+    key: string;
+    placement: EditorToolbarItemPlacement;
+} | {
+    type: 'button';
+    button: ToolbarButton;
+} | {
+    type: 'group';
+    group: ToolbarGroupButton;
+};
+export interface EditorToolbarProps {
+    /** Currently active marks and nodes from the Rust engine. */
+    activeState: ReadonlyActiveState;
+    /** Current undo/redo availability. */
+    historyState: HistoryState;
+    /** Toggle bold mark. */
+    onToggleBold: () => void;
+    /** Toggle italic mark. */
+    onToggleItalic: () => void;
+    /** Toggle underline mark. */
+    onToggleUnderline: () => void;
+    /** Toggle strikethrough mark. */
+    onToggleStrike: () => void;
+    /** Toggle bullet list. */
+    onToggleBulletList?: () => void;
+    /** Toggle blockquote wrapping. */
+    onToggleBlockquote?: () => void;
+    /** Toggle ordered list. */
+    onToggleOrderedList?: () => void;
+    /** Indent the current list item. */
+    onIndentList?: () => void;
+    /** Outdent the current list item. */
+    onOutdentList?: () => void;
+    /** Insert horizontal rule. */
+    onInsertHorizontalRule?: () => void;
+    /** Insert inline hard break. */
+    onInsertLineBreak?: () => void;
+    /** Undo the last operation. */
+    onUndo: () => void;
+    /** Redo the last undone operation. */
+    onRedo: () => void;
+    /** Generic mark toggle handler used by configurable mark buttons. */
+    onToggleMark?: (mark: string) => void;
+    /** Generic list toggle handler used by configurable list buttons. */
+    onToggleListType?: (listType: EditorToolbarListType) => void;
+    /** Generic heading toggle handler used by configurable heading buttons. */
+    onToggleHeading?: (level: EditorToolbarHeadingLevel) => void;
+    /** Generic node insertion handler used by configurable node buttons. */
+    onInsertNodeType?: (nodeType: string) => void;
+    /** Generic command handler used by configurable command buttons. */
+    onRunCommand?: (command: EditorToolbarCommand) => void;
+    /** Generic action handler for arbitrary JS-defined toolbar buttons. */
+    onToolbarAction?: (key: string) => void;
+    /** Link button handler used by first-class link toolbar items. */
+    onRequestLink?: () => void;
+    /** Image button handler used by first-class image toolbar items. */
+    onRequestImage?: () => void;
+    /** Displayed toolbar items, in order. Defaults to the built-in toolbar. */
+    toolbarItems?: readonly EditorToolbarItem[];
+    /** Optional theme overrides for toolbar chrome and button colors. */
+    theme?: EditorToolbarTheme;
+    /** Whether to render the built-in top separator line. */
+    showTopBorder?: boolean;
+    /**
+     * Keep RichTextEditor focused when this toolbar is rendered outside
+     * the editor wrapper. Defaults to true.
+     */
+    preserveEditorFocus?: boolean;
+}

package/dist/EditorToolbarTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/EditorToolbarVisuals.d.ts

@@ -0,0 +1,154 @@
+import type { MentionSuggestion } from './addons';
+import { type EditorToolbarDefaultIconId, type EditorToolbarIcon } from './EditorToolbarTypes';
+export declare const BUTTON_VISIBLE = 32;
+export declare const TOOLBAR_PADDING_H = 12;
+export declare const TOOLBAR_PADDING_V = 4;
+export declare const MAX_BUTTON_SIZE = 40;
+export declare const BUTTON_HEIGHT_INSET = 4;
+export declare const MENU_MARGIN = 8;
+export declare const MENU_WIDTH = 192;
+export declare const KEYBOARD_FRAME_REMEASURE_DELAYS_MS: readonly [50, 150, 300];
+export declare const ACTIVE_BG = "rgba(0, 122, 255, 0.12)";
+export declare const ACTIVE_COLOR = "#007AFF";
+export declare const DEFAULT_COLOR = "#666666";
+export declare const DISABLED_COLOR = "#C7C7CC";
+export declare const SEPARATOR_COLOR = "#E5E5EA";
+export declare const TOOLBAR_BG = "#FFFFFF";
+export declare const TOOLBAR_BORDER = "#E5E5EA";
+export declare const TOOLBAR_RADIUS = 0;
+export declare const BUTTON_RADIUS = 6;
+export declare const MENU_BORDER = "#D1D1D6";
+export declare const MENU_SHADOW = "#000000";
+export declare const DEFAULT_GLYPH_ICONS: Record<EditorToolbarDefaultIconId, string>;
+export declare const DEFAULT_MATERIAL_ICONS: Partial<Record<EditorToolbarDefaultIconId, string>>;
+export declare function resolveMentionSuggestionDisplayLabel(suggestion: MentionSuggestion, trigger: string): string;
+export declare function ToolbarIcon({ icon, color, size, }: {
+    icon: EditorToolbarIcon;
+    color: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function resolveMaterialIconName(icon: EditorToolbarIcon): string | undefined;
+export declare function resolveGlyphText(icon: EditorToolbarIcon): string | undefined;
+export declare const styles: {
+    container: {
+        backgroundColor: string;
+        borderTopWidth: number;
+        borderTopColor: string;
+        paddingVertical: number;
+        overflow: "hidden";
+    };
+    containerWithoutTopBorder: {
+        borderTopWidth: number;
+    };
+    scrollContent: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingHorizontal: number;
+        minWidth: "100%";
+    };
+    mentionSuggestionsContent: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        alignItems: "center";
+        minWidth: "100%";
+    };
+    mentionSuggestionsScroll: {
+        overflow: "hidden";
+    };
+    toolbarRow: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    fixedSection: {
+        flexDirection: "row";
+        alignItems: "center";
+        flexShrink: number;
+    };
+    startFixedSection: {
+        paddingStart: number;
+    };
+    endFixedSection: {
+        paddingEnd: number;
+    };
+    scrollSection: {
+        flex: number;
+        minWidth: number;
+    };
+    mentionSuggestion: {
+        minWidth: number;
+        minHeight: number;
+        marginRight: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        justifyContent: "center";
+    };
+    mentionSuggestionTitle: {
+        fontSize: number;
+        fontWeight: "600";
+    };
+    mentionSuggestionSubtitle: {
+        marginTop: number;
+        fontSize: number;
+    };
+    buttonAnchor: {
+        position: "relative";
+    };
+    button: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        borderRadius: number;
+    };
+    groupDisclosure: {
+        position: "absolute";
+        right: number;
+        bottom: number;
+        fontSize: number;
+        fontWeight: "700";
+    };
+    separator: {
+        width: number;
+        height: number;
+        marginHorizontal: number;
+        backgroundColor: string;
+    };
+    iconContainer: {
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    iconText: {
+        fontSize: number;
+        fontWeight: "600";
+    };
+    menuBackdrop: {
+        flex: number;
+    };
+    menuCard: {
+        position: "absolute";
+        width: number;
+        borderRadius: number;
+        borderWidth: number;
+        paddingVertical: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        elevation: number;
+    };
+    menuItem: {
+        minHeight: number;
+        paddingHorizontal: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    menuLabel: {
+        flex: number;
+        marginLeft: number;
+        fontSize: number;
+        fontWeight: "500";
+    };
+};

package/dist/EditorToolbarVisuals.js

@@ -0,0 +1,228 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = exports.DEFAULT_MATERIAL_ICONS = exports.DEFAULT_GLYPH_ICONS = exports.MENU_SHADOW = exports.MENU_BORDER = exports.BUTTON_RADIUS = exports.TOOLBAR_RADIUS = exports.TOOLBAR_BORDER = exports.TOOLBAR_BG = exports.SEPARATOR_COLOR = exports.DISABLED_COLOR = exports.DEFAULT_COLOR = exports.ACTIVE_COLOR = exports.ACTIVE_BG = exports.KEYBOARD_FRAME_REMEASURE_DELAYS_MS = exports.MENU_WIDTH = exports.MENU_MARGIN = exports.BUTTON_HEIGHT_INSET = exports.MAX_BUTTON_SIZE = exports.TOOLBAR_PADDING_V = exports.TOOLBAR_PADDING_H = exports.BUTTON_VISIBLE = void 0;
+exports.resolveMentionSuggestionDisplayLabel = resolveMentionSuggestionDisplayLabel;
+exports.ToolbarIcon = ToolbarIcon;
+exports.resolveMaterialIconName = resolveMaterialIconName;
+exports.resolveGlyphText = resolveGlyphText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const EditorToolbarRegistry_1 = require("./EditorToolbarRegistry");
+exports.BUTTON_VISIBLE = 32;
+exports.TOOLBAR_PADDING_H = 12;
+exports.TOOLBAR_PADDING_V = 4;
+exports.MAX_BUTTON_SIZE = 40;
+exports.BUTTON_HEIGHT_INSET = 4;
+exports.MENU_MARGIN = 8;
+exports.MENU_WIDTH = 192;
+exports.KEYBOARD_FRAME_REMEASURE_DELAYS_MS = [50, 150, 300];
+exports.ACTIVE_BG = 'rgba(0, 122, 255, 0.12)';
+exports.ACTIVE_COLOR = '#007AFF';
+exports.DEFAULT_COLOR = '#666666';
+exports.DISABLED_COLOR = '#C7C7CC';
+exports.SEPARATOR_COLOR = '#E5E5EA';
+exports.TOOLBAR_BG = '#FFFFFF';
+exports.TOOLBAR_BORDER = '#E5E5EA';
+exports.TOOLBAR_RADIUS = 0;
+exports.BUTTON_RADIUS = 6;
+exports.MENU_BORDER = '#D1D1D6';
+exports.MENU_SHADOW = '#000000';
+exports.DEFAULT_GLYPH_ICONS = {
+    bold: 'B',
+    italic: 'I',
+    underline: 'U',
+    strike: 'S',
+    link: '🔗',
+    image: '🖼',
+    blockquote: '❝',
+    h1: 'H1',
+    h2: 'H2',
+    h3: 'H3',
+    h4: 'H4',
+    h5: 'H5',
+    h6: 'H6',
+    bulletList: '•≡',
+    orderedList: '1.',
+    indentList: '→',
+    outdentList: '←',
+    lineBreak: '↵',
+    horizontalRule: '—',
+    undo: '↩',
+    redo: '↪',
+};
+exports.DEFAULT_MATERIAL_ICONS = {
+    bold: 'format-bold',
+    italic: 'format-italic',
+    underline: 'format-underlined',
+    strike: 'strikethrough-s',
+    link: 'link',
+    image: 'image',
+    h1: 'title',
+    h2: 'title',
+    h3: 'title',
+    h4: 'title',
+    h5: 'title',
+    h6: 'title',
+    blockquote: 'format-quote',
+    bulletList: 'format-list-bulleted',
+    orderedList: 'format-list-numbered',
+    indentList: 'format-indent-increase',
+    outdentList: 'format-indent-decrease',
+    lineBreak: 'keyboard-return',
+    horizontalRule: 'horizontal-rule',
+    undo: 'undo',
+    redo: 'redo',
+};
+function resolveMentionSuggestionDisplayLabel(suggestion, trigger) {
+    const label = suggestion.label?.trim() || suggestion.title;
+    return trigger.length > 0 && !label.startsWith(trigger) ? `${trigger}${label}` : label;
+}
+function ToolbarIcon({ icon, color, size, }) {
+    const materialIconName = resolveMaterialIconName(icon);
+    if (materialIconName) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: exports.styles.iconContainer, children: (0, jsx_runtime_1.jsx)(vector_icons_1.MaterialIcons, { name: materialIconName, size: size ?? 20, color: color }) }));
+    }
+    const glyph = resolveGlyphText(icon) ?? '?';
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: exports.styles.iconContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [exports.styles.iconText, size == null ? null : { fontSize: size }, { color }], children: glyph }) }));
+}
+function resolveMaterialIconName(icon) {
+    switch (icon.type) {
+        case 'default':
+            return exports.DEFAULT_MATERIAL_ICONS[icon.id];
+        case 'platform':
+            return icon.android?.type === 'material' ? icon.android.name : undefined;
+        case 'glyph':
+            return undefined;
+    }
+}
+function resolveGlyphText(icon) {
+    switch (icon.type) {
+        case 'default':
+            return exports.DEFAULT_GLYPH_ICONS[icon.id];
+        case 'glyph':
+            return icon.text;
+        case 'platform':
+            return icon.fallbackText;
+    }
+}
+exports.styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: exports.TOOLBAR_BG,
+        borderTopWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderTopColor: exports.TOOLBAR_BORDER,
+        paddingVertical: exports.TOOLBAR_PADDING_V,
+        overflow: 'hidden',
+    },
+    containerWithoutTopBorder: {
+        borderTopWidth: 0,
+    },
+    scrollContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: exports.TOOLBAR_PADDING_H,
+        minWidth: '100%',
+    },
+    mentionSuggestionsContent: {
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+        alignItems: 'center',
+        minWidth: '100%',
+    },
+    mentionSuggestionsScroll: {
+        overflow: 'hidden',
+    },
+    toolbarRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    fixedSection: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexShrink: 0,
+    },
+    startFixedSection: {
+        paddingStart: exports.TOOLBAR_PADDING_H,
+    },
+    endFixedSection: {
+        paddingEnd: exports.TOOLBAR_PADDING_H,
+    },
+    scrollSection: {
+        flex: 1,
+        minWidth: 0,
+    },
+    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',
+    },
+    button: {
+        width: EditorToolbarRegistry_1.BUTTON_HIT,
+        height: exports.BUTTON_VISIBLE,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: exports.BUTTON_RADIUS,
+    },
+    groupDisclosure: {
+        position: 'absolute',
+        right: 5,
+        bottom: 2,
+        fontSize: 9,
+        fontWeight: '700',
+    },
+    separator: {
+        width: react_native_1.StyleSheet.hairlineWidth,
+        height: 20,
+        marginHorizontal: 4,
+        backgroundColor: exports.SEPARATOR_COLOR,
+    },
+    iconContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    iconText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    menuBackdrop: {
+        flex: 1,
+    },
+    menuCard: {
+        position: 'absolute',
+        width: exports.MENU_WIDTH,
+        borderRadius: 14,
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        paddingVertical: 8,
+        shadowColor: exports.MENU_SHADOW,
+        shadowOpacity: 0.16,
+        shadowRadius: 18,
+        shadowOffset: { width: 0, height: 8 },
+        elevation: 10,
+    },
+    menuItem: {
+        minHeight: 40,
+        paddingHorizontal: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    menuLabel: {
+        flex: 1,
+        marginLeft: 10,
+        fontSize: 14,
+        fontWeight: '500',
+    },
+});

package/dist/EditorUpdateRevision.d.ts

@@ -0,0 +1,8 @@
+import type { NativeEditorError } from './NativeEditorBoundaryError';
+export type EditorUpdateRevisionAllocation = {
+    revision: number;
+} | {
+    error: NativeEditorError;
+};
+/** Allocate the u32 revision carried by the native view update prop. */
+export declare function allocateEditorUpdateRevision(currentRevision: number): EditorUpdateRevisionAllocation;

package/dist/EditorUpdateRevision.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.allocateEditorUpdateRevision = allocateEditorUpdateRevision;
+const MAX_EDITOR_UPDATE_REVISION = 4294967295;
+/** Allocate the u32 revision carried by the native view update prop. */
+function allocateEditorUpdateRevision(currentRevision) {
+    if (currentRevision >= MAX_EDITOR_UPDATE_REVISION) {
+        return {
+            error: {
+                domain: 'boundary',
+                code: 'CONFIG_INVALID',
+                message: 'NativeRichTextEditor: editor update revision counter exhausted',
+                requestId: null,
+                operationIndex: null,
+                limit: String(MAX_EDITOR_UPDATE_REVISION),
+                actual: String(MAX_EDITOR_UPDATE_REVISION + 1),
+                details: null,
+            },
+        };
+    }
+    return { revision: currentRevision + 1 };
+}