From 3c97fbaac54a943164ae240cb792a010e98e65b7 Mon Sep 17 00:00:00 2001
From: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com>
Date: Tue, 23 Jul 2024 16:42:41 +0100
Subject: [PATCH] [Monaco Editor] Add Search functionality (#188337)
Fixes https://github.com//elastic/kibana/issues/186635
## Summary
This PR adds the find action to the Monaco code editor, which enables
the search bar functionality as it is needed for Console with Monaco.
The functionality is disabled by default.
**How to test:**
1. Open Console and verify that Command/Ctrl + f opens the search bar
(should work for both the editor and the output panel).
2. Open any other code editor in Kibana and verify that the search
functionality is disabled.
---
packages/kbn-monaco/src/monaco_imports.ts | 2 ++
packages/shared-ux/code_editor/impl/code_editor.tsx | 13 +++++++++++++
.../containers/editor/monaco/monaco_editor.tsx | 1 +
.../editor/monaco/monaco_editor_output.tsx | 1 +
4 files changed, 17 insertions(+)
diff --git a/packages/kbn-monaco/src/monaco_imports.ts b/packages/kbn-monaco/src/monaco_imports.ts
index 95f2fc44d857c4..41109a35fa160d 100644
--- a/packages/kbn-monaco/src/monaco_imports.ts
+++ b/packages/kbn-monaco/src/monaco_imports.ts
@@ -30,6 +30,8 @@ import 'monaco-editor/esm/vs/editor/contrib/codeAction/browser/codeActionContrib
import 'monaco-editor/esm/vs/editor/contrib/codeAction/browser/codeActionMenu.js';
import 'monaco-editor/esm/vs/editor/contrib/codeAction/browser/codeActionModel.js';
+import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController'; // Needed for Search bar functionality
+
import 'monaco-editor/esm/vs/language/json/monaco.contribution.js';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js'; // Needed for basic javascript support
import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution.js'; // Needed for basic xml support
diff --git a/packages/shared-ux/code_editor/impl/code_editor.tsx b/packages/shared-ux/code_editor/impl/code_editor.tsx
index 35dcb275b52f9d..00044937e0d03b 100644
--- a/packages/shared-ux/code_editor/impl/code_editor.tsx
+++ b/packages/shared-ux/code_editor/impl/code_editor.tsx
@@ -156,6 +156,11 @@ export interface CodeEditorProps {
*/
accessibilityOverlayEnabled?: boolean;
+ /**
+ * Enables the Search bar functionality in the editor. Disabled by default.
+ */
+ enableFindAction?: boolean;
+
dataTestSubj?: string;
}
@@ -188,6 +193,7 @@ export const CodeEditor: React.FC = ({
}),
fitToContent,
accessibilityOverlayEnabled = true,
+ enableFindAction,
dataTestSubj,
}) => {
const { colorMode, euiTheme } = useEuiTheme();
@@ -375,6 +381,12 @@ export const CodeEditor: React.FC = ({
monaco.languages.registerCodeActionProvider(languageId, codeActions);
}
});
+
+ monaco.editor.addKeybindingRule({
+ // eslint-disable-next-line no-bitwise
+ keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF,
+ command: enableFindAction ? 'actions.find' : null,
+ });
},
[
overrideEditorWillMount,
@@ -385,6 +397,7 @@ export const CodeEditor: React.FC = ({
hoverProvider,
codeActions,
languageConfiguration,
+ enableFindAction,
]
);
diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx
index 48187757c562c9..7e6c5153a108f7 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx
+++ b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx
@@ -166,6 +166,7 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
theme: CONSOLE_THEME_ID,
}}
suggestionProvider={suggestionProvider}
+ enableFindAction={true}
/>
);
diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx
index 992b88705229a2..dfbcfd7e4aa75d 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx
+++ b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx
@@ -99,6 +99,7 @@ export const MonacoEditorOutput: FunctionComponent = () => {
fullWidth={true}
editorDidMount={editorDidMountCallback}
editorWillUnmount={editorWillUnmountCallback}
+ enableFindAction={true}
options={{
readOnly: true,
fontSize: readOnlySettings.fontSize,