Add dbml editor (#465)

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();
@@ -29,18 +33,21 @@ export default function CodeEditor({ showCopyButton, ...props }) {
   };
 
   return (
-    <div className="relative">
+    <div className="relative h-full">
       <Editor
         {...props}
         theme={settings.mode === "light" ? "vs" : "vs-dark"}
         onMount={handleEditorMount}
       />
       {showCopyButton && (
-        <Button
-          className="absolute right-6 bottom-2 z-10"
-          icon={<IconCopy />}
-          onClick={copyCode}
-        />
+        <div className="absolute right-6 bottom-2 z-10 space-y-2">
+          <div>{extraControls}</div>
+          <Button
+            icon={<IconCopy />}
+            onClick={copyCode}
+            className="inline-block"
+          />
+        </div>
       )}
     </div>
   );

src/components/EditorHeader/ControlPanel.jsx

@@ -693,6 +693,9 @@ export default function ControlPanel({
     copy();
     del();
   };
+  const toggleDBMLEditor = () => {
+    setLayout((prev) => ({ ...prev, dbmlEditor: !prev.dbmlEditor }));
+  };
   const save = () => setSaveState(State.SAVING);
   const open = () => setModal(MODAL.OPEN);
   const saveDiagramAs = () => setModal(MODAL.SAVEAS);
@@ -1218,6 +1221,15 @@ export default function ControlPanel({
         function: () =>
           setLayout((prev) => ({ ...prev, issues: !prev.issues })),
       },
+      dbml_view: {
+        state: layout.dbmlEditor ? (
+          <i className="bi bi-toggle-off" />
+        ) : (
+          <i className="bi bi-toggle-on" />
+        ),
+        function: toggleDBMLEditor,
+        shortcut: "Alt+E",
+      },
       strict_mode: {
         state: settings.strictMode ? (
           <i className="bi bi-toggle-off" />
@@ -1446,6 +1458,7 @@ export default function ControlPanel({
     preventDefault: true,
   });
   useHotkeys("mod+alt+w", fitWindow, { preventDefault: true });
+  useHotkeys("alt+e", toggleDBMLEditor, { preventDefault: true });
 
   return (
     <>

src/components/EditorSidePanel/DBMLEditor.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { useDiagram, useEnums, useLayout } from "../../hooks";
+import { toDBML } from "../../utils/exportAs/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 [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/SidePanel.jsx

@@ -1,4 +1,6 @@
-import { Tabs, TabPane } from "@douyinfe/semi-ui";
+import { useMemo } from "react";
+import { Tabs, TabPane, Divider, Tooltip, Button } from "@douyinfe/semi-ui";
+import { IconCode } from "@douyinfe/semi-icons";
 import { Tab } from "../../data/constants";
 import {
   useLayout,
@@ -9,21 +11,21 @@ import {
   useEnums,
   useTypes,
 } from "../../hooks";
+import { useTranslation } from "react-i18next";
 import RelationshipsTab from "./RelationshipsTab/RelationshipsTab";
 import TypesTab from "./TypesTab/TypesTab";
 import Issues from "./Issues";
 import AreasTab from "./AreasTab/AreasTab";
 import NotesTab from "./NotesTab/NotesTab";
 import TablesTab from "./TablesTab/TablesTab";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
 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";
 
 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();
@@ -32,6 +34,10 @@ export default function SidePanel({ width, resize, setResize }) {
   const { enumsCount } = useEnums();
   const { t } = useTranslation();
 
+  const toggleDBMLEditor = () => {
+    setLayout((prev) => ({ ...prev, dbmlEditor: !prev.dbmlEditor }));
+  };
+
   const tabList = useMemo(() => {
     const tabs = [
       {
@@ -91,24 +97,44 @@ export default function SidePanel({ width, resize, setResize }) {
         style={{ width: `${width}px` }}
       >
         <div className="h-full flex-1 overflow-y-auto">
-          <Tabs
-            type="card"
-            activeKey={selectedElement.currentTab}
-            lazyRender
-            keepDOM={false}
-            onChange={(key) =>
-              setSelectedElement((prev) => ({ ...prev, currentTab: key }))
-            }
-            collapsible
-            tabBarStyle={{ direction: "ltr" }}
-          >
-            {tabList.length &&
-              tabList.map((tab) => (
-                <TabPane tab={tab.tab} itemKey={tab.itemKey} key={tab.itemKey}>
-                  <div className="p-2">{tab.component}</div>
-                </TabPane>
-              ))}
-          </Tabs>
+          {layout.dbmlEditor ? (
+            <DBMLEditor />
+          ) : (
+            <Tabs
+              type="card"
+              activeKey={selectedElement.currentTab}
+              lazyRender
+              keepDOM={false}
+              onChange={(key) =>
+                setSelectedElement((prev) => ({ ...prev, currentTab: key }))
+              }
+              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) => (
+                  <TabPane
+                    tab={tab.tab}
+                    itemKey={tab.itemKey}
+                    key={tab.itemKey}
+                  >
+                    <div className="p-2">{tab.component}</div>
+                  </TabPane>
+                ))}
+            </Tabs>
+          )}
         </div>
         {layout.issues && (
           <div className="mt-auto border-t-2 border-color shadow-inner">

src/context/LayoutContext.jsx

@@ -8,6 +8,7 @@ export default function LayoutContextProvider({ children }) {
     sidebar: true,
     issues: true,
     toolbar: true,
+    dbmlEditor: false,
   });
 
   return (

src/i18n/locales/en.js

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

src/index.css

@@ -119,7 +119,7 @@
 }
 
 .toolbar-theme {
-  background-color: rgba(var(--semi-grey-1), 1);
+  background-color: rgba(var(--semi-grey-1), 0.7);
 }
 
 .hover-1:hover {