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

package/src/schemaResolution.ts

@@ -0,0 +1,242 @@
+import { NativeEditorBoundaryError } from './NativeEditorBoundaryError';
+import { resolveEditorResourceLimits, type ResolvedEditorResourceLimits } from './ResourceLimits';
+import { contentExpressionSymbols, minimalContentMatch } from './contentExpression';
+import { type DocumentDescriptorLimits, defaultSchema } from './schemaPresets';
+import {
+    type SchemaWorkBudget,
+    type AdmittedSchemaCollections,
+    forEachGroupToken,
+    consumeSchemaWork,
+    collectOwnAttrs,
+    consumeSchemaStringWork,
+    utf8ByteLengthUpTo,
+    normalizeSchemaDefinition,
+    schemaBoundaryError,
+} from './schemaNormalization';
+import { type SchemaDefinition, type NodeSpec, type AttrSpec } from './schemaDefinition';
+import { constructDefaultEmptyDocument } from './schemaDocumentConstruction';
+
+export function resolveDescriptorLimits(
+    limits?: DocumentDescriptorLimits
+): ResolvedEditorResourceLimits {
+    return resolveEditorResourceLimits(limits);
+}
+
+export function createSchemaWorkBudget(limits: ResolvedEditorResourceLimits): SchemaWorkBudget {
+    return {
+        limit: limits.maxSchemaNodes * 64 + limits.maxSchemaExpressionBytes * 32,
+        work: 0,
+        exhausted: false,
+    };
+}
+
+export function admitSchemaCollections(
+    schema: SchemaDefinition,
+    budget: SchemaWorkBudget
+): AdmittedSchemaCollections | null {
+    const groupsByNode = new Map<NodeSpec, readonly string[]>();
+    const attrsByNode = new Map<NodeSpec, ReadonlyArray<[string, AttrSpec]>>();
+
+    for (let nodeIndex = 0; nodeIndex < schema.nodes.length; nodeIndex += 1) {
+        const node = schema.nodes[nodeIndex];
+        if (node == null || typeof node !== 'object') return null;
+        const groups: string[] = [];
+        if (typeof node.group === 'string') {
+            if (
+                !forEachGroupToken(
+                    node.group,
+                    (group) => groups.push(group),
+                    () => consumeSchemaWork(budget),
+                    () => consumeSchemaWork(budget)
+                )
+            ) {
+                throw schemaBoundaryError(budget.limit, budget.limit + 1);
+            }
+        }
+        const attrs = collectOwnAttrs(node.attrs, budget);
+        if (attrs == null) return null;
+        const projectionAttrs = collectOwnAttrs(node.json?.attrs, budget);
+        if (projectionAttrs == null) return null;
+        if (
+            node.json != null &&
+            ((typeof node.json.type === 'string' &&
+                !consumeSchemaStringWork(budget, node.json.type)) ||
+                projectionAttrs.some(([name, rawValue]) => {
+                    const value: unknown = rawValue;
+                    return (
+                        !consumeSchemaStringWork(budget, name) ||
+                        (typeof value === 'string'
+                            ? !consumeSchemaStringWork(budget, value)
+                            : !consumeSchemaWork(budget))
+                    );
+                }))
+        ) {
+            throw schemaBoundaryError(budget.limit, budget.limit + 1);
+        }
+        if (budget.exhausted) {
+            throw schemaBoundaryError(budget.limit, budget.limit + 1);
+        }
+        groupsByNode.set(node, groups);
+        attrsByNode.set(node, attrs);
+    }
+
+    for (let markIndex = 0; markIndex < schema.marks.length; markIndex += 1) {
+        const mark = schema.marks[markIndex];
+        if (!consumeSchemaWork(budget)) {
+            throw schemaBoundaryError(budget.limit, budget.limit + 1);
+        }
+        if (mark == null || typeof mark !== 'object') return null;
+        const attrs = collectOwnAttrs(mark.attrs, budget);
+        if (attrs == null) return null;
+        if (budget.exhausted) {
+            throw schemaBoundaryError(budget.limit, budget.limit + 1);
+        }
+    }
+
+    return { groupsByNode, attrsByNode };
+}
+
+/** Mirror native's invalid-schema fallback after bounded admission succeeds. */
+export function resolveDocumentSchema(
+    schema?: SchemaDefinition,
+    limits?: DocumentDescriptorLimits
+): SchemaDefinition {
+    if (schema == null) return defaultSchema;
+    if (!Array.isArray(schema.nodes)) return defaultSchema;
+    if (!Array.isArray(schema.marks)) {
+        schema = { ...schema, marks: [] };
+    }
+
+    const resolvedLimits = resolveDescriptorLimits(limits);
+    if (schema.nodes.length > resolvedLimits.maxSchemaNodes) {
+        throw schemaBoundaryError(resolvedLimits.maxSchemaNodes, schema.nodes.length);
+    }
+    let expressionBytes = 0;
+    for (let nodeIndex = 0; nodeIndex < schema.nodes.length; nodeIndex += 1) {
+        const node = schema.nodes[nodeIndex];
+        if (node != null && typeof node.content === 'string') {
+            expressionBytes += utf8ByteLengthUpTo(
+                node.content,
+                resolvedLimits.maxSchemaExpressionBytes - expressionBytes
+            );
+            if (expressionBytes > resolvedLimits.maxSchemaExpressionBytes) {
+                throw schemaBoundaryError(resolvedLimits.maxSchemaExpressionBytes, expressionBytes);
+            }
+        }
+    }
+    const schemaBudget = createSchemaWorkBudget(resolvedLimits);
+    if (admitSchemaCollections(schema, schemaBudget) == null) return defaultSchema;
+    const normalizedSchema = normalizeSchemaDefinition(schema, schemaBudget);
+    if (normalizedSchema == null) return defaultSchema;
+    schema = normalizedSchema;
+    const admittedCollections = admitSchemaCollections(schema, {
+        limit: Number.MAX_SAFE_INTEGER,
+        work: 0,
+        exhausted: false,
+    });
+    if (admittedCollections == null) return defaultSchema;
+
+    const nodeNames = new Set<string>();
+    const markNames = new Set<string>();
+    let docRoles = 0;
+    let textRoles = 0;
+    for (const node of schema.nodes) {
+        if (
+            node == null ||
+            typeof node.name !== 'string' ||
+            node.name.length === 0 ||
+            typeof node.content !== 'string' ||
+            typeof node.role !== 'string' ||
+            nodeNames.has(node.name)
+        ) {
+            return defaultSchema;
+        }
+        nodeNames.add(node.name);
+        if (node.role === 'doc') docRoles += 1;
+        if (node.role === 'text') textRoles += 1;
+    }
+    for (const mark of schema.marks) {
+        if (
+            mark == null ||
+            typeof mark.name !== 'string' ||
+            mark.name.length === 0 ||
+            markNames.has(mark.name)
+        ) {
+            return defaultSchema;
+        }
+        markNames.add(mark.name);
+    }
+    if (docRoles !== 1 || textRoles !== 1) return defaultSchema;
+
+    const groups = new Set<string>();
+    const nodesBySymbol = new Map<string, NodeSpec[]>();
+    const addCandidate = (symbol: string, node: NodeSpec): void => {
+        const candidates = nodesBySymbol.get(symbol);
+        if (candidates) candidates.push(node);
+        else nodesBySymbol.set(symbol, [node]);
+    };
+    for (const node of schema.nodes) {
+        addCandidate(node.name, node);
+        for (const group of admittedCollections.groupsByNode.get(node) ?? []) {
+            groups.add(group);
+            addCandidate(group, node);
+        }
+    }
+    for (const node of schema.nodes) {
+        const symbols = contentExpressionSymbols(node.content);
+        if (
+            symbols == null ||
+            symbols.some((symbol) => !nodeNames.has(symbol) && !groups.has(symbol))
+        ) {
+            return defaultSchema;
+        }
+    }
+
+    const generatable = new Set<string>();
+    const consumeWork = (): boolean => consumeSchemaWork(schemaBudget);
+    const contentIsConstructible = (node: NodeSpec): boolean => {
+        if (!consumeWork()) return false;
+        return (
+            minimalContentMatch(
+                node.content,
+                (symbol) => {
+                    const candidates = nodesBySymbol.get(symbol) ?? [];
+                    for (const candidate of candidates) {
+                        if (!consumeWork()) return undefined;
+                        if (generatable.has(candidate.name)) return { type: candidate.name };
+                    }
+                    return undefined;
+                },
+                consumeWork
+            ) != null
+        );
+    };
+    while (true) {
+        const before = generatable.size;
+        for (const node of schema.nodes) {
+            const hasRequiredAttrs = (admittedCollections.attrsByNode.get(node) ?? []).some(
+                ([, attr]) => attr.default === undefined
+            );
+            if (node.role !== 'text' && !hasRequiredAttrs && contentIsConstructible(node)) {
+                generatable.add(node.name);
+            }
+        }
+        if (generatable.size === before) break;
+    }
+    if (schemaBudget.exhausted) {
+        throw schemaBoundaryError(schemaBudget.limit, schemaBudget.limit + 1);
+    }
+    const hasUnconstructibleNode = schema.nodes.some((node) => !contentIsConstructible(node));
+    if (schemaBudget.exhausted) {
+        throw schemaBoundaryError(schemaBudget.limit, schemaBudget.limit + 1);
+    }
+    if (hasUnconstructibleNode) return defaultSchema;
+
+    try {
+        constructDefaultEmptyDocument(schema, resolvedLimits, admittedCollections);
+        return schema;
+    } catch (error) {
+        if (error instanceof NativeEditorBoundaryError) throw error;
+        return defaultSchema;
+    }
+}

