[ES|QL] Allows to comment out the current line with the keyboard (#184637)

## Summary

Closes https://github.com/elastic/kibana/issues/184521

It allows the users to comment out the current line by typing `CMD + /`,
bringing it closer to what a developer would expect.


![meow](11199afa-b7d6-4751-b6fa-7bf7389c04ef)
This commit is contained in:
Stratoula Kalafateli 2024-06-07 17:57:44 +02:00 committed by GitHub
parent 1b8236375a
commit 5193d45698
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -237,6 +237,28 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
}
}, [language, onTextLangQuerySubmit, abortController, isQueryLoading, allowQueryCancellation]);
const onCommentLine = useCallback(() => {
const currentPosition = editor1.current?.getPosition();
const lineNumber = currentPosition?.lineNumber;
if (lineNumber) {
const lineContent = editorModel.current?.getLineContent(lineNumber) ?? '';
const hasComment = lineContent?.startsWith('//');
const commentedLine = hasComment ? lineContent?.replace('//', '') : `//${lineContent}`;
// executeEdits allows to keep edit in history
editor1.current?.executeEdits('comment', [
{
range: {
startLineNumber: lineNumber,
startColumn: 0,
endLineNumber: lineNumber,
endColumn: (lineContent?.length ?? 0) + 1,
},
text: commentedLine,
},
]);
}
}, []);
useEffect(() => {
if (!isLoading) setIsQueryLoading(false);
}, [isLoading]);
@ -903,6 +925,13 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
onQuerySubmit
);
// on CMD/CTRL + / comment out the entire line
editor.addCommand(
// eslint-disable-next-line no-bitwise
monaco.KeyMod.CtrlCmd | monaco.KeyCode.Slash,
onCommentLine
);
setMeasuredEditorWidth(editor.getLayoutInfo().width);
setMeasuredContentWidth(editor.getContentWidth());