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

package/src/AtomHost.tsx

@@ -0,0 +1,180 @@
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { AtomUpdateAttrsError } from './atomInstances';
+import type { AtomAttrsUpdate, AtomComponent, AtomComponentProps } from './atoms';
+
+export interface AtomViewport {
+    /** Visible vertical range in the atom layout's coordinate space, in points. */
+    y: number;
+    height: number;
+    overscan?: number;
+}
+
+export function atomIsVisible(y: number, height: number, viewport?: AtomViewport): boolean {
+    if (!viewport) return true;
+    if (
+        ![viewport.y, viewport.height, viewport.overscan ?? 200].every(Number.isFinite) ||
+        viewport.height < 0 ||
+        (viewport.overscan ?? 200) < 0
+    ) {
+        throw new Error(
+            'Atom viewport must have finite coordinates and non-negative height and overscan.'
+        );
+    }
+    const overscan = viewport.overscan ?? 200;
+    return y + height >= viewport.y - overscan && y <= viewport.y + viewport.height + overscan;
+}
+
+class AtomErrorBoundary extends React.Component<
+    {
+        component: AtomComponent;
+        nodeType: string;
+        children: React.ReactNode;
+    },
+    { error: boolean; component: AtomComponent }
+> {
+    state = { error: false, component: this.props.component };
+
+    static getDerivedStateFromError() {
+        return { error: true };
+    }
+
+    static getDerivedStateFromProps(
+        props: { component: AtomComponent },
+        state: { component: AtomComponent }
+    ) {
+        return props.component === state.component
+            ? null
+            : { component: props.component, error: false };
+    }
+
+    render() {
+        if (!this.state.error) return this.props.children;
+        return (
+            <View accessibilityRole='alert' style={{ minHeight: 32, padding: 8 }}>
+                <Text>Unable to display {this.props.nodeType}</Text>
+                <Pressable
+                    accessibilityRole='button'
+                    onPress={() => this.setState({ error: false })}>
+                    <Text>Retry</Text>
+                </Pressable>
+            </View>
+        );
+    }
+}
+
+export function AtomHost({
+    component: Component,
+    atomProps,
+    width,
+    estimatedHeight,
+    visible = true,
+    onMeasure,
+    nativeID,
+}: {
+    component: AtomComponent;
+    atomProps: Omit<AtomComponentProps, 'updatePending' | 'updateError' | 'setActive'>;
+    width: number;
+    estimatedHeight: number;
+    visible?: boolean;
+    onMeasure?: (event: import('react-native').LayoutChangeEvent) => void;
+    nativeID?: string;
+}) {
+    const [measurement, setMeasurement] = useState({ width, height: estimatedHeight });
+    const [focused, setFocused] = useState(false);
+    const [active, setActive] = useState(false);
+    const [pending, setPending] = useState(0);
+    const [updateError, setUpdateError] = useState<Error | null>(null);
+    const latestRequest = useRef(0);
+    const applyUpdate = atomProps.updateAttrs;
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    const updateAttrs = useCallback(
+        async (update: AtomAttrsUpdate) => {
+            if (!mounted.current)
+                throw new AtomUpdateAttrsError('not-ready', 'The atom is unmounted.');
+            const request = ++latestRequest.current;
+            setPending((count) => count + 1);
+            setUpdateError(null);
+            try {
+                await applyUpdate(update);
+            } catch (error) {
+                if (mounted.current && latestRequest.current === request)
+                    setUpdateError(error instanceof Error ? error : new Error(String(error)));
+                throw error;
+            } finally {
+                if (mounted.current) setPending((count) => count - 1);
+            }
+        },
+        [applyUpdate]
+    );
+    const editor = useMemo(() => {
+        if (!atomProps.editor) return undefined;
+        const guard = (action: () => Promise<void>) => async () => {
+            if (!mounted.current)
+                throw new AtomUpdateAttrsError('not-ready', 'The atom is unmounted.');
+            return action();
+        };
+        return {
+            select: guard(atomProps.editor.select),
+            delete: guard(atomProps.editor.delete),
+            focusBefore: guard(atomProps.editor.focusBefore),
+            focusAfter: guard(atomProps.editor.focusAfter),
+        };
+    }, [atomProps.editor]);
+    const retainedHeight = measurement.width === width ? measurement.height : estimatedHeight;
+    const show = visible || focused || active || pending > 0 || atomProps.selected;
+    return (
+        <View
+            testID='atom-host'
+            nativeID={nativeID}
+            collapsable={false}
+            pointerEvents={atomProps.interactive === false ? 'none' : 'box-none'}
+            accessibilityElementsHidden={!show}
+            importantForAccessibility={!show ? 'no-hide-descendants' : 'auto'}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            onLayout={(event) => {
+                onMeasure?.(event);
+                const size = event.nativeEvent.layout;
+                if (
+                    show &&
+                    Number.isFinite(size.height) &&
+                    size.height >= 0 &&
+                    Math.abs(size.width - width) <= 1
+                ) {
+                    setMeasurement((previous) =>
+                        previous.width === width && previous.height === size.height
+                            ? previous
+                            : { width, height: size.height }
+                    );
+                }
+            }}
+            style={show ? undefined : { height: retainedHeight }}>
+            {show && (
+                <AtomErrorBoundary component={Component} nodeType={atomProps.nodeType}>
+                    <Suspense
+                        fallback={
+                            <View style={{ height: retainedHeight }}>
+                                <Text>Loading {atomProps.nodeType}…</Text>
+                            </View>
+                        }>
+                        <Component
+                            {...atomProps}
+                            editor={editor}
+                            updateAttrs={updateAttrs}
+                            updatePending={pending > 0}
+                            updateError={updateError}
+                            setActive={setActive}
+                        />
+                    </Suspense>
+                </AtomErrorBoundary>
+            )}
+        </View>
+    );
+}

