Parse input

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.6.3",
+    "@dbml/core": "^3.9.3",
     "@douyinfe/semi-ui": "^2.51.3",
     "@lexical/react": "^0.12.5",
     "@uiw/codemirror-theme-github": "^4.21.25",

src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx

@@ -1,16 +1,35 @@
+import { useEffect, useState } from "react";
 import CodeMirror from "@uiw/react-codemirror";
 import { vscodeDark, vscodeLight } from "@uiw/codemirror-theme-vscode";
 import { languageExtension } from "../../../data/editorExtensions";
 import { useSettings } from "../../../hooks";
+import { useDebounceValue } from "usehooks-ts";
+import { Parser } from "@dbml/core";
 import "./styles.css";
 
+const parser = new Parser();
+
 export default function DBMLEditor() {
   const { settings } = useSettings();
+  const [value, setValue] = useState("");
+  const [debouncedValue] = useDebounceValue(value, 1000);
+
+  useEffect(() => {
+    if (debouncedValue) {
+      try {
+        const database = parser.parse(debouncedValue, "dbml");
+        console.log(database);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  }, [debouncedValue]);
+
   return (
     <div>
       <CodeMirror
         extensions={languageExtension.sql}
-        onChange={() => {}}
+        onChange={(v) => setValue(v)}
         theme={settings.mode === "dark" ? vscodeDark : vscodeLight}
       />
     </div>