feat: widgets can move inside the canvas

src/components/editableDiv.js

@@ -0,0 +1,52 @@
+import React, { useState, useRef, useEffect } from 'react'
+
+
+function EditableDiv({value, onChange, maxLength=Infinity, className='', inputClassName}) {
+    const [isEditable, setIsEditable] = useState(false)
+    const [content, setContent] = useState(value)
+    const inputRef = useRef(null)
+
+    useEffect(() => {
+
+        setContent(value)
+
+    }, [value])
+
+    const handleInput = (event) => {
+        console.log("value: ", event.target.value)
+        onChange(event.target.value)
+
+    }
+
+    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
+        >
+            {!isEditable && <span className="tw-select-none">{content}</span>}
+            <input type="text" value={content} 
+                    onInput={handleInput}
+                    maxLength={maxLength}
+                    ref={inputRef}
+                    className={`${!isEditable && "tw-hidden"} 
+                                    tw-outline-none tw-bg-transparent 
+                                    tw-border-none tw-p-1
+                                    focus-within:tw-border-[1px]
+                                    focus-within:tw-border-blue-500
+                                    
+                                    ${inputClassName}`} />
+        </div>
+    )
+}
+
+export default EditableDiv