feat: Add "cut" event handler

frontend/src/utils/useBuilderEvents.ts

@@ -51,32 +51,16 @@ export function useBuilderEvents(
 	);
 
 	useEventListener(document, "copy", (e) => {
-		if (isTargetEditable(e)) return;
+		copySelectedBlocksToClipboard(e);
+	});
+
+	useEventListener(document, "cut", (e) => {
+		copySelectedBlocksToClipboard(e);
 		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 = componentStore.getComponent(componentName);
-					if (component) {
-						componentDocuments.push(component);
-					}
-				}
+				store.activeCanvas?.removeBlock(block, true);
 			}
-
-			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");
+			clearSelection();
 		}
 	});
 
@@ -463,3 +447,34 @@ const clearSelection = () => {
 		document.activeElement.blur();
 	}
 };
+
+const copySelectedBlocksToClipboard = (e: ClipboardEvent) => {
+	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 = componentStore.getComponent(componentName);
+				if (component) {
+					componentDocuments.push(component);
+				}
+			}
+		}
+
+		const blocksToCopy = store.activeCanvas?.selectedBlocks.map((block) => {
+			if (!Boolean(block.extendedFromComponent) && block.isChildOfComponent) {
+				return detachBlockFromComponent(block, null);
+			}
+			return getCopyWithoutParent(block);
+		});
+
+		// just copy non components
+		const dataToCopy = {
+			blocks: blocksToCopy,
+			components: componentDocuments,
+		};
+		copyToClipboard(dataToCopy, e, "builder-copied-blocks");
+	}
+};