Merge pull request #12069 from ToolJet/fix/codehinter-search-replace

Fix: Codehinter Search and Replace bug fixes

frontend/ee

@@ -1 +1 @@
-Subproject commit 7e6cf7d2e9c2dfaa4ca3d1308406cfed3c95715b
+Subproject commit 48b34618a96d70a64fa6579a54da941e457899d0

frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx

@@ -300,10 +300,10 @@ const MultiLineCodeEditor = (props) => {
                 editable={editable} //for transformations in query manager
                 onCreateEditor={(view) => setEditorView(view)}
                 onUpdate={(view) => {
-                  const icon = document.querySelector('.codehinter-search-btn-wrapper');
+                  const icon = document.querySelector('.codehinter-search-btn');
                   if (searchPanelOpen(view.state)) {
-                    icon.style.top = '44px';
-                  } else icon.style.top = '0px';
+                    icon.style.display = 'none';
+                  } else icon.style.display = 'block';
                 }}
               />
             </div>

frontend/src/AppBuilder/CodeEditor/SearchBox.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
 import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
@@ -9,12 +10,13 @@ import {
   replaceNext,
   replaceAll,
   openSearchPanel,
-  // eslint-disable-next-line import/no-unresolved
 } from '@codemirror/search';
 import './SearchBox.scss';
 import InputComponent from '@/components/ui/Input/Index.jsx';
 import { Button as ButtonComponent } from '@/components/ui/Button/Button.jsx';
 import { ToolTip } from '@/_components/ToolTip';
+import { SelectionRange } from '@codemirror/state';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 export const handleSearchPanel = (view) => {
   const dom = document.createElement('div');
@@ -35,6 +37,11 @@ function SearchPanel({ view }) {
       replace: replaceTerm,
     });
     view.dispatch({ effects: setSearchQuery.of(query) });
+
+    const currentPos = view.state.selection.main.head;
+    view.dispatch({
+      selection: SelectionRange.create(currentPos, currentPos),
+    });
   };
 
   useEffect(() => {
@@ -44,12 +51,28 @@ function SearchPanel({ view }) {
     return () => clearTimeout(handler);
   }, [searchText, replaceText]);
 
+  const [shortcutEnabled, setShortcutEnabled] = useState(false);
+
+  // Shortcuts for search input field
+  useHotkeys(
+    ['shift+enter', 'enter'],
+    (event, handler) => {
+      if (handler.shift && handler.keys[0] === 'enter') findPrevious(view);
+      else if (handler.keys[0] === 'enter') findNext(view);
+    },
+    {
+      enabled: shortcutEnabled,
+      enableOnFormTags: true,
+    }
+  );
+
   const displaySearchField = () => (
     <div className="search-replace-inputs">
       <InputComponent
         leadingIcon="search01"
         onChange={(e) => setSearchText(e.target.value)}
-        onKeyDown={(e) => e.key === 'Enter' && findNext(view)}
+        onFocus={() => setShortcutEnabled(true)}
+        onBlur={() => setShortcutEnabled(false)}
         placeholder="Find"
         size="small"
         value={searchText}

frontend/src/AppBuilder/CodeEditor/styles.scss

@@ -644,13 +644,15 @@
 }
 
 .cm-searchMatch {
+    background-color: #F9E71A !important;
+    
     .cm-selectionMatch {
         background-color: #F9E71A !important;
     }
 }
 
 .cm-searchMatch.cm-searchMatch-selected {
-    background-color: #F28F2D;
+    background-color: #F28F2D !important;
 }
 
 .tjdb-hinter-portal{

server/ee

@@ -1 +1 @@
-Subproject commit 17df343008fcedfd7b05540c9c21bebd152af086
+Subproject commit 88dcd4e30b5e78df1b873189c8416dd26edcaa1c