feat: Enable search functionality for CodeMirror editor (#38365)

Author: cpAdm

packages/web/src/components/codeMirrorModule.tsx

@@ -28,6 +28,11 @@ import 'codemirror/addon/display/placeholder';
 import 'codemirror/addon/mode/simple';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/searchcursor';
+import 'codemirror/addon/search/jump-to-line';
+import 'codemirror/addon/dialog/dialog';
+import 'codemirror/addon/dialog/dialog.css';
 
 export type CodeMirror = typeof codemirrorType;
 export default codemirror;

packages/web/src/components/codeMirrorWrapper.css

@@ -185,3 +185,7 @@
 .CodeMirror-placeholder {
   color: var(--vscode-input-placeholderForeground) !important;
 }
+
+.CodeMirror-dialog-top {
+  padding-top: 8px !important;
+}

packages/web/src/components/codeMirrorWrapper.tsx

@@ -108,6 +108,10 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
         placeholder,
         matchBrackets: true,
         autoCloseBrackets: true,
+        extraKeys: {
+          'Ctrl-F': 'findPersistent',
+          'Cmd-F': 'findPersistent'
+        }
       });
       codemirrorRef.current = { cm };
       if (isFocused)