-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TSVB] Replaces EuiCodeEditor 👉 Monaco editor #100684
Changes from 19 commits
bc993ee
e37fcfb
d9ee143
0787ffa
2eb0ac8
713ea21
f772f7a
bb46bfc
670da6e
b21a93a
47b3b22
2a0aa06
ea2bcf0
55f8e07
3f1c0b9
a42f32f
e8cb769
8ddf8fe
b65dbf7
aef246c
cdf60dd
1601e66
1b72e92
5437e26
5398a81
c2448cd
ed05215
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
import { monaco } from './monaco_imports'; | ||
import { LangModule as LangModuleType } from './types'; | ||
|
||
function registerLanguage(language: LangModuleType) { | ||
monaco.languages.register({ id: language.ID }); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: might be slightly easier to read if we destructure these properties at the outset. function registerLanguage(language: LangModuleType) {
const { ID, lexerRules, languageConfiguration } = language;
monaco.languages.register({ id: ID });
monaco.languages.setMonarchTokensProvider( ID, lexerRules);
if (languageConfiguration) {
monaco.languages.setLanguageConfiguration(ID, languageConfiguration);
}
} There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok, I'll do that. |
||
monaco.languages.setMonarchTokensProvider(language.ID, language.lexerRules); | ||
if (language.languageConfiguration) { | ||
monaco.languages.setLanguageConfiguration(language.ID, language.languageConfiguration); | ||
} | ||
} | ||
|
||
export { registerLanguage }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
import { monaco } from './monaco_imports'; | ||
|
||
export interface LangModule { | ||
ID: string; | ||
lexerRules: monaco.languages.IMonarchLanguage; | ||
languageConfiguration?: monaco.languages.LanguageConfiguration; | ||
getSuggestionProvider?: Function; | ||
getSyntaxErrors?: Function; | ||
} | ||
|
||
export interface CompleteLangModule extends LangModule { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why is this type needed? I assume it fixes a TS error related to the PainlessLang, since that's the only place it's being used? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. First I've started fixing those errors, but then I've recognized, that from the engineering perspective, in the future it can appear more complex configurations for languages, you'll want to support (as we have one already). There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
languageConfiguration: monaco.languages.LanguageConfiguration; | ||
getSuggestionProvider: Function; | ||
getSyntaxErrors: Function; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,4 +6,4 @@ | |
* Side Public License, v 1. | ||
*/ | ||
|
||
export const LANG = 'handlebars_url'; | ||
export const LANG = 'css'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
/* | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sorry if someone already asked this; what is the reason for having these language definitions live here and not in the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not sure if it is a good idea to put some custom languages, required only in kibana plugins, to the core package. If the code owners will say, that it is a good idea, I'll do it) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @jloleysens, what do you think about it? Is there any reasons for storing custom languages in the global package? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Right, as far as I understand it, the languages defined in kbn/monaco are intended for use in plugins, or at least that plugins are the biggest consumers of that functionality. Could you help me understand the distinction with, for e.g., Handlebars vs Painless? IMO it would be best to have a single place where languages are created and registered for easy reuse and discoverability - similar to @poffdeluxe comment. Is part of the concern JS bundle size? With the current kbn/monaco package plugins can't cherry-pick/declare languages they want to use and there is no good way to audit what languages are being used where (searching I suppose). But with monaco language definitions I don't think there is a lot of JS being loaded typically. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Painless, xjson and Esql are specific for elastic stack. But markdown, css and handlebars are common and they are just imported from monaco. I was thinking about that languages, which require syntax implementation, need to be located at kbn/monaco, all other - at plugins. But if somebody want to move languages, please, feel free to do it) I'm sorry, right now I'm working on the other task. |
||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
import { LangModuleType } from '@kbn/monaco'; | ||
import { lexerRules, languageConfiguration } from './language'; | ||
import { LANG } from './constants'; | ||
|
||
export const Lang: LangModuleType = { ID: LANG, lexerRules, languageConfiguration }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
/* eslint-disable @kbn/eslint/module_migration */ | ||
import { conf, language } from 'monaco-editor/esm/vs/basic-languages/css/css'; | ||
|
||
export { conf as languageConfiguration, language as lexerRules }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
export const LANG = 'handlebars'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import { LangModuleType } from '@kbn/monaco'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not getting much information from the word "Module" in this name. I'm used to thinking of modules in the This type seems to be a configuration object, specific to registering languages with our monaco package. I think a better name would be one that hints at that meaning, maybe There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As you can see, all languages in What about |
||
import { languageConfiguration, lexerRules } from './language'; | ||
import { LANG } from './constants'; | ||
|
||
export const Lang: LangModuleType = { ID: LANG, languageConfiguration, lexerRules }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import { Lang as CssLang } from './css'; | ||
import { Lang as HandlebarsLang } from './handlebars'; | ||
import { Lang as MarkdownLang } from './markdown'; | ||
|
||
export { CssLang, HandlebarsLang, MarkdownLang }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
export const LANG = 'markdown'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
import { LangModuleType } from '@kbn/monaco'; | ||
import { languageConfiguration, lexerRules } from './language'; | ||
import { LANG } from './constants'; | ||
|
||
export const Lang: LangModuleType = { ID: LANG, languageConfiguration, lexerRules }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
/* eslint-disable @kbn/eslint/module_migration */ | ||
import { conf, language } from 'monaco-editor/esm/vs/basic-languages/markdown/markdown'; | ||
|
||
export { conf as languageConfiguration, language as lexerRules }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
import { registerLanguage } from '@kbn/monaco'; | ||
import { CssLang, HandlebarsLang, MarkdownLang } from './languages'; | ||
|
||
registerLanguage(CssLang); | ||
registerLanguage(HandlebarsLang); | ||
registerLanguage(MarkdownLang); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit; could we update this to:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, not a problem. I was using the style of @kbn/monaco )
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.