diff --git a/components/ui/code-editor.tsx b/components/ui/code-editor.tsx index 2a67a58..8545d40 100644 --- a/components/ui/code-editor.tsx +++ b/components/ui/code-editor.tsx @@ -23,6 +23,7 @@ type Props = { const CodeEditor = (props: Props) => { const { filename, path, value, formatOnSave, wordWrap, onChange } = props; const editorRef = useRef(null); + const [isMounted, setMounted] = useState(false); const [data, setData] = useState(value); const [debounceChange, resetDebounceChange] = useDebounce(onChange, 3000); const language = useMemo(() => getLanguage(filename), [filename]); @@ -47,6 +48,8 @@ const CodeEditor = (props: Props) => { noSemanticValidation: false, noSyntaxValidation: false, }); + + setMounted(true); }, []); const onSave = useCallback(async () => { @@ -77,7 +80,15 @@ const CodeEditor = (props: Props) => { } ); - model.setValue(formatted); + // model.setValue(formatted); + editor.executeEdits("", [ + { + range: editor.getModel()!.getFullModelRange(), + text: formatted, + forceMoveMarkers: true, + }, + ]); + const newCursor = model.getPositionAt(cursorOffset); editor.setPosition(newCursor); @@ -93,6 +104,19 @@ const CodeEditor = (props: Props) => { useEffect(() => { setData(value); + + const editor = editorRef.current; + const model = editor?.getModel(); + + if (editor && model?.uri.path.substring(1) === path) { + editor.executeEdits("", [ + { + range: editor.getModel()!.getFullModelRange(), + text: value, + forceMoveMarkers: true, + }, + ]); + } }, [value]); useCommandKey("s", onSave); @@ -100,10 +124,10 @@ const CodeEditor = (props: Props) => { return (
debounceChange(e)} diff --git a/pages/project/@slug/components/file-viewer.tsx b/pages/project/@slug/components/file-viewer.tsx index ffd3d0f..64759ba 100644 --- a/pages/project/@slug/components/file-viewer.tsx +++ b/pages/project/@slug/components/file-viewer.tsx @@ -17,7 +17,7 @@ const FileViewer = ({ id }: Props) => { const { initialFiles } = useData(); const initialData = initialFiles.find((i) => i.id === id) as any; - const { data, isLoading, refetch } = trpc.file.getById.useQuery(id, { + const { data, isLoading } = trpc.file.getById.useQuery(id, { initialData, }); @@ -29,7 +29,6 @@ const FileViewer = ({ id }: Props) => { const updateFileContent = trpc.file.update.useMutation({ onSuccess: () => { onFileContentChange(); - refetch(); }, });