feat(QueryEditor): add error highlighting

Author: Raubzeug

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -42,6 +42,7 @@ import {
 import {useChangedQuerySettings} from '../../../../utils/hooks/useChangedQuerySettings';
 import {useLastQueryExecutionSettings} from '../../../../utils/hooks/useLastQueryExecutionSettings';
 import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constats';
+import {updateErrorsHighlighting} from '../../../../utils/monaco/highlightErrors';
 import {QUERY_ACTIONS} from '../../../../utils/query';
 import type {InitialPaneState} from '../../utils/paneVisibilityToggleHelpers';
 import {
@@ -294,6 +295,7 @@ export default function QueryEditor(props: QueryEditorProps) {
     };
 
     const onChange = (newValue: string) => {
+        updateErrorsHighlighting();
         changeUserInput({input: newValue});
     };
 

src/containers/Tenant/Query/QueryEditor/helpers.ts

@@ -13,6 +13,7 @@ const EDITOR_OPTIONS: EditorOptions = {
     minimap: {
         enabled: false,
     },
+    fixedOverflowWidgets: true,
 };
 
 export function useEditorOptions() {

src/utils/monaco/highlightErrors.ts

@@ -0,0 +1,54 @@
+import {parseYqlQueryWithoutCursor} from '@gravity-ui/websql-autocomplete/yql';
+import {MarkerSeverity, editor} from 'monaco-editor';
+
+const owner = 'ydb';
+
+let errorsHighlightingTimeoutId: ReturnType<typeof setTimeout>;
+
+export function disableErrorsHighlighting(): void {
+    unHighlightErrors();
+}
+
+export function updateErrorsHighlighting(): void {
+    disableErrorsHighlighting();
+
+    clearTimeout(errorsHighlightingTimeoutId);
+    errorsHighlightingTimeoutId = setTimeout(() => highlightErrors(), 500);
+}
+
+function highlightErrors(): void {
+    const model = window.ydbEditor?.getModel();
+    if (!model) {
+        console.error('unable to retrieve model when highlighting errors');
+        return;
+    }
+
+    const errors = parseYqlQueryWithoutCursor(model.getValue()).errors;
+    if (!errors.length) {
+        unHighlightErrors();
+        return;
+    }
+
+    const markers = errors.map(
+        (error): editor.IMarkerData => ({
+            message: 'Syntax error',
+            source: error.message,
+            severity: MarkerSeverity.Error,
+            startLineNumber: error.startLine,
+            startColumn: convertAutocompleteErrorLocationIndexToMonacoIndex(error.startColumn),
+            endLineNumber: error.endLine,
+            endColumn: convertAutocompleteErrorLocationIndexToMonacoIndex(error.endColumn),
+        }),
+    );
+    editor.setModelMarkers(model, owner, markers);
+}
+
+function unHighlightErrors(): void {
+    editor.removeAllMarkers(owner);
+}
+
+function convertAutocompleteErrorLocationIndexToMonacoIndex(
+    autocompleteLocationIndex: number,
+): number {
+    return autocompleteLocationIndex + 1;
+}