console-ui 新增 toml 语言支持，修复之前 properties 主题未生效的问题 (#10896)
* console-ui 新增 toml 语言支持，修复之前 properties 主题未生效的问题 * console-ui 新增 toml 语言支持，修复之前 properties 主题未生效的问题 * 老规矩，要编译一波
This commit is contained in:
Darren Luo
GitHub
parent
8ba390629a
commit
7d0101bb82
@ -58,6 +58,11 @@ public enum ConfigType {
|
||||
*/
|
||||
YAML("yaml"),
|
||||
|
||||
/**
|
||||
* config type is "toml".
|
||||
*/
|
||||
TOML("toml"),
|
||||
|
||||
/**
|
||||
* not a real type.
|
||||
*/
|
||||
|
||||
6
console-ui/package-lock.json
generated
6
console-ui/package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"@alifd/next": "^1.19.4",
|
||||
"@alifd/theme-design-pro": "0.x",
|
||||
"@iarna/toml": "^3.0.0",
|
||||
"axios": "^0.21.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"moment": "^2.23.0",
|
||||
@ -2111,6 +2112,11 @@
|
||||
"integrity": "sha512-v+moRYrngBYtaFTABYjzeve9H+EAvh1zJd7RCzELQM/vLQCqjcpjh3R+R80W4i4y6dos1yQhMB2SVH8tfx0iEg==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@iarna/toml": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-3.0.0.tgz",
|
||||
"integrity": "sha512-td6ZUkz2oS3VeleBcN+m//Q6HlCFCPrnI0FZhrt/h4XqLEdOyYp2u21nd8MdsR+WJy5r9PTDaHTDDfhf4H4l6Q=="
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
|
||||
|
||||
@ -67,6 +67,7 @@
|
||||
"dependencies": {
|
||||
"@alifd/next": "^1.19.4",
|
||||
"@alifd/theme-design-pro": "0.x",
|
||||
"@iarna/toml": "^3.0.0",
|
||||
"axios": "^0.21.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"moment": "^2.23.0",
|
||||
|
||||
@ -20,7 +20,7 @@ export const MONACO_OPTIONS: Object = {
|
||||
roundedSelection: false,
|
||||
readOnly: false,
|
||||
lineNumbersMinChars: true,
|
||||
theme: 'vs-dark',
|
||||
theme: 'vs-dark-enhanced',
|
||||
wordWrapColumn: 120,
|
||||
folding: true,
|
||||
showFoldingControls: 'always',
|
||||
|
||||
@ -66,6 +66,7 @@ window.require.config({
|
||||
window.require(['vs/editor/editor.main'], () => {
|
||||
// Register a new language
|
||||
window.monaco.languages.register({ id: 'properties' });
|
||||
window.monaco.languages.register({ id: 'toml' });
|
||||
|
||||
// Register a tokens provider for the language
|
||||
window.monaco.languages.setMonarchTokensProvider('properties', {
|
||||
@ -77,15 +78,77 @@ window.require(['vs/editor/editor.main'], () => {
|
||||
],
|
||||
},
|
||||
});
|
||||
window.monaco.languages.setMonarchTokensProvider('toml', {
|
||||
// The main tokenizer for our languages
|
||||
tokenizer: {
|
||||
root: [
|
||||
{ include: '@comment' },
|
||||
{ include: '@datetime' },
|
||||
{ include: '@boolean' },
|
||||
{ include: '@number' },
|
||||
{ include: '@string' },
|
||||
{ include: '@table' },
|
||||
[/"""/, { token: 'string.block', bracket: '@open', next: '@string' }],
|
||||
[/'''/, { token: 'stringLiteral.block', bracket: '@open', next: '@string' }],
|
||||
[
|
||||
/\s*((?:(?:(?:[A-Za-z0-9_+-]+)|(?:"[^"]+")|(?:'[^']+'))\s*\.?\s*)+)\s*(=)/,
|
||||
['variable.name', 'eq'],
|
||||
],
|
||||
],
|
||||
comment: [[/\s*((#).*)$/, 'comment']],
|
||||
datetime: [
|
||||
[/\d{2}:\d{2}:\d{2}(?:\.\d+)?/, 'localTime'],
|
||||
[/\d{4}\-\d{2}\-\d{2}/, 'localDate'],
|
||||
[/\d{4}\-\d{2}\-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?/, 'localDateTime'],
|
||||
[
|
||||
/(?<!\w)(\d{4}\-\d{2}\-\d{2}[T| ]\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[\+\-]\d{2}:\d{2}))(?!\w)/,
|
||||
'offsetDateTime',
|
||||
],
|
||||
],
|
||||
boolean: [[/(?<!\w)(true|false)(?!\w)/, 'boolean']],
|
||||
number: [
|
||||
[/(?<!\w)((?:[\+\-]?(0|([1-9](([0-9]|_[0-9])+)?))))(?!\w)/, 'number'],
|
||||
[
|
||||
/(?<!\w)([\+\-]?(0|([1-9](([0-9]|_[0-9])+)?))(?:(?:\.([0-9]+))?[eE][\+\-]?[1-9]_?[0-9]*|(?:\.[0-9_]*)))(?!\w)/,
|
||||
'number.float',
|
||||
],
|
||||
[/(?<!\w)((?:0x(([0-9a-fA-F](([0-9a-fA-F]|_[0-9a-fA-F])+)?))))(?!\w)/, 'number.hex'],
|
||||
[/(?<!\w)(0o[0-7](_?[0-7])*)(?!\w)/, 'number.octal'],
|
||||
[/(?<!\w)(0b[01](_?[01])*)(?!\w)/, 'number.binary'],
|
||||
[/(?<!\w)([\+\-]?inf)(?!\w)/, 'number.inf'],
|
||||
[/(?<!\w)([\+\-]?nan)(?!\w)/, 'number.nan'],
|
||||
],
|
||||
string: [
|
||||
[/\\([btnfr"\\\n/ ]|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/, 'string.escape'],
|
||||
[/\\[^btnfr/"\\\n]/, 'string.escape.invalid'],
|
||||
[/".+?"/, 'string'],
|
||||
[/"""/, { token: 'string.block', bracket: '@close', next: '@pop' }],
|
||||
[/'.+?'/, 'stringLiteral'],
|
||||
[/'''/, { token: 'stringLiteral.block', bracket: '@close', next: '@pop' }],
|
||||
],
|
||||
table: [
|
||||
[/^\s*(\[)([^\[\]]*)(\])/, 'table'],
|
||||
[/^\s*(\[\[)([^\[\]]*)(\]\])/, 'table.array'],
|
||||
[/(?<!\w)(\{)((.)+)(\})(?!\w)/, 'table.inline'],
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
// Define a new theme that constains only rules that match this language
|
||||
window.monaco.editor.defineTheme('properties', {
|
||||
base: 'vs',
|
||||
inherit: false,
|
||||
window.monaco.editor.defineTheme('vs-dark-enhanced', {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{ token: 'key', foreground: '009968' },
|
||||
{ token: 'value', foreground: '009968' },
|
||||
{ token: 'comment', foreground: '666666' },
|
||||
{ token: 'table', foreground: 'eee8aa' },
|
||||
{ token: 'table.array', foreground: 'eee8aa' },
|
||||
{ token: 'table.inline', foreground: 'eee8aa' },
|
||||
{ token: 'string.block', foreground: 'ce9178' },
|
||||
{ token: 'stringLiteral', foreground: 'ce9178' },
|
||||
{ token: 'stringLiteral.block', foreground: 'ce9178' },
|
||||
{ token: 'boolean', foreground: '3dc9b0' },
|
||||
// { token: 'eq', foreground: '000000' },
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@ -205,7 +205,7 @@ class ConfigDetail extends React.Component {
|
||||
roundedSelection: false,
|
||||
readOnly: true,
|
||||
lineNumbersMinChars: true,
|
||||
theme: 'vs-dark',
|
||||
theme: 'vs-dark-enhanced',
|
||||
wordWrapColumn: 120,
|
||||
folding: false,
|
||||
showFoldingControls: 'always',
|
||||
|
||||
@ -122,7 +122,7 @@ class ConfigEditor extends React.Component {
|
||||
roundedSelection: false,
|
||||
readOnly: false,
|
||||
lineNumbersMinChars: true,
|
||||
theme: 'vs-dark',
|
||||
theme: 'vs-dark-enhanced',
|
||||
wordWrapColumn: 120,
|
||||
folding: false,
|
||||
showFoldingControls: 'always',
|
||||
@ -140,7 +140,7 @@ class ConfigEditor extends React.Component {
|
||||
roundedSelection: false,
|
||||
readOnly: false,
|
||||
lineNumbersMinChars: true,
|
||||
theme: 'vs-dark',
|
||||
theme: 'vs-dark-enhanced',
|
||||
wordWrapColumn: 120,
|
||||
folding: false,
|
||||
showFoldingControls: 'always',
|
||||
@ -580,6 +580,7 @@ class ConfigEditor extends React.Component {
|
||||
{ value: 'yaml', label: 'YAML' },
|
||||
{ value: 'html', label: 'HTML' },
|
||||
{ value: 'properties', label: 'Properties' },
|
||||
{ value: 'toml', label: 'TOML' },
|
||||
];
|
||||
const activeKey = this.state.activeKey.split('-')[0];
|
||||
|
||||
|
||||
@ -49,6 +49,7 @@ const LANGUAGE_LIST = [
|
||||
{ value: 'yaml', label: 'YAML' },
|
||||
{ value: 'html', label: 'HTML' },
|
||||
{ value: 'properties', label: 'Properties' },
|
||||
{ value: 'toml', label: 'TOML' },
|
||||
];
|
||||
|
||||
const TAB_LIST = ['production', 'beta'];
|
||||
@ -137,7 +138,7 @@ class ConfigEditor extends React.Component {
|
||||
roundedSelection: false,
|
||||
readOnly: false,
|
||||
lineNumbersMinChars: true,
|
||||
theme: 'vs-dark',
|
||||
theme: 'vs-dark-enhanced',
|
||||
folding: true,
|
||||
showFoldingControls: 'always',
|
||||
cursorStyle: 'line',
|
||||
|
||||
@ -130,7 +130,7 @@ class NewConfig extends React.Component {
|
||||
roundedSelection: false,
|
||||
readOnly: false,
|
||||
lineNumbersMinChars: true,
|
||||
theme: 'vs-dark',
|
||||
theme: 'vs-dark-enhanced',
|
||||
folding: true,
|
||||
showFoldingControls: 'always',
|
||||
cursorStyle: 'line',
|
||||
@ -458,6 +458,10 @@ class NewConfig extends React.Component {
|
||||
value: 'properties',
|
||||
label: 'Properties',
|
||||
},
|
||||
{
|
||||
value: 'toml',
|
||||
label: 'TOML',
|
||||
},
|
||||
];
|
||||
const { editorClass } = this.state;
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
*/
|
||||
|
||||
import * as yaml from 'js-yaml';
|
||||
import * as toml from '@iarna/toml';
|
||||
|
||||
/**
|
||||
* 校验一个配置项
|
||||
@ -238,6 +239,19 @@ export default {
|
||||
return hasProperty;
|
||||
},
|
||||
|
||||
/**
|
||||
* 检测toml是否合法
|
||||
*/
|
||||
validateToml(str) {
|
||||
try {
|
||||
// 如果不加这里的 replace 的话在 toml 的注释换行可能会出现以下错误：
|
||||
// TomlError: Control characters (codes < 0x1f and 0x7f) are not allowed in comments
|
||||
return toml.parse(str.replace(/\r\n/g, '\n'));
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据类型验证类型
|
||||
*/
|
||||
@ -249,6 +263,7 @@ export default {
|
||||
html: this.validateXml,
|
||||
properties: this.validateProperties,
|
||||
yaml: this.validateYaml,
|
||||
toml: this.validateToml,
|
||||
};
|
||||
|
||||
if (!validateObj[type]) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -35,7 +35,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="console-ui/public/css/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="console-ui/public/css/font-awesome.css">
|
||||
<!-- 第三方css结束 -->
|
||||
<link href="./css/main.css?16f22c0c56795bc26e9a" rel="stylesheet"></head>
|
||||
<link href="./css/main.css?a14e556e16f769484355" rel="stylesheet"></head>
|
||||
|
||||
<body>
|
||||
<div id="root" style="overflow:hidden"></div>
|
||||
@ -56,6 +56,6 @@
|
||||
<script src="console-ui/public/js/merge.js"></script>
|
||||
<script src="console-ui/public/js/loader.js"></script>
|
||||
<!-- 第三方js结束 -->
|
||||
<script type="text/javascript" src="./js/main.js?16f22c0c56795bc26e9a"></script></body>
|
||||
<script type="text/javascript" src="./js/main.js?a14e556e16f769484355"></script></body>
|
||||
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user