package/src/schemas.ts

@@ -0,0 +1,43 @@
+export {
+    type AttrSpec,
+    type DOMOutputSpec,
+    type ParseDOMRule,
+    type AttributeDOMOutputSpec,
+    type NodeJSONProjection,
+    type NodeHtmlRules,
+    type NodeSpec,
+    type MarkSpec,
+    type SchemaDefinition,
+    type SchemaNodeSpec,
+    type SchemaMarkSpec,
+    type SchemaSpec,
+    defineSchema,
+} from './schemaDefinition';
+export {
+    type ImageNodeAttributes,
+    type ResolvedDocumentSchema,
+    IMAGE_NODE_NAME,
+    imageNodeSpec,
+    withImagesSchema,
+    buildDocumentFragmentJson,
+    buildImageFragmentJson,
+    tiptapCompatibleSchemaSpec,
+    tiptapCompatibleSchema,
+    prosemirrorSchemaSpec,
+    prosemirrorSchema,
+    defaultSchemaSpec,
+    defaultSchema,
+} from './schemaPresets';
+export { resolveDocumentSchema } from './schemaResolution';
+export {
+    defaultEmptyDocument,
+    resolveDocumentDescriptor,
+    normalizeDocumentJson,
+} from './schemaDocument';
+
+export {
+    ATOM_HTML_DENIED_ATTRS,
+    ATOM_HTML_DENIED_TAGS,
+    ATOM_HTML_IDENTIFIER,
+    RESERVED_WIRE_NODE_TYPES,
+} from './atomPolicy';

