feat: refactor search panel commands and update props for CodeEditor

Author: AbhishekA1509

src/Shared/Components/CodeEditor/CodeEditor.tsx

@@ -33,7 +33,7 @@ import {
 } from '@uiw/react-codemirror'
 
 import { DEFAULT_JSON_SCHEMA_URI, MODES } from '@Common/Constants'
-import { cleanKubeManifest } from '@Common/Helper'
+import { cleanKubeManifest, noop } from '@Common/Helper'
 import { getUniqueId } from '@Shared/Helpers'
 import { AppThemeType, useTheme } from '@Shared/Providers'
 
@@ -43,8 +43,8 @@ import { getCodeEditorTheme } from './CodeEditor.theme'
 import { CodeEditorRenderer } from './CodeEditorRenderer'
 import {
     blurOnEscape,
-    openSearchPanel,
-    openSearchPanelWithReplace,
+    getOpenSearchPanel,
+    getOpenSearchPanelWithReplace,
     replaceAll,
     showReplaceFieldState,
 } from './Commands'
@@ -89,6 +89,7 @@ const CodeEditor = <DiffView extends boolean = false>({
     onFocus,
     autoFocus,
     disableSearch = false,
+    onOpenSearchPanel = noop,
 }: CodeEditorProps<DiffView>) => {
     // HOOKS
     const { appTheme } = useTheme()
@@ -203,9 +204,11 @@ const CodeEditor = <DiffView extends boolean = false>({
         themeExtension,
         keymap.of([
             ...vscodeKeymap.filter(({ key }) => key !== 'Mod-Alt-Enter' && key !== 'Mod-Enter' && key !== 'Mod-f'),
-            ...(!disableSearch ? [{ key: 'Mod-f', run: openSearchPanel, scope: 'editor search-panel' }] : []),
+            ...(!disableSearch
+                ? [{ key: 'Mod-f', run: getOpenSearchPanel(onOpenSearchPanel), scope: 'editor search-panel' }]
+                : []),
             { key: 'Mod-Enter', run: replaceAll, scope: 'editor search-panel' },
-            { key: 'Mod-Alt-f', run: openSearchPanelWithReplace, scope: 'editor search-panel' },
+            { key: 'Mod-Alt-f', run: getOpenSearchPanelWithReplace(onOpenSearchPanel), scope: 'editor search-panel' },
             { key: 'Escape', run: blurOnEscape, stopPropagation: true },
         ]),
         indentationMarkers(),

src/Shared/Components/CodeEditor/Commands/findAndReplace.ts

@@ -37,19 +37,22 @@ export const getShowReplaceField = (state: EditorState) => {
     return curState || false
 }
 
-export const openSearchPanel: Command = (view: EditorView) => {
-    view.dispatch({
-        effects: [setShowReplaceField.of(searchPanelOpen(view.state) ? getShowReplaceField(view.state) : false)],
-    })
-    cmOpenSearchPanel(view)
-    return true
-}
+export const getOpenSearchPanel: (onOpenSearchPanel: () => void) => Command =
+    (onOpenSearchPanel: () => void) => (view: EditorView) => {
+        view.dispatch({
+            effects: [setShowReplaceField.of(searchPanelOpen(view.state) ? getShowReplaceField(view.state) : false)],
+        })
+        cmOpenSearchPanel(view)
+        onOpenSearchPanel()
+        return true
+    }
 
-export const openSearchPanelWithReplace: Command = (view: EditorView) => {
-    openSearchPanel(view)
-    view.dispatch({ effects: [setShowReplaceField.of(!view.state.readOnly && true)] })
-    return true
-}
+export const getOpenSearchPanelWithReplace: (onOpenSearchPanel: () => void) => Command =
+    (onOpenSearchPanel: () => void) => (view: EditorView) => {
+        getOpenSearchPanel(onOpenSearchPanel)(view)
+        view.dispatch({ effects: [setShowReplaceField.of(!view.state.readOnly && true)] })
+        return true
+    }
 
 export const replaceAll: Command = (view: EditorView) => {
     const isReplaceEnabled = getShowReplaceField(view.state)

src/Shared/Components/CodeEditor/types.ts

@@ -78,6 +78,7 @@ export type CodeEditorProps<DiffView extends boolean = false> = {
     disableSearch?: boolean
     diffView?: DiffView
     theme?: AppThemeType
+    onOpenSearchPanel?: () => void
 } & CodeEditorPropsBasedOnDiffView<DiffView>
 
 export interface GetCodeEditorHeightReturnType {