Fixed not being able to copy anywhere

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -13,7 +13,7 @@ export default function SingleAlert({
 
   return (
     <Transition
-      className="relative"
+      className="nocopy nowheel nopan nodelete nodrag noundo relative"
       show={show}
       appear={true}
       enter="transition-transform duration-500 ease-out"

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -59,22 +59,21 @@ export default function Page({
   flow: FlowType;
   view?: boolean;
 }): JSX.Element {
-  const preventDefault = true;
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const autoSaveCurrentFlow = useFlowsManagerStore(
-    (state) => state.autoSaveCurrentFlow
+    (state) => state.autoSaveCurrentFlow,
   );
   const types = useTypesStore((state) => state.types);
   const templates = useTypesStore((state) => state.templates);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [showCanvas, setSHowCanvas] = useState(
-    Object.keys(templates).length > 0 && Object.keys(types).length > 0
+    Object.keys(templates).length > 0 && Object.keys(types).length > 0,
   );
 
   const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
   const setReactFlowInstance = useFlowStore(
-    (state) => state.setReactFlowInstance
+    (state) => state.setReactFlowInstance,
   );
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -91,10 +90,10 @@ export default function Page({
   const paste = useFlowStore((state) => state.paste);
   const resetFlow = useFlowStore((state) => state.resetFlow);
   const lastCopiedSelection = useFlowStore(
-    (state) => state.lastCopiedSelection
+    (state) => state.lastCopiedSelection,
   );
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection
+    (state) => state.setLastCopiedSelection,
   );
   const onConnect = useFlowStore((state) => state.onConnect);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@@ -117,7 +116,7 @@ export default function Page({
         clonedSelection!,
         clonedNodes,
         clonedEdges,
-        getRandomName()
+        getRandomName(),
       );
       const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
       const newEdges = reconnectEdges(newGroupNode, removedEdges);
@@ -125,8 +124,8 @@ export default function Page({
         ...clonedNodes.filter(
           (oldNodes) =>
             !clonedSelection?.nodes.some(
-              (selectionNode) => selectionNode.id === oldNodes.id
-            )
+              (selectionNode) => selectionNode.id === oldNodes.id,
+            ),
         ),
         newGroupNode,
       ]);
@@ -136,8 +135,8 @@ export default function Page({
             !clonedSelection!.nodes.some(
               (selectionNode) =>
                 selectionNode.id === oldEdge.target ||
-                selectionNode.id === oldEdge.source
-            )
+                selectionNode.id === oldEdge.source,
+            ),
         ),
         ...newEdges,
       ]);
@@ -179,17 +178,17 @@ export default function Page({
   }, []);
 
   function handleUndo(e: KeyboardEvent) {
-    e.preventDefault();
-    (e as unknown as Event).stopImmediatePropagation();
     if (!isWrappedWithClass(e, "noundo")) {
+      e.preventDefault();
+      (e as unknown as Event).stopImmediatePropagation();
       undo();
     }
   }
 
   function handleRedo(e: KeyboardEvent) {
-    e.preventDefault();
-    (e as unknown as Event).stopImmediatePropagation();
     if (!isWrappedWithClass(e, "noundo")) {
+      e.preventDefault();
+      (e as unknown as Event).stopImmediatePropagation();
       redo();
     }
   }
@@ -213,55 +212,52 @@ export default function Page({
         {
           x: position.current.x,
           y: position.current.y,
-        }
+        },
       );
     }
   }
 
   function handleCopy(e: KeyboardEvent) {
-    e.preventDefault();
-    (e as unknown as Event).stopImmediatePropagation();
-    if (
-      !isWrappedWithClass(e, "nocopy") &&
-      window.getSelection()?.toString().length === 0 &&
-      lastSelection
-    ) {
-      setLastCopiedSelection(_.cloneDeep(lastSelection));
+    if (!isWrappedWithClass(e, "nocopy")) {
+      e.preventDefault();
+      (e as unknown as Event).stopImmediatePropagation();
+      if (window.getSelection()?.toString().length === 0 && lastSelection) {
+        setLastCopiedSelection(_.cloneDeep(lastSelection));
+      }
     }
   }
 
   function handleCut(e: KeyboardEvent) {
-    e.preventDefault();
-    (e as unknown as Event).stopImmediatePropagation();
-    if (
-      !isWrappedWithClass(e, "nocopy") &&
-      window.getSelection()?.toString().length === 0 &&
-      lastSelection
-    ) {
-      setLastCopiedSelection(_.cloneDeep(lastSelection), true);
+    if (!isWrappedWithClass(e, "nocopy")) {
+      e.preventDefault();
+      (e as unknown as Event).stopImmediatePropagation();
+      if (window.getSelection()?.toString().length === 0 && lastSelection) {
+        setLastCopiedSelection(_.cloneDeep(lastSelection), true);
+      }
     }
   }
 
   function handlePaste(e: KeyboardEvent) {
-    e.preventDefault();
-    (e as unknown as Event).stopImmediatePropagation();
-    if (
-      !isWrappedWithClass(e, "nocopy") &&
-      window.getSelection()?.toString().length === 0 &&
-      lastCopiedSelection
-    ) {
-      takeSnapshot();
-      paste(lastCopiedSelection, {
-        x: position.current.x,
-        y: position.current.y,
-      });
+    if (!isWrappedWithClass(e, "nocopy")) {
+      e.preventDefault();
+      (e as unknown as Event).stopImmediatePropagation();
+      if (
+        window.getSelection()?.toString().length === 0 &&
+        lastCopiedSelection
+      ) {
+        takeSnapshot();
+        paste(lastCopiedSelection, {
+          x: position.current.x,
+          y: position.current.y,
+        });
+      }
     }
   }
 
   function handleDelete(e: KeyboardEvent) {
-    e.preventDefault();
-    (e as unknown as Event).stopImmediatePropagation();
     if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
+      e.preventDefault();
+      (e as unknown as Event).stopImmediatePropagation();
       takeSnapshot();
       deleteNode(lastSelection.nodes.map((node) => node.id));
       deleteEdge(lastSelection.edges.map((edge) => edge.id));
@@ -277,27 +273,27 @@ export default function Page({
   const cutAction = useShortcutsStore((state) => state.cut);
   const pasteAction = useShortcutsStore((state) => state.paste);
   //@ts-ignore
-  useHotkeys(undoAction, handleUndo, { preventDefault });
+  useHotkeys(undoAction, handleUndo);
   //@ts-ignore
-  useHotkeys(redoAction, handleRedo, { preventDefault });
+  useHotkeys(redoAction, handleRedo);
   //@ts-ignore
-  useHotkeys(groupAction, handleGroup, { preventDefault });
+  useHotkeys(groupAction, handleGroup);
   //@ts-ignore
-  useHotkeys(duplicate, handleDuplicate, { preventDefault });
+  useHotkeys(duplicate, handleDuplicate);
   //@ts-ignore
-  useHotkeys(copyAction, handleCopy, { preventDefault });
+  useHotkeys(copyAction, handleCopy);
   //@ts-ignore
-  useHotkeys(cutAction, handleCut, { preventDefault });
+  useHotkeys(cutAction, handleCut);
   //@ts-ignore
-  useHotkeys(pasteAction, handlePaste, { preventDefault });
+  useHotkeys(pasteAction, handlePaste);
   //@ts-ignore
-  useHotkeys(deleteAction, handleDelete, { preventDefault });
+  useHotkeys(deleteAction, handleDelete);
   //@ts-ignore
-  useHotkeys("delete", handleDelete, { preventDefault });
+  useHotkeys("delete", handleDelete);
 
   useEffect(() => {
     setSHowCanvas(
-      Object.keys(templates).length > 0 && Object.keys(types).length > 0
+      Object.keys(templates).length > 0 && Object.keys(types).length > 0,
     );
   }, [templates, types]);
 
@@ -306,7 +302,7 @@ export default function Page({
       takeSnapshot();
       onConnect(params);
     },
-    [takeSnapshot, onConnect]
+    [takeSnapshot, onConnect],
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -347,7 +343,7 @@ export default function Page({
 
         // Extract the data from the drag event and parse it as a JSON object
         const data: { type: string; node?: APIClassType } = JSON.parse(
-          event.dataTransfer.getData("nodedata")
+          event.dataTransfer.getData("nodedata"),
         );
 
         const newId = getNodeId(data.type);
@@ -363,7 +359,7 @@ export default function Page({
         };
         paste(
           { nodes: [newNode], edges: [] },
-          { x: event.clientX, y: event.clientY }
+          { x: event.clientX, y: event.clientY },
         );
       } else if (event.dataTransfer.types.some((types) => types === "Files")) {
         takeSnapshot();
@@ -392,7 +388,7 @@ export default function Page({
       }
     },
     // Specify dependencies for useCallback
-    [getNodeId, setNodes, takeSnapshot, paste]
+    [getNodeId, setNodes, takeSnapshot, paste],
   );
 
   const onEdgeUpdateStart = useCallback(() => {
@@ -408,7 +404,7 @@ export default function Page({
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    [setEdges]
+    [setEdges],
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@@ -441,7 +437,7 @@ export default function Page({
     (flow: OnSelectionChangeParams): void => {
       setLastSelection(flow);
     },
-    []
+    [],
   );
 
   const onPaneClick = useCallback((flow) => {

src/frontend/src/style/applies.css

@@ -411,7 +411,7 @@
   }
 
   .error-build-message {
-    @apply mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl;
+    @apply mt-6 w-96 rounded-md bg-error-background p-4 shadow-xl;
   }
   .error-build-message-circle {
     @apply alert-icon text-status-red;