feat: Codemirror - FindAndReplace - shortcuts update, replace shortcut working even when replace field is hidden fix

Author: RohitRaj011

src/Common/CodeMirror/CodeEditor.tsx

@@ -35,6 +35,7 @@ import { cleanKubeManifest, useEffectAfterMount } from '@Common/Helper'
 import { DEFAULT_JSON_SCHEMA_URI, MODES } from '@Common/Constants'
 
 import { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
+import { openSearchPanel, openSearchPanelWithReplace, replaceAll, showReplaceFieldState } from './Commands'
 import { CodeEditorContextProps, CodeEditorProps } from './types'
 import { CodeEditorReducer, initialState, parseValueToCode } from './CodeEditor.reducer'
 import { getFoldGutterElement, getLanguageExtension, getValidationSchema } from './utils'
@@ -197,14 +198,20 @@ const CodeEditor = <DiffView extends boolean = false>({
     const baseExtensions: Extension[] = [
         basicSetup(basicSetupOptions),
         themeExtension,
-        keymap.of(vscodeKeymap.filter(({ key }) => !disableSearch || key !== 'Mod-f')),
+        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' }] : []),
+            { key: 'Mod-Enter', run: replaceAll, scope: 'editor search-panel' },
+            { key: 'Mod-Alt-f', run: openSearchPanelWithReplace, scope: 'editor search-panel' },
+        ]),
         indentationMarkers(),
         getLanguageExtension(mode),
         foldingCompartment.of(foldConfig),
         lintGutter(),
         search({
             createPanel: codeEditorFindReplace,
         }),
+        showReplaceFieldState,
         ...(mode === MODES.YAML ? [yamlHighlight] : []),
     ]
 

src/Common/CodeMirror/Commands/findAndReplace.ts

@@ -0,0 +1,44 @@
+import { openSearchPanel as cmOpenSearchPanel, replaceAll as cmReplaceAll, searchPanelOpen } from '@codemirror/search'
+import { Command, EditorState, EditorView, StateEffect, StateField } from '@uiw/react-codemirror'
+
+export const setShowReplaceField = StateEffect.define<boolean>()
+
+export const showReplaceFieldState = StateField.define<boolean>({
+    create() {
+        return false
+    },
+    update(value, tr) {
+        const effect = tr.effects.find((_effect) => _effect.is(setShowReplaceField))
+        if (effect) {
+            return effect.value
+        }
+        return value
+    },
+})
+
+export const getShowReplaceField = (state: EditorState) => {
+    const curState = state.field(showReplaceFieldState, false)
+    return curState || false
+}
+
+export const openSearchPanel: Command = (view: EditorView) => {
+    cmOpenSearchPanel(view)
+    view.dispatch({
+        effects: [setShowReplaceField.of(searchPanelOpen(view.state) ? getShowReplaceField(view.state) : false)],
+    })
+    return true
+}
+
+export const openSearchPanelWithReplace: Command = (view: EditorView) => {
+    openSearchPanel(view)
+    view.dispatch({ effects: [setShowReplaceField.of(true)] })
+    return true
+}
+
+export const replaceAll: Command = (view: EditorView) => {
+    const isReplaceEnabled = getShowReplaceField(view.state)
+    if (isReplaceEnabled) {
+        cmReplaceAll(view)
+    }
+    return true
+}

src/Common/CodeMirror/Commands/index.ts

@@ -0,0 +1 @@
+export * from './findAndReplace'

src/Common/CodeMirror/Extensions/findAndReplace.tsx

@@ -51,6 +51,7 @@ import {
     REPLACE_SHORTCUT_KEYS,
 } from '../CodeEditor.constants'
 import { getFindReplaceToggleButtonIconClass, getUpdatedSearchMatchesCount } from '../utils'
+import { getShowReplaceField, setShowReplaceField } from '../Commands'
 
 const FindReplaceToggleButton = ({
     isChecked,
@@ -84,11 +85,11 @@ const FindReplaceToggleButton = ({
     )
 }
 
-const FindReplace = ({ view, defaultQuery }: FindReplaceProps) => {
+const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProps) => {
     // STATES
     const [query, setQuery] = useState<SearchQuery>(new SearchQuery({ search: '' }))
     const [matchesCount, setMatchesCount] = useState({ count: 0, current: 1 })
-    const [showReplace, setShowReplace] = useState(!!query.replace)
+    const [showReplace, setShowReplace] = useState<boolean>(defaultShowReplace)
 
     // CONSTANTS
     const isPreviousNextButtonDisabled = !matchesCount.count
@@ -128,6 +129,12 @@ const FindReplace = ({ view, defaultQuery }: FindReplaceProps) => {
         setMatchesCount(getUpdatedSearchMatchesCount(defaultQuery, view))
     }, [view.state.doc.length])
 
+    useEffect(() => {
+        if (defaultShowReplace !== showReplace) {
+            setShowReplace(defaultShowReplace)
+        }
+    }, [defaultShowReplace])
+
     useEffect(() => {
         if (isReadOnly && showReplace) {
             setShowReplace(false)
@@ -200,6 +207,7 @@ const FindReplace = ({ view, defaultQuery }: FindReplaceProps) => {
 
     const handleReplaceVisibility = () => {
         setShowReplace(!showReplace)
+        view.dispatch({ effects: [setShowReplaceField.of(!showReplace)] })
     }
 
     const handleClose = (e: MouseEvent<HTMLButtonElement>) => {
@@ -431,11 +439,19 @@ export const codeEditorFindReplace = (view: EditorView): Panel => {
         }
     }
 
-    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'
+    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)} />, dom)
+        render(
+            <FindReplace
+                view={view}
+                defaultQuery={getSearchQuery(view.state)}
+                defaultShowReplace={getShowReplaceField(view.state)}
+            />,
+            dom,
+        )
     }
 
     const mount = () => {
@@ -450,6 +466,9 @@ export const codeEditorFindReplace = (view: EditorView): Panel => {
                 if (effect.is(setSearchQuery)) {
                     renderFindReplace()
                 }
+                if (effect.is(setShowReplaceField)) {
+                    renderFindReplace()
+                }
             })
         })
 

src/Common/CodeMirror/types.ts

@@ -98,6 +98,7 @@ export type FindReplaceQuery = Partial<
 export interface FindReplaceProps {
     view: EditorView
     defaultQuery: SearchQuery
+    defaultShowReplace: boolean
 }
 
 // REDUCER TYPES