feat: Hide element while deleting element from breakpoints other than desktop

Author: surajshetty3416

frontend/src/components/BlockContextMenu.vue

@@ -230,7 +230,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 	{
 		label: "Delete",
 		action: () => {
-			block.value.getParentBlock()?.removeChild(block.value);
+			store.activeCanvas?.removeBlock(block.value);
 		},
 		condition: () => {
 			return (

frontend/src/utils/block.ts

@@ -643,8 +643,8 @@ class Block implements BlockOptions {
 	setInnerHTML(innerHTML: string) {
 		this.innerHTML = innerHTML;
 	}
-	toggleVisibility() {
-		if (this.getStyle("display") === "none") {
+	toggleVisibility(show: boolean | null = null) {
+		if (this.getStyle("display") === "none" || show === false) {
 			this.setStyle("display", this.getStyle("__last_display") || "flex");
 			this.setStyle("__last_display", null);
 		} else {

frontend/src/utils/useCanvasUtils.ts

@@ -228,25 +228,26 @@ export function useCanvasUtils(
 		return null;
 	}
 
-	function removeBlock(block: Block) {
+	function removeBlock(block: Block, force: boolean = false) {
 		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;
+			block.toggleVisibility(false);
 		}
 		const parentBlock = block.parentBlock;
 		if (!parentBlock) {
 			return;
 		}
 		const index = parentBlock.children.indexOf(block);
-		parentBlock.removeChild(block);
+		if (store.activeBreakpoint === "desktop" || force) {
+			parentBlock.removeChild(block);
+		} else {
+			block.toggleVisibility(false);
+		}
 		nextTick(() => {
 			if (parentBlock.children.length) {
 				const nextSibling = parentBlock.children[index] || parentBlock.children[index - 1];