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

package/dist/useRichTextEditorMentions.js

@@ -0,0 +1,316 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextEditorMentions = useRichTextEditorMentions;
+const EditorMentionThemeNormalization_1 = require("./EditorMentionThemeNormalization");
+const react_1 = require("react");
+const addons_1 = require("./addons");
+const NativeEditorBridge_1 = require("./NativeEditorBridge");
+const EditorToolbar_1 = require("./EditorToolbar");
+const RichTextEditorSerialization_1 = require("./RichTextEditorSerialization");
+function useRichTextEditorMentions(context) {
+    const { addonsRef, editableRef, bridge, documentHandle, currentPushedUpdateEditorIdRef, documentDescriptor, latestRevisionRef, document, afterLocalEngineMutation, isForThisEditor, setMentionQuery, mentionQuery, addons, editable, isFocused, activeStateRef, toolbarFrameOwnerId, } = context;
+    const resolveMentionSelectionAttrs = (0, react_1.useCallback)((selectionEvent) => {
+        let resolvedAttrs;
+        try {
+            resolvedAttrs =
+                addonsRef.current?.mentions?.resolveSelectionAttrs?.(selectionEvent);
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('NativeRichTextEditor: mentions.resolveSelectionAttrs threw', error);
+            }
+        }
+        return (0, RichTextEditorSerialization_1.isRecord)(resolvedAttrs)
+            ? { ...selectionEvent.attrs, ...resolvedAttrs }
+            : selectionEvent.attrs;
+    }, []);
+    const resolveMentionTheme = (0, react_1.useCallback)((selectionEvent) => {
+        let resolvedTheme;
+        try {
+            resolvedTheme = addonsRef.current?.mentions?.resolveTheme?.(selectionEvent);
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('NativeRichTextEditor: mentions.resolveTheme threw', error);
+            }
+        }
+        if (resolvedTheme === undefined || resolvedTheme === null)
+            return undefined;
+        // A rejected theme is dropped rather than written into the
+        // document: every later renderUpdate revalidates it, so one bad
+        // value would make the content permanently unrenderable.
+        if (!(0, NativeEditorBridge_1.validEditorMentionTheme)(resolvedTheme)) {
+            if (__DEV__) {
+                console.error('NativeRichTextEditor: mentions.resolveTheme did not return an EditorMentionTheme; ignoring it', resolvedTheme);
+            }
+            return undefined;
+        }
+        return resolvedTheme;
+    }, []);
+    const resolveMentionInsertionAttrs = (0, react_1.useCallback)((selectionEvent) => {
+        const attrs = resolveMentionSelectionAttrs(selectionEvent);
+        const resolvedTheme = resolveMentionTheme({ ...selectionEvent, attrs });
+        return resolvedTheme != null
+            ? { ...attrs, mentionTheme: (0, EditorMentionThemeNormalization_1.normalizeEditorMentionTheme)(resolvedTheme) }
+            : attrs;
+    }, [resolveMentionSelectionAttrs, resolveMentionTheme]);
+    const insertMentionSuggestion = (0, react_1.useCallback)((request) => {
+        const mentions = addonsRef.current?.mentions;
+        if (!mentions || !editableRef.current)
+            return;
+        const snapshot = bridge.renderUpdate({
+            anchor: request.range.anchor,
+            head: request.range.head,
+        });
+        if (snapshot.selection.type !== 'text' ||
+            (request.documentVersion != null &&
+                request.documentVersion !== snapshot.documentVersion)) {
+            return;
+        }
+        const markAttrs = Object.fromEntries(Object.entries(snapshot.activeState.markAttrs).map(([mark, attrs]) => [
+            mark,
+            { ...attrs },
+        ]));
+        const callbackEvent = {
+            trigger: request.trigger,
+            suggestion: request.suggestion,
+            attrs: request.attrs,
+            markAttrs,
+            range: request.range,
+            documentVersion: snapshot.documentVersion,
+        };
+        const attrs = resolveMentionInsertionAttrs(callbackEvent);
+        // Selection envelopes address scalars, not document positions.
+        const anchorScalar = snapshot.selection.anchorScalar;
+        const headScalar = snapshot.selection.headScalar;
+        if (documentHandle.isDestroyed ||
+            currentPushedUpdateEditorIdRef.current !== documentHandle.editorId ||
+            anchorScalar == null ||
+            headScalar == null) {
+            return;
+        }
+        // Affinity policy mirrors the native adapters and the engine's
+        // own cursor resolution: a collapsed caret prefers After with a
+        // deterministic Before fallback at text-boundary positions; a
+        // range uses Before. The fallback changes only the stickiness
+        // of the SAME position — it is not a guessed-position retry.
+        const collapsed = anchorScalar === headScalar;
+        const syncSelection = (affinity) => bridge.setSelection({
+            baseDocumentRevision: snapshot.documentVersion,
+            selection: {
+                type: 'text',
+                anchor: { offset: anchorScalar, kind: 'scalar', affinity },
+                head: { offset: headScalar, kind: 'scalar', affinity },
+            },
+        });
+        try {
+            try {
+                syncSelection(collapsed ? 'after' : 'before');
+            }
+            catch (error) {
+                if (!collapsed || !(0, RichTextEditorSerialization_1.isPositionInvalidError)(error))
+                    throw error;
+                syncSelection('before');
+            }
+            const outcome = bridge.applyCommand({
+                baseDocumentRevision: snapshot.documentVersion,
+                command: {
+                    type: 'insertContentJson',
+                    json: (0, addons_1.buildMentionFragmentJson)(attrs, documentDescriptor, {
+                        trailingSpace: true,
+                    }),
+                },
+            });
+            if (outcome.type !== 'transaction' || !outcome.changed)
+                return;
+            latestRevisionRef.current = outcome.documentRevision;
+        }
+        catch (error) {
+            if ((0, RichTextEditorSerialization_1.isRevisionMismatchError)(error)) {
+                document.refresh();
+                return;
+            }
+            throw error;
+        }
+        afterLocalEngineMutation();
+        mentions.onSelect?.({
+            trigger: request.trigger,
+            suggestion: request.suggestion,
+            attrs,
+            documentVersion: snapshot.documentVersion,
+        });
+    }, [
+        afterLocalEngineMutation,
+        bridge,
+        document,
+        documentDescriptor,
+        documentHandle,
+        resolveMentionInsertionAttrs,
+    ]);
+    const handleAddonEvent = (0, react_1.useCallback)((event) => {
+        if (documentHandle.isDestroyed || !isForThisEditor(event.nativeEvent))
+            return;
+        let parsed;
+        try {
+            const value = JSON.parse(event.nativeEvent.eventJson);
+            if (!(0, RichTextEditorSerialization_1.isRecord)(value) || typeof value.type !== 'string')
+                return;
+            parsed = value;
+        }
+        catch {
+            return;
+        }
+        const mentions = addonsRef.current?.mentions;
+        if (!mentions)
+            return;
+        const documentVersion = typeof parsed.documentVersion === 'string' ? parsed.documentVersion : undefined;
+        if (parsed.type === 'mentionsQueryChange') {
+            if (typeof parsed.query !== 'string' ||
+                typeof parsed.trigger !== 'string' ||
+                typeof parsed.isActive !== 'boolean' ||
+                !(0, RichTextEditorSerialization_1.isRecord)(parsed.range) ||
+                typeof parsed.range.anchor !== 'number' ||
+                typeof parsed.range.head !== 'number') {
+                return;
+            }
+            const queryEvent = {
+                query: parsed.query,
+                trigger: parsed.trigger,
+                range: parsed.range,
+                isActive: parsed.isActive,
+                ...(documentVersion ? { documentVersion } : {}),
+            };
+            mentions.onQueryChange?.(queryEvent);
+            setMentionQuery(parsed.isActive ? queryEvent : null);
+            return;
+        }
+        if (parsed.type === 'mentionsSelect') {
+            if (typeof parsed.trigger !== 'string' ||
+                typeof parsed.suggestionKey !== 'string' ||
+                !(0, RichTextEditorSerialization_1.isRecord)(parsed.attrs)) {
+                return;
+            }
+            const suggestion = mentions.suggestions?.find((candidate) => candidate.key === parsed.suggestionKey);
+            if (!suggestion)
+                return;
+            mentions.onSelect?.({
+                trigger: parsed.trigger,
+                suggestion,
+                attrs: parsed.attrs,
+                ...(documentVersion ? { documentVersion } : {}),
+            });
+            return;
+        }
+        if (parsed.type !== 'mentionsSelectRequest' ||
+            typeof parsed.trigger !== 'string' ||
+            typeof parsed.suggestionKey !== 'string' ||
+            !(0, RichTextEditorSerialization_1.isRecord)(parsed.attrs) ||
+            !(0, RichTextEditorSerialization_1.isRecord)(parsed.range) ||
+            !Number.isInteger(parsed.range.anchor) ||
+            !Number.isInteger(parsed.range.head) ||
+            parsed.range.anchor < 0 ||
+            parsed.range.head < 0 ||
+            parsed.range.anchor > 4294967295 ||
+            parsed.range.head > 4294967295) {
+            return;
+        }
+        const suggestion = mentions.suggestions?.find((candidate) => candidate.key === parsed.suggestionKey);
+        if (!suggestion)
+            return;
+        insertMentionSuggestion({
+            trigger: parsed.trigger,
+            suggestion,
+            attrs: parsed.attrs,
+            range: parsed.range,
+            documentVersion,
+        });
+    }, [documentHandle, insertMentionSuggestion, isForThisEditor]);
+    const handleMentionSuggestionPress = (0, react_1.useCallback)((suggestion) => {
+        if (mentionQuery == null)
+            return;
+        const normalized = (0, addons_1.normalizeNativeEditorAddons)(addonsRef.current)?.mentions?.suggestions.find((candidate) => candidate.key === suggestion.key);
+        if (normalized == null)
+            return;
+        setMentionQuery(null);
+        insertMentionSuggestion({
+            trigger: mentionQuery.trigger,
+            suggestion,
+            attrs: normalized.attrs,
+            range: mentionQuery.range,
+            documentVersion: mentionQuery.documentVersion,
+        });
+    }, [insertMentionSuggestion, mentionQuery]);
+    const mentionsEnabled = addons.mentions != null;
+    const mentionTrigger = addons.mentions?.trigger?.trim() || '@';
+    (0, react_1.useEffect)(() => {
+        if (!mentionsEnabled || (mentionQuery != null && mentionQuery.trigger !== mentionTrigger)) {
+            setMentionQuery(null);
+        }
+    }, [mentionsEnabled, mentionQuery, mentionTrigger, setMentionQuery]);
+    const mentionSuggestions = addons?.mentions?.suggestions;
+    const mentionSuggestionTheme = addons?.mentions?.theme;
+    const shouldPublishMentionSuggestions = editable && isFocused && mentionQuery != null && (mentionSuggestions?.length ?? 0) > 0;
+    const mentionSuggestionThemes = (0, react_1.useMemo)(() => {
+        if (mentionQuery == null ||
+            mentionSuggestions == null ||
+            typeof addons?.mentions?.resolveTheme !== 'function') {
+            return undefined;
+        }
+        const normalized = (0, addons_1.normalizeNativeEditorAddons)(addons)?.mentions?.suggestions;
+        if (normalized == null)
+            return undefined;
+        const themes = {};
+        for (const suggestion of mentionSuggestions) {
+            const normalizedSuggestion = normalized.find((candidate) => candidate.key === suggestion.key);
+            if (normalizedSuggestion == null)
+                continue;
+            const selectionEvent = {
+                trigger: mentionQuery.trigger,
+                suggestion,
+                attrs: normalizedSuggestion.attrs,
+                markAttrs: activeStateRef.current.markAttrs,
+                range: mentionQuery.range,
+                ...(mentionQuery.documentVersion
+                    ? { documentVersion: mentionQuery.documentVersion }
+                    : {}),
+            };
+            const attrs = resolveMentionSelectionAttrs(selectionEvent);
+            const merged = (0, RichTextEditorSerialization_1.mergeMentionSuggestionTheme)(mentionSuggestionTheme, resolveMentionTheme({ ...selectionEvent, attrs }));
+            if (merged != null) {
+                themes[suggestion.key] = merged;
+            }
+        }
+        return Object.keys(themes).length > 0 ? themes : undefined;
+    }, [
+        addons,
+        mentionQuery,
+        mentionSuggestionTheme,
+        mentionSuggestions,
+        resolveMentionSelectionAttrs,
+        resolveMentionTheme,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!shouldPublishMentionSuggestions ||
+            mentionQuery == null ||
+            mentionSuggestions == null) {
+            (0, EditorToolbar_1.setEditorToolbarMentionState)(toolbarFrameOwnerId, null);
+            return;
+        }
+        (0, EditorToolbar_1.setEditorToolbarMentionState)(toolbarFrameOwnerId, {
+            trigger: mentionQuery.trigger,
+            suggestions: mentionSuggestions,
+            theme: mentionSuggestionTheme,
+            suggestionThemes: mentionSuggestionThemes,
+            onSelectSuggestion: handleMentionSuggestionPress,
+        });
+    }, [
+        handleMentionSuggestionPress,
+        mentionQuery,
+        mentionSuggestionTheme,
+        mentionSuggestionThemes,
+        mentionSuggestions,
+        shouldPublishMentionSuggestions,
+        toolbarFrameOwnerId,
+    ]);
+    return { mentionSuggestionTheme, handleAddonEvent };
+}

