From 3c4227a4025d60a54f3e2dbdb9697cdd50dd8eb8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Dec 2024 17:59:39 +0530
Subject: [PATCH 01/27] fix: Only show radiusHandler if block is selected

---
 frontend/src/components/BlockEditor.vue    | 2 +-
 frontend/src/components/PaddingHandler.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index 2c2aa2146..a123b1828 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -117,7 +117,7 @@ const showMarginHandler = computed(() => {
 
 const showBorderRadiusHandler = computed(() => {
 	return (
-		isBlockSelected &&
+		isBlockSelected.value &&
 		!props.block.isRoot() &&
 		!props.block.isText() &&
 		!props.block.isHTML() &&
diff --git a/frontend/src/components/PaddingHandler.vue b/frontend/src/components/PaddingHandler.vue
index 2237117dd..2c50991d7 100644
--- a/frontend/src/components/PaddingHandler.vue
+++ b/frontend/src/components/PaddingHandler.vue
@@ -308,7 +308,7 @@ const handlePadding = (ev: MouseEvent, position: Position) => {
 			updating.value = false;
 			mouseUpEvent.preventDefault();
 		},
-		{ once: true }
+		{ once: true },
 	);
 };
 

From 4c1e4392ace2bc641093165850c41e031fefa15f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Dec 2024 22:42:00 +0530
Subject: [PATCH 02/27] refactor: Make BuilderCanvas lighter and improve
 readability

- Move all canvas events to useCanvasEvents
- DropZone funtionality to useCanvasrDropZone
- All utilities to useCanvasrUtils
---
 frontend/src/components/BuilderBlock.vue     |   2 +-
 frontend/src/components/BuilderCanvas.vue    | 697 ++-----------------
 frontend/src/components/BuilderLeftPanel.vue |   4 +-
 frontend/src/store.ts                        |  13 +-
 frontend/src/types/Builder/BuilderCanvas.ts  |  24 +
 frontend/src/utils/block.ts                  |   2 +-
 frontend/src/utils/useBlockSelection.ts      |  86 +++
 frontend/src/utils/useCanvasDropZone.ts      | 119 ++++
 frontend/src/utils/useCanvasEvents.ts        | 210 ++++++
 frontend/src/utils/useCanvasUtils.ts         | 286 ++++++++
 10 files changed, 806 insertions(+), 637 deletions(-)
 create mode 100644 frontend/src/types/Builder/BuilderCanvas.ts
 create mode 100644 frontend/src/utils/useBlockSelection.ts
 create mode 100644 frontend/src/utils/useCanvasDropZone.ts
 create mode 100644 frontend/src/utils/useCanvasEvents.ts
 create mode 100644 frontend/src/utils/useCanvasUtils.ts

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3b8ccbafb..683bf01fd 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -4,7 +4,7 @@
 		:selected="isSelected"
 		@click="handleClick"
 		@dblclick="handleDoubleClick"
-		@contextmenu="triggerContextMenu($event)"
+		@contextmenu="triggerContextMenu"
 		@mouseover="handleMouseOver"
 		@mouseleave="handleMouseLeave"
 		:data-block-id="block.blockId"
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 6ffa34eeb..9f215f4c8 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -76,22 +76,15 @@
 </template>
 <script setup lang="ts">
 import LoadingIcon from "@/components/Icons/Loading.vue";
-import { posthog } from "@/telemetry";
+import { BreakpointConfig, CanvasHistory } from "@/types/Builder/BuilderCanvas";
 import Block from "@/utils/block";
-import getBlockTemplate from "@/utils/blockTemplate";
-import {
-	addPxToNumber,
-	getBlockCopy,
-	getBlockInstance,
-	getNumberFromPx,
-	isTargetEditable,
-	uploadImage,
-} from "@/utils/helpers";
-import { useCanvasHistory } from "@/utils/useCanvasHistory";
-import { clamp, useDropZone, useElementBounding, useEventListener } from "@vueuse/core";
+import { useCanvasUtils } from "@/utils/useCanvasUtils";
+import { getBlockCopy } from "@/utils/helpers";
+import { useCanvasEvents } from "@/utils/useCanvasEvents";
+import { useBlockSelection } from "@/utils/useBlockSelection";
+import { useCanvasDropZone } from "@/utils/useCanvasDropZone";
 import { FeatherIcon } from "frappe-ui";
-import { Ref, computed, nextTick, onMounted, provide, reactive, ref, watch } from "vue";
-import { toast } from "vue-sonner";
+import { Ref, computed, onMounted, provide, reactive, ref, watch } from "vue";
 import useStore from "../store";
 import setPanAndZoom from "../utils/panAndZoom";
 import BlockSnapGuides from "./BlockSnapGuides.vue";
@@ -104,7 +97,6 @@ const canvas = ref(null);
 const showBlocks = ref(false);
 const overlay = ref(null);
 const isDirty = ref(false);
-let selectionTrail = [] as string[];
 
 const props = defineProps({
 	blockData: {
@@ -119,6 +111,16 @@ const props = defineProps({
 
 // clone props.block into canvas data to avoid mutating them
 const block = ref(getBlockCopy(props.blockData, true)) as Ref<Block>;
+const history = ref(null) as Ref<null> | CanvasHistory;
+
+const {
+	clearSelection,
+	selectBlockRange,
+	selectedBlockIds,
+	isSelected,
+	toggleBlockSelection,
+	selectedBlocks,
+} = useBlockSelection(block);
 
 const canvasProps = reactive({
 	overlayElement: null,
@@ -151,126 +153,32 @@ const canvasProps = reactive({
 			width: 420,
 			visible: false,
 		},
-	],
-});
-
-const canvasHistory = ref(null) as Ref<ReturnType<typeof useCanvasHistory>> | Ref<null>;
-
-provide("canvasProps", canvasProps);
-
-onMounted(() => {
-	canvasProps.overlayElement = overlay.value;
-	setupHistory();
-	setEvents();
+	] as BreakpointConfig[],
 });
 
-function setupHistory() {
-	canvasHistory.value = useCanvasHistory(block, selectedBlockIds) as ReturnType<typeof useCanvasHistory>;
-}
-
-const { isOverDropZone } = useDropZone(canvasContainer, {
-	onDrop: async (files, ev) => {
-		let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
-		let parentBlock = block.value as Block | null;
-		if (element) {
-			if (element.dataset.blockId) {
-				parentBlock = findBlock(element.dataset.blockId) || parentBlock;
-			}
-		}
-		const componentName = ev.dataTransfer?.getData("componentName");
-		const blockTemplate = ev.dataTransfer?.getData("blockTemplate");
-		if (componentName) {
-			await store.loadComponent(componentName);
-			const component = store.componentMap.get(componentName) as Block;
-			const newBlock = getBlockCopy(component);
-			newBlock.extendFromComponent(componentName);
-			// if shift key is pressed, replace parent block with new block
-			if (ev.shiftKey) {
-				while (parentBlock && parentBlock.isChildOfComponent) {
-					parentBlock = parentBlock.getParentBlock();
-				}
-				if (!parentBlock) return;
-				const parentParentBlock = parentBlock.getParentBlock();
-				if (!parentParentBlock) return;
-				const index = parentParentBlock.children.indexOf(parentBlock);
-				parentParentBlock.children.splice(index, 1, newBlock);
-			} else {
-				while (parentBlock && !parentBlock.canHaveChildren()) {
-					parentBlock = parentBlock.getParentBlock();
-				}
-				if (!parentBlock) return;
-				parentBlock.addChild(newBlock);
-			}
-			ev.stopPropagation();
-			posthog.capture("builder_component_used");
-		} else if (blockTemplate) {
-			await store.fetchBlockTemplate(blockTemplate);
-			const newBlock = getBlockInstance(store.getBlockTemplate(blockTemplate).block, false);
-			// if shift key is pressed, replace parent block with new block
-			if (ev.shiftKey) {
-				while (parentBlock && parentBlock.isChildOfComponent) {
-					parentBlock = parentBlock.getParentBlock();
-				}
-				if (!parentBlock) return;
-				const parentParentBlock = parentBlock.getParentBlock();
-				if (!parentParentBlock) return;
-				const index = parentParentBlock.children.indexOf(parentBlock);
-				parentParentBlock.children.splice(index, 1, newBlock);
-			} else {
-				while (parentBlock && !parentBlock.canHaveChildren()) {
-					parentBlock = parentBlock.getParentBlock();
-				}
-				if (!parentBlock) return;
-				parentBlock.addChild(newBlock);
-			}
-			posthog.capture("builder_block_template_used", { template: blockTemplate });
-		} else if (files && files.length) {
-			uploadImage(files[0]).then((fileDoc: { fileURL: string; fileName: string }) => {
-				if (!parentBlock) return;
-
-				if (fileDoc.fileName.match(/\.(mp4|webm|ogg|mov)$/)) {
-					if (parentBlock.isVideo()) {
-						parentBlock.setAttribute("src", fileDoc.fileURL);
-					} else {
-						while (parentBlock && !parentBlock.canHaveChildren()) {
-							parentBlock = parentBlock.getParentBlock() as Block;
-						}
-						parentBlock.addChild(store.getVideoBlock(fileDoc.fileURL));
-					}
-					posthog.capture("builder_video_uploaded");
-					return;
-				}
+const {
+	setScaleAndTranslate,
+	resetZoom,
+	moveCanvas,
+	zoomIn,
+	zoomOut,
+	toggleMode,
+	toggleDirty,
+	setupHistory,
+	clearCanvas,
+	getRootBlock,
+	setRootBlock,
+	selectBlock,
+	scrollBlockIntoView,
+	removeBlock,
+	findBlock,
+} = useCanvasUtils(canvasProps, canvasContainer, canvas, block, selectedBlockIds, history);
 
-				if (parentBlock.isImage()) {
-					parentBlock.setAttribute("src", fileDoc.fileURL);
-					posthog.capture("builder_image_uploaded", {
-						type: "image-replace",
-					});
-				} else if (parentBlock.isSVG()) {
-					const imageBlock = store.getImageBlock(fileDoc.fileURL, fileDoc.fileName);
-					const parentParentBlock = parentBlock.getParentBlock();
-					parentParentBlock?.replaceChild(parentBlock, getBlockInstance(imageBlock));
-					posthog.capture("builder_image_uploaded", {
-						type: "svg-replace",
-					});
-				} else if (parentBlock.isContainer() && ev.shiftKey) {
-					parentBlock.setStyle("background", `url(${fileDoc.fileURL})`);
-					posthog.capture("builder_image_uploaded", {
-						type: "background",
-					});
-				} else {
-					while (parentBlock && !parentBlock.canHaveChildren()) {
-						parentBlock = parentBlock.getParentBlock() as Block;
-					}
-					parentBlock.addChild(store.getImageBlock(fileDoc.fileURL, fileDoc.fileName));
-					posthog.capture("builder_image_uploaded", {
-						type: "new-image",
-					});
-				}
-			});
-		}
-	},
-});
+const { isOverDropZone } = useCanvasDropZone(
+	canvasContainer as unknown as Ref<HTMLElement>,
+	block,
+	findBlock,
+);
 
 const visibleBreakpoints = computed(() => {
 	return canvasProps.breakpoints.filter(
@@ -278,266 +186,42 @@ const visibleBreakpoints = computed(() => {
 	);
 });
 
-function setEvents() {
-	const container = document.body.querySelector(".canvas-container") as HTMLElement;
-	let counter = 0;
-	useEventListener(container, "mousedown", (ev: MouseEvent) => {
-		if (store.mode === "move") {
-			return;
-		}
-		const initialX = ev.clientX;
-		const initialY = ev.clientY;
-		if (store.mode === "select") {
-			return;
-		} else {
-			const pauseId = canvasHistory.value?.pause();
-			ev.stopPropagation();
-			let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
-			let block = getFirstBlock();
-			if (element) {
-				if (element.dataset.blockId) {
-					block = findBlock(element.dataset.blockId) || block;
-				}
-			}
-			let parentBlock = getFirstBlock();
-			if (element.dataset.blockId) {
-				parentBlock = findBlock(element.dataset.blockId) || parentBlock;
-				while (parentBlock && !parentBlock.canHaveChildren()) {
-					parentBlock = parentBlock.getParentBlock() || getFirstBlock();
-				}
-			}
-			const child = getBlockTemplate(store.mode);
-			const parentElement = document.body.querySelector(
-				`.canvas [data-block-id="${parentBlock.blockId}"]`,
-			) as HTMLElement;
-			const parentOldPosition = parentBlock.getStyle("position");
-			if (parentOldPosition === "static" || parentOldPosition === "inherit" || !parentOldPosition) {
-				parentBlock.setBaseStyle("position", "relative");
-			}
-			const parentElementBounds = parentElement.getBoundingClientRect();
-			let x = (ev.x - parentElementBounds.left) / canvasProps.scale;
-			let y = (ev.y - parentElementBounds.top) / canvasProps.scale;
-			const parentWidth = getNumberFromPx(getComputedStyle(parentElement).width);
-			const parentHeight = getNumberFromPx(getComputedStyle(parentElement).height);
-
-			const childBlock = parentBlock.addChild(child);
-			childBlock.setBaseStyle("position", "absolute");
-			childBlock.setBaseStyle("top", addPxToNumber(y));
-			childBlock.setBaseStyle("left", addPxToNumber(x));
-			if (store.mode === "container" || store.mode === "repeater") {
-				const colors = ["#ededed", "#e2e2e2", "#c7c7c7"];
-				childBlock.setBaseStyle("background", colors[counter % colors.length]);
-				counter++;
-			}
-
-			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
-				if (store.mode === "text") {
-					return;
-				} else {
-					mouseMoveEvent.preventDefault();
-					let width = (mouseMoveEvent.clientX - initialX) / canvasProps.scale;
-					let height = (mouseMoveEvent.clientY - initialY) / canvasProps.scale;
-					width = clamp(width, 0, parentWidth);
-					height = clamp(height, 0, parentHeight);
-					const setFullWidth = width === parentWidth;
-					childBlock.setBaseStyle("width", setFullWidth ? "100%" : addPxToNumber(width));
-					childBlock.setBaseStyle("height", addPxToNumber(height));
-				}
-			};
-			useEventListener(document, "mousemove", mouseMoveHandler);
-			useEventListener(
-				document,
-				"mouseup",
-				() => {
-					document.removeEventListener("mousemove", mouseMoveHandler);
-					parentBlock.setBaseStyle("position", parentOldPosition || "static");
-					childBlock.setBaseStyle("position", "static");
-					childBlock.setBaseStyle("top", "auto");
-					childBlock.setBaseStyle("left", "auto");
-					setTimeout(() => {
-						store.mode = "select";
-					}, 50);
-					if (store.mode === "text") {
-						pauseId && canvasHistory.value?.resume(pauseId, true);
-						store.editableBlock = childBlock;
-						return;
-					}
-					if (parentBlock.isGrid()) {
-						childBlock.setStyle("width", "auto");
-						childBlock.setStyle("height", "100%");
-					} else {
-						if (getNumberFromPx(childBlock.getStyle("width")) < 100) {
-							childBlock.setBaseStyle("width", "100%");
-						}
-						if (getNumberFromPx(childBlock.getStyle("height")) < 100) {
-							childBlock.setBaseStyle("height", "200px");
-						}
-					}
-					pauseId && canvasHistory.value?.resume(pauseId, true);
-				},
-				{ once: true },
-			);
-		}
-	});
-
-	useEventListener(container, "mousedown", (ev: MouseEvent) => {
-		if (store.mode === "move") {
-			container.style.cursor = "grabbing";
-			const initialX = ev.clientX;
-			const initialY = ev.clientY;
-			const initialTranslateX = canvasProps.translateX;
-			const initialTranslateY = canvasProps.translateY;
-			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
-				mouseMoveEvent.preventDefault();
-				const diffX = (mouseMoveEvent.clientX - initialX) / canvasProps.scale;
-				const diffY = (mouseMoveEvent.clientY - initialY) / canvasProps.scale;
-				canvasProps.translateX = initialTranslateX + diffX;
-				canvasProps.translateY = initialTranslateY + diffY;
-			};
-			useEventListener(document, "mousemove", mouseMoveHandler);
-			useEventListener(
-				document,
-				"mouseup",
-				() => {
-					document.removeEventListener("mousemove", mouseMoveHandler);
-					container.style.cursor = "grab";
-				},
-				{ once: true },
-			);
-			ev.stopPropagation();
-			ev.preventDefault();
-		}
-	});
-
-	useEventListener(document, "keydown", (ev: KeyboardEvent) => {
-		if (isTargetEditable(ev) || selectedBlocks.value.length !== 1) return;
-
-		const selectedBlock = selectedBlocks.value[0];
-
-		const selectBlock = (block: Block | null) => {
-			if (block) store.selectBlock(block, null, true, true);
-			return !!block;
-		};
-
-		const selectSibling = (direction: "previous" | "next", fallback: () => void) => {
-			selectBlock(selectedBlock.getSiblingBlock(direction)) || fallback();
-		};
-
-		const selectParent = () => selectBlock(selectedBlock.getParentBlock());
-
-		const selectFirstChild = () => selectBlock(selectedBlock.children[0]);
-
-		const selectNextSiblingOrParent = () => {
-			let sibling = selectedBlock.getSiblingBlock("next");
-			let parentBlock = selectedBlock.getParentBlock();
-			while (!sibling && parentBlock) {
-				sibling = parentBlock.getSiblingBlock("next");
-				parentBlock = parentBlock.getParentBlock();
-			}
-			selectBlock(sibling);
-		};
-
-		const selectLastChildInTree = (block: Block) => {
-			let currentBlock = block;
-			while (store.activeLayers?.isExpandedInTree(currentBlock)) {
-				const lastChild = currentBlock.getLastChild() as Block;
-				if (!lastChild) break;
-				currentBlock = lastChild;
-			}
-			selectBlock(currentBlock);
-		};
-
-		switch (ev.key) {
-			case "ArrowLeft":
-				store.activeLayers?.isExpandedInTree(selectedBlock)
-					? store.activeLayers.toggleExpanded(selectedBlock)
-					: selectSibling("previous", selectParent);
-				break;
-			case "ArrowRight":
-				selectedBlock.hasChildren() && selectedBlock.isVisible()
-					? (store.activeLayers?.toggleExpanded(selectedBlock), selectFirstChild())
-					: selectNextSiblingOrParent();
-				break;
-			case "ArrowUp":
-				selectBlock(selectedBlock.getSiblingBlock("previous"))
-					? selectLastChildInTree(selectedBlock.getSiblingBlock("previous") as Block)
-					: selectParent();
-				break;
-			case "ArrowDown":
-				store.activeLayers?.isExpandedInTree(selectedBlock) &&
-				selectedBlock.hasChildren() &&
-				selectedBlock.isVisible()
-					? selectFirstChild()
-					: selectNextSiblingOrParent();
-				break;
-		}
-	});
-}
-
-const containerBound = reactive(useElementBounding(canvasContainer));
-const canvasBound = reactive(useElementBounding(canvas));
-
-const setScaleAndTranslate = async () => {
-	if (document.readyState !== "complete") {
-		await new Promise((resolve) => {
-			window.addEventListener("load", resolve);
-		});
-	}
-	const paddingX = 300;
-	const paddingY = 200;
-
-	await nextTick();
-	canvasBound.update();
-	const containerWidth = containerBound.width;
-	const canvasWidth = canvasBound.width / canvasProps.scale;
-
-	canvasProps.scale = containerWidth / (canvasWidth + paddingX * 2);
-
-	canvasProps.translateX = 0;
-	canvasProps.translateY = 0;
-	await nextTick();
-	const scale = canvasProps.scale;
-	canvasBound.update();
-	const diffY = containerBound.top - canvasBound.top + paddingY * scale;
-	if (diffY !== 0) {
-		canvasProps.translateY = diffY / scale;
-	}
-	canvasProps.settingCanvas = false;
-};
-
 onMounted(() => {
-	setScaleAndTranslate();
 	const canvasContainerEl = canvasContainer.value as unknown as HTMLElement;
 	const canvasEl = canvas.value as unknown as HTMLElement;
-	setPanAndZoom(canvasEl, canvasContainerEl, canvasProps);
+	canvasProps.overlayElement = overlay.value;
+	setScaleAndTranslate();
 	showBlocks.value = true;
+	setupHistory();
+	useCanvasEvents(
+		canvasContainer as unknown as Ref<HTMLElement>,
+		canvasProps,
+		history as CanvasHistory,
+		selectedBlocks,
+		getRootBlock,
+		findBlock,
+	);
+	setPanAndZoom(canvasEl, canvasContainerEl, canvasProps);
 });
 
-const resetZoom = () => {
-	canvasProps.scale = 1;
-	canvasProps.translateX = 0;
-	canvasProps.translateY = 0;
-};
-
-const moveCanvas = (direction: "up" | "down" | "right" | "left") => {
-	if (direction === "up") {
-		canvasProps.translateY -= 20;
-	} else if (direction === "down") {
-		canvasProps.translateY += 20;
-	} else if (direction === "right") {
-		canvasProps.translateX += 20;
-	} else if (direction === "left") {
-		canvasProps.translateX -= 20;
+const handleClick = (ev: MouseEvent) => {
+	const target = document.elementFromPoint(ev.clientX, ev.clientY);
+	// hack to ensure if click is on canvas-container
+	// TODO: Still clears selection if space handlers are dragged over canvas-container
+	if (target?.classList.contains("canvas-container")) {
+		clearSelection();
 	}
 };
 
-const zoomIn = () => {
-	canvasProps.scale = Math.min(canvasProps.scale + 0.1, 10);
-};
-
-const zoomOut = () => {
-	canvasProps.scale = Math.max(canvasProps.scale - 0.1, 0.1);
-};
+watch(
+	() => block,
+	() => {
+		toggleDirty(true);
+	},
+	{
+		deep: true,
+	},
+);
 
 watch(
 	() => canvasProps.breakpoints.map((b) => b.visible),
@@ -557,248 +241,7 @@ watch(
 	},
 );
 
-function toggleMode(mode: BuilderMode) {
-	if (!canvasContainer.value) return;
-	const container = canvasContainer.value as HTMLElement;
-	if (mode === "text") {
-		container.style.cursor = "text";
-	} else if (["container", "image", "repeater"].includes(mode)) {
-		container.style.cursor = "crosshair";
-	} else if (mode === "move") {
-		container.style.cursor = "grab";
-	} else {
-		container.style.cursor = "default";
-	}
-}
-
-const handleClick = (ev: MouseEvent) => {
-	const target = document.elementFromPoint(ev.clientX, ev.clientY);
-	// hack to ensure if click is on canvas-container
-	// TODO: Still clears selection if space handlers are dragged over canvas-container
-	if (target?.classList.contains("canvas-container")) {
-		clearSelection();
-	}
-};
-
-const clearCanvas = () => {
-	block.value = store.getRootBlock();
-};
-
-const getFirstBlock = () => {
-	return block.value;
-};
-
-const setRootBlock = (newBlock: Block, resetCanvas = false) => {
-	block.value = newBlock;
-	if (canvasHistory.value) {
-		canvasHistory.value.dispose();
-		setupHistory();
-	}
-	if (resetCanvas) {
-		nextTick(() => {
-			setScaleAndTranslate();
-			toggleDirty(false);
-		});
-	}
-};
-
-const selectedBlockIds = ref([]) as Ref<string[]>;
-const selectedBlocks = computed(() => {
-	return selectedBlockIds.value.map((id) => findBlock(id)).filter((b) => b) as Block[];
-}) as Ref<Block[]>;
-
-const isSelected = (block: Block) => {
-	return selectedBlockIds.value.includes(block.blockId);
-};
-
-let maintainTrail = false;
-
-const selectBlock = (_block: Block, multiSelect = false) => {
-	if (multiSelect) {
-		selectedBlockIds.value.push(_block.blockId);
-	} else {
-		selectedBlockIds.value.splice(0, selectedBlockIds.value.length, _block.blockId);
-	}
-	if (!maintainTrail) {
-		selectionTrail = [];
-	}
-};
-
-const toggleBlockSelection = (_block: Block) => {
-	if (isSelected(_block)) {
-		selectedBlockIds.value.splice(selectedBlockIds.value.indexOf(_block.blockId), 1);
-	} else {
-		selectBlock(_block, true);
-	}
-};
-
-const selectBlockRange = (newSelectedBlock: Block) => {
-	const lastSelectedBlockId = selectedBlockIds.value[selectedBlockIds.value.length - 1];
-	const lastSelectedBlock = findBlock(lastSelectedBlockId);
-	const lastSelectedBlockParent = lastSelectedBlock?.parentBlock;
-	if (!lastSelectedBlock || !lastSelectedBlockParent) {
-		newSelectedBlock.selectBlock();
-		return;
-	}
-	const lastSelectedBlockIndex = lastSelectedBlock.parentBlock?.children.indexOf(lastSelectedBlock);
-	const newSelectedBlockIndex = newSelectedBlock.parentBlock?.children.indexOf(newSelectedBlock);
-	const newSelectedBlockParent = newSelectedBlock.parentBlock;
-	if (lastSelectedBlockIndex === undefined || newSelectedBlockIndex === undefined) {
-		return;
-	}
-	const start = Math.min(lastSelectedBlockIndex, newSelectedBlockIndex);
-	const end = Math.max(lastSelectedBlockIndex, newSelectedBlockIndex);
-	if (lastSelectedBlockParent === newSelectedBlockParent) {
-		const blocks = lastSelectedBlockParent.children.slice(start, end + 1);
-		selectedBlockIds.value = selectedBlockIds.value.concat(...blocks.map((b) => b.blockId));
-		selectedBlockIds.value = Array.from(new Set(selectedBlockIds.value));
-	}
-};
-
-const clearSelection = () => {
-	selectedBlockIds.value = [];
-};
-
-const findBlock = (blockId: string, blocks?: Block[]): Block | null => {
-	if (!blocks) {
-		blocks = [getFirstBlock()];
-	}
-	for (const block of blocks) {
-		if (block.blockId === blockId) {
-			return block;
-		}
-		if (block.children) {
-			const found = findBlock(blockId, block.children);
-			if (found) {
-				return found;
-			}
-		}
-	}
-	return null;
-};
-
-const removeBlock = (block: Block) => {
-	if (block.blockId === "root") {
-		toast.warning("Warning", {
-			description: "Cannot delete root block",
-		});
-		return;
-	}
-	if (block.isChildOfComponentBlock()) {
-		toast.warning("Warning", {
-			description: "Cannot delete block inside component",
-		});
-		return;
-	}
-	const parentBlock = block.parentBlock;
-	if (!parentBlock) {
-		return;
-	}
-	const index = parentBlock.children.indexOf(block);
-	parentBlock.removeChild(block);
-	nextTick(() => {
-		if (parentBlock.children.length) {
-			const nextSibling = parentBlock.children[index] || parentBlock.children[index - 1];
-			if (nextSibling) {
-				selectBlock(nextSibling);
-			}
-		}
-	});
-};
-
-watch(
-	() => block,
-	() => {
-		toggleDirty(true);
-	},
-	{
-		deep: true,
-	},
-);
-
-const toggleDirty = (dirty: boolean | null = null) => {
-	if (dirty === null) {
-		isDirty.value = !isDirty.value;
-	} else {
-		isDirty.value = dirty;
-	}
-};
-
-const scrollBlockIntoView = async (blockToFocus: Block) => {
-	// wait for editor to render
-	await new Promise((resolve) => setTimeout(resolve, 100));
-	await nextTick();
-	if (
-		!canvasContainer.value ||
-		!canvas.value ||
-		blockToFocus.isRoot() ||
-		!blockToFocus.isVisible() ||
-		blockToFocus.getParentBlock()?.isSVG()
-	) {
-		return;
-	}
-	const container = canvasContainer.value as HTMLElement;
-	const containerRect = container.getBoundingClientRect();
-	const selectedBlock = document.body.querySelector(
-		`.editor[data-block-id="${blockToFocus.blockId}"][selected=true]`,
-	) as HTMLElement;
-	if (!selectedBlock) {
-		return;
-	}
-	const blockRect = reactive(useElementBounding(selectedBlock));
-	// check if block is in view
-	if (
-		blockRect.top >= containerRect.top &&
-		blockRect.bottom <= containerRect.bottom &&
-		blockRect.left >= containerRect.left &&
-		blockRect.right <= containerRect.right
-	) {
-		return;
-	}
-
-	let padding = 80;
-	let paddingBottom = 200;
-	const blockWidth = blockRect.width + padding * 2;
-	const containerBound = container.getBoundingClientRect();
-	const blockHeight = blockRect.height + padding + paddingBottom;
-
-	const scaleX = containerBound.width / blockWidth;
-	const scaleY = containerBound.height / blockHeight;
-	const newScale = Math.min(scaleX, scaleY);
-
-	const scaleDiff = canvasProps.scale - canvasProps.scale * newScale;
-	if (scaleDiff > 0.2) {
-		return;
-	}
-
-	if (newScale < 1) {
-		canvasProps.scale = canvasProps.scale * newScale;
-		await new Promise((resolve) => setTimeout(resolve, 100));
-		await nextTick();
-		blockRect.update();
-	}
-
-	padding = padding * canvasProps.scale;
-	paddingBottom = paddingBottom * canvasProps.scale;
-
-	// slide in block from the closest edge of the container
-	const diffTop = containerRect.top - blockRect.top + padding;
-	const diffBottom = blockRect.bottom - containerRect.bottom + paddingBottom;
-	const diffLeft = containerRect.left - blockRect.left + padding;
-	const diffRight = blockRect.right - containerRect.right + padding;
-
-	if (diffTop > 0) {
-		canvasProps.translateY += diffTop / canvasProps.scale;
-	} else if (diffBottom > 0) {
-		canvasProps.translateY -= diffBottom / canvasProps.scale;
-	}
-
-	if (diffLeft > 0) {
-		canvasProps.translateX += diffLeft / canvasProps.scale;
-	} else if (diffRight > 0) {
-		canvasProps.translateX -= diffRight / canvasProps.scale;
-	}
-};
+provide("canvasProps", canvasProps);
 
 defineExpose({
 	setScaleAndTranslate,
@@ -806,9 +249,9 @@ defineExpose({
 	moveCanvas,
 	zoomIn,
 	zoomOut,
-	history: canvasHistory,
+	history,
 	clearCanvas,
-	getFirstBlock,
+	getRootBlock,
 	block,
 	setRootBlock,
 	canvasProps,
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 8a9a4dcea..8d4763900 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -49,12 +49,12 @@
 					class="no-scrollbar overflow-auto"
 					v-if="pageCanvas"
 					ref="pageLayers"
-					:blocks="[pageCanvas?.getFirstBlock() as Block]"
+					:blocks="[pageCanvas?.getRootBlock() as Block]"
 					v-show="store.editingMode == 'page'" />
 				<BlockLayers
 					class="no-scrollbar overflow-auto"
 					ref="componentLayers"
-					:blocks="[fragmentCanvas?.getFirstBlock()]"
+					:blocks="[fragmentCanvas?.getRootBlock()]"
 					v-if="store.editingMode === 'fragment' && fragmentCanvas" />
 			</div>
 			<div v-show="store.leftPanelActiveTab === 'Code'">
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index d71aefe65..cb97e2f07 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -28,6 +28,7 @@ import {
 } from "./utils/helpers";
 import RealTimeHandler from "./utils/realtimeHandler";
 
+// TODO: REFACTOR! This store is too big
 const useStore = defineStore("store", {
 	state: () => ({
 		editableBlock: <Block | null>null,
@@ -103,7 +104,7 @@ const useStore = defineStore("store", {
 			this.activeCanvas?.clearCanvas();
 		},
 		pushBlocks(blocks: BlockOptions[]) {
-			let parent = this.activeCanvas?.getFirstBlock();
+			let parent = this.activeCanvas?.getRootBlock();
 			let firstBlock = getBlockInstance(blocks[0]);
 			if (this.editingMode === "page" && firstBlock.isRoot() && this.activeCanvas?.block) {
 				this.activeCanvas.setRootBlock(firstBlock);
@@ -113,17 +114,17 @@ const useStore = defineStore("store", {
 				}
 			}
 		},
-		getFirstBlock() {
-			return this.activeCanvas?.getFirstBlock();
+		getRootBlock() {
+			return this.activeCanvas?.getRootBlock();
 		},
 		getBlockCopy(block: BlockOptions | Block, retainId = false): Block {
 			return getBlockCopy(block, retainId);
 		},
-		getRootBlock() {
+		getRootBlockTemplate() {
 			return getBlockInstance(getBlockTemplate("body"));
 		},
 		getPageBlocks() {
-			return [this.activeCanvas?.getFirstBlock()];
+			return [this.activeCanvas?.getRootBlock()];
 		},
 		async setPage(pageName: string, resetCanvas = true) {
 			this.settingPage = true;
@@ -298,7 +299,7 @@ const useStore = defineStore("store", {
 				}
 				return false;
 			};
-			for (const block of this.activeCanvas?.getFirstBlock()?.children || []) {
+			for (const block of this.activeCanvas?.getRootBlock()?.children || []) {
 				if (checkComponent(block)) {
 					return true;
 				}
diff --git a/frontend/src/types/Builder/BuilderCanvas.ts b/frontend/src/types/Builder/BuilderCanvas.ts
new file mode 100644
index 000000000..3424ebdb0
--- /dev/null
+++ b/frontend/src/types/Builder/BuilderCanvas.ts
@@ -0,0 +1,24 @@
+import { useCanvasHistory } from "@/utils/useCanvasHistory";
+import { Ref } from "vue";
+
+export interface BreakpointConfig {
+	icon: string;
+	device: "desktop" | "tablet" | "mobile";
+	displayName: string;
+	width: number;
+	visible: boolean;
+}
+
+export interface CanvasProps {
+	overlayElement: HTMLElement | null;
+	background: string;
+	scale: number;
+	translateX: number;
+	translateY: number;
+	settingCanvas: boolean;
+	scaling: boolean;
+	panning: boolean;
+	breakpoints: BreakpointConfig[];
+}
+
+export type CanvasHistory = Ref<ReturnType<typeof useCanvasHistory>>;
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index 05bdb1406..5f6af69f0 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -750,7 +750,7 @@ class Block implements BlockOptions {
 		if (parentBlock) {
 			child = parentBlock.addChildAfter(blockCopy, this);
 		} else {
-			child = store.activeCanvas?.getFirstBlock().addChild(blockCopy) as Block;
+			child = store.activeCanvas?.getRootBlock().addChild(blockCopy) as Block;
 		}
 		nextTick(() => {
 			if (child) {
diff --git a/frontend/src/utils/useBlockSelection.ts b/frontend/src/utils/useBlockSelection.ts
new file mode 100644
index 000000000..6d4424c89
--- /dev/null
+++ b/frontend/src/utils/useBlockSelection.ts
@@ -0,0 +1,86 @@
+import Block from "@/utils/block";
+import { computed, Ref, ref } from "vue";
+
+export function useBlockSelection(rootBlock: Ref<Block>) {
+	const selectedBlockIds = ref<string[]>([]);
+
+	function findBlock(blockId: string, blocks?: Block[]): Block | null {
+		if (!blocks) {
+			blocks = [rootBlock.value];
+		}
+		for (const block of blocks) {
+			if (block.blockId === blockId) {
+				return block;
+			}
+			if (block.children) {
+				const found = findBlock(blockId, block.children);
+				if (found) {
+					return found;
+				}
+			}
+		}
+		return null;
+	}
+
+	const selectedBlocks = computed(() => {
+		return selectedBlockIds.value.map((id) => findBlock(id)).filter((b) => b) as Block[];
+	});
+
+	const isSelected = (block: Block) => {
+		return selectedBlockIds.value.includes(block.blockId);
+	};
+
+	const selectBlock = (block: Block, multiSelect = false) => {
+		if (multiSelect) {
+			selectedBlockIds.value.push(block.blockId);
+		} else {
+			selectedBlockIds.value = [block.blockId];
+		}
+	};
+
+	const toggleBlockSelection = (block: Block) => {
+		const index = selectedBlockIds.value.indexOf(block.blockId);
+		if (index >= 0) {
+			selectedBlockIds.value.splice(index, 1);
+		} else {
+			selectBlock(block, true);
+		}
+	};
+
+	const clearSelection = () => {
+		selectedBlockIds.value = [];
+	};
+
+	const selectBlockRange = (newSelectedBlock: Block) => {
+		const lastSelectedBlockId = selectedBlockIds.value[selectedBlockIds.value.length - 1];
+		const lastSelectedBlock = findBlock(lastSelectedBlockId);
+		const lastSelectedBlockParent = lastSelectedBlock?.parentBlock;
+		if (!lastSelectedBlock || !lastSelectedBlockParent) {
+			newSelectedBlock.selectBlock();
+			return;
+		}
+		const lastSelectedBlockIndex = lastSelectedBlock.parentBlock?.children.indexOf(lastSelectedBlock);
+		const newSelectedBlockIndex = newSelectedBlock.parentBlock?.children.indexOf(newSelectedBlock);
+		const newSelectedBlockParent = newSelectedBlock.parentBlock;
+		if (lastSelectedBlockIndex === undefined || newSelectedBlockIndex === undefined) {
+			return;
+		}
+		const start = Math.min(lastSelectedBlockIndex, newSelectedBlockIndex);
+		const end = Math.max(lastSelectedBlockIndex, newSelectedBlockIndex);
+		if (lastSelectedBlockParent === newSelectedBlockParent) {
+			const blocks = lastSelectedBlockParent.children.slice(start, end + 1);
+			selectedBlockIds.value = selectedBlockIds.value.concat(...blocks.map((b) => b.blockId));
+			selectedBlockIds.value = Array.from(new Set(selectedBlockIds.value));
+		}
+	};
+
+	return {
+		selectedBlockIds,
+		selectedBlocks,
+		isSelected,
+		selectBlock,
+		toggleBlockSelection,
+		clearSelection,
+		selectBlockRange,
+	};
+}
diff --git a/frontend/src/utils/useCanvasDropZone.ts b/frontend/src/utils/useCanvasDropZone.ts
new file mode 100644
index 000000000..3878c33f6
--- /dev/null
+++ b/frontend/src/utils/useCanvasDropZone.ts
@@ -0,0 +1,119 @@
+import useStore from "@/store";
+import { posthog } from "@/telemetry";
+import Block from "@/utils/block";
+import { getBlockCopy, getBlockInstance, uploadImage } from "@/utils/helpers";
+import { useDropZone } from "@vueuse/core";
+import { Ref } from "vue";
+
+const store = useStore();
+
+export function useCanvasDropZone(
+	canvasContainer: Ref<HTMLElement>,
+	block: Ref<Block | null>,
+	findBlock: (id: string) => Block | null,
+) {
+	const { isOverDropZone } = useDropZone(canvasContainer, {
+		onDrop: async (files, ev) => {
+			let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+			let parentBlock = block.value as Block | null;
+			if (element) {
+				if (element.dataset.blockId) {
+					parentBlock = findBlock(element.dataset.blockId) || parentBlock;
+				}
+			}
+			const componentName = ev.dataTransfer?.getData("componentName");
+			const blockTemplate = ev.dataTransfer?.getData("blockTemplate");
+			if (componentName) {
+				await store.loadComponent(componentName);
+				const component = store.componentMap.get(componentName) as Block;
+				const newBlock = getBlockCopy(component);
+				newBlock.extendFromComponent(componentName);
+				// if shift key is pressed, replace parent block with new block
+				if (ev.shiftKey) {
+					while (parentBlock && parentBlock.isChildOfComponent) {
+						parentBlock = parentBlock.getParentBlock();
+					}
+					if (!parentBlock) return;
+					const parentParentBlock = parentBlock.getParentBlock();
+					if (!parentParentBlock) return;
+					const index = parentParentBlock.children.indexOf(parentBlock);
+					parentParentBlock.children.splice(index, 1, newBlock);
+				} else {
+					while (parentBlock && !parentBlock.canHaveChildren()) {
+						parentBlock = parentBlock.getParentBlock();
+					}
+					if (!parentBlock) return;
+					parentBlock.addChild(newBlock);
+				}
+				ev.stopPropagation();
+				posthog.capture("builder_component_used");
+			} else if (blockTemplate) {
+				await store.fetchBlockTemplate(blockTemplate);
+				const newBlock = getBlockInstance(store.getBlockTemplate(blockTemplate).block, false);
+				// if shift key is pressed, replace parent block with new block
+				if (ev.shiftKey) {
+					while (parentBlock && parentBlock.isChildOfComponent) {
+						parentBlock = parentBlock.getParentBlock();
+					}
+					if (!parentBlock) return;
+					const parentParentBlock = parentBlock.getParentBlock();
+					if (!parentParentBlock) return;
+					const index = parentParentBlock.children.indexOf(parentBlock);
+					parentParentBlock.children.splice(index, 1, newBlock);
+				} else {
+					while (parentBlock && !parentBlock.canHaveChildren()) {
+						parentBlock = parentBlock.getParentBlock();
+					}
+					if (!parentBlock) return;
+					parentBlock.addChild(newBlock);
+				}
+				posthog.capture("builder_block_template_used", { template: blockTemplate });
+			} else if (files && files.length) {
+				uploadImage(files[0]).then((fileDoc: { fileURL: string; fileName: string }) => {
+					if (!parentBlock) return;
+
+					if (fileDoc.fileName.match(/\.(mp4|webm|ogg|mov)$/)) {
+						if (parentBlock.isVideo()) {
+							parentBlock.setAttribute("src", fileDoc.fileURL);
+						} else {
+							while (parentBlock && !parentBlock.canHaveChildren()) {
+								parentBlock = parentBlock.getParentBlock() as Block;
+							}
+							parentBlock.addChild(store.getVideoBlock(fileDoc.fileURL));
+						}
+						posthog.capture("builder_video_uploaded");
+						return;
+					}
+
+					if (parentBlock.isImage()) {
+						parentBlock.setAttribute("src", fileDoc.fileURL);
+						posthog.capture("builder_image_uploaded", {
+							type: "image-replace",
+						});
+					} else if (parentBlock.isSVG()) {
+						const imageBlock = store.getImageBlock(fileDoc.fileURL, fileDoc.fileName);
+						const parentParentBlock = parentBlock.getParentBlock();
+						parentParentBlock?.replaceChild(parentBlock, getBlockInstance(imageBlock));
+						posthog.capture("builder_image_uploaded", {
+							type: "svg-replace",
+						});
+					} else if (parentBlock.isContainer() && ev.shiftKey) {
+						parentBlock.setStyle("background", `url(${fileDoc.fileURL})`);
+						posthog.capture("builder_image_uploaded", {
+							type: "background",
+						});
+					} else {
+						while (parentBlock && !parentBlock.canHaveChildren()) {
+							parentBlock = parentBlock.getParentBlock() as Block;
+						}
+						parentBlock.addChild(store.getImageBlock(fileDoc.fileURL, fileDoc.fileName));
+						posthog.capture("builder_image_uploaded", {
+							type: "new-image",
+						});
+					}
+				});
+			}
+		},
+	});
+	return { isOverDropZone };
+}
diff --git a/frontend/src/utils/useCanvasEvents.ts b/frontend/src/utils/useCanvasEvents.ts
new file mode 100644
index 000000000..1d60d6a93
--- /dev/null
+++ b/frontend/src/utils/useCanvasEvents.ts
@@ -0,0 +1,210 @@
+import useStore from "@/store";
+import { CanvasHistory } from "@/types/Builder/BuilderCanvas";
+import Block from "@/utils/block";
+import getBlockTemplate from "@/utils/blockTemplate";
+import { addPxToNumber, getNumberFromPx, isTargetEditable } from "@/utils/helpers";
+import { clamp, useEventListener } from "@vueuse/core";
+import { Ref } from "vue";
+
+export function useCanvasEvents(
+	container: Ref<HTMLElement>,
+	canvasProps: CanvasProps,
+	canvasHistory: CanvasHistory,
+	selectedBlocks: Ref<Block[]>,
+	getRootBlock: () => Block,
+	findBlock: (blockId: string) => Block | null,
+) {
+	let counter = 0;
+	const store = useStore();
+	useEventListener(container, "mousedown", (ev: MouseEvent) => {
+		if (store.mode === "move") {
+			return;
+		}
+		const initialX = ev.clientX;
+		const initialY = ev.clientY;
+		if (store.mode === "select") {
+			return;
+		} else {
+			const pauseId = canvasHistory.value?.pause();
+			ev.stopPropagation();
+			let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+			let block = getRootBlock();
+			if (element) {
+				if (element.dataset.blockId) {
+					block = findBlock(element.dataset.blockId) || block;
+				}
+			}
+			let parentBlock = getRootBlock();
+			if (element.dataset.blockId) {
+				parentBlock = findBlock(element.dataset.blockId) || parentBlock;
+				while (parentBlock && !parentBlock.canHaveChildren()) {
+					parentBlock = parentBlock.getParentBlock() || getRootBlock();
+				}
+			}
+			const child = getBlockTemplate(store.mode);
+			const parentElement = document.body.querySelector(
+				`.canvas [data-block-id="${parentBlock.blockId}"]`,
+			) as HTMLElement;
+			const parentOldPosition = parentBlock.getStyle("position");
+			if (parentOldPosition === "static" || parentOldPosition === "inherit" || !parentOldPosition) {
+				parentBlock.setBaseStyle("position", "relative");
+			}
+			const parentElementBounds = parentElement.getBoundingClientRect();
+			let x = (ev.x - parentElementBounds.left) / canvasProps.scale;
+			let y = (ev.y - parentElementBounds.top) / canvasProps.scale;
+			const parentWidth = getNumberFromPx(getComputedStyle(parentElement).width);
+			const parentHeight = getNumberFromPx(getComputedStyle(parentElement).height);
+
+			const childBlock = parentBlock.addChild(child);
+			childBlock.setBaseStyle("position", "absolute");
+			childBlock.setBaseStyle("top", addPxToNumber(y));
+			childBlock.setBaseStyle("left", addPxToNumber(x));
+			if (store.mode === "container" || store.mode === "repeater") {
+				const colors = ["#ededed", "#e2e2e2", "#c7c7c7"];
+				childBlock.setBaseStyle("background", colors[counter % colors.length]);
+				counter++;
+			}
+
+			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
+				if (store.mode === "text") {
+					return;
+				} else {
+					mouseMoveEvent.preventDefault();
+					let width = (mouseMoveEvent.clientX - initialX) / canvasProps.scale;
+					let height = (mouseMoveEvent.clientY - initialY) / canvasProps.scale;
+					width = clamp(width, 0, parentWidth);
+					height = clamp(height, 0, parentHeight);
+					const setFullWidth = width === parentWidth;
+					childBlock.setBaseStyle("width", setFullWidth ? "100%" : addPxToNumber(width));
+					childBlock.setBaseStyle("height", addPxToNumber(height));
+				}
+			};
+			useEventListener(document, "mousemove", mouseMoveHandler);
+			useEventListener(
+				document,
+				"mouseup",
+				() => {
+					document.removeEventListener("mousemove", mouseMoveHandler);
+					parentBlock.setBaseStyle("position", parentOldPosition || "static");
+					childBlock.setBaseStyle("position", "static");
+					childBlock.setBaseStyle("top", "auto");
+					childBlock.setBaseStyle("left", "auto");
+					setTimeout(() => {
+						store.mode = "select";
+					}, 50);
+					if (store.mode === "text") {
+						pauseId && canvasHistory.value?.resume(pauseId, true);
+						store.editableBlock = childBlock;
+						return;
+					}
+					if (parentBlock.isGrid()) {
+						childBlock.setStyle("width", "auto");
+						childBlock.setStyle("height", "100%");
+					} else {
+						if (getNumberFromPx(childBlock.getStyle("width")) < 100) {
+							childBlock.setBaseStyle("width", "100%");
+						}
+						if (getNumberFromPx(childBlock.getStyle("height")) < 100) {
+							childBlock.setBaseStyle("height", "200px");
+						}
+					}
+					pauseId && canvasHistory.value?.resume(pauseId, true);
+				},
+				{ once: true },
+			);
+		}
+	});
+
+	useEventListener(container, "mousedown", (ev: MouseEvent) => {
+		if (store.mode === "move") {
+			container.value.style.cursor = "grabbing";
+			const initialX = ev.clientX;
+			const initialY = ev.clientY;
+			const initialTranslateX = canvasProps.translateX;
+			const initialTranslateY = canvasProps.translateY;
+			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
+				mouseMoveEvent.preventDefault();
+				const diffX = (mouseMoveEvent.clientX - initialX) / canvasProps.scale;
+				const diffY = (mouseMoveEvent.clientY - initialY) / canvasProps.scale;
+				canvasProps.translateX = initialTranslateX + diffX;
+				canvasProps.translateY = initialTranslateY + diffY;
+			};
+			useEventListener(document, "mousemove", mouseMoveHandler);
+			useEventListener(
+				document,
+				"mouseup",
+				() => {
+					document.removeEventListener("mousemove", mouseMoveHandler);
+					container.value.style.cursor = "grab";
+				},
+				{ once: true },
+			);
+			ev.stopPropagation();
+			ev.preventDefault();
+		}
+	});
+
+	useEventListener(document, "keydown", (ev: KeyboardEvent) => {
+		if (isTargetEditable(ev) || selectedBlocks.value.length !== 1) return;
+
+		const selectedBlock = selectedBlocks.value[0];
+
+		const selectBlock = (block: Block | null) => {
+			if (block) store.selectBlock(block, null, true, true);
+			return !!block;
+		};
+
+		const selectSibling = (direction: "previous" | "next", fallback: () => void) => {
+			selectBlock(selectedBlock.getSiblingBlock(direction)) || fallback();
+		};
+
+		const selectParent = () => selectBlock(selectedBlock.getParentBlock());
+
+		const selectFirstChild = () => selectBlock(selectedBlock.children[0]);
+
+		const selectNextSiblingOrParent = () => {
+			let sibling = selectedBlock.getSiblingBlock("next");
+			let parentBlock = selectedBlock.getParentBlock();
+			while (!sibling && parentBlock) {
+				sibling = parentBlock.getSiblingBlock("next");
+				parentBlock = parentBlock.getParentBlock();
+			}
+			selectBlock(sibling);
+		};
+
+		const selectLastChildInTree = (block: Block) => {
+			let currentBlock = block;
+			while (store.activeLayers?.isExpandedInTree(currentBlock)) {
+				const lastChild = currentBlock.getLastChild() as Block;
+				if (!lastChild) break;
+				currentBlock = lastChild;
+			}
+			selectBlock(currentBlock);
+		};
+
+		switch (ev.key) {
+			case "ArrowLeft":
+				store.activeLayers?.isExpandedInTree(selectedBlock)
+					? store.activeLayers.toggleExpanded(selectedBlock)
+					: selectSibling("previous", selectParent);
+				break;
+			case "ArrowRight":
+				selectedBlock.hasChildren() && selectedBlock.isVisible()
+					? (store.activeLayers?.toggleExpanded(selectedBlock), selectFirstChild())
+					: selectNextSiblingOrParent();
+				break;
+			case "ArrowUp":
+				selectBlock(selectedBlock.getSiblingBlock("previous"))
+					? selectLastChildInTree(selectedBlock.getSiblingBlock("previous") as Block)
+					: selectParent();
+				break;
+			case "ArrowDown":
+				store.activeLayers?.isExpandedInTree(selectedBlock) &&
+				selectedBlock.hasChildren() &&
+				selectedBlock.isVisible()
+					? selectFirstChild()
+					: selectNextSiblingOrParent();
+				break;
+		}
+	});
+}
diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
new file mode 100644
index 000000000..d2d41f89d
--- /dev/null
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -0,0 +1,286 @@
+import useStore from "@/store";
+import { CanvasProps } from "@/types/Builder/BuilderCanvas";
+import Block from "@/utils/block";
+import { useCanvasHistory } from "@/utils/useCanvasHistory";
+import { useElementBounding } from "@vueuse/core";
+import { nextTick, reactive, ref, Ref } from "vue";
+import { toast } from "vue-sonner";
+
+const store = useStore();
+
+export function useCanvasUtils(
+	canvasProps: CanvasProps,
+	canvasContainer: Ref<HTMLElement | null>,
+	canvas: Ref<HTMLElement | null>,
+	rootBlock: Ref<Block>,
+	selectedBlockIds: Ref<string[]>,
+	canvasHistory: Ref<null | any>,
+) {
+	const isDirty = ref(false);
+	const containerBound = reactive(useElementBounding(canvasContainer));
+	const canvasBound = reactive(useElementBounding(canvas));
+	async function scrollIntoView(
+		blockToFocus: Block,
+		canvasProps: CanvasProps,
+		canvasContainer: Ref<HTMLElement>,
+		canvas: Ref<HTMLElement>,
+	) {
+		// wait for editor to render
+		await new Promise((resolve) => setTimeout(resolve, 100));
+		await nextTick();
+		if (
+			!canvasContainer.value ||
+			!canvas.value ||
+			blockToFocus.isRoot() ||
+			!blockToFocus.isVisible() ||
+			blockToFocus.getParentBlock()?.isSVG()
+		) {
+			return;
+		}
+		const container = canvasContainer.value as HTMLElement;
+		const containerRect = container.getBoundingClientRect();
+		const selectedBlock = document.body.querySelector(
+			`.editor[data-block-id="${blockToFocus.blockId}"][selected=true]`,
+		) as HTMLElement;
+		if (!selectedBlock) {
+			return;
+		}
+		const blockRect = reactive(useElementBounding(selectedBlock));
+		// check if block is in view
+		if (
+			blockRect.top >= containerRect.top &&
+			blockRect.bottom <= containerRect.bottom &&
+			blockRect.left >= containerRect.left &&
+			blockRect.right <= containerRect.right
+		) {
+			return;
+		}
+
+		let padding = 80;
+		let paddingBottom = 200;
+		const blockWidth = blockRect.width + padding * 2;
+		const containerBound = container.getBoundingClientRect();
+		const blockHeight = blockRect.height + padding + paddingBottom;
+
+		const scaleX = containerBound.width / blockWidth;
+		const scaleY = containerBound.height / blockHeight;
+		const newScale = Math.min(scaleX, scaleY);
+
+		const scaleDiff = canvasProps.scale - canvasProps.scale * newScale;
+		if (scaleDiff > 0.2) {
+			return;
+		}
+
+		if (newScale < 1) {
+			canvasProps.scale = canvasProps.scale * newScale;
+			await new Promise((resolve) => setTimeout(resolve, 100));
+			await nextTick();
+			blockRect.update();
+		}
+
+		padding = padding * canvasProps.scale;
+		paddingBottom = paddingBottom * canvasProps.scale;
+
+		// slide in block from the closest edge of the container
+		const diffTop = containerRect.top - blockRect.top + padding;
+		const diffBottom = blockRect.bottom - containerRect.bottom + paddingBottom;
+		const diffLeft = containerRect.left - blockRect.left + padding;
+		const diffRight = blockRect.right - containerRect.right + padding;
+
+		if (diffTop > 0) {
+			canvasProps.translateY += diffTop / canvasProps.scale;
+		} else if (diffBottom > 0) {
+			canvasProps.translateY -= diffBottom / canvasProps.scale;
+		}
+
+		if (diffLeft > 0) {
+			canvasProps.translateX += diffLeft / canvasProps.scale;
+		} else if (diffRight > 0) {
+			canvasProps.translateX -= diffRight / canvasProps.scale;
+		}
+	}
+
+	function setupHistory() {
+		canvasHistory.value = useCanvasHistory(rootBlock, selectedBlockIds);
+	}
+
+	const resetZoom = () => {
+		canvasProps.scale = 1;
+		canvasProps.translateX = 0;
+		canvasProps.translateY = 0;
+	};
+
+	const clearCanvas = () => {
+		rootBlock.value = store.getRootBlockTemplate();
+	};
+
+	const moveCanvas = (direction: "up" | "down" | "right" | "left") => {
+		if (direction === "up") {
+			canvasProps.translateY -= 20;
+		} else if (direction === "down") {
+			canvasProps.translateY += 20;
+		} else if (direction === "right") {
+			canvasProps.translateX += 20;
+		} else if (direction === "left") {
+			canvasProps.translateX -= 20;
+		}
+	};
+
+	const zoomIn = () => {
+		canvasProps.scale = Math.min(canvasProps.scale + 0.1, 10);
+	};
+
+	const zoomOut = () => {
+		canvasProps.scale = Math.max(canvasProps.scale - 0.1, 0.1);
+	};
+
+	function toggleMode(mode: BuilderMode) {
+		if (!canvasContainer.value) return;
+		const container = canvasContainer.value as HTMLElement;
+		if (mode === "text") {
+			container.style.cursor = "text";
+		} else if (["container", "image", "repeater"].includes(mode)) {
+			container.style.cursor = "crosshair";
+		} else if (mode === "move") {
+			container.style.cursor = "grab";
+		} else {
+			container.style.cursor = "default";
+		}
+	}
+
+	function setRootBlock(newBlock: Block, resetCanvas = false) {
+		rootBlock.value = newBlock;
+		if (canvasHistory.value) {
+			canvasHistory.value.dispose();
+			setupHistory();
+		}
+		if (resetCanvas) {
+			nextTick(() => {
+				setScaleAndTranslate();
+				toggleDirty(false);
+			});
+		}
+	}
+
+	const setScaleAndTranslate = async () => {
+		if (document.readyState !== "complete") {
+			await new Promise((resolve) => {
+				window.addEventListener("load", resolve);
+			});
+		}
+		const paddingX = 300;
+		const paddingY = 200;
+
+		await nextTick();
+		canvasBound.update();
+		const containerWidth = containerBound.width;
+		const canvasWidth = canvasBound.width / canvasProps.scale;
+
+		canvasProps.scale = containerWidth / (canvasWidth + paddingX * 2);
+
+		canvasProps.translateX = 0;
+		canvasProps.translateY = 0;
+		await nextTick();
+		const scale = canvasProps.scale;
+		canvasBound.update();
+		const diffY = containerBound.top - canvasBound.top + paddingY * scale;
+		if (diffY !== 0) {
+			canvasProps.translateY = diffY / scale;
+		}
+		canvasProps.settingCanvas = false;
+	};
+
+	function selectBlock(_block: Block, multiSelect = false) {
+		if (multiSelect) {
+			selectedBlockIds.value.push(_block.blockId);
+		} else {
+			selectedBlockIds.value.splice(0, selectedBlockIds.value.length, _block.blockId);
+		}
+	}
+
+	const toggleDirty = (dirty: boolean | null = null) => {
+		if (dirty === null) {
+			isDirty.value = !isDirty.value;
+		} else {
+			isDirty.value = dirty;
+		}
+	};
+
+	function getRootBlock() {
+		return rootBlock.value;
+	}
+
+	function findBlock(blockId: string, blocks?: Block[]): Block | null {
+		if (!blocks) {
+			blocks = [getRootBlock()];
+		}
+		for (const block of blocks) {
+			if (block.blockId === blockId) {
+				return block;
+			}
+			if (block.children) {
+				const found = findBlock(blockId, block.children);
+				if (found) {
+					return found;
+				}
+			}
+		}
+		return null;
+	}
+
+	function removeBlock(block: Block) {
+		if (block.blockId === "root") {
+			toast.warning("Warning", {
+				description: "Cannot delete root block",
+			});
+			return;
+		}
+		if (block.isChildOfComponentBlock()) {
+			toast.warning("Warning", {
+				description: "Cannot delete block inside component",
+			});
+			return;
+		}
+		const parentBlock = block.parentBlock;
+		if (!parentBlock) {
+			return;
+		}
+		const index = parentBlock.children.indexOf(block);
+		parentBlock.removeChild(block);
+		nextTick(() => {
+			if (parentBlock.children.length) {
+				const nextSibling = parentBlock.children[index] || parentBlock.children[index - 1];
+				if (nextSibling) {
+					selectBlock(nextSibling);
+				}
+			}
+		});
+	}
+
+	async function scrollBlockIntoView(blockToFocus: Block) {
+		return scrollIntoView(
+			blockToFocus,
+			canvasProps,
+			canvasContainer as unknown as Ref<HTMLElement>,
+			canvas as unknown as Ref<HTMLElement>,
+		);
+	}
+
+	return {
+		moveCanvas,
+		zoomIn,
+		zoomOut,
+		toggleMode,
+		setRootBlock,
+		selectBlock,
+		toggleDirty,
+		findBlock,
+		removeBlock,
+		scrollBlockIntoView,
+		setScaleAndTranslate,
+		resetZoom,
+		clearCanvas,
+		getRootBlock: getRootBlock,
+		setupHistory,
+	};
+}

From ef6207859514a014ad2905491bdba7f6aaa84d62 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Dec 2024 22:43:06 +0530
Subject: [PATCH 03/27] refactor: Move all builder level events to
 useBuilderEvents

---
 frontend/src/pages/PageBuilder.vue     | 437 +-----------------------
 frontend/src/utils/useBuilderEvents.ts | 439 +++++++++++++++++++++++++
 2 files changed, 448 insertions(+), 428 deletions(-)
 create mode 100644 frontend/src/utils/useBuilderEvents.ts

diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 90c06da73..29eb2ac62 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -92,33 +92,18 @@ import BuilderCanvas from "@/components/BuilderCanvas.vue";
 import BuilderLeftPanel from "@/components/BuilderLeftPanel.vue";
 import BuilderRightPanel from "@/components/BuilderRightPanel.vue";
 import BuilderToolbar from "@/components/BuilderToolbar.vue";
-import webComponent from "@/data/webComponent";
 import { webPages } from "@/data/webPage";
 import { sessionUser } from "@/router";
 import useStore from "@/store";
-import { BuilderComponent } from "@/types/Builder/BuilderComponent";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { getUsersInfo } from "@/usersInfo";
-import Block, { styleProperty } from "@/utils/block";
 import blockController from "@/utils/blockController";
-import getBlockTemplate from "@/utils/blockTemplate";
-import {
-	addPxToNumber,
-	copyToClipboard,
-	detachBlockFromComponent,
-	getBlockCopy,
-	getCopyWithoutParent,
-	isCtrlOrCmd,
-	isHTMLString,
-	isJSONString,
-	isTargetEditable,
-	uploadImage,
-} from "@/utils/helpers";
-import { useActiveElement, useDebounceFn, useEventListener, useMagicKeys, useStorage } from "@vueuse/core";
+import { isTargetEditable } from "@/utils/helpers";
+import { useBuilderEvents } from "@/utils/useBuilderEvents";
+import { useActiveElement, useDebounceFn, useMagicKeys } from "@vueuse/core";
 import { Dialog } from "frappe-ui";
-import { Ref, computed, onActivated, onDeactivated, provide, ref, watch, watchEffect } from "vue";
+import { computed, onActivated, onDeactivated, provide, ref, watch, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { toast } from "vue-sonner";
 import CodeEditor from "../components/Controls/CodeEditor.vue";
 
 const route = useRoute();
@@ -140,309 +125,7 @@ const fragmentCanvas = ref<InstanceType<typeof BuilderCanvas> | null>(null);
 
 provide("pageCanvas", pageCanvas);
 provide("fragmentCanvas", fragmentCanvas);
-
-// to disable page zoom
-useEventListener(
-	document,
-	"wheel",
-	(event) => {
-		const { ctrlKey } = event;
-		if (ctrlKey) {
-			event.preventDefault();
-			return;
-		}
-	},
-	{ passive: false },
-);
-
-useEventListener(document, "copy", (e) => {
-	if (isTargetEditable(e)) return;
-	if (store.activeCanvas?.selectedBlocks.length) {
-		e.preventDefault();
-		const componentDocuments: BuilderComponent[] = [];
-		for (const block of store.activeCanvas?.selectedBlocks) {
-			const components = block.getUsedComponentNames();
-			for (const componentName of components) {
-				const component = store.getComponent(componentName);
-				if (component) {
-					componentDocuments.push(component);
-				}
-			}
-		}
-
-		const blocksToCopy = store.activeCanvas?.selectedBlocks.map((block) => {
-			if (!Boolean(block.extendedFromComponent) && block.isChildOfComponent) {
-				return detachBlockFromComponent(block);
-			}
-			return getCopyWithoutParent(block);
-		});
-		// just copy non components
-		const dataToCopy = {
-			blocks: blocksToCopy,
-			components: componentDocuments,
-		};
-		copyToClipboard(dataToCopy, e, "builder-copied-blocks");
-	}
-});
-
-useEventListener(document, "paste", async (e) => {
-	if (isTargetEditable(e)) return;
-	e.stopPropagation();
-	const clipboardItems = Array.from(e.clipboardData?.items || []);
-
-	// paste image from clipboard
-	if (clipboardItems.some((item) => item.type.includes("image"))) {
-		e.preventDefault();
-		const file = clipboardItems.find((item) => item.type.includes("image"))?.getAsFile();
-		if (file) {
-			uploadImage(file).then((res: { fileURL: string; fileName: string }) => {
-				const selectedBlocks = blockController.getSelectedBlocks();
-				const parentBlock = selectedBlocks.length
-					? selectedBlocks[0]
-					: (store.activeCanvas?.getFirstBlock() as Block);
-				let imageBlock = null as unknown as Block;
-				if (parentBlock.isImage()) {
-					imageBlock = parentBlock;
-				} else {
-					imageBlock = parentBlock.addChild(getBlockCopy(getBlockTemplate("image")));
-				}
-				imageBlock.setAttribute("src", res.fileURL);
-			});
-		}
-		return;
-	}
-
-	const data = e.clipboardData?.getData("builder-copied-blocks") as string;
-	// paste blocks directly
-	if (data && isJSONString(data)) {
-		const dataObj = JSON.parse(data) as { blocks: Block[]; components: BuilderComponent[] };
-
-		for (const component of dataObj.components) {
-			delete component.for_web_page;
-			await store.createComponent(component, true);
-		}
-
-		if (store.activeCanvas?.selectedBlocks.length && dataObj.blocks[0].blockId !== "root") {
-			let parentBlock = store.activeCanvas.selectedBlocks[0];
-			while (parentBlock && !parentBlock.canHaveChildren()) {
-				parentBlock = parentBlock.getParentBlock() as Block;
-			}
-			dataObj.blocks.forEach((block: BlockOptions) => {
-				parentBlock.addChild(getBlockCopy(block), null, true);
-			});
-		} else {
-			store.pushBlocks(dataObj.blocks);
-		}
-
-		// check if data is from builder and a list of blocks and components
-		// if yes then create components and then blocks
-
-		return;
-	}
-
-	let text = e.clipboardData?.getData("text/plain") as string;
-	if (!text) {
-		return;
-	}
-
-	if (isHTMLString(text)) {
-		e.preventDefault();
-		// paste html
-		if (blockController.isHTML()) {
-			blockController.setInnerHTML(text);
-		} else {
-			let block = null as unknown as Block | BlockOptions;
-			block = getBlockTemplate("html");
-
-			if (text.startsWith("<svg")) {
-				if (text.includes("<image")) {
-					toast.warning("Warning", {
-						description: "SVG with inlined image in it is not supported. Please paste it as PNG instead.",
-					});
-					return;
-				}
-				const dom = new DOMParser().parseFromString(text, "text/html");
-				const svg = dom.body.querySelector("svg") as SVGElement;
-				const width = svg.getAttribute("width") || "100";
-				const height = svg.getAttribute("height") || "100";
-				if (width && block.baseStyles) {
-					block.baseStyles.width = addPxToNumber(parseInt(width));
-					svg.removeAttribute("width");
-				}
-				if (height && block.baseStyles) {
-					block.baseStyles.height = addPxToNumber(parseInt(height));
-					svg.removeAttribute("height");
-				}
-				text = svg.outerHTML;
-			}
-
-			block.innerHTML = text;
-
-			const parentBlock = blockController.getSelectedBlocks()[0];
-			if (parentBlock) {
-				parentBlock.addChild(block);
-			} else {
-				store.pushBlocks([block]);
-			}
-		}
-		return;
-	}
-	// try pasting figma text styles
-	if (text.includes(":") && !store.editableBlock) {
-		e.preventDefault();
-		// strip out all comments: line-height: 115%; /* 12.65px */ -> line-height: 115%;
-		const strippedText = text.replace(/\/\*.*?\*\//g, "").replace(/\n/g, "");
-		const styleObj = strippedText.split(";").reduce((acc: BlockStyleMap, curr) => {
-			const [key, value] = curr.split(":").map((item) => (item ? item.trim() : "")) as [
-				styleProperty,
-				StyleValue,
-			];
-			if (blockController.isText() && !blockController.isLink()) {
-				if (
-					[
-						"font-family",
-						"font-size",
-						"font-weight",
-						"line-height",
-						"letter-spacing",
-						"text-align",
-						"text-transform",
-						"color",
-					].includes(key)
-				) {
-					if (key === "font-family") {
-						acc[key] = (value + "").replace(/['"]+/g, "");
-						if (String(value).toLowerCase().includes("inter")) {
-							acc["font-family"] = "";
-						}
-					} else {
-						acc[key] = value;
-					}
-				}
-			} else if (["width", "height", "box-shadow", "background", "border-radius"].includes(key)) {
-				acc[key] = value;
-			}
-			return acc;
-		}, {});
-		Object.entries(styleObj).forEach(([key, value]) => {
-			blockController.setStyle(key, value);
-		});
-		return;
-	}
-
-	// if selected block is container, create a new text block inside it and set the text
-	if (blockController.isContainer()) {
-		e.preventDefault();
-		const block = getBlockTemplate("text");
-		block.innerHTML = text;
-		blockController.getSelectedBlocks()[0].addChild(block);
-		return;
-	}
-});
-
-// TODO: Refactor with useMagicKeys
-useEventListener(document, "keydown", (e) => {
-	if (isTargetEditable(e)) return;
-	if (e.key === "z" && isCtrlOrCmd(e) && !e.shiftKey && store.activeCanvas?.history?.canUndo) {
-		store.activeCanvas?.history.undo();
-		e.preventDefault();
-		return;
-	}
-	if (e.key === "z" && e.shiftKey && isCtrlOrCmd(e) && store.activeCanvas?.history?.canRedo) {
-		store.activeCanvas?.history.redo();
-		e.preventDefault();
-		return;
-	}
-
-	if (e.key === "0" && isCtrlOrCmd(e)) {
-		e.preventDefault();
-		if (pageCanvas.value) {
-			if (e.shiftKey) {
-				pageCanvas.value.setScaleAndTranslate();
-			} else {
-				pageCanvas.value.resetZoom();
-			}
-		}
-		return;
-	}
-
-	if (e.key === "ArrowRight" && !blockController.isBLockSelected()) {
-		e.preventDefault();
-		if (pageCanvas.value) {
-			pageCanvas.value.moveCanvas("right");
-		}
-		return;
-	}
-
-	if (e.key === "ArrowLeft" && !blockController.isBLockSelected()) {
-		e.preventDefault();
-		if (pageCanvas.value) {
-			pageCanvas.value.moveCanvas("left");
-		}
-		return;
-	}
-
-	if (e.key === "ArrowUp" && !blockController.isBLockSelected()) {
-		e.preventDefault();
-		if (pageCanvas.value) {
-			pageCanvas.value.moveCanvas("up");
-		}
-		return;
-	}
-
-	if (e.key === "ArrowDown" && !blockController.isBLockSelected()) {
-		e.preventDefault();
-		if (pageCanvas.value) {
-			pageCanvas.value.moveCanvas("down");
-		}
-		return;
-	}
-
-	if (e.key === "=" && isCtrlOrCmd(e)) {
-		e.preventDefault();
-		if (pageCanvas.value) {
-			pageCanvas.value.zoomIn();
-		}
-		return;
-	}
-
-	if (e.key === "-" && isCtrlOrCmd(e)) {
-		e.preventDefault();
-		if (pageCanvas.value) {
-			pageCanvas.value.zoomOut();
-		}
-		return;
-	}
-
-	if (isCtrlOrCmd(e) || e.shiftKey) {
-		return;
-	}
-
-	if (e.key === "c") {
-		store.mode = "container";
-		return;
-	}
-
-	if (e.key === "i") {
-		store.mode = "image";
-		return;
-	}
-
-	if (e.key === "t") {
-		store.mode = "text";
-		return;
-	}
-
-	if (e.key === "v") {
-		store.mode = "select";
-		return;
-	}
-
-	if (e.key === "h") {
-		store.mode = "move";
-		return;
-	}
-});
+useBuilderEvents(pageCanvas, fragmentCanvas, saveAndExitFragmentMode);
 
 const activeElement = useActiveElement();
 const notUsingInput = computed(
@@ -466,98 +149,11 @@ watch(space, (value) => {
 	}
 });
 
-useEventListener(document, "keydown", (e) => {
-	if (e.key === "\\" && isCtrlOrCmd(e)) {
-		e.preventDefault();
-		if (e.shiftKey) {
-			store.showLeftPanel = !store.showLeftPanel;
-		} else {
-			store.showRightPanel = !store.showRightPanel;
-			store.showLeftPanel = store.showRightPanel;
-		}
-	}
-	// save page or component
-	if (e.key === "s" && isCtrlOrCmd(e)) {
-		e.preventDefault();
-		if (store.editingMode === "fragment") {
-			saveAndExitFragmentMode(e);
-			e.stopPropagation();
-		}
-		return;
-	}
-
-	if (e.key === "p" && isCtrlOrCmd(e)) {
-		e.preventDefault();
-		store.savePage();
-		router.push({
-			name: "preview",
-			params: {
-				pageId: store.selectedPage as string,
-			},
-		});
-	}
-
-	if (e.key === "c" && isCtrlOrCmd(e) && e.shiftKey) {
-		if (blockController.isBLockSelected() && !blockController.multipleBlocksSelected()) {
-			e.preventDefault();
-			const block = blockController.getSelectedBlocks()[0];
-			const copiedStyle = useStorage(
-				"copiedStyle",
-				{ blockId: "", style: {} },
-				sessionStorage,
-			) as Ref<StyleCopy>;
-			copiedStyle.value = {
-				blockId: block.blockId,
-				style: block.getStylesCopy(),
-			};
-		}
-	}
-
-	if (e.key === "d" && isCtrlOrCmd(e)) {
-		if (blockController.isBLockSelected() && !blockController.multipleBlocksSelected()) {
-			e.preventDefault();
-			const block = blockController.getSelectedBlocks()[0];
-			block.duplicateBlock();
-		}
-	}
-
-	if (isTargetEditable(e)) return;
-
-	if ((e.key === "Backspace" || e.key === "Delete") && blockController.isBLockSelected()) {
-		for (const block of blockController.getSelectedBlocks()) {
-			store.activeCanvas?.removeBlock(block);
-		}
-		clearSelection();
-		e.stopPropagation();
-		return;
-	}
-
-	if (e.key === "Escape") {
-		store.exitFragmentMode(e);
-	}
-
-	// handle arrow keys
-	if (e.key.startsWith("Arrow") && blockController.isBLockSelected()) {
-		const key = e.key.replace("Arrow", "").toLowerCase() as "up" | "down" | "left" | "right";
-		for (const block of blockController.getSelectedBlocks()) {
-			block.move(key);
-		}
-	}
-});
-
-const clearSelection = () => {
-	blockController.clearSelection();
-	store.editableBlock = null;
-	if (document.activeElement instanceof HTMLElement) {
-		document.activeElement.blur();
-	}
-};
-
-const saveAndExitFragmentMode = (e: Event) => {
-	store.fragmentData.saveAction?.(fragmentCanvas.value?.getFirstBlock());
+function saveAndExitFragmentMode(e: Event) {
+	store.fragmentData.saveAction?.(fragmentCanvas.value?.getRootBlock());
 	fragmentCanvas.value?.toggleDirty(false);
 	store.exitFragmentMode(e);
-};
+}
 
 onActivated(async () => {
 	store.realtime.on("doc_viewers", async (data: { users: [] }) => {
@@ -582,7 +178,7 @@ watch(
 		if (to.name === "builder" && to.params.pageId === "new") {
 			const pageInfo = {
 				page_title: "My Page",
-				draft_blocks: [store.getRootBlock()],
+				draft_blocks: [store.getRootBlockTemplate()],
 			} as BuilderPage;
 			if (store.activeFolder) {
 				pageInfo["project_folder"] = store.activeFolder;
@@ -602,21 +198,6 @@ onDeactivated(() => {
 	store.viewers = [];
 });
 
-// on tab activation, reload for latest data
-useEventListener(document, "visibilitychange", () => {
-	if (document.visibilityState === "visible" && !fragmentCanvas.value) {
-		if (route.params.pageId && route.params.pageId !== "new") {
-			const currentModified = webPages.getRow(store.activePage?.name as string)?.modified;
-			webComponent.reload();
-			webPages.fetchOne.submit(store.activePage?.name).then((doc: BuilderPage[]) => {
-				if (currentModified !== doc[0]?.modified) {
-					store.setPage(route.params.pageId as string, false);
-				}
-			});
-		}
-	}
-});
-
 watchEffect(() => {
 	if (fragmentCanvas.value) {
 		store.activeCanvas = fragmentCanvas.value;
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
new file mode 100644
index 000000000..1b70e1471
--- /dev/null
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -0,0 +1,439 @@
+import BuilderCanvas from "@/components/BuilderCanvas.vue";
+import webComponent from "@/data/webComponent";
+import { webPages } from "@/data/webPage";
+import useStore from "@/store";
+import { BuilderComponent } from "@/types/Builder/BuilderComponent";
+import { BuilderPage } from "@/types/Builder/BuilderPage";
+import Block from "@/utils/block";
+import blockController from "@/utils/blockController";
+import getBlockTemplate from "@/utils/blockTemplate";
+import {
+	addPxToNumber,
+	copyToClipboard,
+	detachBlockFromComponent,
+	getBlockCopy,
+	getCopyWithoutParent,
+	isCtrlOrCmd,
+	isHTMLString,
+	isJSONString,
+	isTargetEditable,
+	uploadImage,
+} from "@/utils/helpers";
+import { useEventListener, useStorage } from "@vueuse/core";
+import { Ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { toast } from "vue-sonner";
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+export function useBuilderEvents(
+	pageCanvas: Ref<InstanceType<typeof BuilderCanvas> | null>,
+	fragmentCanvas: Ref<InstanceType<typeof BuilderCanvas> | null>,
+	saveAndExitFragmentMode: (e: KeyboardEvent) => void,
+) {
+	// to disable page zoom
+	useEventListener(
+		document,
+		"wheel",
+		(event) => {
+			const { ctrlKey } = event;
+			if (ctrlKey) {
+				event.preventDefault();
+				return;
+			}
+		},
+		{ passive: false },
+	);
+
+	useEventListener(document, "copy", (e) => {
+		if (isTargetEditable(e)) return;
+		if (store.activeCanvas?.selectedBlocks.length) {
+			e.preventDefault();
+			const componentDocuments: BuilderComponent[] = [];
+			for (const block of store.activeCanvas?.selectedBlocks) {
+				const components = block.getUsedComponentNames();
+				for (const componentName of components) {
+					const component = store.getComponent(componentName);
+					if (component) {
+						componentDocuments.push(component);
+					}
+				}
+			}
+
+			const blocksToCopy = store.activeCanvas?.selectedBlocks.map((block) => {
+				if (!Boolean(block.extendedFromComponent) && block.isChildOfComponent) {
+					return detachBlockFromComponent(block);
+				}
+				return getCopyWithoutParent(block);
+			});
+			// just copy non components
+			const dataToCopy = {
+				blocks: blocksToCopy,
+				components: componentDocuments,
+			};
+			copyToClipboard(dataToCopy, e, "builder-copied-blocks");
+		}
+	});
+
+	useEventListener(document, "paste", async (e) => {
+		if (isTargetEditable(e)) return;
+		e.stopPropagation();
+		const clipboardItems = Array.from(e.clipboardData?.items || []);
+
+		// paste image from clipboard
+		if (clipboardItems.some((item) => item.type.includes("image"))) {
+			e.preventDefault();
+			const file = clipboardItems.find((item) => item.type.includes("image"))?.getAsFile();
+			if (file) {
+				uploadImage(file).then((res: { fileURL: string; fileName: string }) => {
+					const selectedBlocks = blockController.getSelectedBlocks();
+					const parentBlock = selectedBlocks.length
+						? selectedBlocks[0]
+						: (store.activeCanvas?.getRootBlock() as Block);
+					let imageBlock = null as unknown as Block;
+					if (parentBlock.isImage()) {
+						imageBlock = parentBlock;
+					} else {
+						imageBlock = parentBlock.addChild(getBlockCopy(getBlockTemplate("image")));
+					}
+					imageBlock.setAttribute("src", res.fileURL);
+				});
+			}
+			return;
+		}
+
+		const data = e.clipboardData?.getData("builder-copied-blocks") as string;
+		// paste blocks directly
+		if (data && isJSONString(data)) {
+			const dataObj = JSON.parse(data) as { blocks: Block[]; components: BuilderComponent[] };
+
+			for (const component of dataObj.components) {
+				delete component.for_web_page;
+				await store.createComponent(component, true);
+			}
+
+			if (store.activeCanvas?.selectedBlocks.length && dataObj.blocks[0].blockId !== "root") {
+				let parentBlock = store.activeCanvas.selectedBlocks[0];
+				while (parentBlock && !parentBlock.canHaveChildren()) {
+					parentBlock = parentBlock.getParentBlock() as Block;
+				}
+				dataObj.blocks.forEach((block: BlockOptions) => {
+					parentBlock.addChild(getBlockCopy(block), null, true);
+				});
+			} else {
+				store.pushBlocks(dataObj.blocks);
+			}
+
+			// check if data is from builder and a list of blocks and components
+			// if yes then create components and then blocks
+
+			return;
+		}
+
+		let text = e.clipboardData?.getData("text/plain") as string;
+		if (!text) {
+			return;
+		}
+
+		if (isHTMLString(text)) {
+			e.preventDefault();
+			// paste html
+			if (blockController.isHTML()) {
+				blockController.setInnerHTML(text);
+			} else {
+				let block = null as unknown as Block | BlockOptions;
+				block = getBlockTemplate("html");
+
+				if (text.startsWith("<svg")) {
+					if (text.includes("<image")) {
+						toast.warning("Warning", {
+							description: "SVG with inlined image in it is not supported. Please paste it as PNG instead.",
+						});
+						return;
+					}
+					const dom = new DOMParser().parseFromString(text, "text/html");
+					const svg = dom.body.querySelector("svg") as SVGElement;
+					const width = svg.getAttribute("width") || "100";
+					const height = svg.getAttribute("height") || "100";
+					if (width && block.baseStyles) {
+						block.baseStyles.width = addPxToNumber(parseInt(width));
+						svg.removeAttribute("width");
+					}
+					if (height && block.baseStyles) {
+						block.baseStyles.height = addPxToNumber(parseInt(height));
+						svg.removeAttribute("height");
+					}
+					text = svg.outerHTML;
+				}
+
+				block.innerHTML = text;
+
+				const parentBlock = blockController.getSelectedBlocks()[0];
+				if (parentBlock) {
+					parentBlock.addChild(block);
+				} else {
+					store.pushBlocks([block]);
+				}
+			}
+			return;
+		}
+		// try pasting figma text styles
+		if (text.includes(":") && !store.editableBlock) {
+			e.preventDefault();
+			// strip out all comments: line-height: 115%; /* 12.65px */ -> line-height: 115%;
+			const strippedText = text.replace(/\/\*.*?\*\//g, "").replace(/\n/g, "");
+			const styleObj = strippedText.split(";").reduce((acc: BlockStyleMap, curr) => {
+				const [key, value] = curr.split(":").map((item) => (item ? item.trim() : "")) as [
+					styleProperty,
+					StyleValue,
+				];
+				if (blockController.isText() && !blockController.isLink()) {
+					if (
+						[
+							"font-family",
+							"font-size",
+							"font-weight",
+							"line-height",
+							"letter-spacing",
+							"text-align",
+							"text-transform",
+							"color",
+						].includes(key as string)
+					) {
+						if (key === "font-family") {
+							acc[key] = (value + "").replace(/['"]+/g, "");
+							if (String(value).toLowerCase().includes("inter")) {
+								acc["font-family"] = "";
+							}
+						} else {
+							acc[key] = value;
+						}
+					}
+				} else if (["width", "height", "box-shadow", "background", "border-radius"].includes(key as string)) {
+					acc[key] = value;
+				}
+				return acc;
+			}, {});
+			Object.entries(styleObj).forEach(([key, value]) => {
+				blockController.setStyle(key, value);
+			});
+			return;
+		}
+
+		// if selected block is container, create a new text block inside it and set the text
+		if (blockController.isContainer()) {
+			e.preventDefault();
+			const block = getBlockTemplate("text");
+			block.innerHTML = text;
+			blockController.getSelectedBlocks()[0].addChild(block);
+			return;
+		}
+	});
+
+	useEventListener(document, "keydown", (e) => {
+		if (e.key === "\\" && isCtrlOrCmd(e)) {
+			e.preventDefault();
+			if (e.shiftKey) {
+				store.showLeftPanel = !store.showLeftPanel;
+			} else {
+				store.showRightPanel = !store.showRightPanel;
+				store.showLeftPanel = store.showRightPanel;
+			}
+		}
+		// save page or component
+		if (e.key === "s" && isCtrlOrCmd(e)) {
+			e.preventDefault();
+			if (store.editingMode === "fragment") {
+				saveAndExitFragmentMode(e);
+				e.stopPropagation();
+			}
+			return;
+		}
+
+		if (e.key === "p" && isCtrlOrCmd(e)) {
+			e.preventDefault();
+			store.savePage();
+			router.push({
+				name: "preview",
+				params: {
+					pageId: store.selectedPage as string,
+				},
+			});
+		}
+
+		if (e.key === "c" && isCtrlOrCmd(e) && e.shiftKey) {
+			if (blockController.isBLockSelected() && !blockController.multipleBlocksSelected()) {
+				e.preventDefault();
+				const block = blockController.getSelectedBlocks()[0];
+				const copiedStyle = useStorage(
+					"copiedStyle",
+					{ blockId: "", style: {} },
+					sessionStorage,
+				) as Ref<StyleCopy>;
+				copiedStyle.value = {
+					blockId: block.blockId,
+					style: block.getStylesCopy(),
+				};
+			}
+		}
+
+		if (e.key === "d" && isCtrlOrCmd(e)) {
+			if (blockController.isBLockSelected() && !blockController.multipleBlocksSelected()) {
+				e.preventDefault();
+				const block = blockController.getSelectedBlocks()[0];
+				block.duplicateBlock();
+			}
+		}
+
+		if (isTargetEditable(e)) return;
+
+		if ((e.key === "Backspace" || e.key === "Delete") && blockController.isBLockSelected()) {
+			for (const block of blockController.getSelectedBlocks()) {
+				store.activeCanvas?.removeBlock(block);
+			}
+			clearSelection();
+			e.stopPropagation();
+			return;
+		}
+
+		if (e.key === "Escape") {
+			store.exitFragmentMode(e);
+		}
+
+		// handle arrow keys
+		if (e.key.startsWith("Arrow") && blockController.isBLockSelected()) {
+			const key = e.key.replace("Arrow", "").toLowerCase() as "up" | "down" | "left" | "right";
+			for (const block of blockController.getSelectedBlocks()) {
+				block.move(key);
+			}
+		}
+	});
+
+	// TODO: Refactor with useMagicKeys
+	useEventListener(document, "keydown", (e) => {
+		if (isTargetEditable(e)) return;
+		if (e.key === "z" && isCtrlOrCmd(e) && !e.shiftKey && store.activeCanvas?.history?.canUndo) {
+			store.activeCanvas?.history.undo();
+			e.preventDefault();
+			return;
+		}
+		if (e.key === "z" && e.shiftKey && isCtrlOrCmd(e) && store.activeCanvas?.history?.canRedo) {
+			store.activeCanvas?.history.redo();
+			e.preventDefault();
+			return;
+		}
+
+		if (e.key === "0" && isCtrlOrCmd(e)) {
+			e.preventDefault();
+			if (pageCanvas.value) {
+				if (e.shiftKey) {
+					pageCanvas.value.setScaleAndTranslate();
+				} else {
+					pageCanvas.value.resetZoom();
+				}
+			}
+			return;
+		}
+
+		if (e.key === "ArrowRight" && !blockController.isBLockSelected()) {
+			e.preventDefault();
+			if (pageCanvas.value) {
+				pageCanvas.value.moveCanvas("right");
+			}
+			return;
+		}
+
+		if (e.key === "ArrowLeft" && !blockController.isBLockSelected()) {
+			e.preventDefault();
+			if (pageCanvas.value) {
+				pageCanvas.value.moveCanvas("left");
+			}
+			return;
+		}
+
+		if (e.key === "ArrowUp" && !blockController.isBLockSelected()) {
+			e.preventDefault();
+			if (pageCanvas.value) {
+				pageCanvas.value.moveCanvas("up");
+			}
+			return;
+		}
+
+		if (e.key === "ArrowDown" && !blockController.isBLockSelected()) {
+			e.preventDefault();
+			if (pageCanvas.value) {
+				pageCanvas.value.moveCanvas("down");
+			}
+			return;
+		}
+
+		if (e.key === "=" && isCtrlOrCmd(e)) {
+			e.preventDefault();
+			if (pageCanvas.value) {
+				pageCanvas.value.zoomIn();
+			}
+			return;
+		}
+
+		if (e.key === "-" && isCtrlOrCmd(e)) {
+			e.preventDefault();
+			if (pageCanvas.value) {
+				pageCanvas.value.zoomOut();
+			}
+			return;
+		}
+
+		if (isCtrlOrCmd(e) || e.shiftKey) {
+			return;
+		}
+
+		if (e.key === "c") {
+			store.mode = "container";
+			return;
+		}
+
+		if (e.key === "i") {
+			store.mode = "image";
+			return;
+		}
+
+		if (e.key === "t") {
+			store.mode = "text";
+			return;
+		}
+
+		if (e.key === "v") {
+			store.mode = "select";
+			return;
+		}
+
+		if (e.key === "h") {
+			store.mode = "move";
+			return;
+		}
+	});
+
+	// on tab activation, reload for latest data
+	useEventListener(document, "visibilitychange", () => {
+		if (document.visibilityState === "visible" && !fragmentCanvas.value) {
+			if (route.params.pageId && route.params.pageId !== "new") {
+				const currentModified = webPages.getRow(store.activePage?.name as string)?.modified;
+				webComponent.reload();
+				webPages.fetchOne.submit(store.activePage?.name).then((doc: BuilderPage[]) => {
+					if (currentModified !== doc[0]?.modified) {
+						store.setPage(route.params.pageId as string, false);
+					}
+				});
+			}
+		}
+	});
+}
+
+const clearSelection = () => {
+	blockController.clearSelection();
+	store.editableBlock = null;
+	if (document.activeElement instanceof HTMLElement) {
+		document.activeElement.blur();
+	}
+};

From 220653766f8cff1943c98c53b89282e5048bae52 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 16 Dec 2024 08:21:26 +0530
Subject: [PATCH 04/27] perf: Delegate all the block event listeners to canvas

- to significantly redunce the number of events
- and for better scalability
---
 frontend/src/components/BlockProperties.vue |   8 --
 frontend/src/components/BuilderBlock.vue    |  75 +----------
 frontend/src/components/BuilderCanvas.vue   |   6 +-
 frontend/src/components/TextBlock.vue       |   8 +-
 frontend/src/pages/PagePreview.vue          |  32 ++---
 frontend/src/utils/useBlockEventHandlers.ts | 131 ++++++++++++++++++++
 frontend/src/utils/useBuilderEvents.ts      |   6 +
 frontend/src/utils/useCanvasUtils.ts        |   2 +-
 8 files changed, 164 insertions(+), 104 deletions(-)
 create mode 100644 frontend/src/utils/useBlockEventHandlers.ts

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index b33475824..a91db56c9 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -59,14 +59,6 @@ import ObjectEditor from "./ObjectEditor.vue";
 
 const store = useStore();
 
-// command + f should focus on search input
-window.addEventListener("keydown", (e) => {
-	if (e.key === "f" && (e.metaKey || e.ctrlKey)) {
-		e.preventDefault();
-		document.querySelector(".properties-search-input")?.querySelector("input")?.focus();
-	}
-});
-
 type BlockProperty = {
 	component: any;
 	getProps: () => Record<string, unknown>;
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 683bf01fd..642236ebc 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -2,12 +2,8 @@
 	<component
 		:is="getComponentName(block)"
 		:selected="isSelected"
-		@click="handleClick"
-		@dblclick="handleDoubleClick"
-		@contextmenu="triggerContextMenu"
-		@mouseover="handleMouseOver"
-		@mouseleave="handleMouseLeave"
 		:data-block-id="block.blockId"
+		:data-breakpoint="breakpoint"
 		:draggable="draggable"
 		:class="classes"
 		v-bind="attributes"
@@ -41,7 +37,6 @@ import Block from "@/utils/block";
 import { setFont } from "@/utils/fontManager";
 import { computed, inject, nextTick, onMounted, reactive, ref, useAttrs, watch, watchEffect } from "vue";
 
-import getBlockTemplate from "@/utils/blockTemplate";
 import { getDataForKey } from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
 import useStore from "../store";
@@ -220,72 +215,6 @@ const selectBlock = (e: MouseEvent | null) => {
 	}
 };
 
-const triggerContextMenu = (e: MouseEvent) => {
-	if (props.block.isRoot() || isEditable.value) return;
-	e.stopPropagation();
-	e.preventDefault();
-	selectBlock(e);
-	nextTick(() => {
-		editor.value?.element.dispatchEvent(new MouseEvent("contextmenu", e));
-	});
-};
-
-const handleClick = (e: MouseEvent) => {
-	if (isEditable.value) return;
-	if (store.preventClick) {
-		e.stopPropagation();
-		e.preventDefault();
-		store.preventClick = false;
-		return;
-	}
-	selectBlock(e);
-	e.stopPropagation();
-	e.preventDefault();
-};
-
-const handleDoubleClick = (e: MouseEvent) => {
-	if (isEditable.value) return;
-	store.editableBlock = null;
-	if (props.block.isText() || props.block.isLink() || props.block.isButton()) {
-		store.editableBlock = props.block;
-		e.stopPropagation();
-	}
-
-	// dblclick on container adds text block or selects text block if only one child
-	let children = props.block.getChildren();
-	if (props.block.isHTML()) {
-		editor.value?.element.dispatchEvent(new MouseEvent("dblclick", e));
-		e.stopPropagation();
-	} else if (props.block.isContainer()) {
-		if (!children.length) {
-			const child = getBlockTemplate("text");
-			props.block.setBaseStyle("alignItems", "center");
-			props.block.setBaseStyle("justifyContent", "center");
-			const childBlock = props.block.addChild(child);
-			childBlock.makeBlockEditable();
-		} else if (children.length === 1 && children[0].isText()) {
-			const child = children[0];
-			child.makeBlockEditable();
-		}
-		e.stopPropagation();
-	}
-};
-
-const handleMouseOver = (e: MouseEvent) => {
-	if (store.mode === "move") return;
-	store.hoveredBlock = props.block.blockId;
-	store.hoveredBreakpoint = props.breakpoint;
-	e.stopPropagation();
-};
-
-const handleMouseLeave = (e: MouseEvent) => {
-	if (store.mode === "move") return;
-	if (store.hoveredBlock === props.block.blockId) {
-		store.hoveredBlock = null;
-		e.stopPropagation();
-	}
-};
-
 const showBlock = computed(() => {
 	// const data = props.block.getVisibilityCondition()
 	// 	? getDataForKey(props.data, props.block.getVisibilityCondition() as string)
@@ -319,4 +248,6 @@ if (!props.preview) {
 		},
 	);
 }
+
+// Note: All the block event listeners are delegated to parent for better scalability
 </script>
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 9f215f4c8..8f570aea6 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -78,11 +78,12 @@
 import LoadingIcon from "@/components/Icons/Loading.vue";
 import { BreakpointConfig, CanvasHistory } from "@/types/Builder/BuilderCanvas";
 import Block from "@/utils/block";
-import { useCanvasUtils } from "@/utils/useCanvasUtils";
 import { getBlockCopy } from "@/utils/helpers";
-import { useCanvasEvents } from "@/utils/useCanvasEvents";
+import { useBlockEventHandlers } from "@/utils/useBlockEventHandlers";
 import { useBlockSelection } from "@/utils/useBlockSelection";
 import { useCanvasDropZone } from "@/utils/useCanvasDropZone";
+import { useCanvasEvents } from "@/utils/useCanvasEvents";
+import { useCanvasUtils } from "@/utils/useCanvasUtils";
 import { FeatherIcon } from "frappe-ui";
 import { Ref, computed, onMounted, provide, reactive, ref, watch } from "vue";
 import useStore from "../store";
@@ -202,6 +203,7 @@ onMounted(() => {
 		findBlock,
 	);
 	setPanAndZoom(canvasEl, canvasContainerEl, canvasProps);
+	useBlockEventHandlers();
 });
 
 const handleClick = (ev: MouseEvent) => {
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 5363732ab..d0b269362 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -1,11 +1,5 @@
 <template>
-	<component
-		:is="block.getTag()"
-		ref="component"
-		@click.stop
-		@dblclick.stop
-		:key="editor"
-		class="__text_block__">
+	<component :is="block.getTag()" ref="component" :key="editor" class="__text_block__">
 		<div v-html="textContent" v-show="!editor && textContent" @click="handleClick"></div>
 		<bubble-menu
 			ref="menu"
diff --git a/frontend/src/pages/PagePreview.vue b/frontend/src/pages/PagePreview.vue
index 3302e985a..0d441e6f9 100644
--- a/frontend/src/pages/PagePreview.vue
+++ b/frontend/src/pages/PagePreview.vue
@@ -145,20 +145,24 @@ useEventListener(document, "keydown", (ev) => {
 watchEffect(() => {
 	if (previewWindow.value) {
 		loading.value = true;
-		previewWindow.value.addEventListener("load", () => {
-			setTimeout(() => {
-				loading.value = false;
-			}, 100);
-			previewWindow.value?.addEventListener("mousedown", (ev) => {
-				document.dispatchEvent(new MouseEvent("mousedown", ev));
-			});
-			previewWindow.value?.contentWindow?.document.addEventListener("mouseup", (ev) => {
-				document.dispatchEvent(new MouseEvent("mouseup", ev));
-			});
-			previewWindow.value?.contentWindow?.document.addEventListener("mousemove", (ev) => {
-				document.dispatchEvent(new MouseEvent("mousemove", ev));
-			});
-		});
+		previewWindow.value.addEventListener(
+			"load",
+			() => {
+				setTimeout(() => {
+					loading.value = false;
+				}, 100);
+				previewWindow.value?.addEventListener("mousedown", (ev) => {
+					document.dispatchEvent(new MouseEvent("mousedown", ev));
+				});
+				previewWindow.value?.contentWindow?.document.addEventListener("mouseup", (ev) => {
+					document.dispatchEvent(new MouseEvent("mouseup", ev));
+				});
+				previewWindow.value?.contentWindow?.document.addEventListener("mousemove", (ev) => {
+					document.dispatchEvent(new MouseEvent("mousemove", ev));
+				});
+			},
+			{ once: true },
+		);
 	}
 });
 
diff --git a/frontend/src/utils/useBlockEventHandlers.ts b/frontend/src/utils/useBlockEventHandlers.ts
new file mode 100644
index 000000000..2e06ac415
--- /dev/null
+++ b/frontend/src/utils/useBlockEventHandlers.ts
@@ -0,0 +1,131 @@
+import useStore from "@/store";
+import getBlockTemplate from "@/utils/blockTemplate";
+import { useEventListener } from "@vueuse/core";
+import { nextTick } from "vue";
+
+const store = useStore();
+
+export function useBlockEventHandlers() {
+	useEventListener(document, "click", handleClick);
+	useEventListener(document, "dblclick", handleDoubleClick);
+	useEventListener(document, "mouseover", handleMouseOver);
+	useEventListener(document, "mouseleave", handleMouseLeave);
+	useEventListener(document, "contextmenu", triggerContextMenu);
+
+	function handleClick(e: MouseEvent) {
+		if (!isBlock(e) || isEditable(e)) return;
+		if (store.preventClick) {
+			e.stopPropagation();
+			e.preventDefault();
+			store.preventClick = false;
+			return;
+		}
+		selectBlock(e);
+		e.stopPropagation();
+		e.preventDefault();
+	}
+
+	function handleDoubleClick(e: MouseEvent) {
+		if (!isBlock(e) || isEditable(e)) return;
+		store.editableBlock = null;
+		const block = getBlock(e);
+		if (!block) return;
+		if (block.isText() || block.isLink() || block.isButton()) {
+			store.editableBlock = block;
+			e.stopPropagation();
+		}
+
+		// dblclick on container adds text block or selects text block if only one child
+		let children = block.getChildren();
+		if (block.isHTML()) {
+			// editor.value?.element.dispatchEvent(new MouseEvent("dblclick", e));
+			e.stopPropagation();
+		} else if (block.isContainer()) {
+			if (!children.length) {
+				const child = getBlockTemplate("text");
+				block.setBaseStyle("alignItems", "center");
+				block.setBaseStyle("justifyContent", "center");
+				const childBlock = block.addChild(child);
+				childBlock.makeBlockEditable();
+			} else if (children.length === 1 && children[0].isText()) {
+				const child = children[0];
+				child.makeBlockEditable();
+			}
+			e.stopPropagation();
+		}
+	}
+
+	function handleMouseOver(e: MouseEvent) {
+		if (!isBlock(e)) return;
+		if (store.mode === "move") return;
+		const block = getBlock(e);
+		const { breakpoint } = getBlockInfo(e);
+		store.hoveredBlock = block?.blockId || null;
+		store.hoveredBreakpoint = breakpoint;
+		e.stopPropagation();
+	}
+
+	function handleMouseLeave(e: MouseEvent) {
+		if (!isBlock(e)) return;
+		if (store.mode === "move") return;
+		const block = getBlock(e);
+		if (store.hoveredBlock === block?.blockId) {
+			store.hoveredBlock = null;
+			e.stopPropagation();
+		}
+	}
+
+	function triggerContextMenu(e: MouseEvent) {
+		if (!isBlock(e) || isEditable(e)) return;
+		const block = getBlock(e);
+		const { blockId } = getBlockInfo(e);
+		if (block && block.isRoot()) return;
+		e.stopPropagation();
+		e.preventDefault();
+		selectBlock(e);
+		nextTick(() => {
+			document
+				.querySelector(`.editor[data-block-id=${blockId}]`)
+				?.dispatchEvent(new MouseEvent("contextmenu", e));
+		});
+	}
+}
+
+function getBlock(e: MouseEvent) {
+	const blockInfo = getBlockInfo(e);
+	return store.activeCanvas?.findBlock(blockInfo.blockId);
+}
+
+const isEditable = (e: MouseEvent) => {
+	const { blockId, breakpoint } = getBlockInfo(e);
+	// to ensure it is right block and not on different breakpoint
+	return store.editableBlock?.blockId === blockId && store.activeBreakpoint === breakpoint;
+};
+
+function isBlock(e: MouseEvent) {
+	return e.target instanceof HTMLElement && e.target.closest(".__builder_component__");
+}
+
+const selectBlock = (e: MouseEvent) => {
+	if (isEditable(e) || store.mode !== "select") {
+		return;
+	}
+	const block = getBlock(e);
+	const { breakpoint } = getBlockInfo(e);
+	if (!block) return;
+	store.selectBlock(block, e);
+	store.activeBreakpoint = breakpoint;
+
+	store.leftPanelActiveTab = "Layers";
+	store.rightPanelActiveTab = "Properties";
+};
+
+type BlockInfo = {
+	blockId: string;
+	breakpoint: string;
+};
+
+const getBlockInfo = (e: MouseEvent) => {
+	const target = (e.target as HTMLElement)?.closest(".__builder_component__") as HTMLElement;
+	return target.dataset as BlockInfo;
+};
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 1b70e1471..ea9adf5b9 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -262,6 +262,12 @@ export function useBuilderEvents(
 			});
 		}
 
+		// command + f should focus on search input
+		if (e.key === "f" && isCtrlOrCmd(e)) {
+			e.preventDefault();
+			document.querySelector(".properties-search-input")?.querySelector("input")?.focus();
+		}
+
 		if (e.key === "c" && isCtrlOrCmd(e) && e.shiftKey) {
 			if (blockController.isBLockSelected() && !blockController.multipleBlocksSelected()) {
 				e.preventDefault();
diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
index d2d41f89d..3e7ae7eee 100644
--- a/frontend/src/utils/useCanvasUtils.ts
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -280,7 +280,7 @@ export function useCanvasUtils(
 		setScaleAndTranslate,
 		resetZoom,
 		clearCanvas,
-		getRootBlock: getRootBlock,
+		getRootBlock,
 		setupHistory,
 	};
 }

From b8789b5c3aff12ea5d0c65f22cdadca53894e63c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 16 Dec 2024 09:41:49 +0530
Subject: [PATCH 05/27] fix: Pass route and router instance from pageBuilder

---
 frontend/src/pages/PageBuilder.vue     | 2 +-
 frontend/src/utils/useBuilderEvents.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 29eb2ac62..39d75b1e6 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -125,7 +125,7 @@ const fragmentCanvas = ref<InstanceType<typeof BuilderCanvas> | null>(null);
 
 provide("pageCanvas", pageCanvas);
 provide("fragmentCanvas", fragmentCanvas);
-useBuilderEvents(pageCanvas, fragmentCanvas, saveAndExitFragmentMode);
+useBuilderEvents(pageCanvas, fragmentCanvas, saveAndExitFragmentMode, route, router);
 
 const activeElement = useActiveElement();
 const notUsingInput = computed(
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index ea9adf5b9..04b48ab16 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -24,13 +24,13 @@ import { Ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { toast } from "vue-sonner";
 const store = useStore();
-const route = useRoute();
-const router = useRouter();
 
 export function useBuilderEvents(
 	pageCanvas: Ref<InstanceType<typeof BuilderCanvas> | null>,
 	fragmentCanvas: Ref<InstanceType<typeof BuilderCanvas> | null>,
 	saveAndExitFragmentMode: (e: KeyboardEvent) => void,
+	route: ReturnType<typeof useRoute>,
+	router: ReturnType<typeof useRouter>,
 ) {
 	// to disable page zoom
 	useEventListener(

From 268bf8508ba29c8e6592b6d16ea920e23c6e9293 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 16 Dec 2024 20:25:00 +0530
Subject: [PATCH 06/27] refactor: Separate file for template creation modal

---
 frontend/src/components/BlockContextMenu.vue  | 141 +-----------------
 .../components/Modals/NewBlockTemplate.vue    |  79 ++++++++++
 .../src/components/Modals/NewComponent.vue    |  67 +++++++++
 3 files changed, 153 insertions(+), 134 deletions(-)
 create mode 100644 frontend/src/components/Modals/NewBlockTemplate.vue
 create mode 100644 frontend/src/components/Modals/NewComponent.vue

diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index 06cc4e0f9..fbac54ca2 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -8,115 +8,21 @@
 			:options="contextMenuOptions"
 			@select="handleContextMenuSelect"
 			v-on-click-outside="() => (contextMenuVisible = false)" />
-		<Dialog
-			style="z-index: 40"
-			:options="{
-				title: 'New Component',
-				size: 'sm',
-				actions: [
-					{
-						label: 'Save',
-						variant: 'solid',
-						onClick: createComponentHandler,
-					},
-				],
-			}"
-			v-model="showDialog">
-			<template #body-content>
-				<BuilderInput
-					type="text"
-					v-model="componentProperties.componentName"
-					label="Component Name"
-					required />
-				<div class="mt-3">
-					<BuilderInput
-						class="text-sm [&>span]:!text-sm"
-						type="checkbox"
-						v-model="componentProperties.isGlobalComponent"
-						label="Global Component" />
-				</div>
-			</template>
-		</Dialog>
-		<Dialog
-			style="z-index: 40"
-			:options="{
-				title: 'Save as Block Template',
-				size: 'sm',
-				actions: [
-					{
-						label: 'Save',
-						variant: 'solid',
-						onClick: () => {
-							store.saveBlockTemplate(
-								block,
-								blockTemplateProperties.templateName,
-								blockTemplateProperties.category,
-								blockTemplateProperties.previewImage,
-							);
-							showBlockTemplateDialog = false;
-						},
-					},
-				],
-			}"
-			v-model="showBlockTemplateDialog">
-			<template #body-content>
-				<div class="flex flex-col gap-3">
-					<BuilderInput
-						type="text"
-						v-model="blockTemplateProperties.templateName"
-						label="Template Name"
-						required
-						:hideClearButton="true" />
-					<BuilderInput
-						type="select"
-						v-model="blockTemplateProperties.category"
-						label="Category"
-						:options="store.blockTemplateCategoryOptions"
-						:hideClearButton="true" />
-					<div class="relative">
-						<BuilderInput
-							type="text"
-							v-model="blockTemplateProperties.previewImage"
-							label="Preview Image"
-							:hideClearButton="true" />
-						<FileUploader
-							file-types="image/*"
-							@success="
-								(file: FileDoc) => {
-									blockTemplateProperties.previewImage = file.file_url;
-								}
-							">
-							<template v-slot="{ openFileSelector }">
-								<div class="absolute bottom-0 right-0 place-items-center">
-									<BuilderButton size="sm" @click="openFileSelector" class="text-sm">Upload</BuilderButton>
-								</div>
-							</template>
-						</FileUploader>
-					</div>
-				</div>
-			</template>
-		</Dialog>
+		<NewComponent :block="block" v-model="showNewComponentDialog"></NewComponent>
+		<NewBlockTemplate :block="block" v-model="showBlockTemplateDialog"></NewBlockTemplate>
 	</div>
 </template>
 <script setup lang="ts">
 import ContextMenu from "@/components/ContextMenu.vue";
-import webComponent from "@/data/webComponent";
+import NewBlockTemplate from "@/components/Modals/NewBlockTemplate.vue";
+import NewComponent from "@/components/Modals/NewComponent.vue";
 import useStore from "@/store";
-import { posthog } from "@/telemetry";
-import { BuilderComponent } from "@/types/Builder/BuilderComponent";
 import Block from "@/utils/block";
 import blockController from "@/utils/blockController";
 import getBlockTemplate from "@/utils/blockTemplate";
-import {
-	confirm,
-	detachBlockFromComponent,
-	getBlockCopy,
-	getBlockInstance,
-	getBlockString,
-} from "@/utils/helpers";
+import { confirm, detachBlockFromComponent, getBlockCopy } from "@/utils/helpers";
 import { vOnClickOutside } from "@vueuse/components";
 import { useStorage } from "@vueuse/core";
-import { Dialog, FileUploader } from "frappe-ui";
 import { Ref, nextTick, ref } from "vue";
 import { toast } from "vue-sonner";
 
@@ -131,19 +37,7 @@ const contextMenuVisible = ref(false);
 const posX = ref(0);
 const posY = ref(0);
 
-const showDialog = ref(false);
-
-const componentProperties = ref({
-	componentName: "",
-	isGlobalComponent: 0,
-});
-
-const blockTemplateProperties = ref({
-	templateName: "",
-	category: "" as (typeof store.blockTemplateCategoryOptions)[number],
-	previewImage: "",
-});
-
+const showNewComponentDialog = ref(false);
 const showBlockTemplateDialog = ref(false);
 
 const showContextMenu = (event: MouseEvent) => {
@@ -177,27 +71,6 @@ const duplicateBlock = () => {
 	props.block.duplicateBlock();
 };
 
-const createComponentHandler = (close: () => void) => {
-	const blockCopy = getBlockCopy(props.block, true);
-	blockCopy.removeStyle("left");
-	blockCopy.removeStyle("top");
-	blockCopy.removeStyle("position");
-	webComponent.insert
-		.submit({
-			block: getBlockString(blockCopy),
-			component_name: componentProperties.value.componentName,
-			for_web_page: componentProperties.value.isGlobalComponent ? null : store.selectedPage,
-		})
-		.then(async (data: BuilderComponent) => {
-			posthog.capture("builder_component_created", { component_name: data.name });
-			store.componentMap.set(data.name, getBlockInstance(data.block));
-			const block = store.activeCanvas?.findBlock(props.block.blockId);
-			if (!block) return;
-			block.extendFromComponent(data.name);
-		});
-	close();
-};
-
 const contextMenuOptions: ContextMenuOption[] = [
 	{
 		label: "Edit HTML",
@@ -273,7 +146,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 	},
 	{
 		label: "Save As Component",
-		action: () => (showDialog.value = true),
+		action: () => (showNewComponentDialog.value = true),
 		condition: () => !props.block.isExtendedFromComponent(),
 	},
 
diff --git a/frontend/src/components/Modals/NewBlockTemplate.vue b/frontend/src/components/Modals/NewBlockTemplate.vue
new file mode 100644
index 000000000..772fcd255
--- /dev/null
+++ b/frontend/src/components/Modals/NewBlockTemplate.vue
@@ -0,0 +1,79 @@
+<template>
+	<Dialog
+		style="z-index: 40"
+		:options="{
+			title: 'Save as Block Template',
+			size: 'sm',
+			actions: [
+				{
+					label: 'Save',
+					variant: 'solid',
+					onClick: (close: () => void) => {
+						store.saveBlockTemplate(
+							block,
+							blockTemplateProperties.templateName,
+							blockTemplateProperties.category,
+							blockTemplateProperties.previewImage,
+						);
+						close();
+					},
+				},
+			],
+		}"
+		v-model="showBlockTemplateDialog">
+		<template #body-content>
+			<div class="flex flex-col gap-3">
+				<BuilderInput
+					type="text"
+					v-model="blockTemplateProperties.templateName"
+					label="Template Name"
+					required
+					:hideClearButton="true" />
+				<BuilderInput
+					type="select"
+					v-model="blockTemplateProperties.category"
+					label="Category"
+					:options="store.blockTemplateCategoryOptions"
+					:hideClearButton="true" />
+				<div class="relative">
+					<BuilderInput
+						type="text"
+						v-model="blockTemplateProperties.previewImage"
+						label="Preview Image"
+						:hideClearButton="true" />
+					<FileUploader
+						file-types="image/*"
+						@success="
+							(file: FileDoc) => {
+								blockTemplateProperties.previewImage = file.file_url;
+							}
+						">
+						<template v-slot="{ openFileSelector }">
+							<div class="absolute bottom-0 right-0 place-items-center">
+								<BuilderButton size="sm" @click="openFileSelector" class="text-sm">Upload</BuilderButton>
+							</div>
+						</template>
+					</FileUploader>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import useStore from "@/store";
+import Block from "@/utils/block";
+import { FileUploader } from "frappe-ui";
+import { ref } from "vue";
+
+const showBlockTemplateDialog = ref(false);
+defineProps<{
+	block: Block;
+}>();
+
+const store = useStore();
+const blockTemplateProperties = ref({
+	templateName: "",
+	category: "" as (typeof store.blockTemplateCategoryOptions)[number],
+	previewImage: "",
+});
+</script>
diff --git a/frontend/src/components/Modals/NewComponent.vue b/frontend/src/components/Modals/NewComponent.vue
new file mode 100644
index 000000000..a4a3488de
--- /dev/null
+++ b/frontend/src/components/Modals/NewComponent.vue
@@ -0,0 +1,67 @@
+<template>
+	<Dialog
+		style="z-index: 40"
+		:options="{
+			title: 'New Component',
+			size: 'sm',
+			actions: [
+				{
+					label: 'Save',
+					variant: 'solid',
+					onClick: createComponentHandler,
+				},
+			],
+		}">
+		<template #body-content>
+			<BuilderInput type="text" v-model="componentProperties.componentName" label="Component Name" required />
+			<div class="mt-3">
+				<BuilderInput
+					class="text-sm [&>span]:!text-sm"
+					type="checkbox"
+					v-model="componentProperties.isGlobalComponent"
+					label="Global Component" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import webComponent from "@/data/webComponent";
+import useStore from "@/store";
+import { posthog } from "@/telemetry";
+import { BuilderComponent } from "@/types/Builder/BuilderComponent";
+import Block from "@/utils/block";
+import { getBlockCopy, getBlockInstance, getBlockString } from "@/utils/helpers";
+import { ref } from "vue";
+
+const store = useStore();
+
+const props = defineProps<{
+	block: Block;
+}>();
+
+const componentProperties = ref({
+	componentName: "",
+	isGlobalComponent: 0,
+});
+
+const createComponentHandler = (close: () => void) => {
+	const blockCopy = getBlockCopy(props.block, true);
+	blockCopy.removeStyle("left");
+	blockCopy.removeStyle("top");
+	blockCopy.removeStyle("position");
+	webComponent.insert
+		.submit({
+			block: getBlockString(blockCopy),
+			component_name: componentProperties.value.componentName,
+			for_web_page: componentProperties.value.isGlobalComponent ? null : store.selectedPage,
+		})
+		.then(async (data: BuilderComponent) => {
+			posthog.capture("builder_component_created", { component_name: data.name });
+			store.componentMap.set(data.name, getBlockInstance(data.block));
+			const block = store.activeCanvas?.findBlock(props.block.blockId);
+			if (!block) return;
+			block.extendFromComponent(data.name);
+		});
+	close();
+};
+</script>

From a9e6449e2c470a83dc2e5c0b8f9c09cc9c618736 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 21 Dec 2024 15:41:06 +0530
Subject: [PATCH 07/27] perf: Remove forceful target bound updates on
 panAndZoom

---
 frontend/src/utils/panAndZoom.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/utils/panAndZoom.ts b/frontend/src/utils/panAndZoom.ts
index 8e3b6d431..b12897a26 100644
--- a/frontend/src/utils/panAndZoom.ts
+++ b/frontend/src/utils/panAndZoom.ts
@@ -21,7 +21,6 @@ function setPanAndZoom(
 			props.scaling = true;
 			if (!pinchPointSet) {
 				// set pinch point before setting new scale value
-				targetBound.update();
 				const middleX = targetBound.left + targetBound.width / 2;
 				const middleY = targetBound.top + targetBound.height / 2;
 				pointFromCenterX = (e.clientX - middleX) / props.scale;
@@ -53,7 +52,6 @@ function setPanAndZoom(
 			scale = Math.min(Math.max(scale, zoomLimits.min), zoomLimits.max);
 			props.scale = scale;
 			nextTick(() => {
-				targetBound.update();
 				const middleX = targetBound.left + targetBound.width / 2;
 				const middleY = targetBound.top + targetBound.height / 2;
 

From 6ea2f679b846934408e63d5038baa057a0223e88 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 21 Dec 2024 16:32:32 +0530
Subject: [PATCH 08/27] fix: Missing component doc

---
 frontend/src/store.ts                 | 14 +++++++++++++-
 frontend/src/utils/blockOperations.ts |  0
 frontend/src/utils/blockTemplate.ts   | 18 +++++++++++++++---
 3 files changed, 28 insertions(+), 4 deletions(-)
 delete mode 100644 frontend/src/utils/blockOperations.ts

diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 2ea1c79b9..b2f0ae4fd 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -315,7 +315,7 @@ const useStore = defineStore("store", {
 		getComponentBlock(componentName: string) {
 			return (
 				(this.componentMap.get(componentName) as Block) ||
-				getBlockInstance(getBlockTemplate("fallback-component"))
+				getBlockInstance(getBlockTemplate("loading-component"))
 			);
 		},
 		async loadComponent(componentName: string) {
@@ -325,6 +325,18 @@ const useStore = defineStore("store", {
 					.then((componentDoc) => {
 						this.setComponentMap(componentDoc);
 					})
+					.catch(() => {
+						const missingComponentDoc = {
+							name: componentName,
+							block: JSON.stringify(getBlockTemplate("missing-component")),
+							creation: "",
+							modified: "",
+							owner: "Administrator",
+							modified_by: "Administrator",
+							docstatus: 1 as 0 | 1 | 2,
+						};
+						this.setComponentMap(missingComponentDoc);
+					})
 					.finally(() => {
 						this.fetchingComponent.delete(componentName);
 					});
diff --git a/frontend/src/utils/blockOperations.ts b/frontend/src/utils/blockOperations.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/utils/blockTemplate.ts b/frontend/src/utils/blockTemplate.ts
index df61ff7e1..5d49b455f 100644
--- a/frontend/src/utils/blockTemplate.ts
+++ b/frontend/src/utils/blockTemplate.ts
@@ -6,7 +6,8 @@ function getBlockTemplate(
 		| "container"
 		| "body"
 		| "fit-container"
-		| "fallback-component"
+		| "missing-component"
+		| "loading-component"
 		| "repeater"
 		| "video",
 ): BlockOptions {
@@ -85,12 +86,23 @@ function getBlockTemplate(
 					overflow: "hidden",
 				} as BlockStyleMap,
 			};
-		case "fallback-component":
+		case "missing-component":
 			return {
 				name: "HTML",
 				element: "p",
 				originalElement: "__raw_html__",
-				innerHTML: `<div style="color: red;background: #f4f4f4;display:flex;flex-direction:column;position:static;top:auto;left:auto;width: 600px;height: 275px;align-items:center;font-size: 30px;justify-content:center"><p>Component missing</p></div>`,
+				innerHTML: `<div style="color:#E86C13;background:#F8F8F8;display:flex;width:300px;height:150px;align-items:center;font-size:16px;justify-content:center"><p>Component Missing</p></div>`,
+				baseStyles: {
+					height: "fit-content",
+					width: "fit-content",
+				} as BlockStyleMap,
+			};
+		case "loading-component":
+			return {
+				name: "HTML",
+				element: "p",
+				originalElement: "__raw_html__",
+				innerHTML: `<div style="color:#525252;background:#F8F8F8;display:flex;width:300px;height:150px;align-items:center;font-size:16px;justify-content:center"><p>Loading...</p></div>`,
 				baseStyles: {
 					height: "fit-content",
 					width: "fit-content",

From d484be746f07283f084c446c7dc87ebe4bdd7776 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 21 Dec 2024 18:48:50 +0530
Subject: [PATCH 09/27] refactor: Move component management related code to
 separate store

---
 frontend/src/components/BlockContextMenu.vue  |   4 +-
 frontend/src/components/BuilderAssets.vue     |  24 +--
 .../src/components/Modals/NewComponent.vue    |   4 +-
 frontend/src/store.ts                         | 142 +--------------
 frontend/src/utils/block.ts                   |  14 +-
 frontend/src/utils/useBuilderEvents.ts        |   7 +-
 frontend/src/utils/useCanvasDropZone.ts       |   6 +-
 frontend/src/utils/useComponentStore.ts       | 162 ++++++++++++++++++
 8 files changed, 196 insertions(+), 167 deletions(-)
 create mode 100644 frontend/src/utils/useComponentStore.ts

diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index fbac54ca2..76eb01d1f 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -21,12 +21,14 @@ import Block from "@/utils/block";
 import blockController from "@/utils/blockController";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { confirm, detachBlockFromComponent, getBlockCopy } from "@/utils/helpers";
+import useComponentStore from "@/utils/useComponentStore";
 import { vOnClickOutside } from "@vueuse/components";
 import { useStorage } from "@vueuse/core";
 import { Ref, nextTick, ref } from "vue";
 import { toast } from "vue-sonner";
 
 const store = useStore();
+const componentStore = useComponentStore();
 
 const props = defineProps<{
 	block: Block;
@@ -206,7 +208,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 	{
 		label: "Edit Component",
 		action: () => {
-			store.editComponent(props.block);
+			componentStore.editComponent(props.block);
 		},
 		condition: () => Boolean(props.block.extendedFromComponent),
 	},
diff --git a/frontend/src/components/BuilderAssets.vue b/frontend/src/components/BuilderAssets.vue
index 1411f21cd..987de3807 100644
--- a/frontend/src/components/BuilderAssets.vue
+++ b/frontend/src/components/BuilderAssets.vue
@@ -24,7 +24,7 @@
 								selectedComponent === component.component_id,
 						}"
 						@click="selectComponent(component)"
-						@dblclick="store.editComponent(null, component.name)"
+						@dblclick="componentStore.editComponent(null, component.name)"
 						@dragstart="(ev) => setComponentData(ev, component)">
 						<div class="flex items-center gap-2">
 							<FeatherIcon :name="'box'" class="h-4 w-4 text-gray-800 dark:text-zinc-400"></FeatherIcon>
@@ -35,7 +35,7 @@
 						<FeatherIcon
 							name="trash"
 							class="hidden h-3 w-3 cursor-pointer text-gray-800 group-hover:block dark:text-zinc-400"
-							@click.stop.prevent="deleteComponent(component)"></FeatherIcon>
+							@click.stop.prevent="componentStore.deleteComponent(component)"></FeatherIcon>
 					</div>
 				</div>
 			</div>
@@ -46,10 +46,11 @@
 import webComponent from "@/data/webComponent";
 import useStore from "@/store";
 import { BuilderComponent } from "@/types/Builder/BuilderComponent";
-import { confirm } from "@/utils/helpers";
+import useComponentStore from "@/utils/useComponentStore";
 import { computed, onMounted, ref } from "vue";
 
 const store = useStore();
+const componentStore = useComponentStore();
 const componentFilter = ref("");
 
 onMounted(() => {
@@ -69,21 +70,6 @@ const components = computed(() =>
 	}),
 );
 
-const deleteComponent = async (component: BlockComponent) => {
-	if (store.isComponentUsed(component.name)) {
-		alert("Component is used in current page. You cannot delete it.");
-	} else {
-		const confirmed = await confirm(
-			`Are you sure you want to delete component: ${component.component_name}?`,
-		);
-		if (confirmed) {
-			webComponent.delete.submit(component.name).then(() => {
-				store.componentMap.delete(component.name);
-			});
-		}
-	}
-};
-
 const setComponentData = (ev: DragEvent, component: BlockComponent) => {
 	ev?.dataTransfer?.setData("componentName", component.name);
 };
@@ -93,7 +79,7 @@ const selectComponent = (component: BlockComponent) => {
 	selectedComponent.value = component.component_id;
 	// if in edit mode, open the component in editor
 	if (store.fragmentData.fragmentId) {
-		store.editComponent(null, component.name);
+		componentStore.editComponent(null, component.name);
 	}
 };
 </script>
diff --git a/frontend/src/components/Modals/NewComponent.vue b/frontend/src/components/Modals/NewComponent.vue
index 4943c17af..3ba9d0579 100644
--- a/frontend/src/components/Modals/NewComponent.vue
+++ b/frontend/src/components/Modals/NewComponent.vue
@@ -31,9 +31,11 @@ import { posthog } from "@/telemetry";
 import { BuilderComponent } from "@/types/Builder/BuilderComponent";
 import Block from "@/utils/block";
 import { getBlockCopy, getBlockString } from "@/utils/helpers";
+import useComponentStore from "@/utils/useComponentStore";
 import { ref } from "vue";
 
 const store = useStore();
+const componentStore = useComponentStore();
 
 const props = defineProps<{
 	block: Block;
@@ -57,7 +59,7 @@ const createComponentHandler = (close: () => void) => {
 		})
 		.then(async (data: BuilderComponent) => {
 			posthog.capture("builder_component_created", { component_name: data.name });
-			store.setComponentMap(data);
+			componentStore.setComponentMap(data);
 			const block = store.activeCanvas?.findBlock(props.block.blockId);
 			if (!block) return;
 			block.extendFromComponent(data.name);
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index b2f0ae4fd..271755c0f 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -10,10 +10,8 @@ import BlockLayers from "./components/BlockLayers.vue";
 import BuilderCanvas from "./components/BuilderCanvas.vue";
 import builderBlockTemplate from "./data/builderBlockTemplate";
 import { builderSettings } from "./data/builderSettings";
-import webComponent from "./data/webComponent";
 import { webPages } from "./data/webPage";
 import { BlockTemplate } from "./types/Builder/BlockTemplate";
-import { BuilderComponent } from "./types/Builder/BuilderComponent";
 import { BuilderPage } from "./types/Builder/BuilderPage";
 import Block from "./utils/block";
 import getBlockTemplate from "./utils/blockTemplate";
@@ -21,7 +19,6 @@ import {
 	confirm,
 	getBlockCopy,
 	getBlockInstance,
-	getBlockObject,
 	getBlockString,
 	getCopyWithoutParent,
 	getRouteVariables,
@@ -71,16 +68,12 @@ const useStore = defineStore("store", {
 		showDashboardSidebar: useStorage("showDashboardSidebar", true),
 		showRightPanel: <boolean>true,
 		showLeftPanel: <boolean>true,
-		components: <BlockComponent[]>[],
 		showHTMLDialog: false,
 		activePage: <BuilderPage | null>null,
 		savingPage: false,
 		realtime: new RealTimeHandler(),
 		viewers: <UserInfo[]>[],
-		componentMap: <Map<string, Block>>new Map(),
-		componentDocMap: <Map<string, BuilderComponent>>new Map(),
 		blockTemplateMap: <Map<string, BlockTemplate>>new Map(),
-		fetchingComponent: new Set(),
 		activeFolder: useStorage("activeFolder", ""),
 		fragmentData: {
 			block: <Block | null>null,
@@ -161,11 +154,11 @@ const useStore = defineStore("store", {
 			this.activeCanvas?.setRootBlock(this.pageBlocks[0], resetCanvas);
 			nextTick(() => {
 				const interval = setInterval(() => {
-					if (this.fetchingComponent.size === 0) {
-						this.settingPage = false;
-						window.name = `editor-${pageName}`;
-						clearInterval(interval);
-					}
+					// if (this.fetchingComponent.size === 0) {
+					this.settingPage = false;
+					window.name = `editor-${pageName}`;
+					clearInterval(interval);
+					// }
 				}, 100);
 			});
 		},
@@ -239,32 +232,7 @@ const useStore = defineStore("store", {
 				this.activeCanvas?.scrollBlockIntoView(block);
 			}
 		},
-		async editComponent(block?: Block | null, componentName?: string) {
-			if (!block?.isExtendedFromComponent() && !componentName) {
-				return;
-			}
-			componentName = componentName || (block?.extendedFromComponent as string);
-			await this.loadComponent(componentName);
-			const component = this.getComponent(componentName);
-			const componentBlock = this.getComponentBlock(componentName);
-			this.editOnCanvas(
-				componentBlock,
-				(block: Block) => {
-					webComponent.setValue
-						.submit({
-							name: componentName,
-							block: getBlockObject(block),
-						})
-						.then((data: BuilderComponent) => {
-							this.componentDocMap.set(data.name, data);
-							this.componentMap.set(data.name, getBlockInstance(data.block));
-							toast.success("Component saved!");
-						});
-				},
-				"Save Component",
-				component.component_name,
-			);
-		},
+
 		async editBlockTemplate(blockTemplateName: string) {
 			await this.fetchBlockTemplate(blockTemplateName);
 			const blockTemplate = this.getBlockTemplate(blockTemplateName);
@@ -284,77 +252,12 @@ const useStore = defineStore("store", {
 		getBlockTemplate(blockTemplateName: string) {
 			return this.blockTemplateMap.get(blockTemplateName) as BlockTemplate;
 		},
-		isComponentUsed(componentName: string) {
-			// TODO: Refactor or reduce complexity
-			const checkComponent = (block: Block) => {
-				if (block.extendedFromComponent === componentName) {
-					return true;
-				}
-				if (block.children) {
-					for (const child of block.children) {
-						if (checkComponent(child)) {
-							return true;
-						}
-					}
-				}
-				return false;
-			};
-			for (const block of this.activeCanvas?.getRootBlock()?.children || []) {
-				if (checkComponent(block)) {
-					return true;
-				}
-			}
-			return false;
-		},
 		editPage(retainSelection = false) {
 			if (!retainSelection) {
 				this.activeCanvas?.clearSelection();
 			}
 			this.editingMode = "page";
 		},
-		getComponentBlock(componentName: string) {
-			return (
-				(this.componentMap.get(componentName) as Block) ||
-				getBlockInstance(getBlockTemplate("loading-component"))
-			);
-		},
-		async loadComponent(componentName: string) {
-			if (!this.componentMap.has(componentName) && !this.fetchingComponent.has(componentName)) {
-				this.fetchingComponent.add(componentName);
-				return this.fetchComponent(componentName)
-					.then((componentDoc) => {
-						this.setComponentMap(componentDoc);
-					})
-					.catch(() => {
-						const missingComponentDoc = {
-							name: componentName,
-							block: JSON.stringify(getBlockTemplate("missing-component")),
-							creation: "",
-							modified: "",
-							owner: "Administrator",
-							modified_by: "Administrator",
-							docstatus: 1 as 0 | 1 | 2,
-						};
-						this.setComponentMap(missingComponentDoc);
-					})
-					.finally(() => {
-						this.fetchingComponent.delete(componentName);
-					});
-			}
-		},
-		setComponentMap(componentDoc: BuilderComponent) {
-			this.componentDocMap.set(componentDoc.name, componentDoc);
-			this.componentMap.set(componentDoc.name, getBlockInstance(componentDoc.block));
-		},
-		async fetchComponent(componentName: string) {
-			const webComponentDoc = await createDocumentResource({
-				doctype: "Builder Component",
-				name: componentName,
-				auto: true,
-			});
-			await webComponentDoc.get.promise;
-			return webComponentDoc.doc as BuilderComponent;
-		},
 		async fetchBlockTemplate(blockTemplateName: string) {
 			const blockTemplate = this.getBlockTemplate(blockTemplateName);
 			if (!blockTemplate) {
@@ -368,39 +271,6 @@ const useStore = defineStore("store", {
 				this.blockTemplateMap.set(blockTemplateName, blockTemplate);
 			}
 		},
-		getComponent(componentName: string) {
-			return this.componentDocMap.get(componentName) as BuilderComponent;
-		},
-		createComponent(obj: BuilderComponent, updateExisting = false) {
-			const component = this.getComponent(obj.name);
-			if (component) {
-				const existingComponent = component.block;
-				const newComponent = obj.block;
-				if (updateExisting && existingComponent !== newComponent) {
-					return webComponent.setValue.submit({
-						name: obj.name,
-						block: obj.block,
-					});
-				} else {
-					return;
-				}
-			}
-			return webComponent.insert
-				.submit(obj)
-				.then(() => {
-					this.componentMap.set(obj.name, getBlockInstance(obj.block));
-				})
-				.catch(() => {
-					console.log(`There was an error while creating ${obj.component_name}`);
-				});
-		},
-		getComponentName(componentId: string) {
-			let componentObj = webComponent.getRow(componentId);
-			if (!componentObj) {
-				return componentId;
-			}
-			return componentObj.component_name;
-		},
 		async duplicatePage(page: BuilderPage) {
 			const webPageResource = await createDocumentResource({
 				doctype: "Builder Page",
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index 15ea9b758..d891ecaaf 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -1,4 +1,5 @@
 import useStore from "@/store";
+import useComponentStore from "@/utils/useComponentStore";
 import { Editor } from "@tiptap/vue-3";
 import { clamp } from "@vueuse/core";
 import { CSSProperties, markRaw, nextTick, reactive } from "vue";
@@ -93,8 +94,8 @@ class Block implements BlockOptions {
 		}
 
 		if (this.extendedFromComponent) {
-			const store = useStore();
-			store.loadComponent(this.extendedFromComponent);
+			const componentStore = useComponentStore();
+			componentStore.loadComponent(this.extendedFromComponent);
 		}
 
 		if (this.isImage()) {
@@ -152,11 +153,12 @@ class Block implements BlockOptions {
 	}
 	getComponent() {
 		const store = useStore();
+		const componentStore = useComponentStore();
 		if (this.extendedFromComponent) {
-			return store.getComponentBlock(this.extendedFromComponent as string);
+			return componentStore.getComponentBlock(this.extendedFromComponent as string);
 		}
 		if (this.isChildOfComponent) {
-			const componentBlock = store.getComponentBlock(this.isChildOfComponent as string);
+			const componentBlock = componentStore.getComponentBlock(this.isChildOfComponent as string);
 			return (
 				store.activeCanvas?.findBlock(this.referenceBlockId as string, [componentBlock]) ||
 				store.activeCanvas?.findBlock(this.blockId as string, [componentBlock]) ||
@@ -242,8 +244,8 @@ class Block implements BlockOptions {
 		return description;
 	}
 	getComponentBlockDescription() {
-		const store = useStore();
-		return store.getComponentName(this.extendedFromComponent as string);
+		const componentStore = useComponentStore();
+		return componentStore.getComponentName(this.extendedFromComponent as string);
 	}
 	getTextContent() {
 		return getTextContent(this.getInnerHTML() || "");
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 9073fc74d..d49e94a44 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -19,11 +19,14 @@ import {
 	isTargetEditable,
 	uploadImage,
 } from "@/utils/helpers";
+import useComponentStore from "@/utils/useComponentStore";
 import { useEventListener, useStorage } from "@vueuse/core";
 import { Ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { toast } from "vue-sonner";
+
 const store = useStore();
+const componentStore = useComponentStore();
 
 export function useBuilderEvents(
 	pageCanvas: Ref<InstanceType<typeof BuilderCanvas> | null>,
@@ -54,7 +57,7 @@ export function useBuilderEvents(
 			for (const block of store.activeCanvas?.selectedBlocks) {
 				const components = block.getUsedComponentNames();
 				for (const componentName of components) {
-					const component = store.getComponent(componentName);
+					const component = componentStore.getComponent(componentName);
 					if (component) {
 						componentDocuments.push(component);
 					}
@@ -110,7 +113,7 @@ export function useBuilderEvents(
 
 			for (const component of dataObj.components) {
 				delete component.for_web_page;
-				await store.createComponent(component, true);
+				await componentStore.createComponent(component, true);
 			}
 
 			if (store.activeCanvas?.selectedBlocks.length && dataObj.blocks[0].blockId !== "root") {
diff --git a/frontend/src/utils/useCanvasDropZone.ts b/frontend/src/utils/useCanvasDropZone.ts
index c14257fae..b8ce8fd5d 100644
--- a/frontend/src/utils/useCanvasDropZone.ts
+++ b/frontend/src/utils/useCanvasDropZone.ts
@@ -2,10 +2,12 @@ import useStore from "@/store";
 import { posthog } from "@/telemetry";
 import Block from "@/utils/block";
 import { getBlockCopy, getBlockInstance, uploadImage } from "@/utils/helpers";
+import useComponentStore from "@/utils/useComponentStore";
 import { useDropZone } from "@vueuse/core";
 import { Ref } from "vue";
 
 const store = useStore();
+const componentStore = useComponentStore();
 
 export function useCanvasDropZone(
 	canvasContainer: Ref<HTMLElement>,
@@ -24,8 +26,8 @@ export function useCanvasDropZone(
 			const componentName = ev.dataTransfer?.getData("componentName");
 			const blockTemplate = ev.dataTransfer?.getData("blockTemplate");
 			if (componentName) {
-				await store.loadComponent(componentName);
-				const component = store.componentMap.get(componentName) as Block;
+				await componentStore.loadComponent(componentName);
+				const component = componentStore.componentMap.get(componentName) as Block;
 				const newBlock = getBlockCopy(component);
 				newBlock.extendFromComponent(componentName);
 				// if shift key is pressed, replace parent block with new block
diff --git a/frontend/src/utils/useComponentStore.ts b/frontend/src/utils/useComponentStore.ts
new file mode 100644
index 000000000..f3e2d0471
--- /dev/null
+++ b/frontend/src/utils/useComponentStore.ts
@@ -0,0 +1,162 @@
+import webComponent from "@/data/webComponent";
+import useStore from "@/store";
+import { BuilderComponent } from "@/types/Builder/BuilderComponent";
+import Block from "@/utils/block";
+import getBlockTemplate from "@/utils/blockTemplate";
+import { alert, getBlockInstance, getBlockObject } from "@/utils/helpers";
+import { createDocumentResource } from "frappe-ui";
+import { defineStore } from "pinia";
+import { toast } from "vue-sonner";
+
+const useComponentStore = defineStore("componentStore", {
+	state: () => ({
+		components: <BlockComponent[]>[],
+		componentMap: <Map<string, Block>>new Map(),
+		componentDocMap: <Map<string, BuilderComponent>>new Map(),
+		fetchingComponent: new Set(),
+	}),
+	actions: {
+		async editComponent(block?: Block | null, componentName?: string) {
+			if (!block?.isExtendedFromComponent() && !componentName) {
+				return;
+			}
+			componentName = componentName || (block?.extendedFromComponent as string);
+			await this.loadComponent(componentName);
+			const component = this.getComponent(componentName);
+			const componentBlock = this.getComponentBlock(componentName);
+			const store = useStore();
+			store.editOnCanvas(
+				componentBlock,
+				(block: Block) => {
+					webComponent.setValue
+						.submit({
+							name: componentName,
+							block: getBlockObject(block),
+						})
+						.then((data: BuilderComponent) => {
+							this.componentDocMap.set(data.name, data);
+							this.componentMap.set(data.name, getBlockInstance(data.block));
+							toast.success("Component saved!");
+						});
+				},
+				"Save Component",
+				component.component_name,
+			);
+		},
+		isComponentUsed(componentName: string) {
+			// TODO: Refactor or reduce complexity
+			const checkComponent = (block: Block) => {
+				if (block.extendedFromComponent === componentName) {
+					return true;
+				}
+				if (block.children) {
+					for (const child of block.children) {
+						if (checkComponent(child)) {
+							return true;
+						}
+					}
+				}
+				return false;
+			};
+			const store = useStore();
+			for (const block of store.activeCanvas?.getRootBlock()?.children || []) {
+				if (checkComponent(block)) {
+					return true;
+				}
+			}
+			return false;
+		},
+		getComponentBlock(componentName: string) {
+			return (
+				(this.componentMap.get(componentName) as Block) ||
+				getBlockInstance(getBlockTemplate("loading-component"))
+			);
+		},
+		async loadComponent(componentName: string) {
+			if (!this.componentMap.has(componentName) && !this.fetchingComponent.has(componentName)) {
+				this.fetchingComponent.add(componentName);
+				return this.fetchComponent(componentName)
+					.then((componentDoc) => {
+						this.setComponentMap(componentDoc);
+					})
+					.catch(() => {
+						const missingComponentDoc = {
+							name: componentName,
+							block: JSON.stringify(getBlockTemplate("missing-component")),
+							creation: "",
+							modified: "",
+							owner: "Administrator",
+							modified_by: "Administrator",
+							docstatus: 1 as 0 | 1 | 2,
+						};
+						this.setComponentMap(missingComponentDoc);
+					})
+					.finally(() => {
+						this.fetchingComponent.delete(componentName);
+					});
+			}
+		},
+		setComponentMap(componentDoc: BuilderComponent) {
+			this.componentDocMap.set(componentDoc.name, componentDoc);
+			this.componentMap.set(componentDoc.name, getBlockInstance(componentDoc.block));
+		},
+		async fetchComponent(componentName: string) {
+			const webComponentDoc = await createDocumentResource({
+				doctype: "Builder Component",
+				name: componentName,
+				auto: true,
+			});
+			await webComponentDoc.get.promise;
+			return webComponentDoc.doc as BuilderComponent;
+		},
+		getComponent(componentName: string) {
+			return this.componentDocMap.get(componentName) as BuilderComponent;
+		},
+		createComponent(obj: BuilderComponent, updateExisting = false) {
+			const component = this.getComponent(obj.name);
+			if (component) {
+				const existingComponent = component.block;
+				const newComponent = obj.block;
+				if (updateExisting && existingComponent !== newComponent) {
+					return webComponent.setValue.submit({
+						name: obj.name,
+						block: obj.block,
+					});
+				} else {
+					return;
+				}
+			}
+			return webComponent.insert
+				.submit(obj)
+				.then(() => {
+					this.componentMap.set(obj.name, getBlockInstance(obj.block));
+				})
+				.catch(() => {
+					console.log(`There was an error while creating ${obj.component_name}`);
+				});
+		},
+		getComponentName(componentId: string) {
+			let componentObj = webComponent.getRow(componentId);
+			if (!componentObj) {
+				return componentId;
+			}
+			return componentObj.component_name;
+		},
+		async deleteComponent(component: BlockComponent) {
+			if (this.isComponentUsed(component.name)) {
+				alert("Component is used in current page. You cannot delete it.");
+			} else {
+				const confirmed = await confirm(
+					`Are you sure you want to delete component: ${component.component_name}?`,
+				);
+				if (confirmed) {
+					webComponent.delete.submit(component.name).then(() => {
+						this.componentMap.delete(component.name);
+					});
+				}
+			}
+		},
+	},
+});
+
+export default useComponentStore;

From 9eddd84ea13d5636285c3f1433f2df2f559ecd3f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 22 Dec 2024 18:13:03 +0530
Subject: [PATCH 10/27] wip

---
 frontend/src/utils/block.ts   | 84 ++++++++++++++++-------------------
 frontend/src/utils/helpers.ts |  3 +-
 2 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index d891ecaaf..80cc4518e 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -2,7 +2,7 @@ import useStore from "@/store";
 import useComponentStore from "@/utils/useComponentStore";
 import { Editor } from "@tiptap/vue-3";
 import { clamp } from "@vueuse/core";
-import { CSSProperties, markRaw, nextTick, reactive } from "vue";
+import { computed, CSSProperties, markRaw, nextTick, reactive } from "vue";
 import {
 	addPxToNumber,
 	dataURLtoFile,
@@ -47,8 +47,10 @@ class Block implements BlockOptions {
 	visibilityCondition?: string;
 	elementBeforeConversion?: string;
 	parentBlock: Block | null;
+	referenceComponent: Block | null;
 	customAttributes: BlockAttributeMap;
 	constructor(options: BlockOptions) {
+		const componentStore = useComponentStore();
 		this.element = options.element;
 		this.innerHTML = options.innerHTML;
 		this.extendedFromComponent = options.extendedFromComponent;
@@ -57,6 +59,20 @@ class Block implements BlockOptions {
 		this.referenceBlockId = options.referenceBlockId;
 		this.visibilityCondition = options.visibilityCondition;
 		this.parentBlock = options.parentBlock || null;
+		if (this.extendedFromComponent) {
+			componentStore.loadComponent(this.extendedFromComponent);
+		}
+		const store = useStore();
+		this.referenceComponent = computed(() => {
+			if (this.extendedFromComponent) {
+				componentStore.componentMap;
+				return componentStore.getComponentBlock(this.extendedFromComponent as string) || null;
+			} else if (this.isChildOfComponent) {
+				const componentBlock = componentStore.getComponentBlock(this.isChildOfComponent as string);
+				return store.activeCanvas?.findBlock(this.referenceBlockId as string, [componentBlock]) || null;
+			}
+			return null;
+		}) as unknown as Block | null;
 
 		this.dataKey = options.dataKey || null;
 
@@ -93,11 +109,6 @@ class Block implements BlockOptions {
 			this.removeStyle("minHeight");
 		}
 
-		if (this.extendedFromComponent) {
-			const componentStore = useComponentStore();
-			componentStore.loadComponent(this.extendedFromComponent);
-		}
-
 		if (this.isImage()) {
 			// if src is base64, convert it to a file
 			const src = this.getAttribute("src") as string;
@@ -151,24 +162,8 @@ class Block implements BlockOptions {
 			this.tabletStyles = {};
 		}
 	}
-	getComponent() {
-		const store = useStore();
-		const componentStore = useComponentStore();
-		if (this.extendedFromComponent) {
-			return componentStore.getComponentBlock(this.extendedFromComponent as string);
-		}
-		if (this.isChildOfComponent) {
-			const componentBlock = componentStore.getComponentBlock(this.isChildOfComponent as string);
-			return (
-				store.activeCanvas?.findBlock(this.referenceBlockId as string, [componentBlock]) ||
-				store.activeCanvas?.findBlock(this.blockId as string, [componentBlock]) ||
-				new Block({})
-			);
-		}
-		return this;
-	}
 	getComponentStyles(breakpoint: string): BlockStyleMap {
-		return this.getComponent()?.getStyles(breakpoint);
+		return this.referenceComponent?.getStyles(breakpoint) || {};
 	}
 	getAttributes(): BlockAttributeMap {
 		let attributes = {};
@@ -179,7 +174,7 @@ class Block implements BlockOptions {
 		return attributes;
 	}
 	getComponentAttributes() {
-		return this.getComponent()?.attributes || {};
+		return this.referenceComponent?.attributes || {};
 	}
 	getClasses() {
 		let classes = [] as Array<string>;
@@ -190,7 +185,7 @@ class Block implements BlockOptions {
 		return classes;
 	}
 	getComponentClasses() {
-		return this.getComponent()?.classes || [];
+		return this.referenceComponent?.classes || [];
 	}
 	getChildren() {
 		return this.children;
@@ -198,13 +193,10 @@ class Block implements BlockOptions {
 	hasChildren() {
 		return this.getChildren().length > 0;
 	}
-	getComponentChildren() {
-		return this.getComponent()?.children || [];
-	}
 	getCustomAttributes() {
 		let customAttributes = {};
 		if (this.isExtendedFromComponent()) {
-			customAttributes = this.getComponent()?.customAttributes || {};
+			customAttributes = this.referenceComponent?.customAttributes || {};
 		}
 		customAttributes = { ...customAttributes, ...this.customAttributes };
 		return customAttributes;
@@ -212,15 +204,15 @@ class Block implements BlockOptions {
 	getRawStyles() {
 		let rawStyles = {};
 		if (this.isExtendedFromComponent()) {
-			rawStyles = this.getComponent()?.rawStyles || {};
+			rawStyles = this.referenceComponent?.rawStyles || {};
 		}
 		rawStyles = { ...rawStyles, ...this.rawStyles };
 		return rawStyles;
 	}
 	getVisibilityCondition() {
 		let visibilityCondition = this.visibilityCondition;
-		if (this.isExtendedFromComponent() && this.getComponent()?.visibilityCondition) {
-			visibilityCondition = this.getComponent()?.visibilityCondition;
+		if (this.isExtendedFromComponent() && this.referenceComponent?.visibilityCondition) {
+			visibilityCondition = this.referenceComponent?.visibilityCondition;
 		}
 		return visibilityCondition;
 	}
@@ -328,7 +320,7 @@ class Block implements BlockOptions {
 			styleValue = this.baseStyles[style];
 		}
 		if (styleValue === undefined && this.isExtendedFromComponent()) {
-			styleValue = this.getComponent()?.getStyle(style) as StyleValue;
+			styleValue = this.referenceComponent?.getStyle(style) as StyleValue;
 		}
 		return styleValue;
 	}
@@ -387,7 +379,7 @@ class Block implements BlockOptions {
 		return this.getElement() || "div";
 	}
 	getComponentTag() {
-		return this.getComponent()?.getTag() || "div";
+		return this.referenceComponent?.getTag() || "div";
 	}
 	isDiv() {
 		return this.getElement() === "div";
@@ -628,7 +620,7 @@ class Block implements BlockOptions {
 	getDataKey(key: keyof BlockDataKey): string {
 		let dataKey = (this.dataKey && this.dataKey[key]) || "";
 		if (!dataKey && this.isExtendedFromComponent()) {
-			dataKey = this.getComponent()?.getDataKey(key);
+			dataKey = this.referenceComponent?.getDataKey(key) || "";
 		}
 		return dataKey;
 	}
@@ -645,7 +637,7 @@ class Block implements BlockOptions {
 	getInnerHTML(): string {
 		let innerHTML = this.innerHTML || "";
 		if (!innerHTML && this.isExtendedFromComponent()) {
-			innerHTML = this.getComponent().getInnerHTML();
+			innerHTML = this.referenceComponent?.getInnerHTML() || "";
 		}
 		return innerHTML;
 	}
@@ -666,20 +658,22 @@ class Block implements BlockOptions {
 	}
 	extendFromComponent(componentName: string) {
 		this.extendedFromComponent = componentName;
-		const component = this.getComponent();
-		extendWithComponent(this, componentName, component.children);
+		const component = this.referenceComponent as Block;
+		if (component) {
+			extendWithComponent(this, componentName, component.children);
+		}
 	}
 	isChildOfComponentBlock() {
 		return Boolean(this.isChildOfComponent);
 	}
 	resetWithComponent() {
-		const component = this.getComponent();
+		const component = this.referenceComponent;
 		if (component) {
 			resetWithComponent(this, this.extendedFromComponent as string, component.children);
 		}
 	}
 	syncWithComponent() {
-		const component = this.getComponent();
+		const component = this.referenceComponent;
 		if (component) {
 			syncBlockWithComponent(this, this, this.extendedFromComponent as string, component.children);
 		}
@@ -700,12 +694,12 @@ class Block implements BlockOptions {
 	}
 	getElement() {
 		if (this.isExtendedFromComponent()) {
-			return this.getComponent()?.element || this.element;
+			return this.referenceComponent?.element || this.element;
 		}
 		return this.element;
 	}
 	getUsedComponentNames() {
-		const store = useStore();
+		const componentStore = useComponentStore();
 		const componentNames = [] as string[];
 		if (this.extendedFromComponent) {
 			componentNames.push(this.extendedFromComponent);
@@ -718,7 +712,7 @@ class Block implements BlockOptions {
 		});
 
 		componentNames.forEach((name) => {
-			componentNames.push(...store.getComponentBlock(name).getUsedComponentNames());
+			componentNames.push(...componentStore.getComponentBlock(name).getUsedComponentNames());
 		});
 
 		return new Set(componentNames);
@@ -904,7 +898,7 @@ function extendWithComponent(
 		child.isChildOfComponent = extendedFromComponent;
 		let componentChild = componentChildren[index];
 		if (child.extendedFromComponent) {
-			const component = child.getComponent();
+			const component = child.referenceComponent;
 			child.referenceBlockId = componentChild.blockId;
 			extendWithComponent(child, child.extendedFromComponent, component.children, false);
 		} else if (componentChild) {
@@ -928,7 +922,7 @@ function resetWithComponent(
 		blockComponent.referenceBlockId = componentChild.blockId;
 		const childBlock = block.addChild(blockComponent, null, false);
 		if (componentChild.extendedFromComponent) {
-			const component = childBlock.getComponent();
+			const component = childBlock.referenceComponent;
 			resetWithComponent(childBlock, componentChild.extendedFromComponent, component.children, false);
 		} else {
 			resetWithComponent(childBlock, extendedWithComponent, componentChild.children, resetOverrides);
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 810b3e558..938184864 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -284,7 +284,7 @@ function isCtrlOrCmd(e: KeyboardEvent) {
 
 const detachBlockFromComponent = (block: Block) => {
 	const blockCopy = getBlockCopy(block, true);
-	const component = block.getComponent();
+	const component = block.referenceComponent;
 	blockCopy.element = block?.getElement();
 	blockCopy.attributes = block.getAttributes();
 	blockCopy.classes = block.getClasses();
@@ -325,6 +325,7 @@ function getCopyWithoutParent(block: BlockOptions | Block): BlockOptions {
 	const blockCopy = { ...toRaw(block) };
 	blockCopy.children = blockCopy.children?.map((child) => getCopyWithoutParent(child));
 	delete blockCopy.parentBlock;
+	delete blockCopy.referenceComponent;
 	return blockCopy;
 }
 

From 4b3244a98bffacc9b22a3822555ff5af2550df0a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 22 Dec 2024 21:32:23 +0530
Subject: [PATCH 11/27] perf: Mark components raw to disable unnecessary
 reactivity

---
 frontend/src/utils/block.ts             | 22 ++++++++++++++++++----
 frontend/src/utils/useComponentStore.ts |  5 +++--
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index 80cc4518e..82db9d8ba 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -62,14 +62,13 @@ class Block implements BlockOptions {
 		if (this.extendedFromComponent) {
 			componentStore.loadComponent(this.extendedFromComponent);
 		}
-		const store = useStore();
 		this.referenceComponent = computed(() => {
 			if (this.extendedFromComponent) {
-				componentStore.componentMap;
-				return componentStore.getComponentBlock(this.extendedFromComponent as string) || null;
+				return markRaw(componentStore.getComponentBlock(this.extendedFromComponent as string)) || null;
 			} else if (this.isChildOfComponent) {
 				const componentBlock = componentStore.getComponentBlock(this.isChildOfComponent as string);
-				return store.activeCanvas?.findBlock(this.referenceBlockId as string, [componentBlock]) || null;
+				const componentBlockInstance = findBlock(this.referenceBlockId as string, [componentBlock]);
+				return componentBlockInstance ? markRaw(componentBlockInstance) : null;
 			}
 			return null;
 		}) as unknown as Block | null;
@@ -997,4 +996,19 @@ function resetBlock(
 	}
 }
 
+function findBlock(blockId: string, blocks: Block[]): Block | null {
+	for (const block of blocks) {
+		if (block.blockId === blockId) {
+			return block;
+		}
+		if (block.children) {
+			const found = findBlock(blockId, block.children);
+			if (found) {
+				return found;
+			}
+		}
+	}
+	return null;
+}
+
 export default Block;
diff --git a/frontend/src/utils/useComponentStore.ts b/frontend/src/utils/useComponentStore.ts
index f3e2d0471..3921ac424 100644
--- a/frontend/src/utils/useComponentStore.ts
+++ b/frontend/src/utils/useComponentStore.ts
@@ -6,6 +6,7 @@ import getBlockTemplate from "@/utils/blockTemplate";
 import { alert, getBlockInstance, getBlockObject } from "@/utils/helpers";
 import { createDocumentResource } from "frappe-ui";
 import { defineStore } from "pinia";
+import { markRaw } from "vue";
 import { toast } from "vue-sonner";
 
 const useComponentStore = defineStore("componentStore", {
@@ -35,7 +36,7 @@ const useComponentStore = defineStore("componentStore", {
 						})
 						.then((data: BuilderComponent) => {
 							this.componentDocMap.set(data.name, data);
-							this.componentMap.set(data.name, getBlockInstance(data.block));
+							this.componentMap.set(data.name, markRaw(getBlockInstance(data.block)));
 							toast.success("Component saved!");
 						});
 				},
@@ -98,7 +99,7 @@ const useComponentStore = defineStore("componentStore", {
 		},
 		setComponentMap(componentDoc: BuilderComponent) {
 			this.componentDocMap.set(componentDoc.name, componentDoc);
-			this.componentMap.set(componentDoc.name, getBlockInstance(componentDoc.block));
+			this.componentMap.set(componentDoc.name, markRaw(getBlockInstance(componentDoc.block)));
 		},
 		async fetchComponent(componentName: string) {
 			const webComponentDoc = await createDocumentResource({

From f9902f808ae4087cf937bf4e714797a78a6fba43 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 22 Dec 2024 23:18:48 +0530
Subject: [PATCH 12/27] refactor: Explicitly import dialog

---
 frontend/src/components/Modals/NewBlockTemplate.vue | 2 +-
 frontend/src/components/Modals/NewComponent.vue     | 1 +
 frontend/src/components/Modals/NewFolder.vue        | 1 +
 frontend/src/components/Modals/SelectFolder.vue     | 1 +
 frontend/src/main.ts                                | 3 +--
 frontend/src/pages/PageBuilderDashboard.vue         | 2 +-
 6 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Modals/NewBlockTemplate.vue b/frontend/src/components/Modals/NewBlockTemplate.vue
index 772fcd255..26d6cd711 100644
--- a/frontend/src/components/Modals/NewBlockTemplate.vue
+++ b/frontend/src/components/Modals/NewBlockTemplate.vue
@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import useStore from "@/store";
 import Block from "@/utils/block";
-import { FileUploader } from "frappe-ui";
+import { Dialog, FileUploader } from "frappe-ui";
 import { ref } from "vue";
 
 const showBlockTemplateDialog = ref(false);
diff --git a/frontend/src/components/Modals/NewComponent.vue b/frontend/src/components/Modals/NewComponent.vue
index 3ba9d0579..7e33abe36 100644
--- a/frontend/src/components/Modals/NewComponent.vue
+++ b/frontend/src/components/Modals/NewComponent.vue
@@ -32,6 +32,7 @@ import { BuilderComponent } from "@/types/Builder/BuilderComponent";
 import Block from "@/utils/block";
 import { getBlockCopy, getBlockString } from "@/utils/helpers";
 import useComponentStore from "@/utils/useComponentStore";
+import { Dialog } from "frappe-ui";
 import { ref } from "vue";
 
 const store = useStore();
diff --git a/frontend/src/components/Modals/NewFolder.vue b/frontend/src/components/Modals/NewFolder.vue
index bb3107191..d453b96f9 100644
--- a/frontend/src/components/Modals/NewFolder.vue
+++ b/frontend/src/components/Modals/NewFolder.vue
@@ -26,6 +26,7 @@
 <script setup lang="ts">
 import builderProjectFolder from "@/data/builderProjectFolder";
 import { useVModel } from "@vueuse/core";
+import { Dialog } from "frappe-ui";
 import { ref } from "vue";
 
 const folderName = ref("");
diff --git a/frontend/src/components/Modals/SelectFolder.vue b/frontend/src/components/Modals/SelectFolder.vue
index af795af7e..3c9826a0f 100644
--- a/frontend/src/components/Modals/SelectFolder.vue
+++ b/frontend/src/components/Modals/SelectFolder.vue
@@ -33,6 +33,7 @@
 import FolderIcon from "@/components/Icons/Folder.vue";
 import builderProjectFolder from "@/data/builderProjectFolder";
 import { useVModel } from "@vueuse/core";
+import { Dialog } from "frappe-ui";
 
 const props = defineProps<{
 	currentFolder: string;
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 7af9bb4ed..910fc189f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from "vue";
 
-import { Button, Dialog, FeatherIcon, FormControl, FrappeUI } from "frappe-ui";
+import { Button, FeatherIcon, FormControl, FrappeUI } from "frappe-ui";
 import { createPinia } from "pinia";
 import "./index.css";
 import router from "./router";
@@ -24,7 +24,6 @@ window.name = "frappe-builder";
 app.component("Button", Button);
 app.component("BuilderButton", BuilderButton);
 app.component("FormControl", FormControl);
-app.component("Dialog", Dialog);
 app.component("BuilderInput", Input);
 
 app.component("FeatherIcon", FeatherIcon);
diff --git a/frontend/src/pages/PageBuilderDashboard.vue b/frontend/src/pages/PageBuilderDashboard.vue
index f76f944bf..4ab983b9c 100644
--- a/frontend/src/pages/PageBuilderDashboard.vue
+++ b/frontend/src/pages/PageBuilderDashboard.vue
@@ -226,7 +226,7 @@ import useStore from "@/store";
 import { posthog } from "@/telemetry";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { useDark, useEventListener, useStorage, useToggle, watchDebounced } from "@vueuse/core";
-import { createResource, Dropdown } from "frappe-ui";
+import { createResource, Dialog, Dropdown } from "frappe-ui";
 import { onActivated, Ref, ref, watch } from "vue";
 
 const isDark = useDark({

From 59af1a20f30e0b1b7e4f867152b92c4711ec5bb7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 23 Dec 2024 13:26:47 +0530
Subject: [PATCH 13/27] perf: Use common blockContext menu

- For faster load and low memory consumption
---
 frontend/src/components/BlockContextMenu.vue | 101 ++++++++--------
 frontend/src/components/BlockEditor.vue      |  66 +++++------
 frontend/src/components/BlockLayers.vue      | 118 +++++++++----------
 frontend/src/components/TextBlock.vue        |  11 ++
 frontend/src/pages/PageBuilder.vue           |   6 +-
 frontend/src/store.ts                        |   2 +
 frontend/src/utils/useBuilderEvents.ts       |  17 +++
 7 files changed, 175 insertions(+), 146 deletions(-)

diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index 76eb01d1f..fc1f7db9e 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -1,6 +1,5 @@
 <template>
 	<div>
-		<slot :onContextMenu="showContextMenu" />
 		<ContextMenu
 			v-if="contextMenuVisible"
 			:pos-x="posX"
@@ -8,8 +7,8 @@
 			:options="contextMenuOptions"
 			@select="handleContextMenuSelect"
 			v-on-click-outside="() => (contextMenuVisible = false)" />
-		<NewComponent :block="block" v-model="showNewComponentDialog"></NewComponent>
-		<NewBlockTemplate :block="block" v-model="showBlockTemplateDialog"></NewBlockTemplate>
+		<NewComponent v-if="block" :block="block" v-model="showNewComponentDialog"></NewComponent>
+		<NewBlockTemplate v-if="block" :block="block" v-model="showBlockTemplateDialog"></NewBlockTemplate>
 	</div>
 </template>
 <script setup lang="ts">
@@ -30,20 +29,18 @@ import { toast } from "vue-sonner";
 const store = useStore();
 const componentStore = useComponentStore();
 
-const props = defineProps<{
-	block: Block;
-	editable: boolean;
-}>();
-
 const contextMenuVisible = ref(false);
 const posX = ref(0);
 const posY = ref(0);
 
+const block = ref(null) as unknown as Ref<Block>;
+
 const showNewComponentDialog = ref(false);
 const showBlockTemplateDialog = ref(false);
 
-const showContextMenu = (event: MouseEvent) => {
-	if (props.block.isRoot() || props.editable) return;
+const showContextMenu = (event: MouseEvent, refBlock: Block) => {
+	block.value = refBlock;
+	if (block.value.isRoot()) return;
 	contextMenuVisible.value = true;
 	posX.value = event.pageX;
 	posY.value = event.pageY;
@@ -60,33 +57,33 @@ const copiedStyle = useStorage("copiedStyle", { blockId: "", style: {} }, sessio
 
 const copyStyle = () => {
 	copiedStyle.value = {
-		blockId: props.block.blockId,
-		style: props.block.getStylesCopy(),
+		blockId: block.value.blockId,
+		style: block.value.getStylesCopy(),
 	};
 };
 
 const pasteStyle = () => {
-	props.block.updateStyles(copiedStyle.value?.style as BlockStyleObjects);
+	block.value.updateStyles(copiedStyle.value?.style as BlockStyleObjects);
 };
 
 const duplicateBlock = () => {
-	props.block.duplicateBlock();
+	block.value.duplicateBlock();
 };
 
 const contextMenuOptions: ContextMenuOption[] = [
 	{
 		label: "Edit HTML",
 		action: () => {
-			store.editHTML(props.block);
+			store.editHTML(block.value);
 		},
-		condition: () => props.block.isHTML(),
+		condition: () => block.value.isHTML(),
 	},
 	{ label: "Copy", action: () => document.execCommand("copy") },
 	{ label: "Copy Style", action: copyStyle },
 	{
 		label: "Paste Style",
 		action: pasteStyle,
-		condition: () => Boolean(copiedStyle.value.blockId && copiedStyle.value?.blockId !== props.block.blockId),
+		condition: () => Boolean(copiedStyle.value.blockId && copiedStyle.value?.blockId !== block.value.blockId),
 	},
 	{ label: "Duplicate", action: duplicateBlock },
 	{
@@ -95,16 +92,16 @@ const contextMenuOptions: ContextMenuOption[] = [
 			blockController.convertToLink();
 		},
 		condition: () =>
-			(props.block.isContainer() || props.block.isText() || props.block.isImage()) &&
-			!props.block.isLink() &&
-			!props.block.isExtendedFromComponent() &&
-			!props.block.isRoot(),
+			(block.value.isContainer() || block.value.isText() || block.value.isImage()) &&
+			!block.value.isLink() &&
+			!block.value.isExtendedFromComponent() &&
+			!block.value.isRoot(),
 	},
 	{
 		label: "Wrap In Container",
 		action: () => {
 			const newBlockObj = getBlockTemplate("fit-container");
-			const parentBlock = props.block.getParentBlock();
+			const parentBlock = block.value.getParentBlock();
 			if (!parentBlock) return;
 
 			const selectedBlocks = store.activeCanvas?.selectedBlocks || [];
@@ -137,10 +134,10 @@ const contextMenuOptions: ContextMenuOption[] = [
 			});
 		},
 		condition: () => {
-			if (props.block.isRoot()) return false;
+			if (block.value.isRoot()) return false;
 			if (store.activeCanvas?.selectedBlocks.length === 1) return true;
 			// check if all selected blocks are siblings
-			const parentBlock = props.block.getParentBlock();
+			const parentBlock = block.value.getParentBlock();
 			if (!parentBlock) return false;
 			const selectedBlocks = store.activeCanvas?.selectedBlocks || [];
 			return selectedBlocks.every((block: Block) => block.getParentBlock() === parentBlock);
@@ -149,58 +146,58 @@ const contextMenuOptions: ContextMenuOption[] = [
 	{
 		label: "Save As Component",
 		action: () => (showNewComponentDialog.value = true),
-		condition: () => !props.block.isExtendedFromComponent(),
+		condition: () => !block.value.isExtendedFromComponent(),
 	},
 
 	{
 		label: "Repeat Block",
 		action: () => {
 			const repeaterBlockObj = getBlockTemplate("repeater");
-			const parentBlock = props.block.getParentBlock();
+			const parentBlock = block.value.getParentBlock();
 			if (!parentBlock) return;
-			const repeaterBlock = parentBlock.addChild(repeaterBlockObj, parentBlock.getChildIndex(props.block));
-			repeaterBlock.addChild(getBlockCopy(props.block));
-			parentBlock.removeChild(props.block);
+			const repeaterBlock = parentBlock.addChild(repeaterBlockObj, parentBlock.getChildIndex(block.value));
+			repeaterBlock.addChild(getBlockCopy(block.value));
+			parentBlock.removeChild(block.value);
 			repeaterBlock.selectBlock();
 			store.propertyFilter = "data key";
 			toast.warning("Please set data key for repeater block");
 		},
-		condition: () => !props.block.isRoot() && !props.block.isRepeater(),
+		condition: () => !block.value.isRoot() && !block.value.isRepeater(),
 	},
 	{
 		label: "Reset Overrides",
-		condition: () => props.block.hasOverrides(store.activeBreakpoint),
+		condition: () => block.value.hasOverrides(store.activeBreakpoint),
 		action: () => {
-			props.block.resetOverrides(store.activeBreakpoint);
+			block.value.resetOverrides(store.activeBreakpoint);
 		},
 	},
 	{
 		label: "Reset Changes",
 		action: () => {
-			if (props.block.hasChildren()) {
+			if (block.value.hasChildren()) {
 				confirm("Reset changes in child blocks as well?").then((confirmed) => {
-					props.block.resetChanges(confirmed);
+					block.value.resetChanges(confirmed);
 				});
 			} else {
-				props.block.resetChanges();
+				block.value.resetChanges();
 			}
 		},
-		condition: () => props.block.isExtendedFromComponent(),
+		condition: () => block.value.isExtendedFromComponent(),
 	},
 	{
 		label: "Sync Component",
-		condition: () => Boolean(props.block.extendedFromComponent),
+		condition: () => Boolean(block.value.extendedFromComponent),
 		action: () => {
-			props.block.syncWithComponent();
+			block.value.syncWithComponent();
 		},
 	},
 	{
 		label: "Reset Component",
-		condition: () => Boolean(props.block.extendedFromComponent),
+		condition: () => Boolean(block.value.extendedFromComponent),
 		action: () => {
 			confirm("Are you sure you want to reset?").then((confirmed) => {
 				if (confirmed) {
-					props.block.resetWithComponent();
+					block.value.resetWithComponent();
 				}
 			});
 		},
@@ -208,40 +205,44 @@ const contextMenuOptions: ContextMenuOption[] = [
 	{
 		label: "Edit Component",
 		action: () => {
-			componentStore.editComponent(props.block);
+			componentStore.editComponent(block.value);
 		},
-		condition: () => Boolean(props.block.extendedFromComponent),
+		condition: () => Boolean(block.value.extendedFromComponent),
 	},
 	{
 		label: "Save as Block Template",
 		action: () => {
 			showBlockTemplateDialog.value = true;
 		},
-		condition: () => !props.block.isExtendedFromComponent() && Boolean(window.is_developer_mode),
+		condition: () => !block.value.isExtendedFromComponent() && Boolean(window.is_developer_mode),
 	},
 	{
 		label: "Detach Component",
 		action: () => {
-			const newBlock = detachBlockFromComponent(props.block);
+			const newBlock = detachBlockFromComponent(block.value);
 			if (newBlock) {
 				newBlock.selectBlock();
 			}
-			props.block.getParentBlock()?.replaceChild(props.block, newBlock);
+			block.value.getParentBlock()?.replaceChild(block.value, newBlock);
 		},
-		condition: () => Boolean(props.block.extendedFromComponent),
+		condition: () => Boolean(block.value.extendedFromComponent),
 	},
 	{
 		label: "Delete",
 		action: () => {
-			props.block.getParentBlock()?.removeChild(props.block);
+			block.value.getParentBlock()?.removeChild(block.value);
 		},
 		condition: () => {
 			return (
-				!props.block.isRoot() &&
-				!props.block.isChildOfComponentBlock() &&
-				Boolean(props.block.getParentBlock())
+				!block.value.isRoot() &&
+				!block.value.isChildOfComponentBlock() &&
+				Boolean(block.value.getParentBlock())
 			);
 		},
 	},
 ];
+
+defineExpose({
+	showContextMenu,
+});
 </script>
diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index e72954a2b..9a96af5df 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -1,39 +1,36 @@
 <template>
-	<BlockContextMenu :block="block" :editable="editable" v-slot="{ onContextMenu }">
-		<div
-			class="editor pointer-events-none fixed z-[18] box-content select-none ring-2 ring-inset"
-			ref="editor"
-			:selected="isBlockSelected"
-			@click.stop="handleClick"
-			@dblclick="handleDoubleClick"
-			@mousedown.prevent="handleMove"
-			@drop.prevent.stop="handleDrop"
-			@contextmenu="onContextMenu"
+	<div
+		class="editor pointer-events-none fixed z-[18] box-content select-none ring-2 ring-inset"
+		ref="editor"
+		:selected="isBlockSelected"
+		@click.stop="handleClick"
+		@dblclick="handleDoubleClick"
+		@mousedown.prevent="handleMove"
+		@drop.prevent.stop="handleDrop"
+		:data-block-id="block.blockId"
+		:class="getStyleClasses">
+		<PaddingHandler
 			:data-block-id="block.blockId"
-			:class="getStyleClasses">
-			<PaddingHandler
-				:data-block-id="block.blockId"
-				v-show="showPaddingHandler"
-				:target-block="block"
-				:target="target"
-				:on-update="updateTracker"
-				:disable-handlers="false"
-				:breakpoint="breakpoint" />
-			<MarginHandler
-				v-show="showMarginHandler"
-				:target-block="block"
-				:target="target"
-				:on-update="updateTracker"
-				:disable-handlers="false"
-				:breakpoint="breakpoint" />
-			<BorderRadiusHandler
-				:data-block-id="block.blockId"
-				v-if="showBorderRadiusHandler"
-				:target-block="block"
-				:target="target" />
-			<BoxResizer v-if="showResizer" :targetBlock="block" @resizing="resizing = $event" :target="target" />
-		</div>
-	</BlockContextMenu>
+			v-show="showPaddingHandler"
+			:target-block="block"
+			:target="target"
+			:on-update="updateTracker"
+			:disable-handlers="false"
+			:breakpoint="breakpoint" />
+		<MarginHandler
+			v-show="showMarginHandler"
+			:target-block="block"
+			:target="target"
+			:on-update="updateTracker"
+			:disable-handlers="false"
+			:breakpoint="breakpoint" />
+		<BorderRadiusHandler
+			:data-block-id="block.blockId"
+			v-if="showBorderRadiusHandler"
+			:target-block="block"
+			:target="target" />
+		<BoxResizer v-if="showResizer" :targetBlock="block" @resizing="resizing = $event" :target="target" />
+	</div>
 </template>
 <script setup lang="ts">
 import Block from "@/utils/block";
@@ -44,7 +41,6 @@ import blockController from "@/utils/blockController";
 import useStore from "../store";
 import setGuides from "../utils/guidesTracker";
 import trackTarget from "../utils/trackTarget";
-import BlockContextMenu from "./BlockContextMenu.vue";
 import BorderRadiusHandler from "./BorderRadiusHandler.vue";
 import BoxResizer from "./BoxResizer.vue";
 import MarginHandler from "./MarginHandler.vue";
diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 019e042ac..29ce668b9 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -9,69 +9,68 @@
 			:disabled="blocks.length && (blocks[0].isRoot() || blocks[0].isChildOfComponentBlock())">
 			<template #item="{ element }">
 				<div>
-					<BlockContextMenu v-slot="{ onContextMenu }" :block="element" :editable="false">
-						<div
-							:data-block-layer-id="element.blockId"
-							:title="element.blockId"
-							@contextmenu.prevent.stop="onContextMenu"
-							class="min-w-24 cursor-pointer overflow-hidden rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
-							@click.stop="selectBlock(element, $event)"
-							@mouseover.stop="store.hoveredBlock = element.blockId"
-							@mouseleave.stop="store.hoveredBlock = null">
+					<!-- <BlockContextMenu v-slot="{ onContextMenu }" :block="element" :editable="false"> -->
+					<div
+						:data-block-layer-id="element.blockId"
+						:title="element.blockId"
+						class="min-w-24 cursor-pointer overflow-hidden rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
+						@click.stop="selectBlock(element, $event)"
+						@mouseover.stop="store.hoveredBlock = element.blockId"
+						@mouseleave.stop="store.hoveredBlock = null">
+						<span
+							class="group my-[7px] flex items-center gap-1.5 pr-[2px] font-medium"
+							:style="{ paddingLeft: `${indent}px` }"
+							:class="{
+								'!opacity-50': !element.isVisible(),
+							}">
+							<FeatherIcon
+								:name="isExpanded(element) ? 'chevron-down' : 'chevron-right'"
+								class="ml-[-18px] h-3 w-3 text-ink-gray-4"
+								v-if="element.children && element.children.length && !element.isRoot()"
+								@click.stop="toggleExpanded(element)" />
+							<FeatherIcon
+								:name="element.getIcon()"
+								class="h-3 w-3"
+								:class="{
+									'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
+										element.isExtendedFromComponent(),
+								}"
+								v-if="!Boolean(element.extendedFromComponent)" />
+							<BlocksIcon
+								class="mr-1 h-3 w-3"
+								:class="{
+									'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
+										element.isExtendedFromComponent(),
+								}"
+								v-if="Boolean(element.extendedFromComponent)" />
 							<span
-								class="group my-[7px] flex items-center gap-1.5 pr-[2px] font-medium"
-								:style="{ paddingLeft: `${indent}px` }"
+								class="min-h-[1em] min-w-[2em] truncate"
+								:contenteditable="element.editable"
+								:title="element.blockId"
 								:class="{
-									'!opacity-50': !element.isVisible(),
-								}">
-								<FeatherIcon
-									:name="isExpanded(element) ? 'chevron-down' : 'chevron-right'"
-									class="ml-[-18px] h-3 w-3 text-ink-gray-4"
-									v-if="element.children && element.children.length && !element.isRoot()"
-									@click.stop="toggleExpanded(element)" />
-								<FeatherIcon
-									:name="element.getIcon()"
-									class="h-3 w-3"
-									:class="{
-										'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
-											element.isExtendedFromComponent(),
-									}"
-									v-if="!Boolean(element.extendedFromComponent)" />
-								<BlocksIcon
-									class="mr-1 h-3 w-3"
-									:class="{
-										'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
-											element.isExtendedFromComponent(),
-									}"
-									v-if="Boolean(element.extendedFromComponent)" />
-								<span
-									class="min-h-[1em] min-w-[2em] truncate"
-									:contenteditable="element.editable"
-									:title="element.blockId"
-									:class="{
-										'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
-											element.isExtendedFromComponent(),
-									}"
-									@dblclick="element.editable = true"
-									@keydown.enter.stop.prevent="element.editable = false"
-									@blur="setBlockName($event, element)">
-									{{ element.getBlockDescription() }}
-								</span>
-								<!-- toggle visibility -->
-								<FeatherIcon
-									v-if="!element.isRoot()"
-									:name="element.isVisible() ? 'eye' : 'eye-off'"
-									class="ml-auto mr-2 hidden h-3 w-3 group-hover:block"
-									@click.stop="element.toggleVisibility()" />
-								<span v-if="element.isRoot()" class="ml-auto mr-2 text-sm capitalize text-ink-gray-5">
-									{{ store.activeBreakpoint }}
-								</span>
+									'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
+										element.isExtendedFromComponent(),
+								}"
+								@dblclick="element.editable = true"
+								@keydown.enter.stop.prevent="element.editable = false"
+								@blur="setBlockName($event, element)">
+								{{ element.getBlockDescription() }}
+							</span>
+							<!-- toggle visibility -->
+							<FeatherIcon
+								v-if="!element.isRoot()"
+								:name="element.isVisible() ? 'eye' : 'eye-off'"
+								class="ml-auto mr-2 hidden h-3 w-3 group-hover:block"
+								@click.stop="element.toggleVisibility()" />
+							<span v-if="element.isRoot()" class="ml-auto mr-2 text-sm capitalize text-ink-gray-5">
+								{{ store.activeBreakpoint }}
 							</span>
-							<div v-show="canShowChildLayer(element)">
-								<BlockLayers :blocks="element.children" :ref="childLayer" :indent="childIndent" />
-							</div>
+						</span>
+						<div v-show="canShowChildLayer(element)">
+							<BlockLayers :blocks="element.children" :ref="childLayer" :indent="childIndent" />
 						</div>
-					</BlockContextMenu>
+					</div>
+					<!-- </BlockContextMenu> -->
 				</div>
 			</template>
 		</draggable>
@@ -83,7 +82,6 @@ import { FeatherIcon } from "frappe-ui";
 import { PropType, ref, watch } from "vue";
 import draggable from "vuedraggable";
 import useStore from "../store";
-import BlockContextMenu from "./BlockContextMenu.vue";
 import BlockLayers from "./BlockLayers.vue";
 import BlocksIcon from "./Icons/Blocks.vue";
 
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 57688dad4..68b579bb1 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -113,6 +113,16 @@
 					}
 				}
 			"
+			@keydown.esc="
+				() => {
+					store.editableBlock = null;
+				}
+			"
+			v-on-click-outside="
+				() => {
+					store.editableBlock = null;
+				}
+			"
 			@mouseup="selectionTriggered = false"
 			v-if="editor && showEditor"
 			class="relative z-50"
@@ -134,6 +144,7 @@ import { Link } from "@tiptap/extension-link";
 import TextStyle from "@tiptap/extension-text-style";
 import StarterKit from "@tiptap/starter-kit";
 import { BubbleMenu, Editor, EditorContent, Extension } from "@tiptap/vue-3";
+import { vOnClickOutside } from "@vueuse/components";
 import { TextInput } from "frappe-ui";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Ref, computed, inject, nextTick, onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 39d75b1e6..1f2218de0 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -1,5 +1,6 @@
 <template>
 	<div class="page-builder h-screen flex-col overflow-hidden bg-surface-gray-1">
+		<BlockContextMenu ref="blockContextMenu"></BlockContextMenu>
 		<BuilderToolbar class="relative z-30"></BuilderToolbar>
 		<div>
 			<BuilderLeftPanel
@@ -88,6 +89,7 @@
 </template>
 
 <script setup lang="ts">
+import BlockContextMenu from "@/components/BlockContextMenu.vue";
 import BuilderCanvas from "@/components/BuilderCanvas.vue";
 import BuilderLeftPanel from "@/components/BuilderLeftPanel.vue";
 import BuilderRightPanel from "@/components/BuilderRightPanel.vue";
@@ -102,7 +104,7 @@ import { isTargetEditable } from "@/utils/helpers";
 import { useBuilderEvents } from "@/utils/useBuilderEvents";
 import { useActiveElement, useDebounceFn, useMagicKeys } from "@vueuse/core";
 import { Dialog } from "frappe-ui";
-import { computed, onActivated, onDeactivated, provide, ref, watch, watchEffect } from "vue";
+import { computed, onActivated, onDeactivated, provide, ref, toRef, watch, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import CodeEditor from "../components/Controls/CodeEditor.vue";
 
@@ -132,6 +134,8 @@ const notUsingInput = computed(
 	() => activeElement.value?.tagName !== "INPUT" && activeElement.value?.tagName !== "TEXTAREA",
 );
 
+const blockContextMenu = toRef(store, "blockContextMenu");
+
 const { space } = useMagicKeys({
 	passive: false,
 	onEventFired(e) {
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 271755c0f..964ff1ba1 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -1,3 +1,4 @@
+import BlockContextMenu from "@/components/BlockContextMenu.vue";
 import router from "@/router";
 import { posthog } from "@/telemetry";
 import { BuilderSettings } from "@/types/Builder/BuilderSettings";
@@ -38,6 +39,7 @@ const useStore = defineStore("store", {
 		lastMode: <BuilderMode>"select",
 		activeCanvas: <InstanceType<typeof BuilderCanvas> | null>null,
 		activeLayers: <InstanceType<typeof BlockLayers> | null>null,
+		blockContextMenu: <InstanceType<typeof BlockContextMenu> | null>null,
 		history: {
 			pause: () => {},
 			resume: () => {},
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index d49e94a44..1bc06a9fd 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -7,6 +7,7 @@ import { BuilderPage } from "@/types/Builder/BuilderPage";
 import Block from "@/utils/block";
 import blockController from "@/utils/blockController";
 import getBlockTemplate from "@/utils/blockTemplate";
+
 import {
 	addPxToNumber,
 	copyToClipboard,
@@ -437,6 +438,22 @@ export function useBuilderEvents(
 			}
 		}
 	});
+
+	// context menu
+	useEventListener(document, "contextmenu", async (e) => {
+		if (isTargetEditable(e)) return;
+		const target =
+			<HTMLElement | null>(e.target as HTMLElement)?.closest("[data-block-layer-id]") ||
+			(e.target as HTMLElement)?.closest("[data-block-id]");
+		if (target) {
+			const blockId = target.dataset.blockLayerId || target.dataset.blockId;
+			const block = store.activeCanvas?.findBlock(blockId as string);
+			if (block) {
+				store.activeCanvas?.selectBlock(block, blockController.multipleBlocksSelected());
+				store.blockContextMenu?.showContextMenu(e, block);
+			}
+		}
+	});
 }
 
 const clearSelection = () => {

From 8434cf80803cc4db02a8287c021ff3cee3d1fe8d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Dec 2024 00:48:01 +0530
Subject: [PATCH 14/27] fix: "Set As Homepage" functionality

---
 .../src/components/Settings/PageGeneral.vue   | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Settings/PageGeneral.vue b/frontend/src/components/Settings/PageGeneral.vue
index 44da8ad60..1e303dcbe 100644
--- a/frontend/src/components/Settings/PageGeneral.vue
+++ b/frontend/src/components/Settings/PageGeneral.vue
@@ -49,16 +49,12 @@
 										: "Draft"
 								}}
 							</span>
-							<Tooltip
-								:text="
-									store.activePage?.published ? 'Unpublish this page' : 'This page is already unpublished'
-								">
-								<BuilderButton
-									variant="subtle"
-									@click="store.activePage?.published ? store.unpublishPage() : store.publishPage(false)">
-									{{ store.activePage?.published ? "Unpublish" : "Publish" }}
-								</BuilderButton>
-							</Tooltip>
+
+							<BuilderButton
+								variant="subtle"
+								@click="store.activePage?.published ? store.unpublishPage() : store.publishPage(false)">
+								{{ store.activePage?.published ? "Unpublish" : "Publish" }}
+							</BuilderButton>
 						</div>
 					</div>
 				</div>
@@ -99,16 +95,19 @@
 							<span class="text-base font-medium text-ink-gray-9">Homepage</span>
 							<p class="text-base text-ink-gray-5">Set current page as Homepage</p>
 						</div>
-						<Tooltip
-							:text="
-								store.isHomePage(store.activePage)
-									? 'Unset this page as the homepage'
-									: 'Set this page as the homepage'
+						<BuilderButton
+							variant="subtle"
+							@click="
+								() => {
+									if (store.isHomePage(store.activePage)) {
+										store.unsetHomePage();
+									} else {
+										store.setHomePage(store.activePage?.route as string);
+									}
+								}
 							">
-							<Button variant="outline" @click.stop="handleClick">
-								{{ store.isHomePage(store.activePage) ? "Unset Homepage" : "Set As Homepage" }}
-							</Button>
-						</Tooltip>
+							{{ store.isHomePage(store.activePage) ? "Unset Homepage" : "Set As Homepage" }}
+						</BuilderButton>
 					</div>
 					<hr class="w-full border-outline-gray-2" />
 					<Switch
@@ -155,7 +154,6 @@ import builderProjectFolder from "@/data/builderProjectFolder";
 import { builderSettings } from "@/data/builderSettings";
 import useStore from "@/store";
 import { BuilderProjectFolder } from "@/types/Builder/BuilderProjectFolder";
-import { Button, Tooltip } from "frappe-ui";
 import FeatherIcon from "frappe-ui/src/components/FeatherIcon.vue";
 import { computed } from "vue";
 // check route for page id
@@ -180,8 +178,4 @@ const folderOptions = computed(() => {
 
 	return [homeOption, ...options];
 });
-
-const handleClick = () => {
-	console.log("clicked");
-};
 </script>

From 9862a56311c7b1d51fa831509feeeee1626c9634 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 23 Dec 2024 23:31:28 +0530
Subject: [PATCH 15/27] refactor: Remove extra div

---
 frontend/src/components/BlockLayers.vue | 116 ++++++++++++------------
 1 file changed, 56 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 29ce668b9..053269e08 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -8,69 +8,65 @@
 			@add="updateParent"
 			:disabled="blocks.length && (blocks[0].isRoot() || blocks[0].isChildOfComponentBlock())">
 			<template #item="{ element }">
-				<div>
-					<!-- <BlockContextMenu v-slot="{ onContextMenu }" :block="element" :editable="false"> -->
-					<div
-						:data-block-layer-id="element.blockId"
-						:title="element.blockId"
-						class="min-w-24 cursor-pointer overflow-hidden rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
-						@click.stop="selectBlock(element, $event)"
-						@mouseover.stop="store.hoveredBlock = element.blockId"
-						@mouseleave.stop="store.hoveredBlock = null">
+				<div
+					:data-block-layer-id="element.blockId"
+					:title="element.blockId"
+					class="min-w-24 cursor-pointer overflow-hidden rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
+					@click.stop="selectBlock(element, $event)"
+					@mouseover.stop="store.hoveredBlock = element.blockId"
+					@mouseleave.stop="store.hoveredBlock = null">
+					<span
+						class="group my-[7px] flex items-center gap-1.5 pr-[2px] font-medium"
+						:style="{ paddingLeft: `${indent}px` }"
+						:class="{
+							'!opacity-50': !element.isVisible(),
+						}">
+						<FeatherIcon
+							:name="isExpanded(element) ? 'chevron-down' : 'chevron-right'"
+							class="ml-[-18px] h-3 w-3 text-ink-gray-4"
+							v-if="element.children && element.children.length && !element.isRoot()"
+							@click.stop="toggleExpanded(element)" />
+						<FeatherIcon
+							:name="element.getIcon()"
+							class="h-3 w-3"
+							:class="{
+								'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
+									element.isExtendedFromComponent(),
+							}"
+							v-if="!Boolean(element.extendedFromComponent)" />
+						<BlocksIcon
+							class="mr-1 h-3 w-3"
+							:class="{
+								'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
+									element.isExtendedFromComponent(),
+							}"
+							v-if="Boolean(element.extendedFromComponent)" />
 						<span
-							class="group my-[7px] flex items-center gap-1.5 pr-[2px] font-medium"
-							:style="{ paddingLeft: `${indent}px` }"
+							class="min-h-[1em] min-w-[2em] truncate"
+							:contenteditable="element.editable"
+							:title="element.blockId"
 							:class="{
-								'!opacity-50': !element.isVisible(),
-							}">
-							<FeatherIcon
-								:name="isExpanded(element) ? 'chevron-down' : 'chevron-right'"
-								class="ml-[-18px] h-3 w-3 text-ink-gray-4"
-								v-if="element.children && element.children.length && !element.isRoot()"
-								@click.stop="toggleExpanded(element)" />
-							<FeatherIcon
-								:name="element.getIcon()"
-								class="h-3 w-3"
-								:class="{
-									'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
-										element.isExtendedFromComponent(),
-								}"
-								v-if="!Boolean(element.extendedFromComponent)" />
-							<BlocksIcon
-								class="mr-1 h-3 w-3"
-								:class="{
-									'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
-										element.isExtendedFromComponent(),
-								}"
-								v-if="Boolean(element.extendedFromComponent)" />
-							<span
-								class="min-h-[1em] min-w-[2em] truncate"
-								:contenteditable="element.editable"
-								:title="element.blockId"
-								:class="{
-									'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
-										element.isExtendedFromComponent(),
-								}"
-								@dblclick="element.editable = true"
-								@keydown.enter.stop.prevent="element.editable = false"
-								@blur="setBlockName($event, element)">
-								{{ element.getBlockDescription() }}
-							</span>
-							<!-- toggle visibility -->
-							<FeatherIcon
-								v-if="!element.isRoot()"
-								:name="element.isVisible() ? 'eye' : 'eye-off'"
-								class="ml-auto mr-2 hidden h-3 w-3 group-hover:block"
-								@click.stop="element.toggleVisibility()" />
-							<span v-if="element.isRoot()" class="ml-auto mr-2 text-sm capitalize text-ink-gray-5">
-								{{ store.activeBreakpoint }}
-							</span>
+								'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
+									element.isExtendedFromComponent(),
+							}"
+							@dblclick="element.editable = true"
+							@keydown.enter.stop.prevent="element.editable = false"
+							@blur="setBlockName($event, element)">
+							{{ element.getBlockDescription() }}
+						</span>
+						<!-- toggle visibility -->
+						<FeatherIcon
+							v-if="!element.isRoot()"
+							:name="element.isVisible() ? 'eye' : 'eye-off'"
+							class="ml-auto mr-2 hidden h-3 w-3 group-hover:block"
+							@click.stop="element.toggleVisibility()" />
+						<span v-if="element.isRoot()" class="ml-auto mr-2 text-sm capitalize text-ink-gray-5">
+							{{ store.activeBreakpoint }}
 						</span>
-						<div v-show="canShowChildLayer(element)">
-							<BlockLayers :blocks="element.children" :ref="childLayer" :indent="childIndent" />
-						</div>
+					</span>
+					<div v-show="canShowChildLayer(element)">
+						<BlockLayers :blocks="element.children" :ref="childLayer" :indent="childIndent" />
 					</div>
-					<!-- </BlockContextMenu> -->
 				</div>
 			</template>
 		</draggable>
@@ -89,7 +85,7 @@ type LayerInstance = InstanceType<typeof BlockLayers>;
 
 const store = useStore();
 const childLayers = ref<LayerInstance[]>([]);
-const childLayer = (el) => {
+const childLayer = (el: LayerInstance) => {
 	if (el) {
 		childLayers.value.push(el);
 	}

From cca62d60690f7be4ad21317bb64df786b3c565ca Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 26 Dec 2024 13:40:42 +0530
Subject: [PATCH 16/27] fix: Context menu action reactivity

---
 frontend/src/components/BlockEditor.vue |  2 +-
 frontend/src/utils/useCanvasHistory.ts  | 26 ++++++++++++-------------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index 9a96af5df..3ed099f4d 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -236,11 +236,11 @@ const handleDoubleClick = (ev: MouseEvent) => {
 };
 
 const handleMove = (ev: MouseEvent) => {
-	const pauseId = store.activeCanvas?.history?.pause();
 	if (store.mode === "text") {
 		store.editableBlock = props.block;
 	}
 	if (!movable.value || props.block.isRoot()) return;
+	const pauseId = store.activeCanvas?.history?.pause();
 	const target = ev.target as HTMLElement;
 	const startX = ev.clientX;
 	const startY = ev.clientY;
diff --git a/frontend/src/utils/useCanvasHistory.ts b/frontend/src/utils/useCanvasHistory.ts
index ad681c48e..12b5eb71a 100644
--- a/frontend/src/utils/useCanvasHistory.ts
+++ b/frontend/src/utils/useCanvasHistory.ts
@@ -1,7 +1,7 @@
 import Block from "@/utils/block";
 import { generateId, getBlockInstance, getBlockString } from "@/utils/helpers";
 import { debounceFilter, pausableFilter, watchIgnorable } from "@vueuse/core";
-import { nextTick, ref, Ref } from "vue";
+import { ref, Ref } from "vue";
 
 type CanvasState = {
 	block: string;
@@ -136,19 +136,17 @@ export function useCanvasHistory(source: Ref<Block>, selectedBlockIds: Ref<strin
 	}
 
 	function resume(pauseId?: PauseId, commitNow?: boolean, force?: boolean) {
-		nextTick(() => {
-			if (pauseId && pauseIdSet.has(pauseId)) {
-				pauseIdSet.delete(pauseId);
-			} else if (!force) {
-				return;
-			}
-			if (pauseIdSet.size && !force) {
-				return;
-			}
-			pauseIdSet.clear();
-			resumeTracking();
-			if (commitNow) commit();
-		});
+		if (pauseId && pauseIdSet.has(pauseId)) {
+			pauseIdSet.delete(pauseId);
+		} else if (!force) {
+			return;
+		}
+		if (pauseIdSet.size && !force) {
+			return;
+		}
+		pauseIdSet.clear();
+		resumeTracking();
+		if (commitNow) commit();
 	}
 
 	function batch(callback: () => void) {

From 3a4eb5a323e65fd29c7114fdb95cf630bcf2116c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 27 Dec 2024 11:08:58 +0530
Subject: [PATCH 17/27] refactor: validateVisit edge cases

- If user is logged in and does not have access to builder, redirct to app
- if user is not logged in redirect to login. Once user logs in redirect back to builder page.
---
 frontend/src/router.ts | 48 ++++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index b6553e752..36b48ef2b 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -10,43 +10,49 @@ function validatePermission(next: NavigationGuardNext) {
 		next();
 	} else {
 		alert("You do not have permission to access this page");
-		window.location.href = "/login";
+		if (isUserLoggedIn()) {
+			window.location.href = "/app";
+		} else {
+			window.location.href = "/login?redirect-to=/builder";
+		}
 	}
 }
 
-const validateVisit = function (
+const validateVisit = async function (
 	to: RouteLocationNormalized,
 	from: RouteLocationNormalized,
 	next: NavigationGuardNext,
 ) {
-	if (document.cookie.includes("user_id") && !document.cookie.includes("user_id=Guest")) {
-		sessionUser.value = decodeURIComponent(document.cookie.split("user_id=")[1].split(";")[0]);
+	if (isUserLoggedIn()) {
+		sessionUser.value = getSessionUser();
 		if (hasPermission === null) {
-			createResource({
-				url: "frappe.client.has_permission",
-				caches: "has_permission",
-			})
-				.submit({
+			try {
+				const response = await createResource({
+					url: "frappe.client.has_permission",
+				}).submit({
 					doctype: "Builder Page",
 					docname: null,
 					perm_type: "write",
-				})
-				.then((res: { has_permission: boolean }) => {
-					hasPermission = res.has_permission;
-					validatePermission(next);
-				})
-				.catch(() => {
-					hasPermission = false;
-					validatePermission(next);
 				});
-		} else {
-			validatePermission(next);
+				hasPermission = response.has_permission;
+				return validatePermission(next);
+			} catch (e) {
+				hasPermission = false;
+				return validatePermission(next);
+			}
 		}
-	} else {
-		validatePermission(next);
 	}
+	return validatePermission(next);
 };
 
+function isUserLoggedIn() {
+	return document.cookie.includes("user_id") && !document.cookie.includes("user_id=Guest");
+}
+
+function getSessionUser() {
+	return decodeURIComponent(document.cookie.split("user_id=")[1].split(";")[0]) || "Guest";
+}
+
 const routes = [
 	{
 		path: "/home",

From 3d67831bb276741fc9c014ab313423296137a159 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 27 Dec 2024 15:47:40 +0530
Subject: [PATCH 18/27] chore: Update frappe-ui

---
 frappe-ui             |  2 +-
 frontend/package.json |  2 +-
 yarn.lock             | 81 +++++++++++++++++++++++++++++++++++++++----
 3 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 858d8f7aa..0f32e2e95 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 858d8f7aa521789d648195dc477d115abe6642d8
+Subproject commit 0f32e2e95677198fe84323f17954d7b306711065
diff --git a/frontend/package.json b/frontend/package.json
index a36a70775..64a569e3b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,7 +24,7 @@
     "ace-builds": "^1.22.0",
     "autoprefixer": "^10.4.2",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "0.1.80",
+    "frappe-ui": "0.1.93",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",
diff --git a/yarn.lock b/yarn.lock
index 1819aa803..43d672d7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1611,6 +1611,15 @@ birpc@^0.1.1:
   resolved "https://registry.yarnpkg.com/birpc/-/birpc-0.1.1.tgz#10b243ffe5a21ccaf4cbaf5a09a6f0cc035c4312"
   integrity sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==
 
+bl@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 blob-util@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
@@ -1663,7 +1672,7 @@ buffer-crc32@~0.2.3:
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
   integrity sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==
 
-buffer@^5.7.1:
+buffer@^5.5.0, buffer@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -1809,6 +1818,11 @@ cli-cursor@^5.0.0:
   dependencies:
     restore-cursor "^5.0.0"
 
+cli-spinners@^2.5.0:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.2.tgz#1773a8f4b9c4d6ac31563df53b3fc1d79462fe41"
+  integrity sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
+
 cli-table3@~0.6.1:
   version "0.6.5"
   resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.5.tgz#013b91351762739c16a9567c21a04632e449bf2f"
@@ -1834,6 +1848,11 @@ cli-truncate@^4.0.0:
     slice-ansi "^5.0.0"
     string-width "^7.0.0"
 
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -2061,7 +2080,7 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
-dayjs@^1.10.4:
+dayjs@^1.10.4, dayjs@^1.11.13:
   version "1.11.13"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
   integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
@@ -2097,6 +2116,13 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+defaults@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.4.tgz#b0b02062c1e2aa62ff5d9528f0f98baa90978d7a"
+  integrity sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==
+  dependencies:
+    clone "^1.0.2"
+
 define-data-property@^1.0.1, define-data-property@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
@@ -3209,7 +3235,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2:
+inherits@2, inherits@^2.0.3, inherits@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3333,6 +3359,11 @@ is-installed-globally@~0.4.0:
     global-dirs "^3.0.0"
     is-path-inside "^3.0.2"
 
+is-interactive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
+  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
+
 is-negative-zero@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
@@ -3696,7 +3727,7 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-log-symbols@^4.0.0:
+log-symbols@^4.0.0, log-symbols@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
   integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
@@ -4106,6 +4137,21 @@ optionator@^0.9.3:
     type-check "^0.4.0"
     word-wrap "^1.2.5"
 
+ora@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18"
+  integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
+  dependencies:
+    bl "^4.1.0"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-spinners "^2.5.0"
+    is-interactive "^1.0.0"
+    is-unicode-supported "^0.1.0"
+    log-symbols "^4.1.0"
+    strip-ansi "^6.0.0"
+    wcwidth "^1.0.1"
+
 orderedmap@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.1.1.tgz#61481269c44031c449915497bf5a4ad273c512d2"
@@ -4617,6 +4663,15 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
+readable-stream@^3.4.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -4761,7 +4816,7 @@ safe-array-concat@^1.1.2:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.2:
+safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -5078,6 +5133,13 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
@@ -5464,7 +5526,7 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-util-deprecate@^1.0.2:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
@@ -5593,6 +5655,13 @@ w3c-xmlserializer@^4.0.0:
   dependencies:
     xml-name-validator "^4.0.0"
 
+wcwidth@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  integrity sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==
+  dependencies:
+    defaults "^1.0.3"
+
 webfontloader@^1.6.28:
   version "1.6.28"
   resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"

From aac5fa753f049578dd5c6841b48b98afa874f2be Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 27 Dec 2024 21:23:10 +0530
Subject: [PATCH 19/27] fix: Use Set for selectionIds to avoid duplicates

---
 frontend/src/utils/useBlockSelection.ts | 24 ++++++++++++------------
 frontend/src/utils/useCanvasHistory.ts  |  8 ++++----
 frontend/src/utils/useCanvasUtils.ts    |  6 +++---
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/frontend/src/utils/useBlockSelection.ts b/frontend/src/utils/useBlockSelection.ts
index 6d4424c89..7cb3ddf1d 100644
--- a/frontend/src/utils/useBlockSelection.ts
+++ b/frontend/src/utils/useBlockSelection.ts
@@ -2,7 +2,7 @@ import Block from "@/utils/block";
 import { computed, Ref, ref } from "vue";
 
 export function useBlockSelection(rootBlock: Ref<Block>) {
-	const selectedBlockIds = ref<string[]>([]);
+	const selectedBlockIds = ref<Set<string>>(new Set());
 
 	function findBlock(blockId: string, blocks?: Block[]): Block | null {
 		if (!blocks) {
@@ -23,36 +23,37 @@ export function useBlockSelection(rootBlock: Ref<Block>) {
 	}
 
 	const selectedBlocks = computed(() => {
-		return selectedBlockIds.value.map((id) => findBlock(id)).filter((b) => b) as Block[];
+		return Array.from(selectedBlockIds.value)
+			.map((id: string) => findBlock(id))
+			.filter((b): b is Block => !!b);
 	});
 
 	const isSelected = (block: Block) => {
-		return selectedBlockIds.value.includes(block.blockId);
+		return selectedBlockIds.value.has(block.blockId);
 	};
 
 	const selectBlock = (block: Block, multiSelect = false) => {
 		if (multiSelect) {
-			selectedBlockIds.value.push(block.blockId);
+			selectedBlockIds.value.add(block.blockId);
 		} else {
-			selectedBlockIds.value = [block.blockId];
+			selectedBlockIds.value = new Set([block.blockId]);
 		}
 	};
 
 	const toggleBlockSelection = (block: Block) => {
-		const index = selectedBlockIds.value.indexOf(block.blockId);
-		if (index >= 0) {
-			selectedBlockIds.value.splice(index, 1);
+		if (selectedBlockIds.value.has(block.blockId)) {
+			selectedBlockIds.value.delete(block.blockId);
 		} else {
 			selectBlock(block, true);
 		}
 	};
 
 	const clearSelection = () => {
-		selectedBlockIds.value = [];
+		selectedBlockIds.value = new Set();
 	};
 
 	const selectBlockRange = (newSelectedBlock: Block) => {
-		const lastSelectedBlockId = selectedBlockIds.value[selectedBlockIds.value.length - 1];
+		const lastSelectedBlockId = Array.from(selectedBlockIds.value)[selectedBlockIds.value.size - 1];
 		const lastSelectedBlock = findBlock(lastSelectedBlockId);
 		const lastSelectedBlockParent = lastSelectedBlock?.parentBlock;
 		if (!lastSelectedBlock || !lastSelectedBlockParent) {
@@ -69,8 +70,7 @@ export function useBlockSelection(rootBlock: Ref<Block>) {
 		const end = Math.max(lastSelectedBlockIndex, newSelectedBlockIndex);
 		if (lastSelectedBlockParent === newSelectedBlockParent) {
 			const blocks = lastSelectedBlockParent.children.slice(start, end + 1);
-			selectedBlockIds.value = selectedBlockIds.value.concat(...blocks.map((b) => b.blockId));
-			selectedBlockIds.value = Array.from(new Set(selectedBlockIds.value));
+			blocks.forEach((b) => selectedBlockIds.value.add(b.blockId));
 		}
 	};
 
diff --git a/frontend/src/utils/useCanvasHistory.ts b/frontend/src/utils/useCanvasHistory.ts
index 12b5eb71a..fc4b3e50e 100644
--- a/frontend/src/utils/useCanvasHistory.ts
+++ b/frontend/src/utils/useCanvasHistory.ts
@@ -5,14 +5,14 @@ import { ref, Ref } from "vue";
 
 type CanvasState = {
 	block: string;
-	selectedBlockIds: string[];
+	selectedBlockIds: Set<string>;
 };
 type PauseId = string & { __brand: "PauseId" };
 
 const CAPACITY = 500;
 const DEBOUNCE_DELAY = 100;
 
-export function useCanvasHistory(source: Ref<Block>, selectedBlockIds: Ref<string[]>) {
+export function useCanvasHistory(source: Ref<Block>, selectedBlockIds: Ref<Set<string>>) {
 	const undoStack = ref([]) as Ref<CanvasState[]>;
 	const redoStack = ref([]) as Ref<CanvasState[]>;
 	const last = ref(createHistoryRecord());
@@ -61,7 +61,7 @@ export function useCanvasHistory(source: Ref<Block>, selectedBlockIds: Ref<strin
 	}
 
 	function updateSelections() {
-		last.value.selectedBlockIds = [...selectedBlockIds.value];
+		last.value.selectedBlockIds = new Set(selectedBlockIds.value);
 	}
 
 	function createHistoryRecord() {
@@ -78,7 +78,7 @@ export function useCanvasHistory(source: Ref<Block>, selectedBlockIds: Ref<strin
 		});
 		ignorePrevSelectedBlockUpdates();
 		ignoreSelectedBlockUpdates(() => {
-			selectedBlockIds.value = [...value.selectedBlockIds];
+			selectedBlockIds.value = new Set(value.selectedBlockIds);
 		});
 		last.value = value;
 	}
diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
index 3e7ae7eee..0127e1f8d 100644
--- a/frontend/src/utils/useCanvasUtils.ts
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -13,7 +13,7 @@ export function useCanvasUtils(
 	canvasContainer: Ref<HTMLElement | null>,
 	canvas: Ref<HTMLElement | null>,
 	rootBlock: Ref<Block>,
-	selectedBlockIds: Ref<string[]>,
+	selectedBlockIds: Ref<Set<string>>,
 	canvasHistory: Ref<null | any>,
 ) {
 	const isDirty = ref(false);
@@ -192,9 +192,9 @@ export function useCanvasUtils(
 
 	function selectBlock(_block: Block, multiSelect = false) {
 		if (multiSelect) {
-			selectedBlockIds.value.push(_block.blockId);
+			selectedBlockIds.value.add(_block.blockId);
 		} else {
-			selectedBlockIds.value.splice(0, selectedBlockIds.value.length, _block.blockId);
+			selectedBlockIds.value = new Set([_block.blockId]);
 		}
 	}
 

From 6f403b6527b0f22b95cdbb6c43d90f982659e6f5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Dec 2024 17:03:03 +0530
Subject: [PATCH 20/27] fix: Misc

---
 frontend/src/index.css      | 4 ++++
 frontend/src/utils/block.ts | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 15c427f5f..638befb14 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -44,4 +44,8 @@ p:empty::before {
 ::-webkit-scrollbar-thumb {
 	@apply rounded-full;
 	@apply bg-surface-gray-3;
+}
+
+[data-theme='dark'] img {
+	filter: revert;
 }
\ No newline at end of file
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index 82db9d8ba..34f24f4d4 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -669,6 +669,9 @@ class Block implements BlockOptions {
 		const component = this.referenceComponent;
 		if (component) {
 			resetWithComponent(this, this.extendedFromComponent as string, component.children);
+			// TODO: Remove this
+			const store = useStore();
+			store.activeCanvas?.history?.resume(undefined, true, true);
 		}
 	}
 	syncWithComponent() {

From 2c9dca170fb10efbfb5ec3e2ffa6ccf9b986c543 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Dec 2024 17:32:52 +0530
Subject: [PATCH 21/27] feat: Option to disable desktop breakpoint

- Command click to only show clicked breakpoint
---
 frontend/src/components/BuilderCanvas.vue | 23 +++++++++++++++++------
 frontend/src/utils/helpers.ts             |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 8f570aea6..274b66e2a 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -26,7 +26,7 @@
 					class="w-auto cursor-pointer p-2"
 					v-for="breakpoint in canvasProps.breakpoints"
 					:key="breakpoint.device"
-					@click.stop="breakpoint.visible = !breakpoint.visible">
+					@click.stop="(ev) => selectBreakpoint(ev, breakpoint)">
 					<FeatherIcon
 						:name="breakpoint.icon"
 						class="h-8 w-6"
@@ -46,7 +46,7 @@
 				v-for="breakpoint in visibleBreakpoints"
 				:key="breakpoint.device">
 				<div
-					class="cursor absolute left-0 select-none text-3xl text-gray-700 dark:text-zinc-300"
+					class="absolute left-0 cursor-pointer select-none text-3xl text-gray-700 dark:text-zinc-300"
 					:style="{
 						fontSize: `calc(${12}px * 1/${canvasProps.scale})`,
 						top: `calc(${-20}px * 1/${canvasProps.scale})`,
@@ -78,7 +78,7 @@
 import LoadingIcon from "@/components/Icons/Loading.vue";
 import { BreakpointConfig, CanvasHistory } from "@/types/Builder/BuilderCanvas";
 import Block from "@/utils/block";
-import { getBlockCopy } from "@/utils/helpers";
+import { getBlockCopy, isCtrlOrCmd } from "@/utils/helpers";
 import { useBlockEventHandlers } from "@/utils/useBlockEventHandlers";
 import { useBlockSelection } from "@/utils/useBlockSelection";
 import { useCanvasDropZone } from "@/utils/useCanvasDropZone";
@@ -182,9 +182,7 @@ const { isOverDropZone } = useCanvasDropZone(
 );
 
 const visibleBreakpoints = computed(() => {
-	return canvasProps.breakpoints.filter(
-		(breakpoint) => breakpoint.visible || breakpoint.device === "desktop",
-	);
+	return canvasProps.breakpoints.filter((breakpoint) => breakpoint.visible);
 });
 
 onMounted(() => {
@@ -270,4 +268,17 @@ defineExpose({
 	removeBlock,
 	selectBlockRange,
 });
+
+function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
+	if (isCtrlOrCmd(ev)) {
+		canvasProps.breakpoints.forEach((bp) => {
+			bp.visible = bp.device === breakpoint.device;
+		});
+	} else {
+		breakpoint.visible = !breakpoint.visible;
+		if (canvasProps.breakpoints.filter((bp) => bp.visible).length === 0) {
+			breakpoint.visible = true;
+		}
+	}
+}
 </script>
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 938184864..406c77b11 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -278,7 +278,7 @@ function getBlockCopy(block: BlockOptions | Block, retainId = false): Block {
 	return getBlockInstance(b, retainId);
 }
 
-function isCtrlOrCmd(e: KeyboardEvent) {
+function isCtrlOrCmd(e: KeyboardEvent | MouseEvent) {
 	return e.ctrlKey || e.metaKey;
 }
 

From e29e0dda5cfbe9a9dae2439e414fd2add26f84c4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Dec 2024 17:58:18 +0530
Subject: [PATCH 22/27] perf: Do not re-render breakpoint canvas on toggling

---
 frontend/src/components/BuilderCanvas.vue   | 13 ++++++++-----
 frontend/src/types/Builder/BuilderCanvas.ts |  1 +
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 274b66e2a..3bb7750a3 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -43,7 +43,8 @@
 					background: canvasProps.background,
 					width: `${breakpoint.width}px`,
 				}"
-				v-for="breakpoint in visibleBreakpoints"
+				v-for="breakpoint in renderedBreakpoints"
+				v-show="breakpoint.visible"
 				:key="breakpoint.device">
 				<div
 					class="absolute left-0 cursor-pointer select-none text-3xl text-gray-700 dark:text-zinc-300"
@@ -139,6 +140,7 @@ const canvasProps = reactive({
 			displayName: "Desktop",
 			width: 1400,
 			visible: true,
+			renderedOnce: true,
 		},
 		{
 			icon: "tablet",
@@ -181,10 +183,6 @@ const { isOverDropZone } = useCanvasDropZone(
 	findBlock,
 );
 
-const visibleBreakpoints = computed(() => {
-	return canvasProps.breakpoints.filter((breakpoint) => breakpoint.visible);
-});
-
 onMounted(() => {
 	const canvasContainerEl = canvasContainer.value as unknown as HTMLElement;
 	const canvasEl = canvas.value as unknown as HTMLElement;
@@ -280,5 +278,10 @@ function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
 			breakpoint.visible = true;
 		}
 	}
+	if (breakpoint.visible) {
+		breakpoint.renderedOnce = true;
+	}
 }
+
+const renderedBreakpoints = computed(() => canvasProps.breakpoints.filter((bp) => bp.renderedOnce));
 </script>
diff --git a/frontend/src/types/Builder/BuilderCanvas.ts b/frontend/src/types/Builder/BuilderCanvas.ts
index 3424ebdb0..e70a25cfd 100644
--- a/frontend/src/types/Builder/BuilderCanvas.ts
+++ b/frontend/src/types/Builder/BuilderCanvas.ts
@@ -7,6 +7,7 @@ export interface BreakpointConfig {
 	displayName: string;
 	width: number;
 	visible: boolean;
+	renderedOnce: boolean;
 }
 
 export interface CanvasProps {

From 8ed14293a7f93628d493bdd1658bd4d4f99a9948 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Dec 2024 19:07:58 +0530
Subject: [PATCH 23/27] perf: Only load layers if required

Reduces the load on first render and makes it extremely fast while navigating using arrow keys
---
 frontend/src/components/BlockLayers.vue      |  5 +++--
 frontend/src/components/BuilderLeftPanel.vue | 19 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 053269e08..b9250f384 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -64,7 +64,7 @@
 							{{ store.activeBreakpoint }}
 						</span>
 					</span>
-					<div v-show="canShowChildLayer(element)">
+					<div v-if="canShowChildLayer(element)">
 						<BlockLayers :blocks="element.children" :ref="childLayer" :indent="childIndent" />
 					</div>
 				</div>
@@ -161,7 +161,7 @@ const canShowChildLayer = (block: Block) => {
 };
 
 watch(
-	() => store.activeCanvas?.selectedBlocks,
+	() => store.activeCanvas?.selectedBlockIds,
 	() => {
 		if (store.activeCanvas?.selectedBlocks.length) {
 			store.activeCanvas?.selectedBlocks.forEach((block: Block) => {
@@ -176,6 +176,7 @@ watch(
 			});
 		}
 	},
+	{ immediate: true },
 );
 
 // @ts-ignore
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 207133fcd..a69dd4f3b 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -75,7 +75,7 @@ import PageScript from "@/components/PageScript.vue";
 import Block from "@/utils/block";
 import convertHTMLToBlocks from "@/utils/convertHTMLToBlocks";
 import { createResource } from "frappe-ui";
-import { Ref, inject, ref, watch, watchEffect } from "vue";
+import { Ref, inject, nextTick, ref, watch, watchEffect } from "vue";
 import useStore from "../store";
 import BlockLayers from "./BlockLayers.vue";
 import BuilderAssets from "./BuilderAssets.vue";
@@ -159,16 +159,15 @@ watch(
 );
 
 watch(
-	() => store.activeCanvas?.selectedBlocks,
-	() => {
-		document.querySelectorAll(`[data-block-layer-id].block-selected`).forEach((el) => {
-			el.classList.remove("block-selected");
+	() => store.activeCanvas?.selectedBlockIds,
+	async () => {
+		await nextTick();
+		const selectedBlocks = document.querySelectorAll(`[data-block-layer-id].block-selected`);
+		selectedBlocks.forEach((el) => el.classList.remove("block-selected"));
+		Array.from(store.activeCanvas?.selectedBlockIds || new Set([])).forEach((blockId: string) => {
+			const blockElement = document.querySelector(`[data-block-layer-id="${blockId}"]`);
+			blockElement?.classList.add("block-selected");
 		});
-		if (store.activeCanvas?.selectedBlocks.length) {
-			store.activeCanvas?.selectedBlocks.forEach((block: Block) => {
-				document.querySelector(`[data-block-layer-id="${block.blockId}"]`)?.classList.add("block-selected");
-			});
-		}
 	},
 );
 </script>

From b1f356d7e199d6f553f007cb9676085057de0e0b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Dec 2024 19:16:14 +0530
Subject: [PATCH 24/27] fix(UX): Reset hoveredBreakpoint and activeBreakpoint
 on new breapoint selection

---
 frontend/src/components/BuilderCanvas.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 3bb7750a3..64286201b 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -279,6 +279,8 @@ function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
 		}
 	}
 	if (breakpoint.visible) {
+		store.hoveredBreakpoint = breakpoint.device;
+		store.activeBreakpoint = breakpoint.device;
 		breakpoint.renderedOnce = true;
 	}
 }

From c06ba304c5d2620f3ec119876bcc644b4425dcc0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Dec 2024 20:05:29 +0530
Subject: [PATCH 25/27] fix(UX): Fade transition while loading page

---
 frontend/src/components/BuilderCanvas.vue | 11 +++++++++
 frontend/src/components/Icons/Loading.vue | 30 ++++++-----------------
 frontend/src/store.ts                     | 14 ++++++-----
 3 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 64286201b..7c84cd232 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -287,3 +287,14 @@ function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
 
 const renderedBreakpoints = computed(() => canvasProps.breakpoints.filter((bp) => bp.renderedOnce));
 </script>
+<style>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/frontend/src/components/Icons/Loading.vue b/frontend/src/components/Icons/Loading.vue
index 1b5074a2f..524ccc29d 100644
--- a/frontend/src/components/Icons/Loading.vue
+++ b/frontend/src/components/Icons/Loading.vue
@@ -1,29 +1,15 @@
 <template>
 	<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
-		<circle cx="18" cy="12" r="0" fill="currentColor">
+		<circle
+			v-for="(begin, index) in [0, 0.33, 0.67]"
+			:key="index"
+			:cx="6 + index * 6"
+			cy="12"
+			r="0"
+			fill="currentColor">
 			<animate
 				attributeName="r"
-				begin=".67"
-				calcMode="spline"
-				dur="1.5s"
-				keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-				repeatCount="indefinite"
-				values="0;2;0;0" />
-		</circle>
-		<circle cx="12" cy="12" r="0" fill="currentColor">
-			<animate
-				attributeName="r"
-				begin=".33"
-				calcMode="spline"
-				dur="1.5s"
-				keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-				repeatCount="indefinite"
-				values="0;2;0;0" />
-		</circle>
-		<circle cx="6" cy="12" r="0" fill="currentColor">
-			<animate
-				attributeName="r"
-				begin="0"
+				:begin="begin"
 				calcMode="spline"
 				dur="1.5s"
 				keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 964ff1ba1..7f7474ad0 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -2,6 +2,7 @@ import BlockContextMenu from "@/components/BlockContextMenu.vue";
 import router from "@/router";
 import { posthog } from "@/telemetry";
 import { BuilderSettings } from "@/types/Builder/BuilderSettings";
+import useComponentStore from "@/utils/useComponentStore";
 import { UseRefHistoryReturn, useStorage } from "@vueuse/core";
 import { createDocumentResource } from "frappe-ui";
 import { defineStore } from "pinia";
@@ -155,13 +156,14 @@ const useStore = defineStore("store", {
 			await this.setPageData(this.activePage);
 			this.activeCanvas?.setRootBlock(this.pageBlocks[0], resetCanvas);
 			nextTick(() => {
+				const componentStore = useComponentStore();
 				const interval = setInterval(() => {
-					// if (this.fetchingComponent.size === 0) {
-					this.settingPage = false;
-					window.name = `editor-${pageName}`;
-					clearInterval(interval);
-					// }
-				}, 100);
+					if (!componentStore.fetchingComponent.size) {
+						this.settingPage = false;
+						window.name = `editor-${pageName}`;
+						clearInterval(interval);
+					}
+				}, 50);
 			});
 		},
 		async setActivePage(pageName: string) {

From 7237a1324092f8c732c7481da57f8286d3528c47 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Dec 2024 23:13:35 +0530
Subject: [PATCH 26/27] fix(UX): Do not show editor icon in mobile

---
 builder/templates/generators/webpage_scripts.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/builder/templates/generators/webpage_scripts.html b/builder/templates/generators/webpage_scripts.html
index 81a5ebf8c..09a4e1294 100644
--- a/builder/templates/generators/webpage_scripts.html
+++ b/builder/templates/generators/webpage_scripts.html
@@ -14,5 +14,5 @@
 </script>
 {% endif %}
 <script>
-if(document.cookie.includes("user_id=")&&!document.cookie.includes("user_id=Guest")){const a=Object.assign(document.createElement("a"),{rel:"nofollow",href:"{{ editor_link }}",target:"editor-{{page_name}}",style:"position:fixed;bottom:40px;right:50px;height:35px;width:35px;opacity:0.1;",innerHTML:'<img src="/assets/builder/frontend/builder_logo.png" alt="Edit in Builder" style="box-shadow:#bdbdbd 0 0 5px;border-radius:10px;" />'});document.body.appendChild(a),a.addEventListener("mouseover",()=>a.style.opacity="1"),a.addEventListener("mouseout",()=>a.style.opacity="0.1")}
+if(window.matchMedia("(min-width:768px)").matches&&document.cookie.includes("user_id=")&&!document.cookie.includes("user_id=Guest")){const a=Object.assign(document.createElement("a"),{rel:"nofollow",href:"{{editor_link}}",target:"editor-{{page_name}}",style:"position:fixed;bottom:40px;right:50px;height:35px;width:35px;opacity:.1",innerHTML:'<img src="/assets/builder/frontend/builder_logo.png" alt="Edit in Builder" style="box-shadow:#bdbdbd 0 0 5px;border-radius:10px"/>'});document.body.appendChild(a),a.addEventListener("mouseover",()=>a.style.opacity="1"),a.addEventListener("mouseout",()=>a.style.opacity=".1")}
 </script>
\ No newline at end of file

From 801b5c0c955581f98b1dbebcf741117e84667b4c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Dec 2024 23:13:39 +0530
Subject: [PATCH 27/27] fix(UX): Show a screen size warning instead of broken
 editor

---
 frontend/src/pages/PageBuilder.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 1f2218de0..b0ad38e53 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -1,5 +1,12 @@
 <template>
-	<div class="page-builder h-screen flex-col overflow-hidden bg-surface-gray-1">
+	<div v-show="isSmallScreen" class="grid h-screen w-screen place-content-center gap-4 text-ink-gray-9">
+		<img src="/builder_logo.png" alt="logo" class="h-10" />
+		<div class="flex flex-col">
+			<h1 class="text-p-2xl font-semibold">Screen too small</h1>
+			<p class="text-p-base">Please switch to a larger screen to edit</p>
+		</div>
+	</div>
+	<div v-show="!isSmallScreen" class="page-builder h-screen flex-col overflow-hidden bg-surface-gray-1">
 		<BlockContextMenu ref="blockContextMenu"></BlockContextMenu>
 		<BuilderToolbar class="relative z-30"></BuilderToolbar>
 		<div>
@@ -102,12 +109,21 @@ import { getUsersInfo } from "@/usersInfo";
 import blockController from "@/utils/blockController";
 import { isTargetEditable } from "@/utils/helpers";
 import { useBuilderEvents } from "@/utils/useBuilderEvents";
-import { useActiveElement, useDebounceFn, useMagicKeys } from "@vueuse/core";
+import {
+	breakpointsTailwind,
+	useActiveElement,
+	useBreakpoints,
+	useDebounceFn,
+	useMagicKeys,
+} from "@vueuse/core";
 import { Dialog } from "frappe-ui";
 import { computed, onActivated, onDeactivated, provide, ref, toRef, watch, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import CodeEditor from "../components/Controls/CodeEditor.vue";
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallScreen = breakpoints.smaller("lg");
+
 const route = useRoute();
 const router = useRouter();
 const store = useStore();