update stuff idek

src/components/CodeEditor/index.jsx

@@ -6,7 +6,11 @@ import { IconCopy } from "@douyinfe/semi-icons";
 import { setUpDBML } from "./setUpDBML";
 import "./styles.css";
 
-export default function CodeEditor({ showCopyButton, ...props }) {
+export default function CodeEditor({
+  showCopyButton,
+  extraControls,
+  ...props
+}) {
   const { settings } = useSettings();
   const { database } = useDiagram();
   const { t } = useTranslation();
@@ -36,11 +40,14 @@ export default function CodeEditor({ showCopyButton, ...props }) {
         onMount={handleEditorMount}
       />
       {showCopyButton && (
-        <Button
+        <div className="absolute right-6 bottom-2 z-10 space-y-2">
-          className="absolute right-6 bottom-2 z-10"
+          <div>{extraControls}</div>
-          icon={<IconCopy />}
+          <Button
-          onClick={copyCode}
+            icon={<IconCopy />}
-        />
+            onClick={copyCode}
+            className="inline-block"
+          />
+        </div>
       )}
     </div>
   );

src/components/EditorHeader/ControlPanel.jsx

@@ -1221,7 +1221,7 @@ export default function ControlPanel({
         function: () =>
           setLayout((prev) => ({ ...prev, issues: !prev.issues })),
       },
-      dbml_editor: {
+      dbml_view: {
         state: layout.dbmlEditor ? (
           <i className="bi bi-toggle-off" />
         ) : (

src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { useDiagram, useEnums, useLayout } from "../../../hooks";
+import { toDBML } from "../../../utils/exportAs/dbml";
+import CodeEditor from "../../CodeEditor";
+import { Button, Tooltip } from "@douyinfe/semi-ui";
+import { IconTemplate } from "@douyinfe/semi-icons";
+import { useTranslation } from "react-i18next";
+
+export default function DBMLEditor() {
+  const { tables: currentTables, relationships } = useDiagram();
+  const diagram = useDiagram();
+  const { enums } = useEnums();
+  const [value, setValue] = useState(() => toDBML({ ...diagram, enums }));
+  const { setLayout } = useLayout();
+  const { t } = useTranslation();
+
+  const toggleDBMLEditor = () => {
+    setLayout((prev) => ({ ...prev, dbmlEditor: !prev.dbmlEditor }));
+  };
+
+  useEffect(() => {
+    setValue(toDBML({ tables: currentTables, enums, relationships }));
+  }, [currentTables, enums, relationships]);
+
+  return (
+    <CodeEditor
+      showCopyButton
+      value={value}
+      language="dbml"
+      onChange={setValue}
+      height="100%"
+      options={{
+        readOnly: true,
+        minimap: { enabled: false },
+      }}
+      extraControls={
+        <Tooltip content={t("tab_view")}>
+          <Button icon={<IconTemplate />} onClick={toggleDBMLEditor} />
+        </Tooltip>
+      }
+    />
+  );
+}

src/components/EditorSidePanel/DBMLEditor/index.jsx

@@ -1,72 +0,0 @@
-import { useEffect, useState } from "react";
-import { useDiagram, useEnums, useTransform } from "../../../hooks";
-import { useDebounceValue } from "usehooks-ts";
-import { fromDBML } from "../../../utils/importFrom/dbml";
-import { toDBML } from "../../../utils/exportAs/dbml";
-import CodeEditor from "../../CodeEditor";
-
-export default function DBMLEditor({ setIssues }) {
-  const { tables: currentTables, setTables } = useDiagram();
-  const diagram = useDiagram();
-  const { enums } = useEnums();
-  const { transform } = useTransform();
-  const [value, setValue] = useState(() => toDBML({ ...diagram, enums }));
-  const [debouncedValue] = useDebounceValue(value, 2000);
-
-  useEffect(() => {
-    const updateDiagram = () => {
-      try {
-        const currentDBML = toDBML({ ...diagram, enums });
-
-        if (debouncedValue && debouncedValue !== currentDBML) {
-          const { tables: newTables } = fromDBML(debouncedValue);
-
-          const mergedTables = newTables
-            .map((newTable) => {
-              const existingTable = currentTables.find(
-                (t) => t.id === newTable.id || t.name === newTable.name,
-              );
-
-              return {
-                ...newTable,
-                ...(existingTable
-                  ? {
-                      x: existingTable.x,
-                      y: existingTable.y,
-                      color: existingTable.color,
-                      id: existingTable.id,
-                    }
-                  : {
-                      x: transform.pan.x,
-                      y: transform.pan.y,
-                    }),
-              };
-            })
-            .map((x, i) => ({ ...x, id: i }));
-
-          setTables(mergedTables);
-        }
-      } catch (e) {
-        setIssues((prev) => ({
-          ...prev,
-          dbml: e.diags?.map((x) => x.message) || [e.message],
-        }));
-      }
-    };
-
-    updateDiagram();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue]);
-
-  return (
-    <CodeEditor
-      value={value}
-      language="dbml"
-      onChange={setValue}
-      height="100%"
-      options={{
-        minimap: { enabled: false },
-      }}
-    />
-  );
-}

src/components/EditorSidePanel/SidePanel.jsx

@@ -1,5 +1,6 @@
-import { Tabs, TabPane } from "@douyinfe/semi-ui";
+import { Tabs, TabPane, Button, Divider, Tooltip } from "@douyinfe/semi-ui";
 import { Tab } from "../../data/constants";
+import { IconCode } from "@douyinfe/semi-icons";
 import {
   useLayout,
   useSelect,
@@ -21,10 +22,10 @@ import { databases } from "../../data/databases";
 import EnumsTab from "./EnumsTab/EnumsTab";
 import { isRtl } from "../../i18n/utils/rtl";
 import i18n from "../../i18n/i18n";
-import DBMLEditor from "./DBMLEditor";
+import DBMLEditor from "./DBMLEditor/DBMLEditor";
 
 export default function SidePanel({ width, resize, setResize }) {
-  const { layout } = useLayout();
+  const { layout, setLayout } = useLayout();
   const { selectedElement, setSelectedElement } = useSelect();
   const { database, tablesCount, relationshipsCount } = useDiagram();
   const { areasCount } = useAreas();
@@ -86,6 +87,10 @@ export default function SidePanel({ width, resize, setResize }) {
     notesCount,
   ]);
 
+  const toggleDBMLEditor = () => {
+    setLayout((prev) => ({ ...prev, dbmlEditor: !prev.dbmlEditor }));
+  };
+
   return (
     <div className="flex h-full">
       <div
@@ -106,6 +111,18 @@ export default function SidePanel({ width, resize, setResize }) {
               }
               collapsible
               tabBarStyle={{ direction: "ltr" }}
+              tabBarExtraContent={
+                <>
+                  <Divider layout="vertical" />
+                  <Tooltip content={t("dbml_view")} position="bottom">
+                    <Button
+                      onClick={toggleDBMLEditor}
+                      icon={<IconCode />}
+                      theme="borderless"
+                    />
+                  </Tooltip>
+                </>
+              }
             >
               {tabList.length &&
                 tabList.map((tab) => (

src/i18n/locales/en.js

@@ -251,7 +251,8 @@ const en = {
     bulk_update: "Bulk update",
     multiselect: "Multiselect",
     export_saved_data: "Export saved data",
-    dbml_editor: "DBML editor",
+    dbml_view: "DBML view",
+    tab_view: "Tab view",
   },
 };