From f20e3760db74348ca558f63eddbca10c65cc21a7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 18 Dec 2024 19:17:21 +0530
Subject: [PATCH] fix: Use addChild function instead on directly pushing child

- To make sure parentBlock is set
- This will also make sure all the blocks pasted from figma has parent set
---
 frontend/src/components/BuilderCanvas.vue | 3 +--
 frontend/src/store.ts                     | 2 +-
 frontend/src/utils/block.ts               | 9 +++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 6ffa34ee..66757f55 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -192,8 +192,7 @@ const { isOverDropZone } = useDropZone(canvasContainer, {
 				if (!parentBlock) return;
 				const parentParentBlock = parentBlock.getParentBlock();
 				if (!parentParentBlock) return;
-				const index = parentParentBlock.children.indexOf(parentBlock);
-				parentParentBlock.children.splice(index, 1, newBlock);
+				parentParentBlock.replaceChild(parentBlock, newBlock);
 			} else {
 				while (parentBlock && !parentBlock.canHaveChildren()) {
 					parentBlock = parentBlock.getParentBlock();
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 3dece0c2..96428e30 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -109,7 +109,7 @@ const useStore = defineStore("store", {
 				this.activeCanvas.setRootBlock(firstBlock);
 			} else {
 				for (let block of blocks) {
-					parent?.children.push(getBlockInstance(block));
+					parent?.addChild(block);
 				}
 			}
 		},
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index 03892844..8516ce15 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -6,6 +6,7 @@ import {
 	addPxToNumber,
 	dataURLtoFile,
 	getBlockCopy,
+	getBlockInstance,
 	getNumberFromPx,
 	getTextContent,
 	kebabToCamelCase,
@@ -71,7 +72,7 @@ class Block implements BlockOptions {
 		}
 		this.children = (options.children || []).map((child: BlockOptions) => {
 			child.parentBlock = this;
-			return reactive(new Block(child));
+			return getBlockInstance(child);
 		});
 
 		this.baseStyles = reactive(options.styles || options.baseStyles || {});
@@ -420,13 +421,13 @@ class Block implements BlockOptions {
 		}
 	}
 	addChild(child: BlockOptions, index?: number | null, select: boolean = true) {
-		child.parentBlock = this;
 		if (index === undefined || index === null) {
 			index = this.children.length;
 		}
 		index = clamp(index, 0, this.children.length);
 
-		const childBlock = reactive(new Block(child));
+		const childBlock = getBlockInstance(child);
+		childBlock.parentBlock = this;
 		this.children.splice(index, 0, childBlock);
 		if (select) {
 			childBlock.selectBlock();
@@ -453,7 +454,7 @@ class Block implements BlockOptions {
 		newChild.parentBlock = this;
 		const index = this.getChildIndex(child);
 		if (index > -1) {
-			this.children.splice(index, 1, newChild);
+			this.children.splice(index, 1, reactive(newChild));
 		}
 	}
 	getChildIndex(child: Block) {