package/src/DefaultAtomChip.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { AtomComponentProps } from './atoms';
+import { DEFAULT_ATOM_CHIP_HEIGHT } from './atomConstants';
+
+export function DefaultAtomChip({ nodeType }: AtomComponentProps) {
+    return (
+        <View style={styles.container}>
+            <Text style={styles.label}>{nodeType}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        minHeight: DEFAULT_ATOM_CHIP_HEIGHT,
+        justifyContent: 'center',
+        paddingHorizontal: 10,
+        borderRadius: 6,
+        backgroundColor: '#E5E7EB',
+    },
+    label: {
+        color: '#374151',
+        fontSize: 13,
+    },
+});

package/src/EditorAddon.ts

@@ -0,0 +1,65 @@
+import type { MentionsAddonConfig } from './addons';
+
+export interface MentionPressEvent {
+    docPos: number;
+    label: string;
+    attrs: Record<string, unknown>;
+}
+
+export interface MentionsAddonOptions extends MentionsAddonConfig {
+    /** Prepended to viewer mention labels unless already present. */
+    prefix?: string;
+    /** Enables mention presses in the viewer. */
+    onPress?: (event: MentionPressEvent) => void;
+}
+
+export interface CodeHighlightingAddonOptions {
+    readonly provider: string;
+    readonly theme: string;
+}
+
+export interface MentionsAddon {
+    readonly id: 'mentions';
+    readonly version: 1;
+    readonly capability: 'mentions';
+    readonly options: Readonly<MentionsAddonOptions>;
+}
+
+export interface CodeHighlightingAddon {
+    readonly id: 'code-highlighting';
+    readonly version: 1;
+    readonly capability: 'code-highlighting';
+    readonly options: CodeHighlightingAddonOptions;
+}
+
+export type EditorAddon = MentionsAddon | CodeHighlightingAddon;
+export type EditorAddonEntry = EditorAddon | false | null | undefined;
+export type EditorAddons = readonly EditorAddonEntry[];
+
+function copyConfiguration<T>(value: T, ancestors = new Set<object>()): T {
+    if (value === null || typeof value !== 'object') return value;
+    if (ancestors.has(value)) throw new Error('Addon configuration must not contain cycles.');
+    if (!Array.isArray(value) && Object.getPrototypeOf(value) !== Object.prototype) {
+        throw new Error('Addon configuration must contain only plain objects and arrays.');
+    }
+    ancestors.add(value);
+    const copy = Array.isArray(value)
+        ? value.map((entry) => copyConfiguration(entry, ancestors))
+        : Object.fromEntries(
+              Object.entries(value).map(([key, entry]) => [
+                  key,
+                  copyConfiguration(entry, ancestors),
+              ])
+          );
+    ancestors.delete(value);
+    return Object.freeze(copy) as T;
+}
+
+export function createMentionsAddon(options: MentionsAddonOptions = {}): MentionsAddon {
+    return Object.freeze({
+        id: 'mentions',
+        version: 1,
+        capability: 'mentions',
+        options: copyConfiguration(options),
+    });
+}

