feat(QueryEditor): add error highlighting

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,47 @@
+import {parseYqlQueryWithoutCursor} from '@gravity-ui/websql-autocomplete/yql';
+import {MarkerSeverity, editor} from 'monaco-editor';
+
+import i18n from './i18n';
+
+const owner = 'ydb';
+
+let errorsHighlightingTimeoutId: ReturnType<typeof setTimeout>;
+
+export function updateErrorsHighlighting() {
+    unHighlightErrors();
+
+    clearTimeout(errorsHighlightingTimeoutId);
+    errorsHighlightingTimeoutId = setTimeout(() => highlightErrors(), 500);
+}
+
+function highlightErrors() {
+    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 => {
+        const markerColumn = error.startColumn + 1;
+        return {
+            message: i18n('context_syntax-error'),
+            source: error.message,
+            severity: MarkerSeverity.Error,
+            startLineNumber: error.startLine,
+            startColumn: markerColumn,
+            endLineNumber: error.endLine,
+            endColumn: markerColumn,
+        };
+    });
+    editor.setModelMarkers(model, owner, markers);
+}
+
+function unHighlightErrors(): void {
+    editor.removeAllMarkers(owner);
+}

src/utils/monaco/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "context_syntax-error": "Syntax error"
+}

src/utils/monaco/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-monaco';
+
+export default registerKeysets(COMPONENT, {en});