From 7f2a4bbe62f77e0c991fab9b5f993c108ac8ae01 Mon Sep 17 00:00:00 2001 From: Elena Stoeva Date: Mon, 15 Jul 2024 18:09:30 +0100 Subject: [PATCH 1/3] [Monaco Editor] Add Search functionality --- packages/kbn-monaco/src/monaco_imports.ts | 2 ++ 1 file changed, 2 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 From 3504ed1611326a898bb00d4036a0d5c24489cade Mon Sep 17 00:00:00 2001 From: Elena Stoeva Date: Tue, 16 Jul 2024 16:38:00 +0100 Subject: [PATCH 2/3] Disable find action by default --- packages/shared-ux/code_editor/impl/code_editor.tsx | 13 +++++++++++++ .../containers/editor/monaco/monaco_editor.tsx | 1 + .../editor/monaco/monaco_editor_output.tsx | 1 + 3 files changed, 15 insertions(+) diff --git a/packages/shared-ux/code_editor/impl/code_editor.tsx b/packages/shared-ux/code_editor/impl/code_editor.tsx index 35dcb275b52f9d..bbae760d00b76f 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. Defaults to `false`. + */ + enableFindAction?: boolean; + dataTestSubj?: string; } @@ -188,6 +193,7 @@ export const CodeEditor: React.FC = ({ }), fitToContent, accessibilityOverlayEnabled = true, + enableFindAction = false, 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 02f978f7919a59..0eb04f3e4d4030 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 6f092f08c51e7c..ebec23974cc874 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, From bab9b40088d46b6f479d825d1dc188ad2d85d758 Mon Sep 17 00:00:00 2001 From: Elena Stoeva Date: Wed, 17 Jul 2024 11:02:42 +0100 Subject: [PATCH 3/3] Remove default false value of prop --- packages/shared-ux/code_editor/impl/code_editor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/shared-ux/code_editor/impl/code_editor.tsx b/packages/shared-ux/code_editor/impl/code_editor.tsx index bbae760d00b76f..00044937e0d03b 100644 --- a/packages/shared-ux/code_editor/impl/code_editor.tsx +++ b/packages/shared-ux/code_editor/impl/code_editor.tsx @@ -157,7 +157,7 @@ export interface CodeEditorProps { accessibilityOverlayEnabled?: boolean; /** - * Enables the Search bar functionality in the editor. Defaults to `false`. + * Enables the Search bar functionality in the editor. Disabled by default. */ enableFindAction?: boolean; @@ -193,7 +193,7 @@ export const CodeEditor: React.FC = ({ }), fitToContent, accessibilityOverlayEnabled = true, - enableFindAction = false, + enableFindAction, dataTestSubj, }) => { const { colorMode, euiTheme } = useEuiTheme();