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

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

* 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-lock.json

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

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', {
+  window.monaco.editor.defineTheme('vs-dark-enhanced', {
-    base: 'vs',
+    base: 'vs-dark',
-    inherit: false,
+    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>