Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: copy button inside the code mirror

Browse Source
This commit is contained in:
clean99 2023-11-26 13:45:22 +08:00
parent da9b1d1728
commit eee11dc916
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/CodeMirror.tsx
View File

@ -12,14 +12,16 @@ import {
import { bracketMatching } from "@codemirror/language"; import { bracketMatching } from "@codemirror/language";
import { html } from "@codemirror/lang-html"; import { html } from "@codemirror/lang-html";
import { EditorTheme } from "@/types"; import { EditorTheme } from "@/types";
import { FaCopy } from "react-icons/fa";
interface Props { interface Props {
code: string; code: string;
editorTheme: EditorTheme; editorTheme: EditorTheme;
onCodeChange: (code: string) => void; onCodeChange: (code: string) => void;
doCopyCode: () => void;
} }
function CodeMirror({ code, editorTheme, onCodeChange }: Props) { function CodeMirror({ code, editorTheme, onCodeChange, doCopyCode }: Props) {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const view = useRef<EditorView | null>(null); const view = useRef<EditorView | null>(null);
const editorState = useMemo(() => EditorState.create({ const editorState = useMemo(() => EditorState.create({
@ -67,7 +69,16 @@ function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
}, [code]); }, [code]);
return ( return (
<div className="overflow-x-scroll overflow-y-scroll mx-2 border-[4px] border-black rounded-[20px]" ref={ref} /> <div className="relative">
<div className="overflow-x-scroll overflow-y-scroll mx-2 border-[4px] border-black rounded-[20px]" ref={ref} />
<span
title="Copy Code"
className="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5 absolute top-[20px] right-[20px]"
onClick={doCopyCode}
>
<FaCopy />
</span>
</div>
); );
} }