added selected element

LiveDuo · Nov 5, 2023 · cb5b1a9 · cb5b1a9
1 parent 2a5a085
commit cb5b1a9
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 11 deletions.
diff --git a/lib/client/vanilla/button.tsx b/lib/client/vanilla/button.tsx
@@ -18,6 +18,7 @@ const methods = ['GET', 'POST']
 interface DialogProps {
   open: boolean
   setOpen: (open: boolean) => void
+  selectedElement: HTMLButtonElement
 }
 
 const Dialog: React.FC<DialogProps> = ({ open, setOpen }) => {

diff --git a/lib/client/vanilla/editor.tsx b/lib/client/vanilla/editor.tsx
@@ -107,6 +107,7 @@ function Editor({ standaloneServer = false }) {
 
   const [isPreview, setIsPreview] = useState(false)
   const [hoveredComponent, setHoveredComponent] = useState<HTMLDivElement | null>(null)
+  const [selectedElement, setSelectedElement] = useState<HTMLDivElement | null>(null)
   const [components, setComponents] = useState<ComponentWithCategories>({})
 
   const [selectOpen, setSelectOpen] = useState(false)
@@ -237,7 +238,7 @@ function Editor({ standaloneServer = false }) {
   }
 
   const onCanvasClick = (e: React.MouseEvent<HTMLElement>) => {
-    const target = e.target as HTMLElement
+    const target = e.target as HTMLDivElement
     if (target.tagName === 'IMG') {
       setOpenImage(true)
     } else if (target.tagName === 'BUTTON') {
@@ -247,6 +248,7 @@ function Editor({ standaloneServer = false }) {
     } else if (target.tagName === 'path') {
       setOpenSvg(true)
     }
+    setSelectedElement(target)
 
     if (isEventOnElement(deleteRef.current! as unknown as HTMLElement, e)) {
       const clickEvent = new MouseEvent('click', { bubbles: true })
@@ -397,10 +399,23 @@ function Editor({ standaloneServer = false }) {
             </button>
           )}
         </div>
-        <ImageDialog open={openImage} setOpen={setOpenImage} standaloneServer={standaloneServer} />
-        <ButtonDialog open={openButton} setOpen={setOpenButton} />
-        <LinkDialog open={openLink} setOpen={setOpenLink} />
-        <SvgDialog open={openSvg} setOpen={setOpenSvg} />
+        <ImageDialog
+          open={openImage}
+          setOpen={setOpenImage}
+          selectedElement={selectedElement!}
+          standaloneServer={standaloneServer}
+        />
+        <ButtonDialog
+          open={openButton}
+          setOpen={setOpenButton}
+          selectedElement={selectedElement as unknown as HTMLButtonElement}
+        />
+        <LinkDialog
+          open={openLink}
+          setOpen={setOpenLink}
+          selectedElement={selectedElement as unknown as HTMLAnchorElement}
+        />
+        <SvgDialog open={openSvg} setOpen={setOpenSvg} selectedElement={selectedElement as unknown as SVGElement} />
         <div className="flex justify-center bg-gray-200" style={{ overflowY: 'scroll' }}>
           <div
             id="editor"

diff --git a/lib/client/vanilla/image.tsx b/lib/client/vanilla/image.tsx
@@ -13,6 +13,7 @@ interface ContentProps {
   setText: Function
   onUpload: (event: ChangeEvent<HTMLInputElement>) => void
   onChange: Function
+  selectedElement: HTMLDivElement
 }
 
 const Content: React.FC<ContentProps> = ({ url, text, setText, onUpload, onChange }) => {
@@ -67,9 +68,10 @@ interface DialogProps {
   open: boolean
   setOpen: (open: boolean) => void
   standaloneServer: boolean
+  selectedElement: HTMLDivElement
 }
 
-const Dialog: React.FC<DialogProps> = ({ open, setOpen, standaloneServer }) => {
+const Dialog: React.FC<DialogProps> = ({ open, setOpen, selectedElement, standaloneServer }) => {
   const [url, setUrl] = useState<string | null>('')
   const [text, setText] = useState('')
 
@@ -98,7 +100,14 @@ const Dialog: React.FC<DialogProps> = ({ open, setOpen, standaloneServer }) => {
               Upload Image
             </DialogPrimitive.Title>
 
-            <Content url={url as string} text={text} setText={setText} onUpload={onUpload} onChange={onChange} />
+            <Content
+              url={url as string}
+              text={text}
+              setText={setText}
+              onUpload={onUpload}
+              onChange={onChange}
+              selectedElement={selectedElement}
+            />
 
             <div className="mt-4 flex justify-end">
               <button

diff --git a/lib/client/vanilla/link.tsx b/lib/client/vanilla/link.tsx
@@ -9,10 +9,11 @@ import cx from 'classnames'
 interface DialogProps {
   open: boolean
   setOpen: (open: boolean) => void
+  selectedElement: HTMLAnchorElement
 }
 
-const Dialog: React.FC<DialogProps> = ({ open, setOpen }) => {
-  const [link, setLink] = useState('')
+const Dialog: React.FC<DialogProps> = ({ open, setOpen, selectedElement }) => {
+  const [link, setLink] = useState(selectedElement?.href ?? '')
   const [newTab, setNewTab] = useState(true)
 
   return (

diff --git a/lib/client/vanilla/svg.tsx b/lib/client/vanilla/svg.tsx
@@ -6,9 +6,13 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon'
 // @ts-ignore
 import cx from 'classnames'
 
-type DialogProps = { open: boolean; setOpen: any }
+type DialogProps = {
+  open: boolean
+  setOpen: any
+  selectedElement: SVGElement
+}
 
-const Dialog: React.FC<DialogProps> = ({ open, setOpen }) => {
+const Dialog: React.FC<DialogProps> = ({ open, setOpen, selectedElement }) => {
   const [path, setPath] = useState('')
 
   return (