@apollohg/react-native-prose-editor 0.1.0

package/src/addons.ts

@@ -0,0 +1,158 @@
+import type { EditorMentionTheme } from './EditorTheme';
+import type { DocumentJSON } from './NativeEditorBridge';
+import type { SchemaDefinition, NodeSpec } from './schemas';
+
+export interface MentionSuggestion {
+    key: string;
+    title: string;
+    subtitle?: string;
+    label?: string;
+    attrs?: Record<string, unknown>;
+}
+
+export interface MentionQueryChangeEvent {
+    query: string;
+    trigger: string;
+    range: {
+        anchor: number;
+        head: number;
+    };
+    isActive: boolean;
+}
+
+export interface MentionSelectEvent {
+    trigger: string;
+    suggestion: MentionSuggestion;
+    attrs: Record<string, unknown>;
+}
+
+export interface MentionsAddonConfig {
+    trigger?: string;
+    suggestions?: readonly MentionSuggestion[];
+    theme?: EditorMentionTheme;
+    onQueryChange?: (event: MentionQueryChangeEvent) => void;
+    onSelect?: (event: MentionSelectEvent) => void;
+}
+
+export interface EditorAddons {
+    mentions?: MentionsAddonConfig;
+}
+
+export interface SerializedMentionSuggestion {
+    key: string;
+    title: string;
+    subtitle?: string;
+    label: string;
+    attrs: Record<string, unknown>;
+}
+
+export interface SerializedMentionsAddonConfig {
+    trigger: string;
+    theme?: EditorMentionTheme;
+    suggestions: SerializedMentionSuggestion[];
+}
+
+export interface SerializedEditorAddons {
+    mentions?: SerializedMentionsAddonConfig;
+}
+
+export type EditorAddonEvent =
+    | {
+          type: 'mentionsQueryChange';
+          query: string;
+          trigger: string;
+          range: {
+              anchor: number;
+              head: number;
+          };
+          isActive: boolean;
+      }
+    | {
+          type: 'mentionsSelect';
+          trigger: string;
+          suggestionKey: string;
+          attrs: Record<string, unknown>;
+      };
+
+export const MENTION_NODE_NAME = 'mention';
+const DEFAULT_MENTION_TRIGGER = '@';
+
+export function mentionNodeSpec(): NodeSpec {
+    return {
+        name: MENTION_NODE_NAME,
+        content: '',
+        group: 'inline',
+        role: 'inline',
+        isVoid: true,
+        attrs: {
+            label: { default: null },
+        },
+    };
+}
+
+export function withMentionsSchema(schema: SchemaDefinition): SchemaDefinition {
+    const hasMentionNode = schema.nodes.some((node) => node.name === MENTION_NODE_NAME);
+    if (hasMentionNode) {
+        return schema;
+    }
+
+    return {
+        ...schema,
+        nodes: [...schema.nodes, mentionNodeSpec()],
+    };
+}
+
+export function normalizeEditorAddons(
+    addons?: EditorAddons
+): SerializedEditorAddons | undefined {
+    if (!addons?.mentions) {
+        return undefined;
+    }
+
+    const trigger =
+        addons.mentions.trigger?.trim() || DEFAULT_MENTION_TRIGGER;
+    const suggestions = (addons.mentions.suggestions ?? []).map((suggestion) => {
+        const label = suggestion.label?.trim() || `${trigger}${suggestion.title}`;
+        const attrs = {
+            label,
+            ...(suggestion.attrs ?? {}),
+        };
+
+        return {
+            key: suggestion.key,
+            title: suggestion.title,
+            subtitle: suggestion.subtitle,
+            label,
+            attrs,
+        };
+    });
+
+    return {
+        mentions: {
+            trigger,
+            theme: addons.mentions.theme,
+            suggestions,
+        },
+    };
+}
+
+export function serializeEditorAddons(addons?: EditorAddons): string | undefined {
+    const normalized = normalizeEditorAddons(addons);
+    if (!normalized?.mentions) {
+        return undefined;
+    }
+
+    return JSON.stringify(normalized);
+}
+
+export function buildMentionFragmentJson(attrs: Record<string, unknown>): DocumentJSON {
+    return {
+        type: 'doc',
+        content: [
+            {
+                type: MENTION_NODE_NAME,
+                attrs,
+            },
+        ],
+    };
+}

