fix: copy paste gets the correct location (#21)

QuiiBz · Dec 29, 2023 · 76d6c20 · 76d6c20
1 parent 5e03e8a
commit 76d6c20
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/apps/dashboard/src/components/OgEditor.tsx b/apps/dashboard/src/components/OgEditor.tsx
@@ -46,7 +46,7 @@ interface OgProviderProps {
 const edits: OGElement[][] = []
 let editIndex = -1
 
-let elementToCopy: OGElement | undefined
+let elementIdToCopy: string | undefined
 
 export function OgEditor({ initialElements, localStorageKey: key, width, height }: OgProviderProps) {
   const localStorageKey = `og-${key}`
@@ -157,7 +157,7 @@ export function OgEditor({ initialElements, localStorageKey: key, width, height
         maybeLoadFont(element.fontFamily, element.fontWeight)
       }
     })
-  }, [localStorageKey, initialElements])
+  }, [localStorageKey])
 
   useEffect(() => {
     function onContextMenu(event: MouseEvent) {
@@ -208,13 +208,15 @@ export function OgEditor({ initialElements, localStorageKey: key, width, height
       // Copy an element
       if (selectedElement && event.key === 'c' && (event.metaKey || event.ctrlKey)) {
         event.preventDefault()
-        elementToCopy = elements.find(item => item.id === selectedElement)
+        elementIdToCopy = selectedElement
       }
 
       // Paste a copied element
       if (event.key === 'v' && (event.metaKey || event.ctrlKey)) {
         event.preventDefault()
 
+        const elementToCopy = elements.find(item => item.id === elementIdToCopy)
+
         if (elementToCopy) {
           const newElement: OGElement = {
             ...elementToCopy,
@@ -224,23 +226,25 @@ export function OgEditor({ initialElements, localStorageKey: key, width, height
           }
 
           addElement(newElement)
-          elementToCopy = newElement
+          elementIdToCopy = newElement.id
         }
       }
     }
 
     if (rootRef.current) {
       rootRef.current.addEventListener('contextmenu', onContextMenu)
       rootRef.current.addEventListener('click', onClick)
-      document.addEventListener('keydown', onKeyDown)
     }
 
+    document.addEventListener('keydown', onKeyDown)
+
     return () => {
       if (rootRef.current) {
         rootRef.current.removeEventListener('contextmenu', onContextMenu)
         rootRef.current.removeEventListener('click', onClick)
-        document.removeEventListener('keydown', onKeyDown)
       }
+
+      document.removeEventListener('keydown', onKeyDown)
     }
   }, [rootRef, selectedElement, removeElement, addElement, elements, undoRedo, setSelectedElement])
 

diff --git a/apps/dashboard/src/lib/templates.ts b/apps/dashboard/src/lib/templates.ts
@@ -38,7 +38,7 @@ export const TEMPLATES = [
         "id": createElementId(),
         "name": "Text",
         "x": 95,
-        "y": 284,
+        "y": 278,
         "width": 643,
         "height": 131,
         "visible": true,
@@ -55,10 +55,10 @@ export const TEMPLATES = [
       },
       {
         "tag": "p",
-        "id": createElementId(),
+        "id": "5dwujy4uo",
         "name": "Text",
-        "x": 96,
-        "y": 429,
+        "x": 95,
+        "y": 415,
         "width": 597,
         "height": 138,
         "visible": true,
@@ -77,10 +77,10 @@ export const TEMPLATES = [
         "tag": "div",
         "id": createElementId(),
         "name": "Rounded box",
-        "x": 956,
-        "y": -78,
-        "width": 307,
-        "height": 307,
+        "x": 941,
+        "y": -163,
+        "width": 432,
+        "height": 432,
         "visible": true,
         "rotate": 0,
         "opacity": 10,
@@ -91,10 +91,10 @@ export const TEMPLATES = [
         "tag": "div",
         "id": createElementId(),
         "name": "Rounded box",
-        "x": 1026,
-        "y": -29,
-        "width": 195,
-        "height": 195,
+        "x": 1005,
+        "y": -95,
+        "width": 300,
+        "height": 300,
         "visible": true,
         "rotate": 0,
         "opacity": 10,