feat: convert dbml to database object in editor

package.json

@@ -11,13 +11,16 @@
   "dependencies": {
     "@antv/x6": "^2.18.1",
     "@antv/x6-react-shape": "^2.2.3",
+    "@dbml/core": "^3.4.3",
     "antd": "^5.16.5",
     "axios": "^1.6.8",
+    "lodash-es": "^4.17.21",
     "monaco-editor": "^0.48.0",
     "react-monaco-editor": "^0.55.0",
     "umi": "^4.1.10"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@umijs/plugins": "^4.1.10",

src/pages/index.tsx

@@ -1,9 +1,12 @@
 import registerER from '@/nodes/er';
 import { Graph, Node } from '@antv/x6';
 import { register } from '@antv/x6-react-shape';
+import { Parser } from '@dbml/core';
 import { Col, Dropdown, Row, theme } from 'antd';
+import { debounce } from 'lodash-es';
 import { useEffect, useRef, useState } from 'react';
 import MonacoEditor from 'react-monaco-editor';
+
 import './index.less';
 
 const CustomComponent = ({ node }: { node: Node }) => {
@@ -276,6 +279,7 @@ export default () => {
 }`;
   const [code, setCode] = useState(initCode);
   const containerRef = useRef(null);
+  const parser = new Parser();
 
   useEffect(() => {
     registerER();
@@ -299,8 +303,10 @@ export default () => {
 
   // onchange
   const onChange = (newValue: any, e: any) => {
-    console.log('onChange', newValue, e);
+    const database = parser.parse(newValue, 'dbmlv2');
+    console.log(database);
   };
+  const debouncedOnChange = debounce(onChange, 500);
 
   return (
     <Row>
@@ -314,8 +320,11 @@ export default () => {
           value={code}
           options={{
             selectOnLineNumbers: true,
+            minimap: {
+              enabled: false,
+            },
           }}
-          onChange={onChange}
+          onChange={debouncedOnChange}
           editorDidMount={editorDidMount}
         />
       </Col>