package/src/index.ts

@@ -0,0 +1,63 @@
+export {
+    NativeRichTextEditor,
+    type NativeRichTextEditorProps,
+    type NativeRichTextEditorRef,
+    type NativeRichTextEditorHeightBehavior,
+    type NativeRichTextEditorToolbarPlacement,
+} from './NativeRichTextEditor';
+
+export {
+    EditorToolbar,
+    DEFAULT_EDITOR_TOOLBAR_ITEMS,
+    type EditorToolbarProps,
+    type EditorToolbarItem,
+    type EditorToolbarIcon,
+    type EditorToolbarDefaultIconId,
+    type EditorToolbarSFSymbolIcon,
+    type EditorToolbarMaterialIcon,
+    type EditorToolbarCommand,
+    type EditorToolbarListType,
+} from './EditorToolbar';
+export type {
+    EditorContentInsets,
+    EditorTheme,
+    EditorTextStyle,
+    EditorHeadingTheme,
+    EditorListTheme,
+    EditorHorizontalRuleTheme,
+    EditorMentionTheme,
+    EditorToolbarTheme,
+    EditorFontStyle,
+    EditorFontWeight,
+} from './EditorTheme';
+
+export {
+    MENTION_NODE_NAME,
+    mentionNodeSpec,
+    withMentionsSchema,
+    buildMentionFragmentJson,
+    type EditorAddons,
+    type MentionsAddonConfig,
+    type MentionSuggestion,
+    type MentionQueryChangeEvent,
+    type MentionSelectEvent,
+    type EditorAddonEvent,
+} from './addons';
+
+export {
+    tiptapSchema,
+    prosemirrorSchema,
+    type SchemaDefinition,
+    type NodeSpec,
+    type MarkSpec,
+    type AttrSpec,
+} from './schemas';
+
+// Read-only types (no mutation methods)
+export type {
+    Selection,
+    ActiveState,
+    HistoryState,
+    EditorUpdate,
+    DocumentJSON,
+} from './NativeEditorBridge';

package/src/schemas.ts

