Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Monaco Editor] Add Search functionality #188337

Merged
merged 5 commits into from
Jul 23, 2024
Merged

[Monaco Editor] Add Search functionality #188337

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f2a4bb
[Monaco Editor] Add Search functionality
ElenaStoeva Jul 15, 2024
3504ed1
Disable find action by default
ElenaStoeva Jul 16, 2024
bab9b40
Remove default false value of prop
ElenaStoeva Jul 17, 2024
76b5618
Merge branch 'main' into monaco-editor/add-search-functionality
ElenaStoeva Jul 17, 2024
7c1537d
Merge branch 'main' into monaco-editor/add-search-functionality
ElenaStoeva Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/kbn-monaco/src/monaco_imports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
13 changes: 13 additions & 0 deletions packages/shared-ux/code_editor/impl/code_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,11 @@ export interface CodeEditorProps {
*/
accessibilityOverlayEnabled?: boolean;

/**
* Enables the Search bar functionality in the editor. Defaults to `false`.
*/
enableFindAction?: boolean;

dataTestSubj?: string;
}

Expand Down Expand Up @@ -188,6 +193,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
}),
fitToContent,
accessibilityOverlayEnabled = true,
enableFindAction = false,
Copy link
Contributor

@eokoneyo eokoneyo Jul 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we don't actually need to specify false, undefined is also a falsy value.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, that makes sense. Changed with bab9b40.

dataTestSubj,
}) => {
const { colorMode, euiTheme } = useEuiTheme();
Expand Down Expand Up @@ -375,6 +381,12 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: instead of registering the keybindings with a null action, I think we could only register the key binding if the find action is enabled

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we added the find action import in packages/kbn-monaco/src/monaco_imports.ts, this action is now enabled by default in every Monaco editor, unless we disable it. Therefore, we need to specify explicitly that the key binding should run no action; otherwise it would run the find action by default.

});
},
[
overrideEditorWillMount,
Expand All @@ -385,6 +397,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
hoverProvider,
codeActions,
languageConfiguration,
enableFindAction,
]
);

Expand Down
1 change: 1 addition & 0 deletions src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
theme: CONSOLE_THEME_ID,
}}
suggestionProvider={suggestionProvider}
enableFindAction={true}
/>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ export const MonacoEditorOutput: FunctionComponent = () => {
fullWidth={true}
editorDidMount={editorDidMountCallback}
editorWillUnmount={editorWillUnmountCallback}
enableFindAction={true}
options={{
readOnly: true,
fontSize: readOnlySettings.fontSize,
Expand Down