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:07 +08:00
parent b9522fede2
commit da9b1d1728
1 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/App.tsx
View File

@ -1,13 +1,12 @@
import { useRef, useState, useCallback } from "react"; import { useRef, useState } from "react";
import ImageUpload from "./components/ImageUpload"; import ImageUpload from "./components/ImageUpload";
import CodePreview from "./components/CodePreview"; import CodePreview from "./components/CodePreview";
import Preview from "./components/Preview"; import Preview from "./components/Preview";
import { CodeGenerationParams, generateCode } from "./generateCode"; import { CodeGenerationParams, CodeType, generateCode } from "./generateCode";
import Spinner from "./components/Spinner"; import Spinner from "./components/Spinner";
import classNames from "classnames"; import classNames from "classnames";
import { import {
FaCode, FaCode,
FaCopy,
FaDesktop, FaDesktop,
FaDownload, FaDownload,
FaMobile, FaMobile,
@ -31,6 +30,7 @@ import { UrlInputSection } from "./components/UrlInputSection";
import TermsOfServiceDialog from "./components/TermsOfServiceDialog"; import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
import html2canvas from "html2canvas"; import html2canvas from "html2canvas";
import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants"; import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
import { ReactCodePreview } from "./components/ReactCodePreview";
function App() { function App() {
const [appState, setAppState] = useState<AppState>(AppState.INITIAL); const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
@ -120,6 +120,7 @@ function App() {
if (referenceImages.length > 0) { if (referenceImages.length > 0) {
doGenerateCode({ doGenerateCode({
generationType: "create", generationType: "create",
codeType: CodeType.HTML,
image: referenceImages[0], image: referenceImages[0],
}); });
} }
@ -132,6 +133,7 @@ function App() {
const resultImage = await takeScreenshot(); const resultImage = await takeScreenshot();
doGenerateCode({ doGenerateCode({
generationType: "update", generationType: "update",
codeType: CodeType.HTML,
image: referenceImages[0], image: referenceImages[0],
resultImage: resultImage, resultImage: resultImage,
history: updatedHistory, history: updatedHistory,
@ -139,6 +141,7 @@ function App() {
} else { } else {
doGenerateCode({ doGenerateCode({
generationType: "update", generationType: "update",
codeType: CodeType.HTML,
image: referenceImages[0], image: referenceImages[0],
history: updatedHistory, history: updatedHistory,
}); });
@ -149,10 +152,10 @@ function App() {
setUpdateInstruction(""); setUpdateInstruction("");
} }
const doCopyCode = useCallback(() => { const doCopyCode = (code: string) => {
copy(generatedCode); copy(code);
toast.success("Copied to clipboard"); toast.success("Copied to clipboard");
}, [generatedCode]); };
const handleTermDialogOpenChange = (open: boolean) => { const handleTermDialogOpenChange = (open: boolean) => {
setSettings((s) => ({ setSettings((s) => ({
@ -305,6 +308,7 @@ function App() {
Code Code
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<ReactCodePreview doGenerateCode={doGenerateCode} referenceImage={referenceImages[0]} />
</div> </div>
<TabsContent value="desktop"> <TabsContent value="desktop">
<Preview code={generatedCode} device="desktop" /> <Preview code={generatedCode} device="desktop" />
@ -313,20 +317,12 @@ function App() {
<Preview code={generatedCode} device="mobile" /> <Preview code={generatedCode} device="mobile" />
</TabsContent> </TabsContent>
<TabsContent value="code"> <TabsContent value="code">
<div className="relative"> <CodeMirror
<CodeMirror
code={generatedCode} code={generatedCode}
editorTheme={settings.editorTheme} editorTheme={settings.editorTheme}
onCodeChange={setGeneratedCode} onCodeChange={setGeneratedCode}
/> doCopyCode={() => doCopyCode(generatedCode)}
<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>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>