Merge pull request #306 from drawdb-io/add-copy-to-code

Add copy to code

Author: 1ilit

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>
+  );
+}

src/components/EditorHeader/Modal/Modal.jsx

@@ -12,7 +12,6 @@ import {
   useAreas,
   useEnums,
   useNotes,
-  useSettings,
   useDiagram,
   useTransform,
   useTypes,
@@ -34,21 +33,12 @@ import ImportSource from "./ImportSource";
 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 Code from "./Code";
 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()],
-};
-
 export default function Modal({
   modal,
   setModal,
@@ -64,7 +54,6 @@ export default function Modal({
   const { setNotes } = useNotes();
   const { setAreas } = useAreas();
   const { setTypes } = useTypes();
-  const { settings } = useSettings();
   const { setEnums } = useEnums();
   const { setTasks } = useTasks();
   const { setTransform } = useTransform();
@@ -303,14 +292,7 @@ export default function Modal({
               {modal === MODAL.IMG ? (
                 <Image src={exportData.data} alt="Diagram" height={280} />
               ) : (
-                <CodeMirror
-                  value={exportData.data}
-                  height="360px"
-                  extensions={languageExtension[exportData.extension]}
-                  onChange={() => {}}
-                  editable={false}
-                  theme={settings.mode === "dark" ? vscodeDark : githubLight}
-                />
+                <Code value={exportData.data} language={exportData.extension} />
               )}
               <div className="text-sm font-semibold mt-2">{t("filename")}:</div>
               <Input
@@ -387,7 +369,8 @@ export default function Modal({
       width={getModalWidth(modal)}
       bodyStyle={{
         maxHeight: window.innerHeight - 280,
-        overflow: "auto",
+        overflow:
+          modal === MODAL.CODE || modal === MODAL.IMG ? "hidden" : "auto",
         direction: "ltr",
       }}
     >