Function useTextInput

packages/core/src/hooks/useTextInput.ts:15–265

(blockId: string)

import { useBlockRegistrationContext } from "../components/BlockRegistration";

export function useTextInput(blockId: string) {
    const {
        blocks,
        blocksOrder,
        focusedBlockId,
        setFocusedBlockId,
        updateBlock,
        mergeBlock,
        splitBlock,
        removeBlock,
        getBlockSnapshot
    } = useBlocksContext();
    const {
        registerRef,
        showSoftInputOnFocus,
        inputRefs
    } = useTextBlocksContext();
    const { isScrolling } = useScrollContext();
    const { isDragging } = useBlocksMeasuresContext();
    const { textBasedBlocks, defaultBlockType } = useBlockRegistrationContext();

    const block = getBlockSnapshot(blockId);
    const title = block.properties.title;
    const inputRef = React.useRef<TextInput>(null);
    const selectionRef = React.useRef({ start: title.length, end: title.length });
    const valueRef = React.useRef(title);
    const isFocused = focusedBlockId === blockId;
    const isEditable = isScrolling === false && isDragging.value === false
        ? true
        : focusedBlockId === blockId    // Keep focusd block editable whn scrolling.
            ? true
            : false;

    const api = {
        current: {
            getText: () => valueRef.current,
            setText: (text: string) => {
                valueRef.current = text;
                inputRef.current?.setNativeProps({ text: valueRef.current });
            },
            focus: () => {
                inputRef.current?.focus();
            },
            blur: () => {
                inputRef.current?.blur();
            },
            setSelection: (selection: { start: number; end: number }) => {
                inputRef.current?.setSelection(selection.start, selection.end);
                selectionRef.current = selection;
            },
            focusWithSelection: (selection: { start: number; end: number }, text?: string) => {
                /** Find a better way to sync value on block update */
                if (text !== undefined) {
                    inputRef.current?.setNativeProps({ text });
                    /* valueRef.current = text; */
                }

                inputRef.current?.setSelection(selection.start, selection.end); // Sync native input with selection state