From 51b68e86b833c43dcacec07500a67d9595f2cad3 Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Sun, 24 Nov 2024 16:40:23 +0400
Subject: [PATCH] Add dbml editor to sidepanel
---
package-lock.json | 30 +++++++++++++++----
package.json | 2 +-
src/components/EditorHeader/ControlPanel.jsx | 13 ++++++++
.../EditorSidePanel/DBMLEditor/DBMLEditor.jsx | 18 +++++++++++
.../EditorSidePanel/DBMLEditor/styles.css | 11 +++++++
src/components/EditorSidePanel/SidePanel.jsx | 29 ++++++++++++++++++
src/context/LayoutContext.jsx | 1 +
src/data/editorExtensions.js | 7 +++++
src/i18n/locales/en.js | 4 +++
src/index.css | 2 +-
10 files changed, 110 insertions(+), 7 deletions(-)
create mode 100644 src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx
create mode 100644 src/components/EditorSidePanel/DBMLEditor/styles.css
create mode 100644 src/data/editorExtensions.js
diff --git a/package-lock.json b/package-lock.json
index 09f4473..39c8b49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,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",
@@ -2195,16 +2195,36 @@
}
},
"node_modules/@uiw/codemirror-theme-vscode": {
- "version": "4.21.25",
- "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-vscode/-/codemirror-theme-vscode-4.21.25.tgz",
- "integrity": "sha512-1gubCz7kHE5XH3H1IUTSrnyK/G3dQRmOIgPFsefE9e+TizhBJnkbKSDSfRfpm5l7jl1G7v/as0HQvN3cYg/Rkg==",
+ "version": "4.23.6",
+ "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-vscode/-/codemirror-theme-vscode-4.23.6.tgz",
+ "integrity": "sha512-xUo1ic+Kk5hnv5gy+cXU12GZVSnDjic8s8weKq8loPHF1dSR1e6gkKVIKZRnvoOZ302taKRk7phWpBUaWIuKQg==",
+ "license": "MIT",
"dependencies": {
- "@uiw/codemirror-themes": "4.21.25"
+ "@uiw/codemirror-themes": "4.23.6"
},
"funding": {
"url": "https://jaywcjlove.github.io/#/sponsor"
}
},
+ "node_modules/@uiw/codemirror-theme-vscode/node_modules/@uiw/codemirror-themes": {
+ "version": "4.23.6",
+ "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.23.6.tgz",
+ "integrity": "sha512-0dpuLQW+V6zrKvfvor/eo71V3tpr2L2Hsu8QZAdtSzksjWABxTOzH3ShaBRxCEsrz6sU9sa9o7ShwBMMDz59bQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@codemirror/language": "^6.0.0",
+ "@codemirror/state": "^6.0.0",
+ "@codemirror/view": "^6.0.0"
+ },
+ "funding": {
+ "url": "https://jaywcjlove.github.io/#/sponsor"
+ },
+ "peerDependencies": {
+ "@codemirror/language": ">=6.0.0",
+ "@codemirror/state": ">=6.0.0",
+ "@codemirror/view": ">=6.0.0"
+ }
+ },
"node_modules/@uiw/codemirror-themes": {
"version": "4.21.25",
"resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.21.25.tgz",
diff --git a/package.json b/package.json
index f1b38c5..d69cc6c 100644
--- a/package.json
+++ b/package.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",
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 8ea0bed..be12647 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -516,6 +516,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,
@@ -1175,6 +1178,15 @@ export default function ControlPanel({
function: () =>
setLayout((prev) => ({ ...prev, issues: !prev.issues })),
},
+ dbml_editor: {
+ state: layout.dbmlEditor ? (
+
+ ) : (
+
+ ),
+ function: toggleDBMLEditor,
+ shortcut: "Alt+E",
+ },
strict_mode: {
state: settings.strictMode ? (
@@ -1386,6 +1398,7 @@ export default function ControlPanel({
preventDefault: true,
});
useHotkeys("ctrl+alt+w, meta+alt+w", fitWindow, { preventDefault: true });
+ useHotkeys("alt+e", toggleDBMLEditor, { preventDefault: true });
return (
<>
diff --git a/src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx b/src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx
new file mode 100644
index 0000000..d67e39f
--- /dev/null
+++ b/src/components/EditorSidePanel/DBMLEditor/DBMLEditor.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 (
+
+ {}}
+ theme={settings.mode === "dark" ? vscodeDark : vscodeLight}
+ />
+
+ );
+}
diff --git a/src/components/EditorSidePanel/DBMLEditor/styles.css b/src/components/EditorSidePanel/DBMLEditor/styles.css
new file mode 100644
index 0000000..521ade3
--- /dev/null
+++ b/src/components/EditorSidePanel/DBMLEditor/styles.css
@@ -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);
+}
diff --git a/src/components/EditorSidePanel/SidePanel.jsx b/src/components/EditorSidePanel/SidePanel.jsx
index 168c1f6..77cb04f 100644
--- a/src/components/EditorSidePanel/SidePanel.jsx
+++ b/src/components/EditorSidePanel/SidePanel.jsx
@@ -21,6 +21,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();
@@ -91,6 +92,7 @@ export default function SidePanel({ width, resize, setResize }) {
style={{ width: `${width}px` }}
>
+<<<<<<< HEAD
))}
+=======
+ {layout.dbmlEditor ? (
+
+ setSelectedElement((prev) => ({ ...prev, currentTab: key }))
+ }
+ collapsible
+ tabBarStyle={{ direction: "ltr" }}
+ >
+ {tabList.length &&
+ tabList.map((tab) => (
+
+ {tab.component}
+
+ ))}
+
+ ) : (
+
+ )}
+>>>>>>> feb41e8 (Add dbml editor to sidepanel)
diff --git a/src/context/LayoutContext.jsx b/src/context/LayoutContext.jsx
index cfb4836..5349b04 100644
--- a/src/context/LayoutContext.jsx
+++ b/src/context/LayoutContext.jsx
@@ -8,6 +8,7 @@ export default function LayoutContextProvider({ children }) {
sidebar: true,
issues: true,
toolbar: true,
+ dbmlEditor: false,
});
return (
diff --git a/src/data/editorExtensions.js b/src/data/editorExtensions.js
new file mode 100644
index 0000000..ce083e6
--- /dev/null
+++ b/src/data/editorExtensions.js
@@ -0,0 +1,7 @@
+import { sql } from "@codemirror/lang-sql";
+import { json } from "@codemirror/lang-json";
+
+export const languageExtension = {
+ sql: [sql()],
+ json: [json()],
+};
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 81c903a..215fc13 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -243,7 +243,11 @@ 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.",
+<<<<<<< HEAD
show_relationship_labels: "Show relationship labels",
+=======
+ dbml_editor: "DBML editor",
+>>>>>>> feb41e8 (Add dbml editor to sidepanel)
},
};
diff --git a/src/index.css b/src/index.css
index 62a845d..5bbd290 100644
--- a/src/index.css
+++ b/src/index.css
@@ -58,7 +58,7 @@
background-color: rgba(var(--semi-blue-6), 1);
}
-.semi-spin-wrapper{
+.semi-spin-wrapper {
color: inherit;
}