fix: add search functionality to code editor (#7949)

* Updated packages

* added external searchbox to not cause conflicts on run-cli and desktop

* Fixed lint error in code area modal

src/frontend/package-lock.json

@@ -34,7 +34,7 @@
         "@types/axios": "^0.14.0",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@xyflow/react": "^12.3.6",
-        "ace-builds": "^1.35.0",
+        "ace-builds": "^1.41.0",
         "ag-grid-community": "^32.0.2",
         "ag-grid-react": "^32.0.2",
         "ansi-to-html": "^0.7.2",
@@ -5794,9 +5794,10 @@
       }
     },
     "node_modules/ace-builds": {
-      "version": "1.40.1",
+      "version": "1.41.0",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.40.1.tgz",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.41.0.tgz",
-      "integrity": "sha512-32uwJNwmhqpnYtr6oq8RoO1D6F6tnxisv5f9w2XPX3vi4QruuHNikadHUiHvnxLAV1n5Azv4LFtpItQ5dD1eRw=="
+      "integrity": "sha512-tiEUfw7V/FpHuI4tG7KS+muOTMIuPh6zReBAD2Uqhe9t00tLeyVGxjXu0tSqz5OIPWy7/wvuJBVXAsNWx0rYvQ==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/acorn": {
       "version": "8.14.1",
@@ -12852,6 +12853,7 @@
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-11.0.1.tgz",
       "integrity": "sha512-ulk2851Fx2j59AAahZHTe7rmQ5bITW1xytskAt11F8dv3rPLtdwBXCyT2qSbRnJvOq8UpuAhWO4/JhKGqQBEDA==",
+      "license": "MIT",
       "dependencies": {
         "ace-builds": "^1.32.8",
         "diff-match-patch": "^1.0.5",

src/frontend/package.json

@@ -29,7 +29,7 @@
     "@types/axios": "^0.14.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@xyflow/react": "^12.3.6",
-    "ace-builds": "^1.35.0",
+    "ace-builds": "^1.41.0",
     "ag-grid-community": "^32.0.2",
     "ag-grid-react": "^32.0.2",
     "ansi-to-html": "^0.7.2",

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -1,12 +1,12 @@
-import "ace-builds/src-noconflict/ace";
-import "ace-builds/src-noconflict/ext-language_tools";
-import "ace-builds/src-noconflict/mode-python";
-import "ace-builds/src-noconflict/theme-github";
-import "ace-builds/src-noconflict/theme-twilight";
-// import "ace-builds/webpack-resolver";
 import { usePostValidateCode } from "@/controllers/API/queries/nodes/use-post-validate-code";
 import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
 import useFlowStore from "@/stores/flowStore";
+import "ace-builds/src-noconflict/ace";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-twilight";
 import { useEffect, useRef, useState } from "react";
 import AceEditor from "react-ace";
 import ReactAce from "react-ace/lib/ace";
@@ -54,13 +54,12 @@ export default function CodeAreaModal({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [openConfirmation, setOpenConfirmation] = useState(false);
   const codeRef = useRef<ReactAce | null>(null);
-  const { mutate, isPending } = usePostValidateCode();
+  const { mutate } = usePostValidateCode();
   const [error, setError] = useState<{
     detail: CodeErrorDataTypeAPI;
   } | null>(null);
 
   const { mutate: validateComponentCode } = usePostValidateComponentCode();
-  const setNode = useFlowStore((state) => state.setNode);
 
   useEffect(() => {
     // if nodeClass.template has more fields other than code and dynamic is true
@@ -177,6 +176,8 @@ export default function CodeAreaModal({
         } else {
           if (
             !(
+              codeRef.current?.editor.completer &&
+              "popup" in codeRef.current?.editor.completer &&
               codeRef.current?.editor.completer.popup &&
               codeRef.current?.editor.completer.popup.isOpen
             )