@replyke/ui-core-react-js/dist/esm/hooks/useTextareaCursorIndicator.js

Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.

import { useState, useEffect, useCallback } from "react";
function useTextareaCursorIndicator({ textAreaRef, }) {
    const [cursorPosition, setCursorPosition] = useState(0);
    const [isSelectionActive, setIsSelectionActive] = useState(false);
    const updateCursorAndSelection = useCallback(() => {
        if (textAreaRef.current) {
            const { selectionStart, selectionEnd } = textAreaRef.current;
            setCursorPosition(selectionStart);
            setIsSelectionActive(selectionStart !== selectionEnd);
        }
    }, [textAreaRef]);
    useEffect(() => {
        const textArea = textAreaRef.current;
        if (textArea) {
            textArea.addEventListener("input", updateCursorAndSelection);
            textArea.addEventListener("click", updateCursorAndSelection);
            textArea.addEventListener("keydown", updateCursorAndSelection);
            textArea.addEventListener("keyup", updateCursorAndSelection);
            return () => {
                textArea.removeEventListener("input", updateCursorAndSelection);
                textArea.removeEventListener("click", updateCursorAndSelection);
                textArea.removeEventListener("keydown", updateCursorAndSelection);
                textArea.removeEventListener("keyup", updateCursorAndSelection);
            };
        }
    }, [updateCursorAndSelection, textAreaRef]);
    return { textAreaRef, cursorPosition, isSelectionActive };
}
export default useTextareaCursorIndicator;
//# sourceMappingURL=useTextareaCursorIndicator.js.map