Add dbml editor to sidepanel

Author: 1ilit

package-lock.json

@@ -15,7 +15,7 @@
     "@douyinfe/semi-ui": "^2.51.3",
     "@lexical/react": "^0.12.5",
     "@uiw/codemirror-theme-github": "^4.21.25",
-    "@uiw/codemirror-theme-vscode": "^4.21.25",
+    "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@uiw/react-codemirror": "^4.21.25",
     "@vercel/analytics": "^1.2.2",
     "axios": "^1.7.4",

package.json

@@ -519,6 +519,9 @@ export default function ControlPanel({
   const viewStrictMode = () => {
     setSettings((prev) => ({ ...prev, strictMode: !prev.strictMode }));
   };
+  const toggleDBMLEditor = () => {
+    setLayout((prev) => ({ ...prev, dbmlEditor: !prev.dbmlEditor }));
+  };
   const viewFieldSummary = () => {
     setSettings((prev) => ({
       ...prev,
@@ -1178,6 +1181,15 @@ export default function ControlPanel({
         function: () =>
           setLayout((prev) => ({ ...prev, issues: !prev.issues })),
       },
+      dbml_editor: {
+        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" />
@@ -1377,6 +1389,7 @@ export default function ControlPanel({
     preventDefault: true,
   });
   useHotkeys("ctrl+alt+w, meta+alt+w", fitWindow, { preventDefault: true });
+  useHotkeys("alt+e", toggleDBMLEditor, { preventDefault: true });
 
   return (
     <>

src/components/EditorHeader/ControlPanel.jsx

@@ -35,19 +35,13 @@ import SetTableWidth from "./SetTableWidth";
 import Language from "./Language";
 import Share from "./Share";
 import CodeMirror from "@uiw/react-codemirror";
-import { sql } from "@codemirror/lang-sql";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
-import { json } from "@codemirror/lang-json";
 import { githubLight } from "@uiw/codemirror-theme-github";
 import { useTranslation } from "react-i18next";
 import { importSQL } from "../../../utils/importSQL";
 import { databases } from "../../../data/databases";
 import { isRtl } from "../../../i18n/utils/rtl";
-
-const languageExtension = {
-  sql: [sql()],
-  json: [json()],
-};
+import { languageExtension } from "../../../data/editorExtensions";
 
 export default function Modal({
   modal,

src/components/EditorHeader/Modal/Modal.jsx

@@ -0,0 +1,18 @@
+import CodeMirror from "@uiw/react-codemirror";
+import { vscodeDark, vscodeLight } from "@uiw/codemirror-theme-vscode";
+import { languageExtension } from "../../../data/editorExtensions";
+import { useSettings } from "../../../hooks";
+import "./styles.css";
+
+export default function DBMLEditor() {
+  const { settings } = useSettings();
+  return (
+    <div>
+      <CodeMirror
+        extensions={languageExtension.sql}
+        onChange={() => {}}
+        theme={settings.mode === "dark" ? vscodeDark : vscodeLight}
+      />
+    </div>
+  );
+}

src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx

@@ -0,0 +1,11 @@
+.cm-editor {
+  font-size: 13px;
+}
+
+.ͼ1o {
+  background-color: var(--semi-color-bg-0);
+}
+
+.ͼ1o .cm-gutters {
+  background-color: var(--semi-color-bg-0);
+}

src/components/EditorSidePanel/DBMLEditor/styles.css

@@ -13,6 +13,7 @@ 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/DBMLEditor";
 
 export default function SidePanel({ width, resize, setResize }) {
   const { layout } = useLayout();
@@ -58,23 +59,31 @@ 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
-            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 ? (
+            <Tabs
+              type="card"
+              activeKey={selectedElement.currentTab}
+              lazyRender
+              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>
+          ) : (
+            <DBMLEditor />
+          )}
         </div>
         {layout.issues && (
           <div className="mt-auto border-t-2 border-color shadow-inner">

src/components/EditorSidePanel/SidePanel.jsx

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

src/context/LayoutContext.jsx

@@ -0,0 +1,7 @@
+import { sql } from "@codemirror/lang-sql";
+import { json } from "@codemirror/lang-json";
+
+export const languageExtension = {
+  sql: [sql()],
+  json: [json()],
+};

src/data/editorExtensions.js

@@ -243,6 +243,7 @@ const en = {
     failed_to_load: "Failed to load. Make sure the link is correct.",
     share_info:
       "* Sharing this link will not create a live real-time collaboration session.",
+    dbml_editor: "DBML editor",
   },
 };
 

src/i18n/locales/en.js

@@ -58,7 +58,7 @@
   background-color: rgba(var(--semi-blue-6), 1);
 }
 
-.semi-spin-wrapper{
+.semi-spin-wrapper {
   color: inherit;
 }