chore(yql): highlight using monaco-yql-languages [YTFRONT-4282]#1409
Open
vityaman wants to merge 1 commit intoytsaurus:mainfrom
Open
chore(yql): highlight using monaco-yql-languages [YTFRONT-4282]#1409vityaman wants to merge 1 commit intoytsaurus:mainfrom
vityaman wants to merge 1 commit intoytsaurus:mainfrom
Conversation
Reviewer's GuideReplaces the locally maintained YQL Monaco language definition with the upstream monaco-yql-languages package, aligns editor themes with the new token set, and updates dependencies related to Monaco/YQL autocomplete and suggestions weighting. Sequence diagram for YQL Monaco language and theme usagesequenceDiagram
actor User
participant YTWebUI
participant MonacoEditor
participant LocalYqlModule as MonacoYqlYql
participant ExternalYqlPkg as MonacoYqlLanguagesPkg
User ->> YTWebUI: Open YQL editor
YTWebUI ->> MonacoEditor: Initialize editor instance
MonacoEditor ->> LocalYqlModule: Request conf and language
LocalYqlModule ->> ExternalYqlPkg: getLanguage(ansi: false) and conf
ExternalYqlPkg -->> LocalYqlModule: LanguageConfiguration and MonarchLanguage
LocalYqlModule -->> MonacoEditor: Provide conf and language
YTWebUI ->> MonacoEditor: Apply YT_LIGHT_HC and YT_DARK_HC themes
loop Typing query
User ->> MonacoEditor: Type YQL query
MonacoEditor ->> MonacoEditor: Tokenize using monaco-yql-languages
MonacoEditor ->> MonacoEditor: Colorize tokens via updated rules
end
Class diagram for Monaco YQL language module, themes, and suggestionsclassDiagram
class MonacoYqlYql {
+conf
+language
+language = getLanguage(ansi: boolean)
}
class MonacoEditorThemes {
+lightRules: TokenRule[]
+darkRules: TokenRule[]
+defineLightTheme(): void
+defineDarkTheme(): void
}
class TokenRule {
+token: string
+foreground: string
+fontStyle: string
}
class GenerateSuggestions {
+SuggestionsWeight: Record~SuggestionType, number~
}
class SuggestionType {
<<enumeration>>
suggestTables
suggestPragmas
binding
connection
suggestVariables
suggestColumns
suggestColumnAliases
suggestKeywords
}
MonacoEditorThemes --> TokenRule : uses
GenerateSuggestions --> SuggestionType : uses
MonacoYqlYql ..> MonacoEditorThemes : token names align
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
vityaman
force-pushed
the
YTFRONT-4282
branch
2 times, most recently
from
727d687 to
83fd408
Compare
vityaman
requested review from
SimbiozizV,
evtaranov and
ma-efremoff
as code owners
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- The
getLanguageandconfimports are taken frommonaco-yql-languages/build/..., which looks like an internal path; if the package exposes stable top-level exports, prefer those to avoid breakage on internal layout changes. - The light and dark theme rules now contain duplicate token entries (e.g.
string.sql,comment) and copy‑pasted color definitions; consider consolidating these in a shared constants module and removing duplicates to keep the theme configuration easier to maintain.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `getLanguage` and `conf` imports are taken from `monaco-yql-languages/build/...`, which looks like an internal path; if the package exposes stable top-level exports, prefer those to avoid breakage on internal layout changes.
- The light and dark theme rules now contain duplicate token entries (e.g. `string.sql`, `comment`) and copy‑pasted color definitions; consider consolidating these in a shared constants module and removing duplicates to keep the theme configuration easier to maintain.
## Individual Comments
### Comment 1
<location> `packages/ui/src/ui/components/MonacoEditor/MonacoEditorThemes.tsx:13-15` </location>
<code_context>
+ {token: 'string.tablepath', foreground: '338186'},
+ {token: 'constant.yql', foreground: '608b4e'},
+ {token: 'keyword.type', foreground: '4d932d'},
+ {token: 'string.sql', foreground: 'a31515'},
+ {token: 'support.function', foreground: '7a3e9d'},
+ {token: 'constant.other.color', foreground: '7a3e9d'},
</code_context>
<issue_to_address>
**suggestion:** Avoid duplicating the same `string.sql` rule in `lightRules`.
`lightRules` now has two identical entries for `token: 'string.sql', foreground: 'a31515'` (one in the new block and one in the existing rules). Please consolidate to a single `string.sql` rule to avoid confusion and simplify future changes.
```suggestion
{token: 'tablepath', foreground: '3e999f'},
{token: 'path', foreground: '3e999f', fontStyle: 'underline'},
});
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
13
to
15
| {token: 'tablepath', foreground: '3e999f'}, | ||
| {token: 'path', foreground: '3e999f', fontStyle: 'underline'}, | ||
| {token: 'string.sql', foreground: 'a31515'}, |
There was a problem hiding this comment.
suggestion: Avoid duplicating the same string.sql rule in lightRules.
lightRules now has two identical entries for token: 'string.sql', foreground: 'a31515' (one in the new block and one in the existing rules). Please consolidate to a single string.sql rule to avoid confusion and simplify future changes.
Suggested change
| {token: 'tablepath', foreground: '3e999f'}, | |
| {token: 'path', foreground: '3e999f', fontStyle: 'underline'}, | |
| {token: 'string.sql', foreground: 'a31515'}, | |
| {token: 'tablepath', foreground: '3e999f'}, | |
| {token: 'path', foreground: '3e999f', fontStyle: 'underline'}, | |
| }); |
Author
|
@Raubzeug, is it possible somehow to share the YQL themes? Now I just copy-pasted a JSON-object with rules. Are there other ways to share, except a rules extraction to a separate variables? How the theme is shared between YDB Web UI and YQL Web UI now? |
SimbiozizV
reviewed
Jan 13, 2026
Collaborator
There was a problem hiding this comment.
I installed all the dependencies, but I get the error Cannot find module 'monaco-yql-languages/build/yql/yql' when starting the project.
Author
There was a problem hiding this comment.
I removed it. Package monaco-yql-languages is intended to be used only with monaco-editor-webpack-plugin.
I noticed that this plugin is already added to the project. Surprisingly, only an addition of the monaco-yql-languages as a dependency to package.json triggered theirs YQL definition registration.
Theirs registration was overwritten by the registration at libs/monaco-yql-languages/_.contribution.ts, so I disabled it for MonacoLanguage.YQL. It seems, that it also let us to overwrite the yql_ansi, which is actually YT QL (LOL), and s-expressions, which is actually SPYT (LOL 2).
I tried to make autocompletion work, but failed. I noticed that it does not work even on the main branch. I hope, that it should be registered as always and also overwrite autocompletion from the monaco-yql-languages (if it registers it somehow).
@SimbiozizV, can you, please, test the solution again?
Raubzeug
reviewed
Jan 13, 2026
vityaman
force-pushed
the
YTFRONT-4282
branch
4 times, most recently
from
7ba47dd to
9312ddc
Compare
Signed-off-by: vityaman <vityaman.dev@yandex.ru>
vityaman
force-pushed
the
YTFRONT-4282
branch
from
9312ddc to
2f61dc5
Compare
vityaman
commented
Feb 2, 2026
| lazyLanguageLoader.load().then((mod) => { | ||
| languages.setLanguageConfiguration(languageId, mod.conf); | ||
|
|
||
| if (languageId !== MonacoLanguage.YQL) { |
Author
There was a problem hiding this comment.
Suggested change
| if (languageId !== MonacoLanguage.YQL) { | |
| // YQL is registered via `ydb-platform/monaco-yql-languages` | |
| if (languageId !== MonacoLanguage.YQL) { |
SimbiozizV
reviewed
Feb 18, 2026
|
|
||
| {token: 'tablepath', foreground: '3e999f'}, | ||
| {token: 'path', foreground: '3e999f', fontStyle: 'underline'}, | ||
| {token: 'string.sql', foreground: 'a31515'}, |
Collaborator
There was a problem hiding this comment.
There were 2 rules for string.sql in one list.
| lazyLanguageLoader.load().then((mod) => { | ||
| languages.setLanguageConfiguration(languageId, mod.conf); | ||
|
|
||
| if (languageId !== MonacoLanguage.YQL) { |
Collaborator
There was a problem hiding this comment.
Perhaps because of this rule, yql has now lost its highlighting.
|
|
||
| {token: 'tablepath', foreground: '3e999f'}, | ||
| {token: 'path', foreground: '3e999f', fontStyle: 'underline'}, | ||
| {token: 'string.sql', foreground: 'ce9178'}, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
https://nda.ya.ru/t/WwcKXZO07Qv4JL
Current YQL syntax highlighting at the YT Web UI seems so outdated. This patch updates it by using the package `monaco-yql-languages` maintained by YQL UI team members.Testing Query:
https://github.com/ydb-platform/ydb/blob/main/yql/essentials/tools/yql_highlight/ut/query.yql
Old vs New syntax highlighting:
Summary by Sourcery
Update YQL Monaco integration to use the shared monaco-yql-languages package and align editor theming and autocomplete with it.
New Features:
Enhancements:
Build: