console-ui 新增 toml 语言支持，修复之前 properties 主题未生效的问题

api/src/main/java/com/alibaba/nacos/api/config/ConfigType.java

@@ -58,6 +58,11 @@ public enum ConfigType {
  */
  YAML("yaml"),
 
+ /**
+ * config type is "toml".
+ */
+ TOML("toml"),
+
  /**
  * not a real type.
  */

console-ui/package.json

@@ -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",

console-ui/src/components/MonacoEditor/constant.ts

@@ -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',

console-ui/src/lib.js

@@ -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' },
  ],
  });
 

console-ui/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js

@@ -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',

console-ui/src/pages/ConfigurationManagement/ConfigEditor/ConfigEditor.js

@@ -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];
 

console-ui/src/pages/ConfigurationManagement/ConfigEditor/NewConfigEditor.js

@@ -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',

console-ui/src/pages/ConfigurationManagement/NewConfig/NewConfig.js

@@ -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;
 

console-ui/src/utils/validateContent.js

@@ -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]) {

console/src/main/resources/static/index.html

@@ -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>