fastcomments-react-native-sdk/src/components/wysiwyg/editor-node-text.js

React Native FastComments Components. Add live commenting to any React Native application.

import { jsx as _jsx } from "react/jsx-runtime";
import { InteractionManager, TextInput } from "react-native";
import { useEffect, useRef, useState } from "react";
import { EditorNodeType } from "./node-types";
export function EditorNodeText(props) {
    const { nodeState, onBlur, doDelete, doDeleteNodeBefore, onTryNewline, setSelection, textStyle, isMultiLine } = props;
    const [selection, setLocalSelection] = useState();
    const [ignoreNextBlur, setIgnoreNextBlur] = useState(false);
    function handleOnBlur() {
        if (ignoreNextBlur) {
            return;
        }
        onBlur && onBlur();
    }
    const ref = useRef();
    // console.log('RE-RENDER', node.id, node.lastFocusTime);
    useEffect(() => {
        let timeout;
        if (nodeState.isFocused.get()) {
            const lastFocusTime = nodeState.lastFocusTime.get();
            // if (lastFocusTime === lastLastFocusTime) {
            //     return;
            // }
            console.log('Focusing node (A)', nodeState.id.get(), lastFocusTime);
            setIgnoreNextBlur(true);
            // @ts-ignore
            timeout = setTimeout(() => {
                function doFocus() {
                    // @ts-ignore
                    timeout = setTimeout(function () {
                        InteractionManager.runAfterInteractions(() => {
                            ref.current?.focus();
                            // @ts-ignore
                            timeout = setTimeout(function () {
                                setIgnoreNextBlur(false);
                                // setLastLastFocusTime(lastFocusTime);
                            }, 0);
                        });
                    }, 0);
                }
                if (ref.current?.isFocused()) {
                    ref.current?.blur();
                    doFocus();
                }
                else {
                    doFocus();
                }
            }, 0);
        }
        return () => {
            timeout && clearTimeout(timeout);
        };
    }, [nodeState.isFocused.get()]);
    const handleKeyUp = (e) => {
        switch (e.nativeEvent.key) {
            case 'Enter':
                if (isMultiLine) {
                    onTryNewline && onTryNewline();
                }
                break;
            case 'Backspace':
                if ((!selection?.start) || nodeState.deleteOnBackspace.get()) {
                    try {
                        if (nodeState.content.get()) {
                            // console.log('TRIGGERING DELETE NODE BEFORE', selection?.start, nodeState.content.get());
                            doDeleteNodeBefore && doDeleteNodeBefore(); // user is backspacing at start of node
                        }
                        else {
                            // console.log('TRIGGERING DELETE CURRENT NODE', selection?.start, nodeState.content.get());
                            // delete this node
                            doDelete && doDelete();
                        }
                    }
                    catch (e) {
                        console.log(e);
                    }
                }
                else {
                    console.log('selection was', selection.start);
                }
                break;
        }
    };
    const onSubmit = (_e) => {
        onTryNewline && onTryNewline();
    };
    const onSelectionChange = (e) => {
        setLocalSelection(e.nativeEvent.selection);
        setSelection && setSelection(e.nativeEvent.selection);
    };
    return _jsx(TextInput, { value: nodeState.content.get(), onChangeText: (newValue) => {
            nodeState.content.set(newValue);
        }, onSelectionChange: onSelectionChange, onBlur: handleOnBlur, onKeyPress: handleKeyUp, blurOnSubmit: false, onSubmitEditing: onSubmit, ref: ref, returnKeyType: isMultiLine ? 'default' : 'send', style: [StylesByNodeType[nodeState.type.get()], textStyle] });
}
const BaseTextStyles = { flex: 1, padding: 0, borderWidth: 0, position: 'relative', left: 0, minWidth: 0 };
const StylesByNodeType = {
    [EditorNodeType.TEXT_BOLD]: { fontWeight: 'bold', ...BaseTextStyles },
    [EditorNodeType.TEXT_ITALIC]: { fontStyle: 'italic', ...BaseTextStyles },
    [EditorNodeType.TEXT_STRIKETHROUGH]: { textDecorationLine: 'line-through', ...BaseTextStyles },
    [EditorNodeType.TEXT]: BaseTextStyles,
    [EditorNodeType.TEXT_UNDERLINE]: { textDecorationLine: 'underline', ...BaseTextStyles },
};