package/dist/useRichTextEditorPresentation.d.ts

@@ -0,0 +1,5 @@
+import { useRichTextEditorState } from './useRichTextEditorState';
+import { useRichTextEditorMentions } from './useRichTextEditorMentions';
+import { useRichTextEditorCommands } from './useRichTextEditorCommands';
+import { useRichTextEditorEvents } from './useRichTextEditorEvents';
+export declare function useRichTextEditorPresentation(context: Pick<ReturnType<typeof useRichTextEditorState>, 'theme' | 'addons' | 'imageLoadingPolicy' | 'androidInputOptions' | 'remoteSelections' | 'atoms' | 'atomState' | 'atomComponents' | 'warnedUnknownAtomTypesRef' | 'atomContentWidth' | 'atomPositions' | 'atomViewport' | 'virtualizeAtoms' | 'nativeAtomViewport' | 'selectedKeys' | 'editable' | 'atomsInteractive' | 'documentHandle' | 'activeState' | 'onRequestLink' | 'onRequestImage' | 'toolbarItemsSerializationCacheRef' | 'toolbarItems' | 'document' | 'toolbarPlacement' | 'showToolbar' | 'containerStyle' | 'style' | 'heightBehavior' | 'autoGrowHeight' | 'pushedUpdate' | 'editorId' | 'registeredToolbarFrames' | 'suppliedFocusPreservingFrames' | 'isFocused' | 'nativeViewRef' | 'refreshFocusPreservingFrames' | 'accessibilityLabel' | 'accessibilityHint' | 'placeholder' | 'autoFocus' | 'autoCapitalize' | 'autoCorrect' | 'keyboardType' | 'allowImageResizing' | 'toolbarFrameOwnerId' | 'onToolbarAction'> & Pick<ReturnType<typeof useRichTextEditorMentions>, 'mentionSuggestionTheme' | 'handleAddonEvent'> & Pick<ReturnType<typeof useRichTextEditorCommands>, 'runAtomAction' | 'updateAtomAttrs' | 'atomOwnerRef' | 'commandToggleMark' | 'commandToggleList' | 'commandToggleHeading' | 'commandToggleBlockquote' | 'commandInsertNode' | 'commandIndentListItem' | 'commandOutdentListItem' | 'openLinkRequest' | 'openImageRequest'> & Pick<ReturnType<typeof useRichTextEditorEvents>, 'handleEditorUpdate' | 'handleEditorError' | 'handleExternalTextCompositionEnd' | 'handleSelectionChange' | 'handleFocusChange' | 'handleContentHeightChange' | 'handleAtomLayout' | 'handleToolbarAction'>): import("react/jsx-runtime").JSX.Element | null;

