feat: use monaco-yql-languages for syntax highlight (#1063)

Author: Raubzeug

config-overrides.js

@@ -1,5 +1,7 @@
 const path = require('path');
 
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
 const srcRoot = path.resolve(__dirname, 'src');
 const uiKitRoot = path.resolve(__dirname, 'node_modules/@gravity-ui/uikit');
 const uiKitIconsRoot = path.resolve(__dirname, 'node_modules/@gravity-ui/icons');
@@ -21,6 +23,16 @@ module.exports = {
         if (env === 'production') {
             config.output.path = path.resolve(__dirname, 'build/');
         }
+        config.plugins.push(
+            new MonacoWebpackPlugin({
+                customLanguages: [
+                    {
+                        label: 'yql',
+                        entry: 'monaco-yql-languages/build/monaco.contribution',
+                    },
+                ],
+            }),
+        );
 
         return config;
     },

package-lock.json

@@ -147,6 +147,8 @@
     "husky": "^9.0.11",
     "jest-transform-css": "^6.0.1",
     "lint-staged": "^15.2.7",
+    "monaco-editor-webpack-plugin": "^7.1.0",
+    "monaco-yql-languages": "^1.0.6",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",

package.json

@@ -2,7 +2,5 @@ import {lazyComponent} from '../../utils/lazyComponent';
 
 export const MonacoEditor = lazyComponent(async () => {
     const Editor = (await import('react-monaco-editor')).default;
-    const {registerLanguages} = await import('../../utils/monaco');
-    registerLanguages();
     return {Editor};
 }, 'Editor');

src/components/MonacoEditor/MonacoEditor.tsx

@@ -13,7 +13,7 @@ import {explainVersions} from '../../../../store/reducers/explainQuery/utils';
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 import {cn} from '../../../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
-import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco/s-expression/constants';
+import {S_EXPRESSION_LANGUAGE_ID} from '../../../../utils/monaco/constats';
 import {parseQueryErrorToString} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
@@ -141,7 +141,7 @@ export function ExplainResult(props) {
         const content = (
             <div className={b('ast')}>
                 <MonacoEditor
-                    language={LANGUAGE_S_EXPRESSION_ID}
+                    language={S_EXPRESSION_LANGUAGE_ID}
                     value={props.ast}
                     options={EDITOR_OPTIONS}
                     wrappingIndent="indent"

src/containers/Tenant/Query/ExplainResult/ExplainResult.js

@@ -30,7 +30,7 @@ import {
     QUERY_USE_MULTI_SCHEMA_KEY,
 } from '../../../../utils/constants';
 import {useQueryModes, useSetting} from '../../../../utils/hooks';
-import {LANGUAGE_YQL_ID} from '../../../../utils/monaco/yql/constants';
+import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constats';
 import {QUERY_ACTIONS} from '../../../../utils/query';
 import type {InitialPaneState} from '../../utils/paneVisibilityToggleHelpers';
 import {
@@ -382,7 +382,7 @@ function QueryEditor(props: QueryEditorProps) {
                     <div className={b('monaco-wrapper')}>
                         <div className={b('monaco')}>
                             <MonacoEditor
-                                language={LANGUAGE_YQL_ID}
+                                language={YQL_LANGUAGE_ID}
                                 value={executeQuery.input}
                                 options={editorOptions}
                                 onChange={onChange}

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

@@ -0,0 +1,2 @@
+export const S_EXPRESSION_LANGUAGE_ID = 's-expression';
+export const YQL_LANGUAGE_ID = 'yql';