feat(CodeEditor): add onSearchBarAction prop for enhanced search functionality

Author: AbhishekA1509

src/Shared/Components/CodeEditor/CodeEditor.tsx

@@ -48,7 +48,7 @@ import {
     replaceAll,
     showReplaceFieldState,
 } from './Commands'
-import { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
+import { getCodeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
 import { CodeEditorContextProps, CodeEditorProps } from './types'
 import { getFoldGutterElement, getLanguageExtension, getValidationSchema, parseValueToCode } from './utils'
 
@@ -90,6 +90,7 @@ const CodeEditor = <DiffView extends boolean = false>({
     autoFocus,
     disableSearch = false,
     onOpenSearchPanel = noop,
+    onSearchBarAction = noop,
 }: CodeEditorProps<DiffView>) => {
     // HOOKS
     const { appTheme } = useTheme()
@@ -216,7 +217,7 @@ const CodeEditor = <DiffView extends boolean = false>({
         foldingCompartment.of(foldConfig),
         lintGutter(),
         search({
-            createPanel: codeEditorFindReplace,
+            createPanel: getCodeEditorFindReplace(onSearchBarAction),
         }),
         showReplaceFieldState,
         ...(mode === MODES.YAML ? [yamlHighlight] : []),

src/Shared/Components/CodeEditor/Extensions/findAndReplace.tsx

@@ -50,7 +50,7 @@ import {
     REPLACE_SHORTCUT_KEYS,
 } from '../CodeEditor.constants'
 import { getShowReplaceField, setShowReplaceField } from '../Commands'
-import { FindReplaceProps, FindReplaceQuery, FindReplaceToggleButtonProps } from '../types'
+import { CodeEditorProps, FindReplaceProps, FindReplaceQuery, FindReplaceToggleButtonProps } from '../types'
 import { getFindReplaceToggleButtonIconClass, getUpdatedSearchMatchesCount } from '../utils'
 
 const FindReplaceToggleButton = ({
@@ -85,7 +85,7 @@ const FindReplaceToggleButton = ({
     )
 }
 
-const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProps) => {
+const FindReplace = ({ view, defaultQuery, defaultShowReplace, onSearchBarAction }: FindReplaceProps) => {
     // STATES
     const [query, setQuery] = useState<SearchQuery>(new SearchQuery({ search: '' }))
     const [matchesCount, setMatchesCount] = useState({ count: 0, current: 1 })
@@ -111,6 +111,7 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
             wholeWord,
         })
 
+        onSearchBarAction?.()
         if (!newQuery.eq(query)) {
             setQuery(newQuery)
             view.dispatch({ effects: setSearchQuery.of(newQuery) })
@@ -121,6 +122,7 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
     useEffect(() => {
         if (!defaultQuery.eq(query)) {
             setMatchesCount(getUpdatedSearchMatchesCount(defaultQuery, view))
+            onSearchBarAction?.()
             setQuery(defaultQuery)
         }
     }, [defaultQuery])
@@ -162,6 +164,7 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
     const onFindKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
         e.stopPropagation()
         if (e.key === 'Enter') {
+            onSearchBarAction?.()
             e.preventDefault()
             if (e.shiftKey) {
                 onPrevious()
@@ -431,62 +434,65 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
     )
 }
 
-export const codeEditorFindReplace = (view: EditorView): Panel => {
-    const dom = document.createElement('div')
+export const getCodeEditorFindReplace =
+    (onSearchBarAction: CodeEditorProps['onSearchBarAction']) =>
+    (view: EditorView): Panel => {
+        const dom = document.createElement('div')
 
-    const keydown = (e: KeyboardEvent) => {
-        if (runScopeHandlers(view, e, 'search-panel')) {
-            e.preventDefault()
-            e.stopPropagation()
+        const keydown = (e: KeyboardEvent) => {
+            if (runScopeHandlers(view, e, 'search-panel')) {
+                e.preventDefault()
+                e.stopPropagation()
+            }
         }
-    }
 
-    dom.className =
-        'code-editor__search mt-8 mb-4 mr-8 ml-auto p-5 bg__secondary dc__border br-4 dc__w-fit-content fs-14'
-    dom.onkeydown = keydown
-
-    const renderFindReplace = () => {
-        render(
-            <FindReplace
-                view={view}
-                defaultQuery={getSearchQuery(view.state)}
-                defaultShowReplace={getShowReplaceField(view.state)}
-            />,
-            dom,
-        )
-    }
+        dom.className =
+            'code-editor__search mt-8 mb-4 mr-8 ml-auto p-5 bg__secondary dc__border br-4 dc__w-fit-content fs-14'
+        dom.onkeydown = keydown
+
+        const renderFindReplace = () => {
+            render(
+                <FindReplace
+                    view={view}
+                    defaultQuery={getSearchQuery(view.state)}
+                    defaultShowReplace={getShowReplaceField(view.state)}
+                    onSearchBarAction={onSearchBarAction}
+                />,
+                dom,
+            )
+        }
 
-    const mount = () => {
-        requestAnimationFrame(() => {
-            const findField = document.querySelector('[data-code-editor-find]') as HTMLInputElement
-            findField?.focus()
-            findField?.select()
-        })
-    }
+        const mount = () => {
+            requestAnimationFrame(() => {
+                const findField = document.querySelector('[data-code-editor-find]') as HTMLInputElement
+                findField?.focus()
+                findField?.select()
+            })
+        }
 
-    const update = ({ transactions, docChanged, state, startState }: ViewUpdate) => {
-        transactions.forEach((tr) => {
-            tr.effects.forEach((effect) => {
-                if (effect.is(setSearchQuery)) {
-                    renderFindReplace()
-                }
-                if (effect.is(setShowReplaceField)) {
-                    renderFindReplace()
-                }
+        const update = ({ transactions, docChanged, state, startState }: ViewUpdate) => {
+            transactions.forEach((tr) => {
+                tr.effects.forEach((effect) => {
+                    if (effect.is(setSearchQuery)) {
+                        renderFindReplace()
+                    }
+                    if (effect.is(setShowReplaceField)) {
+                        renderFindReplace()
+                    }
+                })
             })
-        })
 
-        if (docChanged || state.readOnly !== startState.readOnly) {
-            renderFindReplace()
+            if (docChanged || state.readOnly !== startState.readOnly) {
+                renderFindReplace()
+            }
         }
-    }
 
-    renderFindReplace()
+        renderFindReplace()
 
-    return {
-        top: true,
-        dom,
-        mount,
-        update,
+        return {
+            top: true,
+            dom,
+            mount,
+            update,
+        }
     }
-}

src/Shared/Components/CodeEditor/types.ts

@@ -79,6 +79,7 @@ export type CodeEditorProps<DiffView extends boolean = false> = {
     diffView?: DiffView
     theme?: AppThemeType
     onOpenSearchPanel?: () => void
+    onSearchBarAction?: () => void
 } & CodeEditorPropsBasedOnDiffView<DiffView>
 
 export interface GetCodeEditorHeightReturnType {
@@ -97,7 +98,7 @@ export type FindReplaceQuery = Partial<
     Pick<SearchQuery, 'search' | 'wholeWord' | 'regexp' | 'replace' | 'caseSensitive'>
 >
 
-export interface FindReplaceProps {
+export interface FindReplaceProps extends Pick<CodeEditorProps, 'onSearchBarAction'> {
     view: EditorView
     /** Default value for Search Query state. */
     defaultQuery: SearchQuery