@apollohg/react-native-prose-editor 0.1.1 → 0.3.0

package/dist/YjsCollaboration.d.ts

@@ -0,0 +1,83 @@
+import { type CollaborationPeer, type DocumentJSON, type EncodedCollaborationStateInput, type Selection } from './NativeEditorBridge';
+import type { RemoteSelectionDecoration } from './NativeRichTextEditor';
+export type YjsTransportStatus = 'idle' | 'connecting' | 'connected' | 'disconnected' | 'error';
+export interface YjsRetryContext {
+    attempt: number;
+    documentId: string;
+    lastError?: Error;
+}
+export type YjsRetryInterval = number | ((context: YjsRetryContext) => number | null | false);
+export interface LocalAwarenessUser {
+    userId: string;
+    name: string;
+    color: string;
+    avatarUrl?: string;
+    extra?: Record<string, unknown>;
+}
+export interface LocalAwarenessState {
+    user: LocalAwarenessUser;
+    selection?: {
+        anchor: number;
+        head: number;
+    };
+    focused?: boolean;
+}
+export interface YjsCollaborationState {
+    documentId: string;
+    status: YjsTransportStatus;
+    isConnected: boolean;
+    documentJson: DocumentJSON;
+    lastError?: Error;
+}
+export interface YjsCollaborationOptions {
+    documentId: string;
+    createWebSocket: () => WebSocket;
+    connect?: boolean;
+    retryIntervalMs?: YjsRetryInterval | false;
+    fragmentName?: string;
+    initialDocumentJson?: DocumentJSON;
+    initialEncodedState?: EncodedCollaborationStateInput;
+    localAwareness: LocalAwarenessUser;
+    onPeersChange?: (peers: CollaborationPeer[]) => void;
+    onStateChange?: (state: YjsCollaborationState) => void;
+    onError?: (error: Error) => void;
+}
+export interface YjsCollaborationController {
+    readonly state: YjsCollaborationState;
+    readonly peers: CollaborationPeer[];
+    connect(): void;
+    disconnect(): void;
+    reconnect(): void;
+    destroy(): void;
+    getEncodedState(): Uint8Array;
+    getEncodedStateBase64(): string;
+    applyEncodedState(encodedState: EncodedCollaborationStateInput): void;
+    replaceEncodedState(encodedState: EncodedCollaborationStateInput): void;
+    updateLocalAwareness(partial: Partial<LocalAwarenessState>): void;
+    handleLocalDocumentChange(doc: DocumentJSON): void;
+    handleSelectionChange(selection: Selection): void;
+    handleFocusChange(focused: boolean): void;
+}
+export interface UseYjsCollaborationResult {
+    state: YjsCollaborationState;
+    peers: CollaborationPeer[];
+    isConnected: boolean;
+    connect(): void;
+    disconnect(): void;
+    reconnect(): void;
+    getEncodedState(): Uint8Array;
+    getEncodedStateBase64(): string;
+    applyEncodedState(encodedState: EncodedCollaborationStateInput): void;
+    replaceEncodedState(encodedState: EncodedCollaborationStateInput): void;
+    updateLocalAwareness(partial: Partial<LocalAwarenessState>): void;
+    editorBindings: {
+        valueJSON: DocumentJSON;
+        remoteSelections: RemoteSelectionDecoration[];
+        onContentChangeJSON: (doc: DocumentJSON) => void;
+        onSelectionChange: (selection: Selection) => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+}
+export declare function createYjsCollaborationController(options: YjsCollaborationOptions): YjsCollaborationController;
+export declare function useYjsCollaboration(options: YjsCollaborationOptions): UseYjsCollaborationResult;

package/dist/YjsCollaboration.js

@@ -0,0 +1,585 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createYjsCollaborationController = createYjsCollaborationController;
+exports.useYjsCollaboration = useYjsCollaboration;
+const react_1 = require("react");
+const NativeEditorBridge_1 = require("./NativeEditorBridge");
+const DEFAULT_RETRY_BASE_INTERVAL_MS = 500;
+const DEFAULT_RETRY_MAX_INTERVAL_MS = 30000;
+const Y_WEBSOCKET_MESSAGE_QUERY_AWARENESS = 3;
+const DEFAULT_YJS_FRAGMENT_NAME = 'default';
+const EMPTY_DOCUMENT = {
+    type: 'doc',
+    content: [
+        {
+            type: 'paragraph',
+        },
+    ],
+};
+const SELECTION_AWARENESS_DEBOUNCE_MS = 40;
+function cloneDocument(doc) {
+    return JSON.parse(JSON.stringify(doc ?? EMPTY_DOCUMENT));
+}
+function awarenessToRecord(awareness) {
+    return JSON.parse(JSON.stringify(awareness));
+}
+function normalizeMessageBytes(data) {
+    if (data instanceof ArrayBuffer) {
+        return Array.from(new Uint8Array(data));
+    }
+    if (ArrayBuffer.isView(data)) {
+        return Array.from(new Uint8Array(data.buffer, data.byteOffset, data.byteLength));
+    }
+    if (typeof data === 'string') {
+        try {
+            const parsed = JSON.parse(data);
+            return Array.isArray(parsed) ? parsed : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    return null;
+}
+function sendBinaryMessages(socket, messages) {
+    if (!socket || socket.readyState !== WebSocket.OPEN)
+        return;
+    for (const message of messages) {
+        socket.send(Uint8Array.from(message).buffer);
+    }
+}
+function readFirstVarUint(bytes) {
+    let value = 0;
+    let shift = 0;
+    for (let index = 0; index < bytes.length && index < 5; index += 1) {
+        const byte = bytes[index];
+        value |= (byte & 0x7f) << shift;
+        if ((byte & 0x80) === 0) {
+            return value;
+        }
+        shift += 7;
+    }
+    return null;
+}
+function selectionToAwarenessRange(selection) {
+    if (selection.type !== 'text')
+        return undefined;
+    return {
+        anchor: selection.anchor ?? 0,
+        head: selection.head ?? selection.anchor ?? 0,
+    };
+}
+function peersToRemoteSelections(peers) {
+    return peers.flatMap((peer) => {
+        if (peer.isLocal || !peer.state || typeof peer.state !== 'object') {
+            return [];
+        }
+        const state = peer.state;
+        const selection = state.selection;
+        if (!selection || typeof selection !== 'object') {
+            return [];
+        }
+        const anchor = Number(selection.anchor);
+        const head = Number(selection.head);
+        if (!Number.isFinite(anchor) || !Number.isFinite(head)) {
+            return [];
+        }
+        const user = state.user && typeof state.user === 'object'
+            ? state.user
+            : null;
+        return [
+            {
+                clientId: peer.clientId,
+                anchor,
+                head,
+                color: typeof user?.color === 'string' && user.color.length > 0
+                    ? user.color
+                    : '#007AFF',
+                name: typeof user?.name === 'string' && user.name.length > 0 ? user.name : undefined,
+                avatarUrl: typeof user?.avatarUrl === 'string' && user.avatarUrl.length > 0
+                    ? user.avatarUrl
+                    : undefined,
+                isFocused: state.focused !== false,
+            },
+        ];
+    });
+}
+function encodeInitialStateKey(encodedState) {
+    if (encodedState == null)
+        return '';
+    return (0, NativeEditorBridge_1.encodeCollaborationStateBase64)(encodedState);
+}
+function encodeDocumentKey(doc) {
+    if (doc == null)
+        return '';
+    return JSON.stringify(doc);
+}
+class YjsCollaborationControllerImpl {
+    constructor(options, callbacks = {}) {
+        this.socket = null;
+        this.destroyed = false;
+        this.retryAttempt = 0;
+        this.retryTimer = null;
+        this.isManuallyDisconnected = false;
+        this.pendingAwarenessTimer = null;
+        this._peers = [];
+        this.callbacks = callbacks;
+        this.createWebSocket = options.createWebSocket;
+        this.retryIntervalMs = options.retryIntervalMs;
+        const hasInitialEncodedState = options.initialEncodedState != null;
+        this.localAwarenessState = {
+            user: options.localAwareness,
+            focused: false,
+        };
+        this.bridge = NativeEditorBridge_1.NativeCollaborationBridge.create({
+            fragmentName: options.fragmentName ?? DEFAULT_YJS_FRAGMENT_NAME,
+            initialEncodedState: options.initialEncodedState,
+            localAwareness: awarenessToRecord(this.localAwarenessState),
+        });
+        this._state = {
+            documentId: options.documentId,
+            status: 'idle',
+            isConnected: false,
+            documentJson: hasInitialEncodedState
+                ? this.bridge.getDocumentJson()
+                : cloneDocument(options.initialDocumentJson),
+        };
+        this._peers = this.bridge.getPeers();
+        if (options.connect !== false) {
+            this.connect();
+        }
+    }
+    get state() {
+        return this._state;
+    }
+    get peers() {
+        return this._peers;
+    }
+    connect() {
+        if (this.destroyed)
+            return;
+        this.isManuallyDisconnected = false;
+        this.cancelRetry();
+        if (this.socket &&
+            (this.socket.readyState === WebSocket.OPEN ||
+                this.socket.readyState === WebSocket.CONNECTING)) {
+            return;
+        }
+        this.setState({
+            status: 'connecting',
+            isConnected: false,
+            lastError: undefined,
+        });
+        let socket;
+        try {
+            socket = this.createWebSocket();
+        }
+        catch (cause) {
+            const error = cause instanceof Error
+                ? cause
+                : new Error('Yjs collaboration transport initialization failed');
+            this.setState({
+                status: 'error',
+                isConnected: false,
+                lastError: error,
+            });
+            this.callbacks.onError?.(error);
+            this.scheduleRetry(error);
+            return;
+        }
+        this.socket = socket;
+        const binarySocket = socket;
+        try {
+            binarySocket.binaryType = 'arraybuffer';
+        }
+        catch {
+            // React Native WebSocket implementations may ignore this.
+        }
+        socket.onopen = () => {
+            if (this.destroyed || this.socket !== socket)
+                return;
+            this.retryAttempt = 0;
+            this.cancelRetry();
+            this.setState({
+                status: 'connected',
+                isConnected: true,
+                lastError: undefined,
+            });
+            const result = this.bridge.start();
+            this.applyResult(result);
+            sendBinaryMessages(socket, result.messages);
+        };
+        socket.onmessage = (event) => {
+            if (this.destroyed || this.socket !== socket)
+                return;
+            const bytes = normalizeMessageBytes(event.data);
+            if (!bytes)
+                return;
+            if (readFirstVarUint(bytes) === Y_WEBSOCKET_MESSAGE_QUERY_AWARENESS) {
+                try {
+                    this.commitLocalAwareness();
+                }
+                catch (error) {
+                    this.handleTransportFailure(error instanceof Error
+                        ? error
+                        : new Error('Yjs collaboration protocol error'), socket);
+                }
+                return;
+            }
+            try {
+                const result = this.bridge.handleMessage(bytes);
+                this.applyResult(result);
+                sendBinaryMessages(socket, result.messages);
+            }
+            catch (error) {
+                this.handleTransportFailure(error instanceof Error ? error : new Error('Yjs collaboration protocol error'), socket);
+            }
+        };
+        socket.onerror = () => {
+            if (this.destroyed || this.socket !== socket)
+                return;
+            this.handleTransportFailure(new Error('Yjs collaboration transport error'), socket, false);
+        };
+        socket.onclose = () => {
+            if (this.destroyed || this.socket !== socket)
+                return;
+            this.socket = null;
+            this.clearPeers();
+            this.setState({
+                status: this._state.status === 'error' ? 'error' : 'disconnected',
+                isConnected: false,
+            });
+            this.scheduleRetry(this._state.lastError);
+        };
+    }
+    disconnect() {
+        if (this.destroyed)
+            return;
+        this.isManuallyDisconnected = true;
+        this.retryAttempt = 0;
+        this.cancelRetry();
+        const socket = this.socket;
+        this.socket = null;
+        if (socket?.readyState === WebSocket.OPEN) {
+            const result = this.bridge.clearLocalAwareness();
+            this.applyResult(result);
+            sendBinaryMessages(socket, result.messages);
+            socket.close();
+        }
+        if (socket &&
+            socket.readyState !== WebSocket.CLOSED &&
+            socket.readyState !== WebSocket.CLOSING) {
+            try {
+                socket.close();
+            }
+            catch {
+                // Ignore close failures while disconnecting locally.
+            }
+        }
+        this.clearPeers();
+        this.setState({
+            status: 'disconnected',
+            isConnected: false,
+            lastError: undefined,
+        });
+    }
+    reconnect() {
+        this.disconnect();
+        this.connect();
+    }
+    getEncodedState() {
+        if (this.destroyed)
+            return new Uint8Array();
+        return this.bridge.getEncodedState();
+    }
+    getEncodedStateBase64() {
+        if (this.destroyed)
+            return '';
+        return this.bridge.getEncodedStateBase64();
+    }
+    applyEncodedState(encodedState) {
+        if (this.destroyed)
+            return;
+        const result = this.bridge.applyEncodedState(encodedState);
+        this.applyResult(result);
+        sendBinaryMessages(this.socket, result.messages);
+    }
+    replaceEncodedState(encodedState) {
+        if (this.destroyed)
+            return;
+        const result = this.bridge.replaceEncodedState(encodedState);
+        this.applyResult(result);
+        sendBinaryMessages(this.socket, result.messages);
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        this.cancelRetry();
+        this.cancelPendingAwarenessSync();
+        this.disconnect();
+        this.bridge.destroy();
+    }
+    updateLocalAwareness(partial) {
+        if (this.destroyed)
+            return;
+        this.localAwarenessState = this.mergeLocalAwareness(partial);
+        this.commitLocalAwareness();
+    }
+    handleLocalDocumentChange(doc) {
+        if (this.destroyed)
+            return;
+        const result = this.bridge.applyLocalDocumentJson(doc);
+        this.applyResult(result);
+        sendBinaryMessages(this.socket, result.messages);
+    }
+    handleSelectionChange(selection) {
+        if (this.destroyed)
+            return;
+        this.localAwarenessState = this.mergeLocalAwareness({
+            focused: true,
+            selection: selectionToAwarenessRange(selection),
+        });
+        this.scheduleAwarenessSync();
+    }
+    handleFocusChange(focused) {
+        if (this.destroyed)
+            return;
+        this.localAwarenessState = this.mergeLocalAwareness({ focused });
+        this.commitLocalAwareness();
+    }
+    applyResult(result) {
+        if (result.documentChanged && result.documentJson) {
+            this.setState({
+                documentJson: cloneDocument(result.documentJson),
+            });
+        }
+        if (result.peersChanged && result.peers) {
+            this._peers = result.peers;
+            this.callbacks.onPeersChange?.(this._peers);
+        }
+    }
+    clearPeers() {
+        if (this._peers.length === 0)
+            return;
+        this._peers = [];
+        this.callbacks.onPeersChange?.(this._peers);
+    }
+    setState(patch) {
+        this._state = {
+            ...this._state,
+            ...patch,
+        };
+        this.callbacks.onStateChange?.(this._state);
+    }
+    mergeLocalAwareness(partial) {
+        return {
+            ...this.localAwarenessState,
+            ...partial,
+            user: {
+                ...this.localAwarenessState.user,
+                ...(partial.user ?? {}),
+            },
+        };
+    }
+    scheduleAwarenessSync() {
+        this.cancelPendingAwarenessSync();
+        this.pendingAwarenessTimer = setTimeout(() => {
+            this.pendingAwarenessTimer = null;
+            this.commitLocalAwareness();
+        }, SELECTION_AWARENESS_DEBOUNCE_MS);
+    }
+    cancelPendingAwarenessSync() {
+        if (this.pendingAwarenessTimer == null)
+            return;
+        clearTimeout(this.pendingAwarenessTimer);
+        this.pendingAwarenessTimer = null;
+    }
+    commitLocalAwareness() {
+        this.cancelPendingAwarenessSync();
+        const result = this.bridge.setLocalAwareness(awarenessToRecord(this.localAwarenessState));
+        this.applyResult(result);
+        sendBinaryMessages(this.socket, result.messages);
+    }
+    handleTransportFailure(error, socket, closeSocket = true) {
+        if (this.destroyed || this.socket !== socket)
+            return;
+        this.socket = null;
+        if (closeSocket && socket.readyState !== WebSocket.CLOSED) {
+            try {
+                socket.close();
+            }
+            catch {
+                // Ignore close failures while reporting the original transport error.
+            }
+        }
+        this.clearPeers();
+        this.setState({
+            status: 'error',
+            isConnected: false,
+            lastError: error,
+        });
+        this.callbacks.onError?.(error);
+        this.scheduleRetry(error);
+    }
+    scheduleRetry(lastError) {
+        if (this.destroyed || this.isManuallyDisconnected)
+            return;
+        const delayMs = this.resolveRetryDelay(lastError);
+        if (delayMs == null)
+            return;
+        this.cancelRetry();
+        this.retryAttempt += 1;
+        this.retryTimer = setTimeout(() => {
+            this.retryTimer = null;
+            if (this.destroyed || this.isManuallyDisconnected)
+                return;
+            this.connect();
+        }, delayMs);
+    }
+    resolveRetryDelay(lastError) {
+        if (this.retryIntervalMs === false)
+            return null;
+        const attempt = this.retryAttempt + 1;
+        const value = this.retryIntervalMs == null
+            ? defaultRetryIntervalMs(attempt)
+            : typeof this.retryIntervalMs === 'function'
+                ? this.retryIntervalMs({
+                    attempt,
+                    documentId: this._state.documentId,
+                    lastError,
+                })
+                : this.retryIntervalMs;
+        if (value === false || value == null) {
+            return null;
+        }
+        if (!Number.isFinite(value) || value < 0) {
+            return null;
+        }
+        return value;
+    }
+    cancelRetry() {
+        if (this.retryTimer == null)
+            return;
+        clearTimeout(this.retryTimer);
+        this.retryTimer = null;
+    }
+}
+function defaultRetryIntervalMs(attempt) {
+    return Math.min(DEFAULT_RETRY_BASE_INTERVAL_MS * 2 ** Math.max(0, attempt - 1), DEFAULT_RETRY_MAX_INTERVAL_MS);
+}
+function createYjsCollaborationController(options) {
+    return new YjsCollaborationControllerImpl(options, {
+        onStateChange: options.onStateChange,
+        onPeersChange: options.onPeersChange,
+        onError: options.onError,
+    });
+}
+function useYjsCollaboration(options) {
+    const callbacksRef = (0, react_1.useRef)({
+        onPeersChange: options.onPeersChange,
+        onStateChange: options.onStateChange,
+        onError: options.onError,
+    });
+    callbacksRef.current = {
+        onPeersChange: options.onPeersChange,
+        onStateChange: options.onStateChange,
+        onError: options.onError,
+    };
+    const createWebSocketRef = (0, react_1.useRef)(options.createWebSocket);
+    createWebSocketRef.current = options.createWebSocket;
+    const controllerRef = (0, react_1.useRef)(null);
+    const initialDocumentKey = encodeDocumentKey(options.initialDocumentJson);
+    const initialEncodedStateKey = encodeInitialStateKey(options.initialEncodedState);
+    const localAwarenessKey = JSON.stringify(options.localAwareness);
+    const [state, setState] = (0, react_1.useState)({
+        documentId: options.documentId,
+        status: 'idle',
+        isConnected: false,
+        documentJson: cloneDocument(options.initialDocumentJson),
+    });
+    const [peers, setPeers] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        try {
+            const controller = new YjsCollaborationControllerImpl({
+                ...options,
+                createWebSocket: () => createWebSocketRef.current(),
+            }, {
+                onStateChange: (nextState) => {
+                    setState({ ...nextState });
+                    callbacksRef.current.onStateChange?.(nextState);
+                },
+                onPeersChange: (nextPeers) => {
+                    setPeers([...nextPeers]);
+                    callbacksRef.current.onPeersChange?.(nextPeers);
+                },
+                onError: (error) => {
+                    callbacksRef.current.onError?.(error);
+                },
+            });
+            controllerRef.current = controller;
+            setState({ ...controller.state });
+            setPeers([...controller.peers]);
+        }
+        catch (error) {
+            const nextError = error instanceof Error
+                ? error
+                : new Error('Yjs collaboration initialization failed');
+            const nextState = {
+                documentId: options.documentId,
+                status: 'error',
+                isConnected: false,
+                documentJson: cloneDocument(options.initialDocumentJson),
+                lastError: nextError,
+            };
+            controllerRef.current = null;
+            setState(nextState);
+            setPeers([]);
+            callbacksRef.current.onStateChange?.(nextState);
+            callbacksRef.current.onError?.(nextError);
+        }
+        return () => {
+            controllerRef.current?.destroy();
+            controllerRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [options.documentId, options.fragmentName, initialDocumentKey, initialEncodedStateKey]);
+    (0, react_1.useEffect)(() => {
+        controllerRef.current?.updateLocalAwareness({
+            user: options.localAwareness,
+        });
+    }, [localAwarenessKey, options.localAwareness]);
+    (0, react_1.useEffect)(() => {
+        const controller = controllerRef.current;
+        if (!controller)
+            return;
+        if (options.connect === false) {
+            controller.disconnect();
+        }
+        else {
+            controller.connect();
+        }
+    }, [options.connect, options.documentId]);
+    return {
+        state,
+        peers,
+        isConnected: state.isConnected,
+        connect: () => controllerRef.current?.connect(),
+        disconnect: () => controllerRef.current?.disconnect(),
+        reconnect: () => controllerRef.current?.reconnect(),
+        getEncodedState: () => controllerRef.current?.getEncodedState() ?? new Uint8Array(),
+        getEncodedStateBase64: () => controllerRef.current?.getEncodedStateBase64() ??
+            (0, NativeEditorBridge_1.encodeCollaborationStateBase64)(new Uint8Array()),
+        applyEncodedState: (encodedState) => controllerRef.current?.applyEncodedState(encodedState),
+        replaceEncodedState: (encodedState) => controllerRef.current?.replaceEncodedState(encodedState),
+        updateLocalAwareness: (partial) => controllerRef.current?.updateLocalAwareness(partial),
+        editorBindings: {
+            valueJSON: state.documentJson,
+            remoteSelections: peersToRemoteSelections(peers),
+            onContentChangeJSON: (doc) => controllerRef.current?.handleLocalDocumentChange(doc),
+            onSelectionChange: (selection) => controllerRef.current?.handleSelectionChange(selection),
+            onFocus: () => controllerRef.current?.handleFocusChange(true),
+            onBlur: () => controllerRef.current?.handleFocusChange(false),
+        },
+    };
+}