package/dist/useRichTextEditorPresentation.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextEditorPresentation = useRichTextEditorPresentation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditorTheme_1 = require("./EditorTheme");
+const addons_1 = require("./addons");
+const ImageLoadingPolicy_1 = require("./ImageLoadingPolicy");
+const atoms_1 = require("./atoms");
+const atomInstances_1 = require("./atomInstances");
+const DefaultAtomChip_1 = require("./DefaultAtomChip");
+const react_native_1 = require("react-native");
+const atomConstants_1 = require("./atomConstants");
+const AtomHost_1 = require("./AtomHost");
+const schemas_1 = require("./schemas");
+const EditorToolbar_1 = require("./EditorToolbar");
+const RichTextEditorSerialization_1 = require("./RichTextEditorSerialization");
+const RichTextEditorNativeView_1 = require("./RichTextEditorNativeView");
+function useRichTextEditorPresentation(context) {
+    const { theme, mentionSuggestionTheme, addons, imageLoadingPolicy, androidInputOptions, remoteSelections, atoms, atomState, atomComponents, warnedUnknownAtomTypesRef, runAtomAction, updateAtomAttrs, atomOwnerRef, atomContentWidth, atomPositions, atomViewport, virtualizeAtoms, nativeAtomViewport, selectedKeys, editable, atomsInteractive, documentHandle, activeState, onRequestLink, onRequestImage, toolbarItemsSerializationCacheRef, toolbarItems, document, toolbarPlacement, showToolbar, containerStyle, style, heightBehavior, autoGrowHeight, pushedUpdate, editorId, registeredToolbarFrames, suppliedFocusPreservingFrames, isFocused, nativeViewRef, refreshFocusPreservingFrames, accessibilityLabel, accessibilityHint, placeholder, autoFocus, autoCapitalize, autoCorrect, keyboardType, allowImageResizing, handleEditorUpdate, handleEditorError, handleExternalTextCompositionEnd, handleSelectionChange, handleFocusChange, handleContentHeightChange, handleAtomLayout, handleToolbarAction, handleAddonEvent, toolbarFrameOwnerId, commandToggleMark, commandToggleList, commandToggleHeading, commandToggleBlockquote, commandInsertNode, commandIndentListItem, commandOutdentListItem, openLinkRequest, openImageRequest, onToolbarAction, } = context;
+    const themeJson = (0, react_1.useMemo)(() => (0, EditorTheme_1.serializeEditorTheme)(theme, mentionSuggestionTheme), [mentionSuggestionTheme, theme]);
+    const addonsJson = (0, RichTextEditorSerialization_1.useSerializedValue)(addons, (value) => (0, addons_1.serializeNormalizedEditorAddons)(value));
+    const imageLoadingPolicyJson = (0, RichTextEditorSerialization_1.useSerializedValue)(imageLoadingPolicy, (value) => (0, ImageLoadingPolicy_1.serializeEditorImageLoadingPolicy)(value));
+    const androidInputOptionsJson = (0, RichTextEditorSerialization_1.useSerializedValue)(androidInputOptions, (value) => JSON.stringify(value));
+    const remoteSelectionsJson = (0, RichTextEditorSerialization_1.useSerializedValue)(remoteSelections, (selections) => (0, RichTextEditorSerialization_1.serializeRemoteSelections)(selections));
+    const atomsJson = (0, react_1.useMemo)(() => {
+        const supplied = (0, atoms_1.serializeEditorAtoms)(atoms);
+        const serialized = supplied == null
+            ? { nodeTypes: [], estimatedHeights: {} }
+            : JSON.parse(supplied);
+        for (const instance of atomState.instances) {
+            if (Object.prototype.hasOwnProperty.call(serialized.estimatedHeights, instance.nodeType)) {
+                continue;
+            }
+            serialized.nodeTypes.push(instance.nodeType);
+            serialized.estimatedHeights[instance.nodeType] = atomInstances_1.DEFAULT_ATOM_CHIP_HEIGHT;
+        }
+        return serialized.nodeTypes.length === 0 ? undefined : JSON.stringify(serialized);
+    }, [atomState.instances, atoms]);
+    (0, react_1.useEffect)(() => {
+        if (!__DEV__)
+            return;
+        for (const instance of atomState.instances) {
+            if (atomComponents.has(instance.nodeType) ||
+                warnedUnknownAtomTypesRef.current.has(instance.nodeType)) {
+                continue;
+            }
+            warnedUnknownAtomTypesRef.current.add(instance.nodeType);
+            console.warn(`NativeRichTextEditor: rendering unknown atom type '${instance.nodeType}' as a chip`);
+        }
+    }, [atomComponents, atomState.instances]);
+    const runAtomActionRef = (0, react_1.useRef)(runAtomAction);
+    runAtomActionRef.current = runAtomAction;
+    const invokeAtomAction = (0, react_1.useCallback)((...args) => runAtomActionRef.current(...args), []);
+    const updateAtomAttrsRef = (0, react_1.useRef)(updateAtomAttrs);
+    updateAtomAttrsRef.current = updateAtomAttrs;
+    const invokeAtomAttrsUpdate = (0, react_1.useCallback)((owner, instance, documentVersion, attrs) => {
+        if (owner !== atomOwnerRef.current)
+            return Promise.reject(new atomInstances_1.AtomUpdateAttrsError('not-ready', 'The editor has rebound.'));
+        return updateAtomAttrsRef.current(instance.key, instance.nodeType, instance.docPos, documentVersion, instance.hasStableKey, attrs);
+    }, []);
+    const atomChildren = (0, react_1.useMemo)(() => atomContentWidth == null
+        ? null
+        : atomState.instances.map((instance) => {
+            const Component = atomComponents.get(instance.nodeType) ?? DefaultAtomChip_1.DefaultAtomChip;
+            const position = atomPositions.get(instance.key);
+            const width = position?.width ?? atomContentWidth;
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { nativeID: `${atomConstants_1.ATOM_NATIVE_ID_PREFIX}${instance.key}`, collapsable: false, style: {
+                    position: 'absolute',
+                    top: react_native_1.Platform.OS === 'android' ? (position?.hostY ?? 0) : 0,
+                    left: react_native_1.Platform.OS === 'android' ? (position?.hostX ?? 0) : 0,
+                    width,
+                }, children: (0, jsx_runtime_1.jsx)(AtomHost_1.AtomHost, { nativeID: `${atomConstants_1.ATOM_CONTENT_NATIVE_ID_PREFIX}${instance.key}`, component: Component, width: width, estimatedHeight: (atoms ?? []).find((atom) => atom.name === instance.nodeType)
+                        ?.estimatedHeight ?? atomInstances_1.DEFAULT_ATOM_CHIP_HEIGHT, visible: !position ||
+                        (0, AtomHost_1.atomIsVisible)(position.y, position.height ??
+                            (atoms ?? []).find((atom) => atom.name === instance.nodeType)?.estimatedHeight ??
+                            atomInstances_1.DEFAULT_ATOM_CHIP_HEIGHT, atomViewport ??
+                            (virtualizeAtoms ? nativeAtomViewport : undefined)), atomProps: {
+                        attrs: instance.attrs,
+                        selected: selectedKeys.has(instance.key),
+                        readOnly: !editable,
+                        interactive: atomsInteractive,
+                        isViewer: false,
+                        nodeType: instance.nodeType,
+                        updateAttrs: (attrs) => invokeAtomAttrsUpdate(documentHandle, instance, atomState.documentVersion, attrs),
+                        editor: {
+                            select: () => invokeAtomAction(documentHandle, instance, atomState.documentVersion, 'select'),
+                            delete: () => invokeAtomAction(documentHandle, instance, atomState.documentVersion, 'delete'),
+                            focusBefore: () => invokeAtomAction(documentHandle, instance, atomState.documentVersion, 'before'),
+                            focusAfter: () => invokeAtomAction(documentHandle, instance, atomState.documentVersion, 'after'),
+                        },
+                    } }) }, instance.key));
+        }), [
+        atoms,
+        atomViewport,
+        documentHandle,
+        invokeAtomAction,
+        virtualizeAtoms,
+        nativeAtomViewport,
+        atomsInteractive,
+        atomComponents,
+        atomContentWidth,
+        atomPositions,
+        atomState.instances,
+        editable,
+        invokeAtomAttrsUpdate,
+        selectedKeys,
+    ]);
+    const isLinkActive = activeState.marks.link === true;
+    const allowsLink = activeState.allowedMarks.includes('link');
+    const canInsertImage = activeState.insertableNodes.includes(schemas_1.IMAGE_NODE_NAME);
+    const canRequestLink = typeof onRequestLink === 'function';
+    const canRequestImage = typeof onRequestImage === 'function';
+    const cachedToolbarItems = toolbarItemsSerializationCacheRef.current;
+    let toolbarItemsJson;
+    if (cachedToolbarItems &&
+        cachedToolbarItems.toolbarItems === toolbarItems &&
+        cachedToolbarItems.editable === editable &&
+        cachedToolbarItems.isLinkActive === isLinkActive &&
+        cachedToolbarItems.allowsLink === allowsLink &&
+        cachedToolbarItems.canRequestLink === canRequestLink &&
+        cachedToolbarItems.canRequestImage === canRequestImage &&
+        cachedToolbarItems.canInsertImage === canInsertImage) {
+        toolbarItemsJson = cachedToolbarItems.serialized;
+    }
+    else {
+        const mappedItems = (0, RichTextEditorSerialization_1.mapToolbarItemsForNative)(toolbarItems, activeState, editable, onRequestLink, onRequestImage);
+        toolbarItemsJson = (0, RichTextEditorSerialization_1.stringifyCachedJson)(mappedItems);
+        toolbarItemsSerializationCacheRef.current = {
+            toolbarItems,
+            editable,
+            isLinkActive,
+            allowsLink,
+            canRequestLink,
+            canRequestImage,
+            canInsertImage,
+            serialized: toolbarItemsJson,
+        };
+    }
+    // A room document awaiting the server renders nothing (loading), never an
+    // unshared fallback paragraph.
+    if (!document.isReady)
+        return null;
+    const usesNativeKeyboardToolbar = toolbarPlacement === 'keyboard' && (react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android');
+    const shouldRenderJsToolbar = showToolbar && !usesNativeKeyboardToolbar && editable;
+    const inlineToolbarMarginTop = theme?.toolbar?.marginTop ?? 8;
+    const containerMinHeight = react_native_1.StyleSheet.flatten(containerStyle)?.minHeight;
+    const nativeViewStyleParts = [];
+    if (containerMinHeight != null) {
+        nativeViewStyleParts.push({ minHeight: containerMinHeight });
+    }
+    if (style != null) {
+        nativeViewStyleParts.push(style);
+    }
+    if (heightBehavior === 'autoGrow' && autoGrowHeight != null) {
+        nativeViewStyleParts.push({ height: autoGrowHeight });
+    }
+    const nativeViewStyle = nativeViewStyleParts.length <= 1 ? nativeViewStyleParts[0] : nativeViewStyleParts;
+    const currentPushedUpdate = pushedUpdate?.editorId === editorId ? pushedUpdate : null;
+    const focusPreservingFrames = [...registeredToolbarFrames, ...suppliedFocusPreservingFrames];
+    const toolbarFrameJson = (0, RichTextEditorSerialization_1.serializeToolbarFrames)(editable && isFocused ? focusPreservingFrames : undefined);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [RichTextEditorNativeView_1.styles.container, containerStyle], children: [(0, jsx_runtime_1.jsx)(RichTextEditorNativeView_1.NativeEditorView, { ref: nativeViewRef, style: nativeViewStyle, onLayout: refreshFocusPreservingFrames, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, editorId: editorId, placeholder: placeholder, editable: editable, autoFocus: autoFocus, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, keyboardType: keyboardType, ...(react_native_1.Platform.OS === 'android' ? { androidInputOptionsJson } : {}), showToolbar: showToolbar, toolbarPlacement: toolbarPlacement, heightBehavior: heightBehavior, allowImageResizing: allowImageResizing, imageLoadingPolicyJson: imageLoadingPolicyJson, themeJson: themeJson, addonsJson: addonsJson, atomsJson: atomsJson, toolbarItemsJson: toolbarItemsJson, toolbarFrameJson: toolbarFrameJson, remoteSelectionsJson: remoteSelectionsJson, editorUpdateJson: currentPushedUpdate?.json, editorUpdateResetJson: currentPushedUpdate?.resetJson, editorUpdateEditorId: currentPushedUpdate?.editorId, editorUpdateRevision: currentPushedUpdate?.revision ?? 0, onEditorUpdate: handleEditorUpdate, onEditorError: handleEditorError, onExternalTextCompositionEnd: handleExternalTextCompositionEnd, onSelectionChange: handleSelectionChange, onFocusChange: handleFocusChange, onContentHeightChange: handleContentHeightChange, onAtomLayout: handleAtomLayout, onToolbarAction: handleToolbarAction, onAddonEvent: handleAddonEvent, children: atomChildren }), shouldRenderJsToolbar ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: 'native-editor-js-toolbar', style: [RichTextEditorNativeView_1.styles.inlineToolbar, { marginTop: inlineToolbarMarginTop }], children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbarFrameOwnerProvider, { ownerId: toolbarFrameOwnerId, children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { activeState: activeState, historyState: document.historyState, toolbarItems: toolbarItems, theme: theme?.toolbar, showTopBorder: theme?.toolbar?.showTopBorder ?? false, preserveEditorFocus: false, onToggleMark: commandToggleMark, onToggleListType: (listType) => commandToggleList(listType), onToggleHeading: commandToggleHeading, onToggleBlockquote: commandToggleBlockquote, onInsertNodeType: commandInsertNode, onRunCommand: (command) => {
+                            switch (command) {
+                                case 'indentList':
+                                    commandIndentListItem();
+                                    break;
+                                case 'outdentList':
+                                    commandOutdentListItem();
+                                    break;
+                                case 'undo':
+                                    document.undo();
+                                    break;
+                                case 'redo':
+                                    document.redo();
+                                    break;
+                            }
+                        }, onRequestLink: onRequestLink ? openLinkRequest : undefined, onRequestImage: onRequestImage ? openImageRequest : undefined, onToolbarAction: onToolbarAction, onToggleBold: () => commandToggleMark('bold'), onToggleItalic: () => commandToggleMark('italic'), onToggleUnderline: () => commandToggleMark('underline'), onToggleStrike: () => commandToggleMark('strike'), onUndo: document.undo, onRedo: document.redo }) }) })) : null] }));
+}