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

package/src/NativeProseViewer.tsx

@@ -0,0 +1,356 @@
+import type { AtomViewport } from './AtomHost';
+import React, { useCallback, useMemo } from 'react';
+import { View, type NativeSyntheticEvent, type ViewProps } from 'react-native';
+
+import {
+    serializeEditorImageLoadingPolicy,
+    type EditorImageLoadingPolicy,
+} from './ImageLoadingPolicy';
+import {
+    resolveEditorResourceLimits,
+    type EditorResourceLimits,
+    type ResolvedEditorResourceLimits,
+} from './ResourceLimits';
+import { serializeEditorTheme, type EditorTheme } from './EditorTheme';
+import type { DocumentJSON } from './NativeEditorBridge';
+import { normalizeEditorAddons, withMentionsSchema } from './addons';
+import type {
+    EditorAddons,
+    CodeHighlightingAddonOptions,
+    MentionPressEvent,
+    MentionsAddonOptions,
+} from './EditorAddon';
+import { withAtomsSchema, type AtomNodeDefinition } from './atoms';
+import { useViewerAtoms, type RichTextViewerAtomAttrsUpdateEvent } from './useViewerAtoms';
+import NativePreparedProseViewer from './specs/PreparedProseViewerNativeComponent';
+import {
+    serializePreparedProseViewerConfiguration,
+    type PreparedProseViewerConfiguration,
+} from './ViewerConfiguration';
+import { defaultSchema, type SchemaDefinition } from './schemas';
+
+export type {
+    RichTextViewerAtomAttrsUpdateEvent,
+    NativeProseViewerAtomAttrsUpdateEvent,
+} from './useViewerAtoms';
+
+interface RichTextViewerLinkPressNativeEvent {
+    href: string;
+    text: string;
+}
+
+interface RichTextViewerMentionPressNativeEvent {
+    docPos: number;
+    label: string;
+    attrsJson: string;
+}
+
+/** A parse, layout, or rendering failure reported by the native viewer. */
+export interface RichTextViewerErrorEvent {
+    /** Native subsystem that raised the failure, e.g. `'viewer'`. */
+    domain: string;
+    /** Stable failure code, e.g. `'INVALID_MENTION_ATTRIBUTES'`. */
+    code: string;
+    message: string;
+    /** Whether the viewer gave up on this content, as opposed to skipping one element. */
+    fatal: boolean;
+}
+
+/** A tap on a mention node. Requires a mention addon with `onPress`. */
+export type RichTextViewerMentionPressEvent = MentionPressEvent;
+
+/** A tap on link-marked text. Requires `enableLinkTaps` and `onPressLink`. */
+export interface RichTextViewerLinkPressEvent {
+    /** The link mark's `href` attribute. */
+    href: string;
+    /** The text the link mark covers. */
+    text: string;
+}
+
+/** Mention rendering and press handling for the viewer. */
+export type RichTextViewerMentionsConfig = MentionsAddonOptions;
+
+export type RichTextViewerAddons = EditorAddons;
+
+/** Props shared by both content forms of {@link RichTextViewerProps}. */
+export interface RichTextViewerBaseProps extends ViewProps {
+    /** Schema the content is parsed against. Defaults to {@link defaultSchema}; the mention node is always added. */
+    schema?: SchemaDefinition;
+    /** React renderers for custom block atoms; their node specs are added to the schema. */
+    atoms?: readonly AtomNodeDefinition<any>[];
+    /** Whether persisted atom attributes are read-only. Defaults to true; prose is always read-only. */
+    readOnly?: boolean;
+    /** Whether atom controls receive input. Defaults to true, independently of readOnly. */
+    atomsInteractive?: boolean;
+    /** Opt-in atom virtualization; range is relative to the native viewer content. */
+    atomViewport?: AtomViewport;
+    /** Handles an atom update request. Persist it in the app and supply updated content. */
+    onUpdateAtomAttrs?: (event: RichTextViewerAtomAttrsUpdateEvent) => void | Promise<void>;
+    /** Native content theme. See {@link EditorTheme}. */
+    theme?: EditorTheme;
+    /** Whether `data:` image sources are admitted. Defaults to false. */
+    allowBase64Images?: boolean;
+    /** Bounds image fetching and decoding. See {@link EditorImageLoadingPolicy}. */
+    imageLoadingPolicy?: EditorImageLoadingPolicy;
+    /** Bounds the content the viewer will parse. See {@link EditorResourceLimits}. */
+    resourceLimits?: EditorResourceLimits;
+    /** Whether content with no text measures to zero height. Defaults to true. */
+    collapseTrailingEmptyParagraphs?: boolean;
+    /** Whether link-marked text is tappable. Defaults to true. */
+    enableLinkTaps?: boolean;
+    /** Whether image nodes are fetched and drawn. Defaults to true. */
+    renderImages?: boolean;
+    /**
+     * Bump this to discard the prepared layout after the app's font
+     * environment changes (a newly registered font, a font-scale change).
+     * Defaults to 0.
+     */
+    fontEnvironmentRevision?: number;
+    addons?: RichTextViewerAddons;
+    /** Called when link-marked text is tapped. */
+    onPressLink?: (event: RichTextViewerLinkPressEvent) => void;
+    /** Called when the viewer cannot parse, lay out, or render the content. */
+    onError?: (error: RichTextViewerErrorEvent) => void;
+}
+
+interface RichTextViewerJsonProps extends RichTextViewerBaseProps {
+    /** ProseMirror JSON document, or a JSON string holding one. */
+    contentJSON: DocumentJSON | string;
+    contentHTML?: never;
+}
+
+interface RichTextViewerHtmlProps extends RichTextViewerBaseProps {
+    /** HTML document. Sanitize untrusted HTML before passing it here. */
+    contentHTML: string;
+    contentJSON?: never;
+}
+
+/**
+ * Props for {@link RichTextViewer}. Supply exactly one content source:
+ * `contentJSON` or `contentHTML`.
+ */
+export type RichTextViewerProps = RichTextViewerJsonProps | RichTextViewerHtmlProps;
+
+const serializedJsonCache = new WeakMap<object, string>();
+
+function stringifyCachedJson(value: DocumentJSON): string {
+    const cached = serializedJsonCache.get(value);
+    if (cached != null) {
+        return cached;
+    }
+
+    const serialized = JSON.stringify(value);
+    serializedJsonCache.set(value, serialized);
+    return serialized;
+}
+
+function resolveViewerConfiguration(
+    schema: SchemaDefinition | undefined,
+    allowBase64Images: boolean,
+    resourceLimits: ResolvedEditorResourceLimits | undefined,
+    mentions: RichTextViewerMentionsConfig | undefined,
+    atoms: readonly AtomNodeDefinition<any>[] | undefined,
+    codeHighlighting: CodeHighlightingAddonOptions | undefined
+): PreparedProseViewerConfiguration {
+    return {
+        initialization: { type: 'localEmpty' },
+        ...(codeHighlighting ? { codeHighlighting } : {}),
+        schema: withAtomsSchema(withMentionsSchema(schema ?? defaultSchema), atoms ?? []),
+        ...(allowBase64Images ? { policy: { allowBase64Images: true } } : {}),
+        ...(resourceLimits ? { limits: { resource: resourceLimits } } : {}),
+        ...(mentions?.trigger || mentions?.prefix
+            ? {
+                  mentions: {
+                      ...(mentions.trigger ? { trigger: mentions.trigger } : {}),
+                      ...(mentions.prefix ? { prefix: mentions.prefix } : {}),
+                  },
+              }
+            : {}),
+    };
+}
+
+/**
+ * Read-only renderer for HTML or ProseMirror JSON. It prepares a native
+ * layout and measures to that layout's exact size, so the host must give it a
+ * finite width; no editor session is created and no document handle is
+ * needed.
+ *
+ * Requires the New Architecture.
+ *
+ * @example
+ * ```tsx
+ * <RichTextViewer
+ *     contentHTML='<p>Read-only content</p>'
+ *     theme={{ text: { fontSize: 16 } }}
+ *     onPressLink={({ href }) => openLink(href)}
+ * />
+ * ```
+ */
+export function RichTextViewer(props: RichTextViewerProps) {
+    const {
+        contentJSON,
+        contentHTML,
+        schema,
+        atoms,
+        readOnly = true,
+        atomsInteractive = true,
+        atomViewport,
+        onUpdateAtomAttrs,
+        theme,
+        allowBase64Images = false,
+        imageLoadingPolicy,
+        resourceLimits,
+        collapseTrailingEmptyParagraphs = true,
+        enableLinkTaps = true,
+        renderImages = true,
+        fontEnvironmentRevision = 0,
+        addons,
+        onPressLink,
+        onError,
+        ...viewProps
+    } = props;
+    const { mentions, codeHighlighting } = useMemo(() => normalizeEditorAddons(addons), [addons]);
+    const resolvedResourceLimits = useMemo(
+        () => (resourceLimits ? resolveEditorResourceLimits(resourceLimits) : undefined),
+        [resourceLimits]
+    );
+    const configJson = useMemo(
+        () =>
+            serializePreparedProseViewerConfiguration(
+                resolveViewerConfiguration(
+                    schema,
+                    allowBase64Images,
+                    resolvedResourceLimits,
+                    mentions,
+                    atoms,
+                    codeHighlighting
+                )
+            ),
+        [allowBase64Images, mentions, resolvedResourceLimits, schema, atoms, codeHighlighting]
+    );
+    const themeJson = useMemo(
+        () => serializeEditorTheme(theme, mentions?.theme),
+        [mentions?.theme, theme]
+    );
+    const imagePolicyJson = useMemo(
+        () => serializeEditorImageLoadingPolicy(imageLoadingPolicy),
+        [imageLoadingPolicy]
+    );
+    const sourceKind = contentJSON === undefined ? 'html' : 'json';
+    const source = useMemo(() => {
+        if (contentJSON === undefined) {
+            return contentHTML ?? '';
+        }
+        return typeof contentJSON === 'string' ? contentJSON : stringifyCachedJson(contentJSON);
+    }, [contentHTML, contentJSON]);
+    const atomIdentity = useMemo(
+        () => ({}),
+        [
+            sourceKind,
+            source,
+            configJson,
+            themeJson,
+            imagePolicyJson,
+            renderImages,
+            collapseTrailingEmptyParagraphs,
+            fontEnvironmentRevision,
+        ]
+    );
+    const viewerAtoms = useViewerAtoms({
+        atoms,
+        identity: atomIdentity,
+        themeJson,
+        readOnly,
+        interactive: atomsInteractive,
+        viewport: atomViewport,
+        onUpdateAtomAttrs,
+        onError,
+    });
+    const handlePressLink = useCallback(
+        (event: NativeSyntheticEvent<RichTextViewerLinkPressNativeEvent>) => {
+            onPressLink?.(event.nativeEvent);
+        },
+        [onPressLink]
+    );
+    const handlePressMention = useCallback(
+        (event: NativeSyntheticEvent<RichTextViewerMentionPressNativeEvent>) => {
+            const { docPos, label, attrsJson } = event.nativeEvent;
+            let attrs: unknown;
+            try {
+                attrs = JSON.parse(attrsJson);
+            } catch {
+                attrs = null;
+            }
+            if (attrs === null || typeof attrs !== 'object' || Array.isArray(attrs)) {
+                onError?.({
+                    domain: 'viewer',
+                    code: 'INVALID_MENTION_ATTRIBUTES',
+                    message: 'The prepared mention attributes are not a JSON object.',
+                    fatal: false,
+                });
+                return;
+            }
+            mentions?.onPress?.({ docPos, label, attrs: attrs as Record<string, unknown> });
+        },
+        [mentions, onError]
+    );
+    const handleError = useCallback(
+        (event: NativeSyntheticEvent<RichTextViewerErrorEvent>) => {
+            onError?.(event.nativeEvent);
+        },
+        [onError]
+    );
+
+    const nativeViewer = (
+        <NativePreparedProseViewer
+            {...(viewerAtoms.enabled ? { style: { alignSelf: 'stretch' as const } } : viewProps)}
+            sourceKind={sourceKind}
+            source={source}
+            configJson={configJson}
+            themeJson={viewerAtoms.themeJson}
+            onAtomLayout={viewerAtoms.enabled ? viewerAtoms.onAtomLayout : undefined}
+            imagePolicyJson={imagePolicyJson}
+            imagesEnabled={renderImages}
+            collapsesWhenEmpty={collapseTrailingEmptyParagraphs}
+            enableLinkTaps={enableLinkTaps && onPressLink != null}
+            mentionInteractionsEnabled={mentions?.onPress != null}
+            fontEnvironmentRevision={fontEnvironmentRevision}
+            onPressLink={onPressLink ? handlePressLink : undefined}
+            onPressMention={mentions?.onPress ? handlePressMention : undefined}
+            onError={onError ? handleError : undefined}
+        />
+    );
+    if (!viewerAtoms.enabled) return nativeViewer;
+    return (
+        <View {...viewProps}>
+            <View style={{ alignSelf: 'stretch' }} onLayout={viewerAtoms.onContainerLayout}>
+                {nativeViewer}
+                {viewerAtoms.children}
+            </View>
+        </View>
+    );
+}
+
+/** @deprecated Use RichTextViewerErrorEvent instead. */
+export type NativeProseViewerErrorEvent = RichTextViewerErrorEvent;
+
+/** @deprecated Use RichTextViewerMentionPressEvent instead. */
+export type NativeProseViewerMentionPressEvent = RichTextViewerMentionPressEvent;
+
+/** @deprecated Use RichTextViewerLinkPressEvent instead. */
+export type NativeProseViewerLinkPressEvent = RichTextViewerLinkPressEvent;
+
+/** @deprecated Use RichTextViewerMentionsConfig instead. */
+export type NativeProseViewerMentionsConfig = RichTextViewerMentionsConfig;
+
+/** @deprecated Use RichTextViewerAddons instead. */
+export type NativeProseViewerAddons = RichTextViewerAddons;
+
+/** @deprecated Use RichTextViewerBaseProps instead. */
+export type NativeProseViewerBaseProps = RichTextViewerBaseProps;
+
+/** @deprecated Use RichTextViewerProps instead. */
+export type NativeProseViewerProps = RichTextViewerProps;
+
+/** @deprecated Use RichTextViewer instead. */
+export const NativeProseViewer = RichTextViewer;