package/src/EditorAddonNormalization.ts

@@ -0,0 +1,49 @@
+import type {
+    CodeHighlightingAddonOptions,
+    EditorAddons,
+    MentionsAddonOptions,
+} from './EditorAddon';
+
+export interface NormalizedEditorAddons {
+    mentions?: Readonly<MentionsAddonOptions>;
+    codeHighlighting?: CodeHighlightingAddonOptions;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function normalizeEditorAddons(addons?: EditorAddons): NormalizedEditorAddons {
+    if (addons === undefined) return {};
+    if (!Array.isArray(addons)) throw new Error('addons must be a flat readonly array.');
+    const normalized: NormalizedEditorAddons = {};
+    const ids = new Set<string>();
+    for (const [index, addon] of addons.entries()) {
+        if (addon === false || addon === null || addon === undefined) continue;
+        const path = `addons[${index}]`;
+        if (!isRecord(addon)) throw new Error(`${path} must be an addon descriptor.`);
+        if (addon.version !== 1) throw new Error(`${path}.version must be 1.`);
+        if (addon.capability !== 'mentions' && addon.capability !== 'code-highlighting') {
+            throw new Error(`${path}.capability is unsupported.`);
+        }
+        if (addon.id !== addon.capability) throw new Error(`${path}.id must match its capability.`);
+        if (ids.has(addon.capability))
+            throw new Error(`${path}: duplicate addon id '${addon.id}'.`);
+        ids.add(addon.capability);
+        if (!isRecord(addon.options)) throw new Error(`${path}.options must be an object.`);
+        if (addon.capability === 'mentions') {
+            normalized.mentions = addon.options;
+        } else {
+            for (const key of ['provider', 'theme'] as const) {
+                if (typeof addon.options[key] !== 'string' || !addon.options[key].trim()) {
+                    throw new Error(`${path}.options.${key} must be a nonempty string.`);
+                }
+            }
+            normalized.codeHighlighting = {
+                provider: addon.options.provider as string,
+                theme: addon.options.theme as string,
+            };
+        }
+    }
+    return normalized;
+}

package/src/EditorMentionThemeNormalization.ts

@@ -0,0 +1,25 @@
+import type { EditorMentionTheme } from './EditorTheme';
+import { normalizeEditorTheme } from './EditorStyleSheetNormalization';
+import type { NormalizedEditorStyle } from './EditorStyleSheetTypes';
+import { validEditorMentionTheme } from './EditorMentionThemeValidation';
+
+export type SerializedEditorMentionTheme = Omit<EditorMentionTheme, 'node'> & {
+    node?: NonNullable<EditorMentionTheme['node']> & { style?: NormalizedEditorStyle };
+};
+
+export function normalizeEditorMentionTheme(
+    theme?: EditorMentionTheme
+): SerializedEditorMentionTheme | undefined {
+    if (theme === undefined) return undefined;
+    if (!validEditorMentionTheme(theme)) throw new TypeError('Invalid mention theme');
+    if (!theme.node) return theme;
+    const node = theme.node as Record<string, unknown>;
+    const { textColor, style: existingStyle, ...appearance } = node;
+    const style = normalizeEditorTheme({
+        mention: [{ color: textColor }, appearance, existingStyle],
+    }).styles?.mention;
+    return {
+        ...theme,
+        node: { style },
+    };
+}

package/src/EditorMentionThemeValidation.ts

@@ -0,0 +1,133 @@
+import type {
+    EditorMentionNodeTheme,
+    EditorMentionSuggestionOptionTheme,
+    EditorMentionSuggestionsTheme,
+    EditorMentionTheme,
+} from './EditorTheme';
+import { normalizeEditorTheme } from './EditorStyleSheetNormalization';
+function isPlainRecord(value: unknown): value is Record<string, unknown> {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function hasOnlyOwnKeys(value: Record<string, unknown>, fields: readonly string[]): boolean {
+    return Reflect.ownKeys(value).every((key) => typeof key === 'string' && fields.includes(key));
+}
+
+export const MENTION_NODE_STRING_FIELDS = [
+    'textColor',
+    'backgroundColor',
+    'borderColor',
+] as const satisfies readonly (keyof EditorMentionNodeTheme)[];
+
+export const MENTION_NODE_NUMBER_FIELDS = [
+    'borderWidth',
+    'borderRadius',
+] as const satisfies readonly (keyof EditorMentionNodeTheme)[];
+
+export const MENTION_OPTION_STRING_FIELDS = [
+    'textColor',
+    'secondaryTextColor',
+    'backgroundColor',
+    'borderColor',
+    'highlightedBackgroundColor',
+    'highlightedTextColor',
+] as const satisfies readonly (keyof EditorMentionSuggestionOptionTheme)[];
+
+export const MENTION_OPTION_NUMBER_FIELDS = [
+    'borderWidth',
+    'borderRadius',
+] as const satisfies readonly (keyof EditorMentionSuggestionOptionTheme)[];
+
+export const MENTION_SUGGESTIONS_STRING_FIELDS = [
+    'backgroundColor',
+    'borderColor',
+    'shadowColor',
+] as const satisfies readonly (keyof EditorMentionSuggestionsTheme)[];
+
+export const MENTION_SUGGESTIONS_NUMBER_FIELDS = [
+    'borderWidth',
+    'borderRadius',
+] as const satisfies readonly (keyof EditorMentionSuggestionsTheme)[];
+
+export const EDITOR_MENTION_THEME_FONT_WEIGHTS: ReadonlySet<
+    NonNullable<EditorMentionNodeTheme['fontWeight']>
+> = new Set(['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900']);
+
+export const EDITOR_MENTION_THEME_FIELDS = [
+    'node',
+    'suggestions',
+] as const satisfies readonly (keyof EditorMentionTheme)[];
+
+export function validMentionFontWeight(value: unknown): boolean {
+    return (
+        value === undefined ||
+        (typeof value === 'string' &&
+            EDITOR_MENTION_THEME_FONT_WEIGHTS.has(
+                value as NonNullable<EditorMentionNodeTheme['fontWeight']>
+            ))
+    );
+}
+
+export function validMentionThemeSection(
+    value: unknown,
+    stringFields: readonly string[],
+    numberFields: readonly string[],
+    extraFields: readonly string[]
+): value is Record<string, unknown> {
+    if (!isPlainRecord(value)) return false;
+    if (!hasOnlyOwnKeys(value, [...stringFields, ...numberFields, ...extraFields])) return false;
+    return (
+        stringFields.every(
+            (field) => value[field] === undefined || typeof value[field] === 'string'
+        ) &&
+        numberFields.every(
+            (field) =>
+                value[field] === undefined ||
+                (typeof value[field] === 'number' && Number.isFinite(value[field]))
+        )
+    );
+}
+
+export function validEditorMentionTheme(value: unknown): value is EditorMentionTheme {
+    if (!isPlainRecord(value) || !hasOnlyOwnKeys(value, EDITOR_MENTION_THEME_FIELDS)) {
+        return false;
+    }
+
+    const { node, suggestions } = value;
+    if (node !== undefined) {
+        if (!isPlainRecord(node)) return false;
+        const { textColor, style, ...appearance } = node;
+        if (textColor !== undefined && typeof textColor !== 'string') return false;
+        try {
+            normalizeEditorTheme({ mention: [{ color: textColor }, appearance] });
+            if (style !== undefined) {
+                if (!isPlainRecord(style)) return false;
+                normalizeEditorTheme({ mention: style });
+            }
+        } catch {
+            return false;
+        }
+    }
+    if (suggestions === undefined) return true;
+    if (
+        !validMentionThemeSection(
+            suggestions,
+            MENTION_SUGGESTIONS_STRING_FIELDS,
+            MENTION_SUGGESTIONS_NUMBER_FIELDS,
+            ['option']
+        )
+    ) {
+        return false;
+    }
+
+    const option = suggestions.option;
+    if (option === undefined) return true;
+    return (
+        validMentionThemeSection(
+            option,
+            MENTION_OPTION_STRING_FIELDS,
+            MENTION_OPTION_NUMBER_FIELDS,
+            ['fontWeight']
+        ) && validMentionFontWeight(option.fontWeight)
+    );
+}

package/src/EditorStyleSheet.ts

@@ -0,0 +1,9 @@
+import type { ExactEditorTheme } from './EditorStyleSheetTypes';
+import { normalizeEditorTheme } from './EditorStyleSheetNormalization';
+
+export const EditorStyleSheet = {
+    create<const T extends object>(styles: T & ExactEditorTheme<T>): T {
+        normalizeEditorTheme(styles);
+        return styles;
+    },
+};