Fixed Code shortcut

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

@@ -1,5 +1,6 @@
 import _, { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
@@ -31,7 +32,6 @@ import {
 } from "../../../../utils/reactflowUtils";
 import { classNames } from "../../../../utils/utils";
 import ToolbarSelectItem from "./toolbarSelectItem";
-import { useHotkeys } from "react-hotkeys-hook";
 
 export default function NodeToolbarComponent({
   data,
@@ -69,7 +69,7 @@ export default function NodeToolbarComponent({
   const validApiKey = useStoreStore((state) => state.validApiKey);
 
   function handleMinimizeWShortcut(e: KeyboardEvent) {
-    e.preventDefault()
+    e.preventDefault();
     if (isMinimal) {
       setShowState((show) => !show);
       setShowNode(data.showNode ?? true ? false : true);
@@ -83,14 +83,14 @@ export default function NodeToolbarComponent({
   }
 
   function handleUpdateWShortcut(e: KeyboardEvent) {
-    e.preventDefault()
+    e.preventDefault();
-    if ((hasApiKey || hasStore)) {
+    if (hasApiKey || hasStore) {
       handleSelectChange("update");
     }
   }
 
   function handleGroupWShortcut(e: KeyboardEvent) {
-    e.preventDefault()
+    e.preventDefault();
     if (isGroup) {
       handleSelectChange("ungroup");
     }
@@ -98,26 +98,26 @@ export default function NodeToolbarComponent({
 
   function handleShareWShortcut(e: KeyboardEvent) {
     if (hasApiKey || hasStore) {
-      e.preventDefault()
+      e.preventDefault();
       setShowconfirmShare((state) => !state);
     }
   }
 
   function handleCodeWShortcut(e: KeyboardEvent) {
-    e.preventDefault()
+    e.preventDefault();
     if (hasCode) return setOpenModal((state) => !state);
     setNoticeData({ title: `You can not access ${data.id} code` });
   }
 
   function handleAdvancedWShortcut(e: KeyboardEvent) {
-    e.preventDefault()
+    e.preventDefault();
     if (!isGroup) {
       setShowModalAdvanced((state) => !state);
     }
   }
 
   function handleSaveWShortcut(e: KeyboardEvent) {
-    e.preventDefault()
+    e.preventDefault();
     if (isSaved) {
       setShowOverrideModal((state) => !state);
       return;
@@ -153,7 +153,7 @@ export default function NodeToolbarComponent({
   useHotkeys("mod+s", handleSaveWShortcut);
   useHotkeys("mod+shift+d", handleDocsWShortcut);
   useHotkeys("mod+j", handleDownloadWShortcut);
-  useHotkeys("space", handleCodeWShortcut)
+  useHotkeys("space", handleCodeWShortcut);
 
   const isMinimal = numberOfHandles <= 1;
   const isGroup = data.node?.flow ? true : false;
@@ -165,7 +165,6 @@ export default function NodeToolbarComponent({
   const setNodes = useFlowStore((state) => state.setNodes);
 
   const setEdges = useFlowStore((state) => state.setEdges);
-  const unselectAll = useFlowStore((state) => state.unselectAll);
   const saveComponent = useFlowsManagerStore((state) => state.saveComponent);
   const getNodePosition = useFlowStore((state) => state.getNodePosition);
   const flows = useFlowsManagerStore((state) => state.flows);
@@ -179,10 +178,9 @@ export default function NodeToolbarComponent({
   );
 
   useEffect(() => {
-    if (openWDoubleClick) setShowModalAdvanced(true)
+    if (openWDoubleClick) setShowModalAdvanced(true);
   }, [openWDoubleClick, setOpenWDoubleClick]);
 
-
   const openInNewTab = (url) => {
     window.open(url, "_blank", "noreferrer");
   };
@@ -473,9 +471,10 @@ export default function NodeToolbarComponent({
               {hasCode && (
                 <SelectItem value={"code"}>
                   <ToolbarSelectItem
-                    keyboardKey="U"
+                    keyboardKey="Space"
                     isMac={navigator.userAgent.toUpperCase().includes("MAC")}
                     shift={false}
+                    mod={false}
                     value={"Code"}
                     icon={"Code"}
                     dataTestId="code-button-modal"
@@ -514,16 +513,6 @@ export default function NodeToolbarComponent({
                   dataTestId="duplicate-button-modal"
                 />
               </SelectItem>
-              {/* <SelectItem value={"duplicate"}>
-                <ToolbarSelectItem
-                  keyboardKey="D"
-                  isMac={navigator.userAgent.toUpperCase().includes("MAC")}
-                  shift={false}
-                  value={"Duplicate"}
-                  icon={"Copy"}
-                  dataTestId="duplicate-button-modal"
-                />
-              </SelectItem> */}
               <SelectItem value={"copy"}>
                 <ToolbarSelectItem
                   keyboardKey="C"

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx

@@ -4,6 +4,7 @@ import { toolbarSelectItemProps } from "../../../../../types/components";
 export default function ToolbarSelectItem({
   shift,
   isMac,
+  mod = true,
   keyboardKey,
   value,
   icon,
@@ -21,22 +22,23 @@ export default function ToolbarSelectItem({
       />
       <span className={styleObj?.valueClasses}>{value}</span>
 
-      {isMac ? (
+      {mod &&
-        <ForwardedIconComponent
+        (isMac ? (
-          name="Command"
+          <ForwardedIconComponent
-          className={`absolute
+            name="Command"
-          ${shift ? " right-[2rem] " : "right-[1.15rem]"}
+            className={`absolute
-          top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
+    ${shift ? " right-[2rem] " : "right-[1.15rem]"}
-        ></ForwardedIconComponent>
+    top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
-      ) : (
+          ></ForwardedIconComponent>
-        <span
+        ) : (
-          className={`absolute ${
+          <span
-            shift ? " right-[2.15rem] " : "right-[1.15rem]"
+            className={`absolute ${
-          } top-[0.43em] stroke-2 `}
+              shift ? " right-[2.15rem] " : "right-[1.15rem]"
-        >
+            } top-[0.43em] stroke-2 `}
-          {shift ? "Ctrl" : "Ctrl +"}
+          >
-        </span>
+            {shift ? "Ctrl" : "Ctrl +"}
-      )}
+          </span>
+        ))}
       {shift && (
         <ForwardedIconComponent
           name="ArrowBigUp"

src/frontend/src/types/components/index.ts

@@ -732,6 +732,7 @@ export type toolbarSelectItemProps = {
   isMac: boolean;
   shift: boolean;
   keyboardKey: string;
+  mod?:boolean;
   value: string;
   icon: string;
   styleObj?: {