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

feat: support edit code

Browse Source
This commit is contained in:
clean99 2023-11-21 09:40:00 +08:00
parent 9dfdc8683d
commit 30ab9e384a
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/App.tsx
View File

@ -246,6 +246,7 @@ function App() {
<CodeMirror <CodeMirror
code={generatedCode} code={generatedCode}
editorTheme={settings.editorTheme} editorTheme={settings.editorTheme}
onCodeChange={setGeneratedCode}
/> />
</TabsContent> </TabsContent>
</Tabs> </Tabs>

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

@ -15,9 +15,10 @@ import { html } from "@codemirror/lang-html";
interface Props { interface Props {
code: string; code: string;
editorTheme: string; editorTheme: string;
onCodeChange: (code: string) => void;
} }
function CodeMirror({ code, editorTheme }: Props) { function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const view = useRef<EditorView | null>(null); const view = useRef<EditorView | null>(null);
@ -42,6 +43,11 @@ function CodeMirror({ code, editorTheme }: Props) {
html(), html(),
selectedTheme, selectedTheme,
EditorView.lineWrapping, EditorView.lineWrapping,
EditorView.updateListener.of(update => {
if (update.changes) {
onCodeChange(view.current?.state.doc.toString() || "");
}
}),
], ],
}), }),
parent: ref.current as Element, parent: ref.current as Element,
@ -69,3 +75,4 @@ function CodeMirror({ code, editorTheme }: Props) {
} }
export default CodeMirror; export default CodeMirror;