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,