Function EditableDiv

src/components/editableDiv.js:4–47

({value, onChange, openEdit=false, maxLength=Infinity, className='', inputClassName})

function EditableDiv({value, onChange, openEdit=false, maxLength=Infinity, className='', inputClassName}) {
    const [isEditable, setIsEditable] = useState(openEdit)
    const [content, setContent] = useState(value)
    const inputRef = useRef(null)

    useEffect(() => {

        setContent(value)

    }, [value])

    useEffect(() => {
        setIsEditable(openEdit)
        
        if (openEdit){
            setTimeout(() => {
                inputRef.current.focus()
            }, 15)
        }

    }, [openEdit])

    const handleInput = (event) => {
        onChange(event.target.value)
    }

    const handleEnterKey = (event) => {
        if (event.key === "Enter"){
            setIsEditable(false)
        }
    }

    const handleDoubleClick = () => {
        setIsEditable(true)
        setTimeout(() => inputRef.current.focus(), 1) 
    }

    const handleBlur = () => {
        setIsEditable(false)
    }

    return (
        <div
            className={`tw-w-fit ${className}`}
            onDoubleClick={handleDoubleClick}
            onBlur={handleBlur} // To exit edit mode when clicking outside
        >