feat: enable syntax highlight

.umirc.ts

@@ -4,4 +4,5 @@ export default defineConfig({
   routes: [{ path: '/', component: 'index' }],
   npmClient: 'pnpm',
   title: 'dbml-editor by @alswl',
+  esbuildMinifyIIFE: true,
 });

src/editor/syntax.ts

@@ -0,0 +1,189 @@
+import * as monaco from 'monaco-editor';
+
+function registerSyntax() {
+  monaco.languages.register({ id: 'dbml' });
+
+  // source https://github.com/mattmeyers/vscode-dbml/blob/master/syntaxes/dbml.tmLanguage.json
+  // convert by ChatGPT
+  // TODO monaco support tmlanguage file, https://github.com/microsoft/monaco-editor/issues/171
+  monaco.languages.setMonarchTokensProvider('dbml', {
+    keywords: [
+      'as',
+      'by',
+      'bool',
+      'boolean',
+      'bit',
+      'blob',
+      'decimal',
+      'double',
+      'enum',
+      'float',
+      'long',
+      'longblob',
+      'longtext',
+      'medium',
+      'mediumblob',
+      'mediumint',
+      'mediumtext',
+      'time',
+      'timestamp',
+      'timestamptz',
+      'tinyblob',
+      'tinyint',
+      'tinytext',
+      'text',
+      'bigint',
+      'int',
+      'int1',
+      'int2',
+      'int3',
+      'int4',
+      'int8',
+      'integer',
+      'float4',
+      'float8',
+      'char',
+      'varbinary',
+      'varchar',
+      'varcharacter',
+      'precision',
+      'date',
+      'datetime',
+      'year',
+      'unsigned',
+      'signed',
+      'numeric',
+      'ucase',
+      'lcase',
+      'mid',
+      'len',
+      'round',
+      'rank',
+      'now',
+      'format',
+      'coalesce',
+      'ifnull',
+      'isnull',
+      'nvl',
+    ],
+    typeKeywords: [
+      'boolean',
+      'double',
+      'byte',
+      'int',
+      'short',
+      'char',
+      'void',
+      'long',
+      'float',
+    ],
+    operators: [
+      '=',
+      '>',
+      '<',
+      '!',
+      '~',
+      '?',
+      ':',
+      '==',
+      '<=',
+      '>=',
+      '!=',
+      '&&',
+      '||',
+      '++',
+      '--',
+      '+',
+      '-',
+      '*',
+      '/',
+      '&',
+      '|',
+      '^',
+      '%',
+      '<<',
+      '>>',
+      '>>>',
+      '+=',
+      '-=',
+      '*=',
+      '/=',
+      '&=',
+      '|=',
+      '^=',
+      '%=',
+      '<<=',
+      '>>=',
+      '>>>=',
+    ],
+    symbols: '/[=><!~?:&|+\\-*\\/\\^%]+/',
+    escapes:
+      '/\\\\(?:[abfnrtv\\\\"\']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/',
+    tokenizer: {
+      root: [
+        // identifiers and keywords
+        [
+          /[_$a-z][\w$]*/,
+          {
+            cases: {
+              '@typeKeywords': 'keyword',
+              '@keywords': 'keyword',
+              '@default': 'identifier',
+            },
+          },
+        ],
+        [/[A-Z][\w$]*/, 'type.identifier'], // to show class names nicely
+
+        // whitespace
+        { include: '@whitespace' },
+
+        // delimiters and operators
+        [/[\[\]{}().,;]/, '@brackets'],
+        [
+          /@symbols/,
+          {
+            cases: {
+              '@operators': 'operator',
+              '@default': '',
+            },
+          },
+        ],
+
+        // numbers
+        [/\d*\.\d+([eE][\-+]?\d+)?/, 'number.float'],
+        [/0[xX][0-9a-fA-F]+/, 'number.hex'],
+        [/\d+/, 'number'],
+
+        // strings
+        [/"([^"\\]|\\.)*$/, 'string.invalid'], // non-terminated string
+        [/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],
+
+        // characters
+        [/'[^\\']'/, 'string'],
+        [/(')(@escapes)(')/, ['string', 'string.escape', 'string']],
+        [/'/, 'string.invalid'],
+      ],
+
+      comment: [
+        [/[^\/*]+/, 'comment'],
+        [/\*\//, 'comment', '@pop'],
+        [/[\/*]/, 'comment'],
+      ],
+
+      string: [
+        [/[^\\"]+/, 'string'],
+        [/@escapes/, 'string.escape'],
+        [/\\./, 'string.escape.invalid'],
+        [/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
+      ],
+
+      whitespace: [
+        [/[ \t\r\n]+/, 'white'],
+        [/\/\*/, 'comment', '@comment'],
+        [/\/\/.*$/, 'comment'],
+      ],
+    },
+  });
+}
+
+export default registerSyntax;

src/global.ts

@@ -0,0 +1,5 @@
+import registerSyntax from '@/editor/syntax';
+import registerER from '@/nodes/er';
+
+registerER();
+registerSyntax();

src/layouts/index.tsx

@@ -11,6 +11,9 @@ export default function Layout() {
         <li>
           <a href="https://github.com/alswl/dbml-editor">Github</a>
         </li>
+        <li>
+          <a href="https://twitter.com/alswl">@alswl</a>
+        </li>
       </ul>
 
       <Outlet />

src/pages/index.tsx

@@ -1,4 +1,3 @@
-import registerER from '@/nodes/er';
 import { GridLayout } from '@antv/layout';
 import { Graph, Model } from '@antv/x6';
 import { Parser } from '@dbml/core';
@@ -53,7 +52,6 @@ Ref: posts.user_id > users.id // many-to-one
   });
 
   useEffect(() => {
-    registerER();
     if (containerRef.current) {
       const graph = new Graph({
         container: containerRef.current,