@@ -0,0 +1,153 @@
+export interface AttrSpec {
+    default?: unknown;
+}
+
+export interface NodeSpec {
+    name: string;
+    content: string;
+    group?: string;
+    attrs?: Record<string, AttrSpec>;
+    role: string;
+    htmlTag?: string;
+    isVoid?: boolean;
+}
+
+export interface MarkSpec {
+    name: string;
+    attrs?: Record<string, AttrSpec>;
+    excludes?: string;
+}
+
+export interface SchemaDefinition {
+    nodes: NodeSpec[];
+    marks: MarkSpec[];
+}
+
+const MARKS: MarkSpec[] = [
+    { name: 'bold' },
+    { name: 'italic' },
+    { name: 'underline' },
+    { name: 'strike' },
+];
+
+export const tiptapSchema: SchemaDefinition = {
+    nodes: [
+        {
+            name: 'doc',
+            content: 'block+',
+            role: 'doc',
+        },
+        {
+            name: 'paragraph',
+            content: 'inline*',
+            group: 'block',
+            role: 'textBlock',
+            htmlTag: 'p',
+        },
+        {
+            name: 'bulletList',
+            content: 'listItem+',
+            group: 'block',
+            role: 'list',
+            htmlTag: 'ul',
+        },
+        {
+            name: 'orderedList',
+            content: 'listItem+',
+            group: 'block',
+            attrs: { start: { default: 1 } },
+            role: 'list',
+            htmlTag: 'ol',
+        },
+        {
+            name: 'listItem',
+            content: 'paragraph block*',
+            role: 'listItem',
+            htmlTag: 'li',
+        },
+        {
+            name: 'hardBreak',
+            content: '',
+            group: 'inline',
+            role: 'hardBreak',
+            htmlTag: 'br',
+            isVoid: true,
+        },
+        {
+            name: 'horizontalRule',
+            content: '',
+            group: 'block',
+            role: 'block',
+            htmlTag: 'hr',
+            isVoid: true,
+        },
+        {
+            name: 'text',
+            content: '',
+            group: 'inline',
+            role: 'text',
+        },
+    ],
+    marks: MARKS,
+};
+
+export const prosemirrorSchema: SchemaDefinition = {
+    nodes: [
+        {
+            name: 'doc',
+            content: 'block+',
+            role: 'doc',
+        },
+        {
+            name: 'paragraph',
+            content: 'inline*',
+            group: 'block',
+            role: 'textBlock',
+            htmlTag: 'p',
+        },
+        {
+            name: 'bullet_list',
+            content: 'list_item+',
+            group: 'block',
+            role: 'list',
+            htmlTag: 'ul',
+        },
+        {
+            name: 'ordered_list',
+            content: 'list_item+',
+            group: 'block',
+            attrs: { start: { default: 1 } },
+            role: 'list',
+            htmlTag: 'ol',
+        },
+        {
+            name: 'list_item',
+            content: 'paragraph block*',
+            role: 'listItem',
+            htmlTag: 'li',
+        },
+        {
+            name: 'hard_break',
+            content: '',
+            group: 'inline',
+            role: 'hardBreak',
+            htmlTag: 'br',
+            isVoid: true,
+        },
+        {
+            name: 'horizontal_rule',
+            content: '',
+            group: 'block',
+            role: 'block',
+            htmlTag: 'hr',
+            isVoid: true,
+        },
+        {
+            name: 'text',
+            content: '',
+            group: 'inline',
+            role: 'text',
+        },
+    ],
+    marks: MARKS,
+};

package/src/useNativeEditor.ts

