fix: fixed the selection and delete widget

src/components/cards.js

@@ -6,7 +6,7 @@ import { FileImageOutlined, GithubOutlined, GitlabOutlined, LinkOutlined,
             FileTextOutlined} from "@ant-design/icons"
 
 
-export function DraggableWidgetCard({ name, img, url}){
+export function DraggableWidgetCard({ name, img, url, innerRef}){
 
     const urlIcon = useMemo(() => {
         if (url){
@@ -29,7 +29,7 @@ export function DraggableWidgetCard({ name, img, url}){
 
     return (
         <Draggable className="tw-cursor-pointer" id={name}>
-            <div className="tw-w-full tw-select-none tw-h-[240px] tw-flex tw-flex-col tw-rounded-md tw-overflow-hidden 
+            <div ref={innerRef} className="tw-select-none tw-h-[240px] tw-w-[280px] tw-flex tw-flex-col tw-rounded-md tw-overflow-hidden 
                             tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px] tw-border-[#888] ">
                 <div className="tw-h-[200px] tw-w-full tw-overflow-hidden">
                     <img src={img} alt={name} className="tw-object-contain tw-h-full tw-w-full tw-select-none" />

src/components/editableDiv.js

@@ -1,8 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react'
 
 
-function EditableDiv({value, onChange, maxLength=Infinity, className='', inputClassName}) {
-    const [isEditable, setIsEditable] = useState(false)
+function EditableDiv({value, onChange, openEdit=false, maxLength=Infinity, className='', inputClassName}) {
+    const [isEditable, setIsEditable] = useState(openEdit)
     const [content, setContent] = useState(value)
     const inputRef = useRef(null)
 
@@ -12,6 +12,17 @@ function EditableDiv({value, onChange, maxLength=Infinity, className='', inputCl
 
     }, [value])
 
+    useEffect(() => {
+        setIsEditable(openEdit)
+        
+        if (openEdit){
+            setTimeout(() => {
+                inputRef.current.focus()
+            }, 15)
+        }
+
+    }, [openEdit])
+
     const handleInput = (event) => {
 
         console.log("Event key: ", event.key)

src/components/utils/draggable.js

@@ -14,10 +14,10 @@ function Draggable(props) {
     
     return (
       <button className={`tw-bg-transparent tw-outline-none tw-border-none ${props.className}`} 
-			ref={setNodeRef} 
-			style={style} 
-			{...listeners} 
-			{...attributes}>
+              ref={setNodeRef} 
+              style={style} 
+              {...listeners} 
+              {...attributes}>
         {props.children}
       </button>
     )