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

@@ -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();

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);
 				}
 			}
 		},

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) {