Pull-request para las convenciones

README.md

@@ -1,20 +1,26 @@
-<h3 align="center">
-    <img width="80" alt="drawdb logo" src="./src/assets/icon-dark.png">
-</h3>
-
-<h3 align="center">Free, simple, and intuitive database design tool and SQL generator.</h3>
-
-<p align="center">
-    <a href="https://drawdb.app/">drawDB</a>
-    ·  
-    <a href="https://discord.gg/BrjZgNrmR6">Discord</a>
-    ·  
-    <a href="https://x.com/drawDB_">X</a>
-</p>
-
-<h3 align="center"><img width="700" style="border-radius:5px;" alt="demo" src="drawdb.gif"></h3>
-
-## drawDB
+<div align="center">
+    <img width="64" alt="drawdb logo" src="./src/assets/icon-dark.png">
+    <h1>drawDB</h1>
+</div>
+
+<h3 align="center">Free, simple, and intuitive database schema editor and SQL generator.</h3>
+
+<div align="center" style="margin-bottom:12px;">
+    <a href="https://drawdb.app/" style="display: flex; align-items: center;">
+        <img src="https://img.shields.io/badge/Start%20building-grey" alt="drawDB"/>
+    </a>
+    <a href="https://discord.gg/BrjZgNrmR6" style="display: flex; align-items: center;">
+        <img src="https://img.shields.io/discord/1196658537208758412.svg?label=Join%20the%20Discord&logo=discord" alt="Discord"/>
+    </a>
+    <a href="https://x.com/drawDB_" style="display: flex; align-items: center;">
+        <img src="https://img.shields.io/badge/Follow%20us%20on%20X-blue?logo=X" alt="Follow us on X"/>
+    </a>
+    <a href="https://buymeacoffee.com/drawdb" style="display: flex; align-items: center;">
+        <img src="https://img.shields.io/badge/Support%20us-grey?logo=buymeacoffee" alt="Support us"/>
+    </a>
+</div>
+
+<h3 align="center"><img width="700" style="border-radius:5px;" alt="demo" src="drawdb.png"></h3>
 
 DrawDB is a robust and user-friendly database entity relationship (DBER) editor right in your browser. Build diagrams with a few clicks, export sql scripts, customize your editor, and more without creating an account. See the full set of features [here](https://drawdb.app/).
 

package.json

@@ -17,7 +17,6 @@
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/codemirror-theme-vscode": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
-    "@vercel/analytics": "^1.2.2",
     "axios": "^1.7.4",
     "classnames": "^2.5.1",
     "dexie": "^3.2.4",
@@ -30,7 +29,7 @@
     "jsonschema": "^1.4.1",
     "jspdf": "^2.5.1",
     "lexical": "^0.12.5",
-    "node-sql-parser": "^5.3.2",
+    "node-sql-parser": "^5.3.4",
     "octokit": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/EditorHeader/ControlPanel.jsx

@@ -31,6 +31,7 @@ import {
   jsonToSQLite,
   jsonToMariaDB,
   jsonToSQLServer,
+  jsonToOracle,
 } from "../../utils/exportSQL/generic";
 import {
   ObjectType,
@@ -827,6 +828,12 @@ export default function ControlPanel({
                 setImportDb(DB.MSSQL);
               },
             },
+            {
+              Oracle: () => {
+                setModal(MODAL.IMPORT_SRC);
+                setImportDb(DB.ORACLE);
+              },
+            },
           ],
         }),
         function: () => {
@@ -918,6 +925,22 @@ export default function ControlPanel({
                 }));
               },
             },
+            {
+              Oracle: () => {
+                setModal(MODAL.CODE);
+                const src = jsonToOracle({
+                  tables: tables,
+                  references: relationships,
+                  types: types,
+                  database: database,
+                });
+                setExportData((prev) => ({
+                  ...prev,
+                  data: src,
+                  extension: "sql",
+                }));
+              }
+            },
           ],
         }),
         function: () => {
@@ -1382,7 +1405,10 @@ export default function ControlPanel({
     <>
       <div>
         {layout.header && (
-          <div className="flex justify-between items-center me-7">
+          <div
+            className="flex justify-between items-center me-7"
+            style={isRtl(i18n.language) ? { direction: "rtl" } : {}}
+          >
             {header()}
             {window.name.split(" ")[0] !== "t" && (
               <Button

src/components/EditorHeader/Modal/Code.jsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { sql } from "@codemirror/lang-sql";
+import { json } from "@codemirror/lang-json";
+import { vscodeDark } from "@uiw/codemirror-theme-vscode";
+import { githubLight } from "@uiw/codemirror-theme-github";
+import { useSettings } from "../../../hooks";
+import { useTranslation } from "react-i18next";
+import CodeMirror from "@uiw/react-codemirror";
+
+const languageExtension = {
+  sql: [sql()],
+  json: [json()],
+};
+
+export default function Code({ value, language }) {
+  const { t } = useTranslation();
+  const { settings } = useSettings();
+  const [copied, setCopied] = useState(false);
+
+  const copyCode = () => {
+    navigator.clipboard
+      .writeText(value)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 2000);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  return (
+    <div className="relative">
+      <CodeMirror
+        value={value}
+        height="360px"
+        extensions={languageExtension[language]}
+        editable={false}
+        theme={settings.mode === "dark" ? vscodeDark : githubLight}
+      />
+      <button
+        onClick={copyCode}
+        className={`absolute right-4 top-2 px-2 py-1 rounded ${settings.mode === "dark" ? "bg-zinc-700" : "bg-zinc-200"}`}
+      >
+        <i className={`bi bi-clipboard${copied ? "-check" : ""} me-2`} />
+        {t("copy")}
+      </button>
+    </div>
+  );
+}