package/src/specs/PreparedProseViewerNativeComponent.ts

@@ -0,0 +1,40 @@
+import { codegenNativeComponent, type ViewProps } from 'react-native';
+import type {
+    DirectEventHandler,
+    Double,
+    Int32,
+    WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeProps extends ViewProps {
+    sourceKind?: WithDefault<'json' | 'html', 'json'>;
+    source: string;
+    configJson: string;
+    themeJson?: string;
+    imagePolicyJson?: string;
+    imagesEnabled?: WithDefault<boolean, true>;
+    collapsesWhenEmpty?: WithDefault<boolean, true>;
+    enableLinkTaps?: WithDefault<boolean, true>;
+    mentionInteractionsEnabled?: WithDefault<boolean, false>;
+    fontEnvironmentRevision: Int32;
+    onPressLink?: DirectEventHandler<{ href: string; text: string }>;
+    // React Native numbers are IEEE-754 doubles, which exactly represent every
+    // UInt32 document position. Int32 would corrupt positions above 2^31 - 1.
+    onPressMention?: DirectEventHandler<{ docPos: Double; label: string; attrsJson: string }>;
+    onAtomLayout?: DirectEventHandler<{
+        generation: string;
+        revision: string;
+        layoutWidth: Double;
+        atomsJson: string;
+    }>;
+    onError?: DirectEventHandler<{
+        domain: string;
+        code: string;
+        message: string;
+        fatal: boolean;
+    }>;
+}
+
+export default codegenNativeComponent<NativeProps>('PreparedProseViewer', {
+    interfaceOnly: true,
+});

package/src/useEditorToolbarInteractions.tsx

@@ -0,0 +1,329 @@
+import { useCallback, useEffect } from 'react';
+import { Keyboard } from 'react-native';
+import { useEditorToolbarState } from './useEditorToolbarState';
+import { useEditorToolbarItems } from './useEditorToolbarItems';
+import {
+    unregisterEditorToolbarFrame,
+    registerEditorToolbarFrame,
+    endEditorToolbarInteraction,
+    beginEditorToolbarInteraction,
+} from './EditorToolbarRegistry';
+import { KEYBOARD_FRAME_REMEASURE_DELAYS_MS } from './EditorToolbarVisuals';
+import { type ToolbarButton, type ToolbarGroupButton } from './EditorToolbarTypes';
+
+export function useEditorToolbarInteractions(
+    context: Pick<
+        ReturnType<typeof useEditorToolbarState>,
+        | 'showTopBorder'
+        | 'theme'
+        | 'registrationIdRef'
+        | 'rootRef'
+        | 'publishesFocusFrames'
+        | 'frameOwnerId'
+        | 'framePublisherMountedRef'
+        | 'publishesFocusFramesRef'
+        | 'frameOwnerIdRef'
+        | 'menuRegistrationIdRef'
+        | 'menuCardRef'
+        | 'menuState'
+        | 'menuStateRef'
+        | 'framePublishAnimationFramesRef'
+        | 'framePublishTimeoutsRef'
+        | 'expandedGroupKey'
+        | 'windowHeight'
+        | 'windowWidth'
+        | 'toolbarInteractionActiveRef'
+        | 'setExpandedGroupKey'
+        | 'setMenuState'
+        | 'shouldRenderMentionSuggestions'
+        | 'preserveEditorFocus'
+        | 'groupButtonRefs'
+    > &
+        Pick<
+            ReturnType<typeof useEditorToolbarItems>,
+            'startItems' | 'scrollItems' | 'endItems' | 'groupsByKey'
+        >
+) {
+    const {
+        showTopBorder,
+        theme,
+        registrationIdRef,
+        rootRef,
+        publishesFocusFrames,
+        frameOwnerId,
+        framePublisherMountedRef,
+        publishesFocusFramesRef,
+        frameOwnerIdRef,
+        menuRegistrationIdRef,
+        menuCardRef,
+        menuState,
+        menuStateRef,
+        framePublishAnimationFramesRef,
+        framePublishTimeoutsRef,
+        expandedGroupKey,
+        startItems,
+        scrollItems,
+        endItems,
+        windowHeight,
+        windowWidth,
+        toolbarInteractionActiveRef,
+        groupsByKey,
+        setExpandedGroupKey,
+        setMenuState,
+        shouldRenderMentionSuggestions,
+        preserveEditorFocus,
+        groupButtonRefs,
+    } = context;
+
+    const resolvedShowTopBorder = showTopBorder ?? theme?.showTopBorder ?? true;
+
+    const publishToolbarFrame = useCallback(() => {
+        const registrationId = registrationIdRef.current;
+        const toolbar = rootRef.current;
+        if (!publishesFocusFrames || registrationId == null || !toolbar) {
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+            return;
+        }
+
+        if (typeof toolbar.measureInWindow !== 'function') {
+            return;
+        }
+
+        const measuredFrameOwnerId = frameOwnerId;
+        toolbar.measureInWindow((x, y, width, height) => {
+            if (
+                !framePublisherMountedRef.current ||
+                !publishesFocusFramesRef.current ||
+                frameOwnerIdRef.current !== measuredFrameOwnerId
+            ) {
+                return;
+            }
+            registerEditorToolbarFrame(
+                registrationId,
+                { x, y, width, height },
+                measuredFrameOwnerId
+            );
+        });
+    }, [frameOwnerId, publishesFocusFrames]);
+
+    const publishMenuFrame = useCallback(() => {
+        const registrationId = menuRegistrationIdRef.current;
+        const menuCard = menuCardRef.current;
+        if (!publishesFocusFrames || menuState == null || registrationId == null || !menuCard) {
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+            return;
+        }
+
+        if (typeof menuCard.measureInWindow !== 'function') {
+            return;
+        }
+
+        const measuredFrameOwnerId = frameOwnerId;
+        const measuredMenuState = menuState;
+        menuCard.measureInWindow((x, y, width, height) => {
+            if (
+                !framePublisherMountedRef.current ||
+                !publishesFocusFramesRef.current ||
+                frameOwnerIdRef.current !== measuredFrameOwnerId ||
+                menuStateRef.current !== measuredMenuState
+            ) {
+                return;
+            }
+            registerEditorToolbarFrame(
+                registrationId,
+                { x, y, width, height },
+                measuredFrameOwnerId
+            );
+        });
+    }, [frameOwnerId, menuState, publishesFocusFrames]);
+
+    const publishToolbarFrames = useCallback(() => {
+        publishToolbarFrame();
+        publishMenuFrame();
+    }, [publishMenuFrame, publishToolbarFrame]);
+
+    const cancelScheduledFramePublishes = useCallback(() => {
+        framePublishAnimationFramesRef.current.forEach((frame) => cancelAnimationFrame(frame));
+        framePublishAnimationFramesRef.current = [];
+        framePublishTimeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+        framePublishTimeoutsRef.current = [];
+    }, []);
+
+    const scheduleToolbarFramePublish = useCallback(() => {
+        if (!publishesFocusFrames) {
+            return;
+        }
+
+        cancelScheduledFramePublishes();
+        publishToolbarFrames();
+
+        framePublishAnimationFramesRef.current.push(requestAnimationFrame(publishToolbarFrames));
+        KEYBOARD_FRAME_REMEASURE_DELAYS_MS.forEach((delay) => {
+            framePublishTimeoutsRef.current.push(setTimeout(publishToolbarFrames, delay));
+        });
+    }, [cancelScheduledFramePublishes, publishesFocusFrames, publishToolbarFrames]);
+
+    const handleToolbarLayout = useCallback(() => {
+        requestAnimationFrame(publishToolbarFrame);
+    }, [publishToolbarFrame]);
+
+    const handleMenuLayout = useCallback(() => {
+        requestAnimationFrame(publishMenuFrame);
+    }, [publishMenuFrame]);
+
+    useEffect(() => {
+        if (!publishesFocusFrames) {
+            const registrationId = registrationIdRef.current;
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+            return;
+        }
+
+        const frame = requestAnimationFrame(publishToolbarFrame);
+        return () => cancelAnimationFrame(frame);
+    }, [
+        expandedGroupKey,
+        menuState?.groupKey,
+        publishesFocusFrames,
+        publishToolbarFrame,
+        startItems.length,
+        scrollItems.length,
+        endItems.length,
+        windowHeight,
+        windowWidth,
+    ]);
+
+    useEffect(() => {
+        if (!publishesFocusFrames || menuState == null) {
+            const registrationId = menuRegistrationIdRef.current;
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+            return;
+        }
+
+        const frame = requestAnimationFrame(publishMenuFrame);
+        return () => cancelAnimationFrame(frame);
+    }, [menuState, publishesFocusFrames, publishMenuFrame, windowHeight, windowWidth]);
+
+    useEffect(() => {
+        const registrationId = registrationIdRef.current;
+        const menuRegistrationId = menuRegistrationIdRef.current;
+        return () => {
+            cancelScheduledFramePublishes();
+            if (toolbarInteractionActiveRef.current) {
+                toolbarInteractionActiveRef.current = false;
+                endEditorToolbarInteraction();
+            }
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+            if (menuRegistrationId != null) {
+                unregisterEditorToolbarFrame(menuRegistrationId);
+            }
+        };
+    }, [cancelScheduledFramePublishes]);
+
+    useEffect(() => {
+        if (!publishesFocusFrames) {
+            cancelScheduledFramePublishes();
+            return;
+        }
+
+        const subscriptions = [
+            Keyboard.addListener('keyboardDidShow', scheduleToolbarFramePublish),
+            Keyboard.addListener('keyboardDidHide', scheduleToolbarFramePublish),
+            Keyboard.addListener('keyboardDidChangeFrame', scheduleToolbarFramePublish),
+        ];
+
+        return () => {
+            subscriptions.forEach((subscription) => subscription.remove());
+            cancelScheduledFramePublishes();
+        };
+    }, [cancelScheduledFramePublishes, publishesFocusFrames, scheduleToolbarFramePublish]);
+
+    useEffect(() => {
+        if (expandedGroupKey != null && !groupsByKey.has(expandedGroupKey)) {
+            setExpandedGroupKey(null);
+        }
+    }, [expandedGroupKey, groupsByKey]);
+
+    useEffect(() => {
+        if (menuState != null && !groupsByKey.has(menuState.groupKey)) {
+            setMenuState(null);
+        }
+    }, [groupsByKey, menuState]);
+
+    useEffect(() => {
+        if (shouldRenderMentionSuggestions) {
+            setExpandedGroupKey(null);
+            setMenuState(null);
+        }
+    }, [shouldRenderMentionSuggestions]);
+
+    const handleButtonPress = useCallback((button: ToolbarButton) => {
+        button.action();
+        if (button.groupKey) {
+            setExpandedGroupKey((current) => (current === button.groupKey ? null : current));
+        }
+        setMenuState(null);
+    }, []);
+
+    const handleToolbarPressIn = useCallback(() => {
+        if (preserveEditorFocus && !toolbarInteractionActiveRef.current) {
+            toolbarInteractionActiveRef.current = true;
+            beginEditorToolbarInteraction();
+        }
+    }, [preserveEditorFocus]);
+
+    const handleToolbarPressOut = useCallback(() => {
+        if (preserveEditorFocus && toolbarInteractionActiveRef.current) {
+            toolbarInteractionActiveRef.current = false;
+            endEditorToolbarInteraction();
+        }
+    }, [preserveEditorFocus]);
+
+    const handleGroupPress = useCallback((group: ToolbarGroupButton) => {
+        if (group.isDisabled) {
+            return;
+        }
+        if (group.presentation === 'expand') {
+            setMenuState(null);
+            setExpandedGroupKey((current) => (current === group.key ? null : group.key));
+            return;
+        }
+
+        const anchor = groupButtonRefs.current.get(group.key);
+        if (!anchor) {
+            return;
+        }
+        anchor.measureInWindow((x, y, width, height) => {
+            setExpandedGroupKey(null);
+            setMenuState((current) =>
+                current?.groupKey === group.key
+                    ? null
+                    : {
+                          groupKey: group.key,
+                          x,
+                          y,
+                          width,
+                          height,
+                      }
+            );
+        });
+    }, []);
+    return {
+        handleToolbarPressIn,
+        handleToolbarPressOut,
+        handleGroupPress,
+        handleButtonPress,
+        handleToolbarLayout,
+        resolvedShowTopBorder,
+        handleMenuLayout,
+    };
+}