@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+    NativeEditorBridge,
+    type ActiveState,
+    type EditorUpdate,
+    type HistoryState,
+    type RenderElement,
+    type Selection,
+} from './NativeEditorBridge';
+
+export interface UseNativeEditorOptions {
+    /** Maximum character length. Omit for no limit. */
+    maxLength?: number;
+    /** Initial HTML content to load after creation. */
+    initialHtml?: string;
+    /** Called when content changes after an editing operation. */
+    onChange?: (html: string) => void;
+    /** Called when selection changes. */
+    onSelectionChange?: (selection: Selection) => void;
+}
+
+export interface UseNativeEditorReturn {
+    /** The underlying bridge instance, or null before creation. */
+    bridge: NativeEditorBridge | null;
+    /** Whether the editor has been created and is ready. */
+    isReady: boolean;
+    /** Current selection state. */
+    selection: Selection;
+    /** Currently active marks/nodes at the selection. */
+    activeState: ActiveState;
+    /** Current undo/redo availability. */
+    historyState: HistoryState;
+    /** Current render elements. */
+    renderElements: RenderElement[];
+    /** Toggle a mark (e.g. 'bold', 'italic', 'underline'). */
+    toggleMark: (markType: string) => void;
+    /** Undo the last operation. */
+    undo: () => void;
+    /** Redo the last undone operation. */
+    redo: () => void;
+    /** Insert text at a position. */
+    insertText: (pos: number, text: string) => void;
+    /** Delete a range [from, to). */
+    deleteRange: (from: number, to: number) => void;
+    /** Get the current HTML content. */
+    getHtml: () => string;
+}
+
+const DEFAULT_SELECTION: Selection = { type: 'text', anchor: 0, head: 0 };
+const DEFAULT_ACTIVE_STATE: ActiveState = {
+    marks: {},
+    nodes: {},
+    commands: {},
+    allowedMarks: [],
+    insertableNodes: [],
+};
+const DEFAULT_HISTORY_STATE: HistoryState = { canUndo: false, canRedo: false };
+
+export function useNativeEditor(
+    options: UseNativeEditorOptions = {}
+): UseNativeEditorReturn {
+    const { maxLength, initialHtml, onChange, onSelectionChange } = options;
+
+    const bridgeRef = useRef<NativeEditorBridge | null>(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onSelectionChangeRef = useRef(onSelectionChange);
+    onSelectionChangeRef.current = onSelectionChange;
+
+    const [isReady, setIsReady] = useState(false);
+    const [selection, setSelection] = useState<Selection>(DEFAULT_SELECTION);
+    const [activeState, setActiveState] = useState<ActiveState>(DEFAULT_ACTIVE_STATE);
+    const [historyState, setHistoryState] = useState<HistoryState>(DEFAULT_HISTORY_STATE);
+    const [renderElements, setRenderElements] = useState<RenderElement[]>([]);
+
+    const syncStateFromUpdate = useCallback((update: EditorUpdate | null) => {
+        if (!update) return;
+        setRenderElements(update.renderElements);
+        setSelection(update.selection);
+        setActiveState(update.activeState);
+        setHistoryState(update.historyState);
+    }, []);
+
+    const applyUpdate = useCallback((update: EditorUpdate | null) => {
+        if (!update) return;
+        syncStateFromUpdate(update);
+        onSelectionChangeRef.current?.(update.selection);
+
+        // Fetch current HTML and notify onChange
+        if (onChangeRef.current && bridgeRef.current && !bridgeRef.current.isDestroyed) {
+            const html = bridgeRef.current.getHtml();
+            onChangeRef.current(html);
+        }
+    }, [syncStateFromUpdate]);
+
+    useEffect(() => {
+        const bridge = NativeEditorBridge.create(maxLength != null ? { maxLength } : undefined);
+        bridgeRef.current = bridge;
+
+        if (initialHtml) {
+            bridge.setHtml(initialHtml);
+        }
+
+        syncStateFromUpdate(bridge.getCurrentState());
+        setIsReady(true);
+
+        return () => {
+            bridge.destroy();
+            bridgeRef.current = null;
+            setIsReady(false);
+        };
+    }, [maxLength, initialHtml, syncStateFromUpdate]);
+
+    const toggleMark = useCallback(
+        (markType: string) => {
+            if (!bridgeRef.current || bridgeRef.current.isDestroyed) return;
+            const update = bridgeRef.current.toggleMark(markType);
+            applyUpdate(update);
+        },
+        [applyUpdate]
+    );
+
+    const undo = useCallback(() => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed) return;
+        const update = bridgeRef.current.undo();
+        applyUpdate(update);
+    }, [applyUpdate]);
+
+    const redo = useCallback(() => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed) return;
+        const update = bridgeRef.current.redo();
+        applyUpdate(update);
+    }, [applyUpdate]);
+
+    const insertText = useCallback(
+        (pos: number, text: string) => {
+            if (!bridgeRef.current || bridgeRef.current.isDestroyed) return;
+            const update = bridgeRef.current.insertText(pos, text);
+            applyUpdate(update);
+        },
+        [applyUpdate]
+    );
+
+    const deleteRange = useCallback(
+        (from: number, to: number) => {
+            if (!bridgeRef.current || bridgeRef.current.isDestroyed) return;
+            const update = bridgeRef.current.deleteRange(from, to);
+            applyUpdate(update);
+        },
+        [applyUpdate]
+    );
+
+    const getHtml = useCallback((): string => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed) return '';
+        return bridgeRef.current.getHtml();
+    }, []);
+
+    return {
+        bridge: bridgeRef.current,
+        isReady,
+        selection,
+        activeState,
+        historyState,
+        renderElements,
+        toggleMark,
+        undo,
+        redo,
+        insertText,
+        deleteRange,
+        getHtml,
+    };
+}