package/src/NativeRichTextEditor.tsx

@@ -0,0 +1,33 @@
+export {
+    type RichTextEditorHeightBehavior,
+    type RichTextEditorToolbarPlacement,
+    type RichTextEditorValueJSONUpdateMode,
+    type RichTextEditorAutoCapitalize,
+    type RichTextEditorKeyboardType,
+    type RichTextEditorAndroidInputOptions,
+    type RemoteSelectionDecoration,
+    type LinkRequestContext,
+    type ImageRequestContext,
+    type RichTextEditorProps,
+    type RichTextEditorRef,
+    type RichTextEditorCaretRect,
+    type NativeRichTextEditorHeightBehavior,
+    type NativeRichTextEditorToolbarPlacement,
+    type NativeRichTextEditorValueJSONUpdateMode,
+    type NativeRichTextEditorAutoCapitalize,
+    type NativeRichTextEditorKeyboardType,
+    type NativeRichTextEditorAndroidInputOptions,
+    type NativeRichTextEditorProps,
+    type NativeRichTextEditorRef,
+    type NativeRichTextEditorCaretRect,
+} from './RichTextEditorTypes';
+export { RichTextEditor, NativeRichTextEditor } from './RichTextEditor';
+
+export type {
+    NativeRichTextEditorFocusPreservingElement,
+    NativeRichTextEditorFocusPreservingRef,
+    NativeRichTextEditorFocusPreservingRefs,
+    RichTextEditorFocusPreservingElement,
+    RichTextEditorFocusPreservingRef,
+    RichTextEditorFocusPreservingRefs,
+} from './useFocusPreservingFrames';

