@openeditor/react-native-prose-editor 0.0.2

package/dist/YjsCollaboration.js

@@ -0,0 +1,743 @@
+"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 cloneJsonValue(value) {
+    if (Array.isArray(value)) {
+        return value.map((item) => cloneJsonValue(item));
+    }
+    if (value != null && typeof value === 'object') {
+        const clone = {};
+        for (const [key, nestedValue] of Object.entries(value)) {
+            clone[key] = cloneJsonValue(nestedValue);
+        }
+        return clone;
+    }
+    return value;
+}
+function acceptingGroupsForContent(content, existingChildCount) {
+    const tokens = content
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((token) => {
+        const quantifier = token[token.length - 1];
+        if (quantifier === '+' || quantifier === '*' || quantifier === '?') {
+            return {
+                group: token.slice(0, -1),
+                min: quantifier === '+' ? 1 : 0,
+                max: quantifier === '?' ? 1 : null,
+            };
+        }
+        return {
+            group: token,
+            min: 1,
+            max: 1,
+        };
+    });
+    let remaining = existingChildCount;
+    const acceptingGroups = [];
+    for (const token of tokens) {
+        if (remaining >= token.min) {
+            const consumed = token.max == null ? remaining : Math.min(remaining, token.max);
+            remaining = Math.max(0, remaining - consumed);
+            const atMax = token.max != null && consumed >= token.max;
+            if (!atMax) {
+                acceptingGroups.push(token.group);
+            }
+            continue;
+        }
+        acceptingGroups.push(token.group);
+        break;
+    }
+    return acceptingGroups;
+}
+function defaultEmptyDocument(schema) {
+    if (!schema) {
+        return {
+            type: 'doc',
+            content: [{ type: 'paragraph' }],
+        };
+    }
+    const docNode = schema.nodes.find((node) => node.role === 'doc' || node.name === 'doc');
+    const acceptingGroups = docNode == null ? [] : acceptingGroupsForContent(docNode.content ?? '', 0);
+    const matchingTextBlocks = schema.nodes.filter((node) => node.role === 'textBlock' &&
+        acceptingGroups.some((group) => node.name === group || node.group === group));
+    const preferredTextBlock = matchingTextBlocks.find((node) => node.htmlTag === 'p' || node.name === 'paragraph') ??
+        matchingTextBlocks[0] ??
+        schema.nodes.find((node) => node.htmlTag === 'p' || node.name === 'paragraph') ??
+        schema.nodes.find((node) => node.role === 'textBlock');
+    if (!preferredTextBlock) {
+        return {
+            type: 'doc',
+            content: [{ type: 'paragraph' }],
+        };
+    }
+    return {
+        type: 'doc',
+        content: [{ type: preferredTextBlock.name }],
+    };
+}
+function initialFallbackDocument(options) {
+    return options.initialDocumentJson
+        ? cloneJsonValue(options.initialDocumentJson)
+        : defaultEmptyDocument(options.schema);
+}
+function shouldUseFallbackForNativeDocument(doc, options) {
+    if (options.initialDocumentJson != null || options.initialEncodedState != null) {
+        return false;
+    }
+    if (doc.type !== 'doc') {
+        return false;
+    }
+    return !Array.isArray(doc.content) || doc.content.length === 0;
+}
+function awarenessToRecord(awareness) {
+    return awareness;
+}
+function localAwarenessEquals(left, right) {
+    const leftSelection = left.selection;
+    const rightSelection = right.selection;
+    if (leftSelection == null || rightSelection == null) {
+        if (leftSelection !== rightSelection) {
+            return false;
+        }
+    }
+    else if (leftSelection.anchor !== rightSelection.anchor ||
+        leftSelection.head !== rightSelection.head) {
+        return false;
+    }
+    const leftUser = left.user;
+    const rightUser = right.user;
+    return (left.focused === right.focused &&
+        leftUser.userId === rightUser.userId &&
+        leftUser.name === rightUser.name &&
+        leftUser.color === rightUser.color &&
+        leftUser.avatarUrl === rightUser.avatarUrl &&
+        JSON.stringify(leftUser.extra ?? null) === JSON.stringify(rightUser.extra ?? null));
+}
+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 selectionFromPeerState(state) {
+    if (!state || typeof state !== 'object')
+        return undefined;
+    const selection = state.selection;
+    if (!selection || typeof selection !== 'object')
+        return undefined;
+    const anchor = Number(selection.anchor);
+    const head = Number(selection.head);
+    if (!Number.isFinite(anchor) || !Number.isFinite(head))
+        return undefined;
+    return { type: 'text', anchor, head };
+}
+function localSelectionFromPeers(peers) {
+    const localPeer = peers.find((peer) => peer.isLocal);
+    return localPeer ? selectionFromPeerState(localPeer.state) : undefined;
+}
+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);
+}
+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;
+        this.localAwarenessState = {
+            user: options.localAwareness,
+            focused: false,
+        };
+        this.bridge = NativeEditorBridge_1.NativeCollaborationBridge.create({
+            fragmentName: options.fragmentName ?? DEFAULT_YJS_FRAGMENT_NAME,
+            schema: options.schema,
+            initialEncodedState: options.initialEncodedState,
+            localAwareness: awarenessToRecord(this.localAwarenessState),
+        });
+        const nativeDocumentJson = this.bridge.getDocumentJson();
+        this._peers = this.bridge.getPeers();
+        let initialDocumentJson;
+        if (options.initialDocumentJson != null) {
+            initialDocumentJson = cloneJsonValue(options.initialDocumentJson);
+        }
+        else if (shouldUseFallbackForNativeDocument(nativeDocumentJson, options)) {
+            initialDocumentJson = defaultEmptyDocument(options.schema);
+        }
+        else {
+            initialDocumentJson = nativeDocumentJson;
+        }
+        this._state = {
+            documentId: options.documentId,
+            status: 'idle',
+            isConnected: false,
+            documentJson: initialDocumentJson,
+            selectionOnValueJSONReset: localSelectionFromPeers(this._peers),
+        };
+        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 {
+                if (this.pendingAwarenessTimer != null) {
+                    this.commitLocalAwareness();
+                }
+                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.cancelRetry();
+        this.cancelPendingAwarenessSync();
+        this.disconnect();
+        this.destroyed = true;
+        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);
+        if (this.pendingAwarenessTimer != null) {
+            this.commitLocalAwareness();
+        }
+    }
+    handleSelectionChange(selection) {
+        if (this.destroyed)
+            return;
+        const nextAwareness = this.mergeLocalAwareness({
+            focused: true,
+            selection: selectionToAwarenessRange(selection),
+        });
+        if (localAwarenessEquals(nextAwareness, this.localAwarenessState)) {
+            return;
+        }
+        this.localAwarenessState = nextAwareness;
+        this.scheduleAwarenessSync();
+    }
+    handleFocusChange(focused) {
+        if (this.destroyed)
+            return;
+        const nextAwareness = this.mergeLocalAwareness({ focused });
+        if (localAwarenessEquals(nextAwareness, this.localAwarenessState)) {
+            if (this.pendingAwarenessTimer != null) {
+                this.commitLocalAwareness();
+            }
+            return;
+        }
+        this.localAwarenessState = nextAwareness;
+        this.commitLocalAwareness();
+    }
+    applyResult(result) {
+        const didPeersChange = result.peersChanged && result.peers != null;
+        if (didPeersChange) {
+            this._peers = result.peers;
+        }
+        if (result.documentChanged && result.documentJson) {
+            this.setState({
+                documentJson: result.documentJson,
+                selectionOnValueJSONReset: localSelectionFromPeers(this._peers),
+            });
+        }
+        if (didPeersChange) {
+            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 initialEncodedStateKey = encodeInitialStateKey(options.initialEncodedState);
+    const localAwarenessKey = JSON.stringify(options.localAwareness);
+    const schemaKey = JSON.stringify(options.schema ?? null);
+    const [state, setState] = (0, react_1.useState)({
+        documentId: options.documentId,
+        status: 'idle',
+        isConnected: false,
+        documentJson: initialFallbackDocument(options),
+    });
+    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: initialFallbackDocument(options),
+                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,
+        schemaKey,
+        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,
+            valueJSONUpdateMode: 'reset',
+            preserveSelectionOnValueJSONReset: true,
+            selectionOnValueJSONReset: state.selectionOnValueJSONReset,
+            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),
+        },
+    };
+}