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

format CodeMirror

Browse Source
This commit is contained in:
Abi Raja 2023-11-28 09:49:57 -05:00
parent c3f6f763b4
commit f8772a0515
1 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,28 +22,32 @@ interface Props {
function CodeMirror({ code, editorTheme, onCodeChange }: 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);
const editorState = useMemo(() => EditorState.create({ const editorState = useMemo(
extensions: [ () =>
history(), EditorState.create({
keymap.of([ extensions: [
...defaultKeymap, history(),
indentWithTab, keymap.of([
{ key: "Mod-z", run: undo, preventDefault: true }, ...defaultKeymap,
{ key: "Mod-Shift-z", run: redo, preventDefault: true }, indentWithTab,
]), { key: "Mod-z", run: undo, preventDefault: true },
lineNumbers(), { key: "Mod-Shift-z", run: redo, preventDefault: true },
bracketMatching(), ]),
html(), lineNumbers(),
editorTheme === EditorTheme.ESPRESSO ? espresso : cobalt, bracketMatching(),
EditorView.lineWrapping, html(),
EditorView.updateListener.of((update: ViewUpdate) => { editorTheme === EditorTheme.ESPRESSO ? espresso : cobalt,
if (update.docChanged) { EditorView.lineWrapping,
const updatedCode = update.state.doc.toString(); EditorView.updateListener.of((update: ViewUpdate) => {
onCodeChange(updatedCode); if (update.docChanged) {
} const updatedCode = update.state.doc.toString();
onCodeChange(updatedCode);
}
}),
],
}), }),
], [editorTheme]
}), [editorTheme]); );
useEffect(() => { useEffect(() => {
view.current = new EditorView({ view.current = new EditorView({
state: editorState, state: editorState,
@ -67,9 +71,11 @@ 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="overflow-x-scroll overflow-y-scroll mx-2 border-[4px] border-black rounded-[20px]"
ref={ref}
/>
); );
} }
export default CodeMirror; export default CodeMirror;