changes by gpt5, most of which I don't understand yet

Author: KARM99

src/components/CodeEditor/index.jsx

@@ -1,4 +1,5 @@
 import { Editor } from "@monaco-editor/react";
+import { useEffect, useRef } from "react";
 import { useDiagram, useSettings } from "../../hooks";
 import { Button, Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
@@ -9,6 +10,7 @@ import "./styles.css";
 export default function CodeEditor({
   showCopyButton,
   extraControls,
+  markers = [],
   ...props
 }) {
   const { settings } = useSettings();
@@ -24,14 +26,49 @@ export default function CodeEditor({
       });
   };
 
+  const editorRef = useRef(null);
+  const monacoRef = useRef(null);
+
   const handleEditorMount = (editor, monaco) => {
     setUpDBML(monaco, database);
 
     setTimeout(() => {
       editor.getAction("editor.action.formatDocument").run();
     }, 300);
+
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+
+    // Apply existing markers after mount
+    try {
+      const model = editor.getModel();
+      if (model) {
+        const normalized = markers.map((m) => ({
+          severity: m.severity ?? monaco.MarkerSeverity.Error,
+          ...m,
+        }));
+        monaco.editor.setModelMarkers(model, "dbml", normalized);
+      }
+    } catch (err) {
+      console.warn("Failed to set initial markers", err);
+    }
   };
 
+  useEffect(() => {
+    if (!editorRef.current || !monacoRef.current) return;
+    try {
+      const model = editorRef.current.getModel();
+      if (!model) return;
+      const normalized = markers.map((m) => ({
+        severity: m.severity ?? monacoRef.current.MarkerSeverity.Error,
+        ...m,
+      }));
+      monacoRef.current.editor.setModelMarkers(model, "dbml", normalized);
+    } catch (err) {
+      console.warn("Failed to update markers", err);
+    }
+  }, [markers]);
+
   return (
     <div className="relative h-full">
       <Editor

src/components/EditorSidePanel/DBMLEditor.jsx

@@ -1,26 +1,109 @@
 import { useEffect, useState } from "react";
 import { useDiagram, useEnums, useLayout } from "../../hooks";
 import { toDBML } from "../../utils/exportAs/dbml";
+import { fromDBML } from "../../utils/importFrom/dbml";
 import { Button, Tooltip } from "@douyinfe/semi-ui";
 import { IconTemplate } from "@douyinfe/semi-icons";
 import { useTranslation } from "react-i18next";
 import CodeEditor from "../CodeEditor";
 
 export default function DBMLEditor() {
-  const { tables: currentTables, relationships } = useDiagram();
   const diagram = useDiagram();
-  const { enums } = useEnums();
+  const {
+    tables: currentTables,
+    relationships,
+    setTables,
+    setRelationships,
+    database,
+  } = diagram;
+  const { enums, setEnums } = useEnums();
   const [value, setValue] = useState(() => toDBML({ ...diagram, enums }));
   const { setLayout } = useLayout();
+  const { setExternalIssues } = diagram;
   const { t } = useTranslation();
 
   const toggleDBMLEditor = () => {
     setLayout((prev) => ({ ...prev, dbmlEditor: !prev.dbmlEditor }));
   };
 
   useEffect(() => {
-    setValue(toDBML({ tables: currentTables, enums, relationships }));
-  }, [currentTables, enums, relationships]);
+    const normalized = toDBML({
+      tables: currentTables,
+      enums,
+      relationships,
+      database,
+    });
+    setValue(normalized);
+  }, [currentTables, enums, relationships, database]);
+
+  useEffect(() => {
+    const currentDbml = toDBML({
+      tables: currentTables,
+      enums,
+      relationships,
+      database,
+    });
+
+    if (value === currentDbml) return;
+
+    const handle = setTimeout(() => {
+      try {
+        const parsed = fromDBML(value);
+        // Preserve coordinates when table names match existing ones
+        const nameToExisting = new Map(
+          currentTables.map((t) => [t.name, { x: t.x, y: t.y }]),
+        );
+        parsed.tables = parsed.tables.map((t) => {
+          const coords = nameToExisting.get(t.name);
+          return coords ? { ...t, ...coords } : t;
+        });
+        setTables(parsed.tables);
+        setRelationships(parsed.relationships);
+        setEnums(parsed.enums);
+        // Clear any previous external issues on success
+        setExternalIssues([]);
+      } catch (err) {
+        const message = err?.message || String(err);
+        // Put parse error into Issues panel instead of toast spam
+        setExternalIssues([message]);
+        setEditorMarkersFromError(message);
+      }
+    }, 700);
+
+    return () => clearTimeout(handle);
+  }, [
+    value,
+    currentTables,
+    enums,
+    relationships,
+    database,
+    setTables,
+    setRelationships,
+    setEnums,
+    setExternalIssues,
+  ]);
+
+  // Translate DBML parse error message to Monaco markers
+  const [markers, setMarkers] = useState([]);
+  const setEditorMarkersFromError = (message) => {
+    // Try to extract line/column like: "line X, column Y" or "(X:Y)"
+    const lineColMatch =
+      /line\s+(\d+)\s*,\s*column\s*(\d+)/i.exec(message) ||
+      /\((\d+)\s*[:|,]\s*(\d+)\)/.exec(message);
+
+    const lineNumber = lineColMatch ? parseInt(lineColMatch[1], 10) : 1;
+    const column = lineColMatch ? parseInt(lineColMatch[2], 10) : 1;
+
+    setMarkers([
+      {
+        startLineNumber: lineNumber,
+        startColumn: column,
+        endLineNumber: lineNumber,
+        endColumn: column + 1,
+        message,
+      },
+    ]);
+  };
 
   return (
     <CodeEditor
@@ -29,8 +112,9 @@ export default function DBMLEditor() {
       language="dbml"
       onChange={setValue}
       height="100%"
+      markers={markers}
       options={{
-        readOnly: true,
+        readOnly: false,
         minimap: { enabled: false },
       }}
       extraControls={

src/components/EditorSidePanel/Issues.jsx

@@ -10,26 +10,24 @@ export default function Issues() {
   const { t } = useTranslation();
   const { settings } = useSettings();
   const { enums } = useEnums();
-  const { tables, relationships, database } = useDiagram();
+  const { tables, relationships, database, externalIssues } = useDiagram();
   const [issues, setIssues] = useState([]);
 
   useEffect(() => {
-    const findIssues = async () => {
-      const newIssues = getIssues({
-        tables: tables,
-        relationships: relationships,
-        types: types,
-        database: database,
-        enums: enums,
-      });
+    const newIssues = getIssues({
+      tables: tables,
+      relationships: relationships,
+      types: types,
+      database: database,
+      enums: enums,
+    });
 
-      if (!arrayIsEqual(newIssues, issues)) {
-        setIssues(newIssues);
-      }
-    };
+    const combined = [...externalIssues, ...newIssues];
 
-    findIssues();
-  }, [tables, relationships, issues, types, database, enums]);
+    if (!arrayIsEqual(combined, issues)) {
+      setIssues(combined);
+    }
+  }, [tables, relationships, issues, types, database, enums, externalIssues]);
 
   return (
     <Collapse lazyRender keepDOM={false} style={{ width: "100%" }}>

src/context/DiagramContext.jsx

@@ -12,6 +12,7 @@ export default function DiagramContextProvider({ children }) {
   const [database, setDatabase] = useState(DB.GENERIC);
   const [tables, setTables] = useState([]);
   const [relationships, setRelationships] = useState([]);
+  const [externalIssues, setExternalIssues] = useState([]);
   const { transform } = useTransform();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { selectedElement, setSelectedElement } = useSelect();
@@ -244,6 +245,8 @@ export default function DiagramContextProvider({ children }) {
         setDatabase,
         tablesCount: tables.length,
         relationshipsCount: relationships.length,
+          externalIssues,
+          setExternalIssues,
       }}
     >
       {children}