Skip to content

Commit 4136cc3

Browse files
authored
Merge pull request #306 from drawdb-io/add-copy-to-code
Add copy to code
2 parents 881768b + a5fea9c commit 4136cc3

File tree

2 files changed

+56
-21
lines changed

2 files changed

+56
-21
lines changed
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { useState } from "react";
2+
import { sql } from "@codemirror/lang-sql";
3+
import { json } from "@codemirror/lang-json";
4+
import { vscodeDark } from "@uiw/codemirror-theme-vscode";
5+
import { githubLight } from "@uiw/codemirror-theme-github";
6+
import { useSettings } from "../../../hooks";
7+
import { useTranslation } from "react-i18next";
8+
import CodeMirror from "@uiw/react-codemirror";
9+
10+
const languageExtension = {
11+
sql: [sql()],
12+
json: [json()],
13+
};
14+
15+
export default function Code({ value, language }) {
16+
const { t } = useTranslation();
17+
const { settings } = useSettings();
18+
const [copied, setCopied] = useState(false);
19+
20+
const copyCode = () => {
21+
navigator.clipboard
22+
.writeText(value)
23+
.then(() => {
24+
setCopied(true);
25+
setTimeout(() => {
26+
setCopied(false);
27+
}, 2000);
28+
})
29+
.catch((e) => {
30+
console.log(e);
31+
});
32+
};
33+
34+
return (
35+
<div className="relative">
36+
<CodeMirror
37+
value={value}
38+
height="360px"
39+
extensions={languageExtension[language]}
40+
editable={false}
41+
theme={settings.mode === "dark" ? vscodeDark : githubLight}
42+
/>
43+
<button
44+
onClick={copyCode}
45+
className={`absolute right-4 top-2 px-2 py-1 rounded ${settings.mode === "dark" ? "bg-zinc-700" : "bg-zinc-200"}`}
46+
>
47+
<i className={`bi bi-clipboard${copied ? "-check" : ""} me-2`} />
48+
{t("copy")}
49+
</button>
50+
</div>
51+
);
52+
}

src/components/EditorHeader/Modal/Modal.jsx

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
useAreas,
1313
useEnums,
1414
useNotes,
15-
useSettings,
1615
useDiagram,
1716
useTransform,
1817
useTypes,
@@ -34,21 +33,12 @@ import ImportSource from "./ImportSource";
3433
import SetTableWidth from "./SetTableWidth";
3534
import Language from "./Language";
3635
import Share from "./Share";
37-
import CodeMirror from "@uiw/react-codemirror";
38-
import { sql } from "@codemirror/lang-sql";
39-
import { vscodeDark } from "@uiw/codemirror-theme-vscode";
40-
import { json } from "@codemirror/lang-json";
41-
import { githubLight } from "@uiw/codemirror-theme-github";
36+
import Code from "./Code";
4237
import { useTranslation } from "react-i18next";
4338
import { importSQL } from "../../../utils/importSQL";
4439
import { databases } from "../../../data/databases";
4540
import { isRtl } from "../../../i18n/utils/rtl";
4641

47-
const languageExtension = {
48-
sql: [sql()],
49-
json: [json()],
50-
};
51-
5242
export default function Modal({
5343
modal,
5444
setModal,
@@ -64,7 +54,6 @@ export default function Modal({
6454
const { setNotes } = useNotes();
6555
const { setAreas } = useAreas();
6656
const { setTypes } = useTypes();
67-
const { settings } = useSettings();
6857
const { setEnums } = useEnums();
6958
const { setTasks } = useTasks();
7059
const { setTransform } = useTransform();
@@ -303,14 +292,7 @@ export default function Modal({
303292
{modal === MODAL.IMG ? (
304293
<Image src={exportData.data} alt="Diagram" height={280} />
305294
) : (
306-
<CodeMirror
307-
value={exportData.data}
308-
height="360px"
309-
extensions={languageExtension[exportData.extension]}
310-
onChange={() => {}}
311-
editable={false}
312-
theme={settings.mode === "dark" ? vscodeDark : githubLight}
313-
/>
295+
<Code value={exportData.data} language={exportData.extension} />
314296
)}
315297
<div className="text-sm font-semibold mt-2">{t("filename")}:</div>
316298
<Input
@@ -387,7 +369,8 @@ export default function Modal({
387369
width={getModalWidth(modal)}
388370
bodyStyle={{
389371
maxHeight: window.innerHeight - 280,
390-
overflow: "auto",
372+
overflow:
373+
modal === MODAL.CODE || modal === MODAL.IMG ? "hidden" : "auto",
391374
direction: "ltr",
392375
}}
393376
>

0 commit comments

Comments
 (0)