package/src/ResourceLimits.ts

@@ -0,0 +1,187 @@
+import { NativeEditorBoundaryError } from './NativeEditorBoundaryError';
+
+/**
+ * Bounds on the documents, schemas, and collaboration payloads the Rust core
+ * will admit. Set them on `NativeEditorCreateConfig.limits.resource` when
+ * creating a document handle, or on `RichTextViewer.resourceLimits`.
+ *
+ * Every field is optional; an omitted one uses
+ * {@link DEFAULT_EDITOR_RESOURCE_LIMITS}. Each value must be a positive
+ * integer no greater than the matching {@link HARD_EDITOR_RESOURCE_LIMITS}
+ * ceiling — anything else throws `NativeEditorBoundaryError`
+ * (`INVALID_RESOURCE_LIMIT`). Exceeding a limit at runtime raises
+ * `INPUT_LIMIT_EXCEEDED`, `DOCUMENT_LIMIT_EXCEEDED`, or `SCHEMA_INVALID`.
+ */
+export interface EditorResourceLimits {
+    /** Byte ceiling for a single config, document JSON, or HTML string crossing into the core. */
+    maxInputBytes?: number;
+    /** Maximum number of nodes in a document. */
+    maxDocumentNodes?: number;
+    /** Maximum node nesting depth in a document. */
+    maxDocumentDepth?: number;
+    /** Maximum number of node specs in a schema definition. */
+    maxSchemaNodes?: number;
+    /** Byte ceiling for the combined `content` expressions of a schema's nodes. */
+    maxSchemaExpressionBytes?: number;
+    /** Byte ceiling for one inbound collaboration message. */
+    maxCollaborationMessageBytes?: number;
+    /** Byte ceiling for an encoded Yjs state — imported room snapshots and exported ones. */
+    maxEncodedStateBytes?: number;
+}
+
+/**
+ * Bounds on editing work inside the engine, set on
+ * `NativeEditorCreateConfig.limits.editing`. Omitted fields use the Rust
+ * core's defaults; supplied values are validated against the same hard
+ * ceilings the core enforces.
+ */
+export interface EditorEditingLimits {
+    /** Maximum operations one compiled transaction may carry. Core default 256. */
+    maxOperationsPerTransaction?: number;
+    /** Maximum undoable groups retained in history. Core default 500. */
+    maxUndoGroups?: number;
+    /** Maximum document units the undo stack may retain across all groups. Core default 1,000,000. */
+    maxUndoRetainedUnits?: number;
+    /** Byte ceiling for derived output (HTML, JSON, render state) the engine produces. Core default 32 MiB. */
+    maxDerivedOutputBytes?: number;
+}
+
+/**
+ * Bounds on the native collaboration transport, set on
+ * `NativeEditorCreateConfig.limits.collaboration`. Omitted fields use the
+ * Rust core's defaults; supplied values are validated against the same hard
+ * ceilings the core enforces.
+ */
+export interface EditorCollaborationLimits {
+    /** Maximum protocol frames decoded from one transport message. Core default 64. */
+    maxFramesPerMessage?: number;
+    /** Byte ceiling for a single protocol frame. Core default 10 MiB. */
+    maxFrameBytes?: number;
+    /** Byte ceiling for all reply frames produced for one inbound message. Core default 10 MiB. */
+    maxAggregateResponseBytes?: number;
+    /** Maximum tracked awareness peers. Core default 1,024. */
+    maxAwarenessPeers?: number;
+    /** Byte ceiling for one peer's awareness state. Core default 64 KiB. */
+    maxAwarenessPeerBytes?: number;
+    /** Byte ceiling for all retained awareness state. Core default 10 MiB. */
+    maxAwarenessBytes?: number;
+    /** Maximum messages queued for send while disconnected. Core default 256. */
+    maxPendingOutboxMessages?: number;
+    /** Byte ceiling for the outbound queue. Core default 10 MiB. */
+    maxPendingOutboxBytes?: number;
+    /** Byte ceiling for remote updates buffered while awaiting their missing dependencies. Core default 10 MiB. */
+    maxPendingDependencyUpdateBytes?: number;
+    /** Work ceiling for those buffered dependency updates. Core default 1,000,000. */
+    maxPendingDependencyUpdateWork?: number;
+}
+
+/** {@link EditorResourceLimits} with every default filled in. */
+export interface ResolvedEditorResourceLimits {
+    maxInputBytes: number;
+    maxDocumentNodes: number;
+    maxDocumentDepth: number;
+    maxSchemaNodes: number;
+    maxSchemaExpressionBytes: number;
+    maxCollaborationMessageBytes: number;
+    maxEncodedStateBytes: number;
+}
+
+/** The value used for each {@link EditorResourceLimits} field left unset. */
+export const DEFAULT_EDITOR_RESOURCE_LIMITS: Readonly<ResolvedEditorResourceLimits> = {
+    maxInputBytes: 20 * 1024 * 1024,
+    maxDocumentNodes: 100_000,
+    maxDocumentDepth: 256,
+    maxSchemaNodes: 1_024,
+    maxSchemaExpressionBytes: 64 * 1024,
+    maxCollaborationMessageBytes: 10 * 1024 * 1024,
+    maxEncodedStateBytes: 50 * 1024 * 1024,
+};
+
+/** The ceiling each {@link EditorResourceLimits} field may not exceed. */
+export const HARD_EDITOR_RESOURCE_LIMITS: Readonly<ResolvedEditorResourceLimits> = {
+    maxInputBytes: 64 * 1024 * 1024,
+    maxDocumentNodes: 1_000_000,
+    maxDocumentDepth: 1_024,
+    maxSchemaNodes: 10_000,
+    maxSchemaExpressionBytes: 1024 * 1024,
+    maxCollaborationMessageBytes: 64 * 1024 * 1024,
+    maxEncodedStateBytes: 256 * 1024 * 1024,
+};
+
+const HARD_EDITOR_EDITING_LIMITS: Readonly<Required<EditorEditingLimits>> = {
+    maxOperationsPerTransaction: 4_096,
+    maxUndoGroups: 2_000,
+    maxUndoRetainedUnits: 8_000_000,
+    maxDerivedOutputBytes: 128 * 1024 * 1024,
+};
+
+const HARD_EDITOR_COLLABORATION_LIMITS: Readonly<Required<EditorCollaborationLimits>> = {
+    maxFramesPerMessage: 1_024,
+    maxFrameBytes: 64 * 1024 * 1024,
+    maxAggregateResponseBytes: 64 * 1024 * 1024,
+    maxAwarenessPeers: 10_000,
+    maxAwarenessPeerBytes: 1024 * 1024,
+    maxAwarenessBytes: 64 * 1024 * 1024,
+    maxPendingOutboxMessages: 4_096,
+    maxPendingOutboxBytes: 64 * 1024 * 1024,
+    maxPendingDependencyUpdateBytes: 64 * 1024 * 1024,
+    maxPendingDependencyUpdateWork: 8_000_000,
+};
+
+function validateLimit(name: string, value: number, ceiling: number): void {
+    if (!Number.isSafeInteger(value) || value <= 0 || value > ceiling) {
+        throw new NativeEditorBoundaryError(
+            'INVALID_RESOURCE_LIMIT',
+            `${name} must be a positive integer no greater than ${ceiling}`,
+            ceiling,
+            value
+        );
+    }
+}
+
+function resolveLimit(name: keyof ResolvedEditorResourceLimits, value?: number): number {
+    const resolved = value ?? DEFAULT_EDITOR_RESOURCE_LIMITS[name];
+    validateLimit(name, resolved, HARD_EDITOR_RESOURCE_LIMITS[name]);
+    return resolved;
+}
+
+function validateOverrides<T extends object>(
+    limits: T | undefined,
+    ceilings: Readonly<Required<T>>
+): void {
+    if (limits === undefined) return;
+    for (const name of Object.keys(ceilings) as Array<keyof T>) {
+        const value = limits[name];
+        if (value !== undefined) {
+            validateLimit(String(name), value as number, ceilings[name] as number);
+        }
+    }
+}
+
+export function validateEditorCreateLimits(limits?: {
+    resource?: EditorResourceLimits;
+    editing?: EditorEditingLimits;
+    collaboration?: EditorCollaborationLimits;
+}): void {
+    validateOverrides(limits?.resource, HARD_EDITOR_RESOURCE_LIMITS);
+    validateOverrides(limits?.editing, HARD_EDITOR_EDITING_LIMITS);
+    validateOverrides(limits?.collaboration, HARD_EDITOR_COLLABORATION_LIMITS);
+}
+
+/**
+ * Fill in every unset {@link EditorResourceLimits} field from
+ * {@link DEFAULT_EDITOR_RESOURCE_LIMITS}, validating each value against
+ * {@link HARD_EDITOR_RESOURCE_LIMITS}.
+ *
+ * @throws NativeEditorBoundaryError `INVALID_RESOURCE_LIMIT` when a value is
+ * not a positive integer within its ceiling.
+ */
+export function resolveEditorResourceLimits(
+    limits: EditorResourceLimits = {}
+): ResolvedEditorResourceLimits {
+    return Object.fromEntries(
+        (Object.keys(DEFAULT_EDITOR_RESOURCE_LIMITS) as Array<
+            keyof ResolvedEditorResourceLimits
+        >).map((name) => [name, resolveLimit(name, limits[name])])
+    ) as unknown as ResolvedEditorResourceLimits;
+}

package/src/RichTextEditor.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import { type RichTextEditorRef, type RichTextEditorProps } from './RichTextEditorTypes';
+import { useRichTextEditorState } from './useRichTextEditorState';
+import { useRichTextEditorUpdates } from './useRichTextEditorUpdates';
+import { useRichTextEditorCommands } from './useRichTextEditorCommands';
+import { useRichTextEditorEvents } from './useRichTextEditorEvents';
+import { useRichTextEditorMentions } from './useRichTextEditorMentions';
+import { useRichTextEditorPresentation } from './useRichTextEditorPresentation';
+
+export const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorProps>(
+    function RichTextEditor(props, ref) {
+        const state = useRichTextEditorState(props, ref);
+        const updates = useRichTextEditorUpdates(state);
+        const commands = useRichTextEditorCommands({ ...state, ...updates });
+        const events = useRichTextEditorEvents({ ...state, ...updates, ...commands });
+        const mentions = useRichTextEditorMentions({
+            ...state,
+            ...commands,
+            ...updates,
+            ...events,
+        });
+        return useRichTextEditorPresentation({ ...state, ...mentions, ...commands, ...events });
+    }
+);
+
+/** @deprecated Use RichTextEditor instead. */
+export const NativeRichTextEditor = RichTextEditor;