diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx index 5f51dd4..c157ad9 100644 --- a/frontend/components/editor/index.tsx +++ b/frontend/components/editor/index.tsx @@ -51,10 +51,10 @@ export default function CodeEditor({ sandboxId: string }) { const [files, setFiles] = useState<(TFolder | TFile)[]>([]) - const [editorLanguage, setEditorLanguage] = useState("plaintext") - const [activeFile, setActiveFile] = useState(null) const [tabs, setTabs] = useState([]) - const [activeId, setActiveId] = useState(null) + const [editorLanguage, setEditorLanguage] = useState("plaintext") + const [activeId, setActiveId] = useState("") + const [activeFile, setActiveFile] = useState(null) const [cursorLine, setCursorLine] = useState(0) const [generate, setGenerate] = useState<{ show: boolean @@ -269,32 +269,36 @@ export default function CodeEditor({ } }) - useEffect(() => { - let yProvider: any - let yDoc: Y.Doc - let binding: MonacoBinding + // useEffect(() => { + // let yProvider: any + // let yDoc: Y.Doc + // let binding: MonacoBinding - if (editorRef.current) { - yDoc = new Y.Doc() - const yText = yDoc.getText("monaco") - yProvider = new LiveblocksProvider(room, yDoc) - setProvider(yProvider) + // const tab = tabs.find((t) => t.id === activeId) - // Attach Yjs to Monaco - binding = new MonacoBinding( - yText, - editorRef.current.getModel() as monaco.editor.ITextModel, - new Set([editorRef.current]), - yProvider.awareness as Awareness - ) - } + // if (editorRef.current && tab) { + // yDoc = new Y.Doc() + // const yText = yDoc.getText(tab.id) + // yProvider = new LiveblocksProvider(room, yDoc) + // setProvider(yProvider) - return () => { - yDoc?.destroy() - yProvider?.destroy() - binding?.destroy() - } - }, [editorRef.current, room]) + // yDoc?.getText(tab.id)?.insert(0, editorRef.current?.getValue() ?? "") + + // // Attach Yjs to Monaco + // binding = new MonacoBinding( + // yText, + // editorRef.current.getModel() as monaco.editor.ITextModel, + // new Set([editorRef.current]), + // yProvider.awareness as Awareness + // ) + // } + + // return () => { + // yDoc?.destroy() + // yProvider?.destroy() + // binding?.destroy() + // } + // }, [editorRef.current, room, activeId]) // connection/disconnection effect + resizeobserver useEffect(() => { @@ -336,14 +340,16 @@ export default function CodeEditor({ // Helper functions: const selectFile = (tab: TTab) => { + if (tab.id === activeId) return + const exists = tabs.find((t) => t.id === tab.id) setTabs((prev) => { - const exists = prev.find((t) => t.id === tab.id) if (exists) { setActiveId(exists.id) return prev } return [...prev, tab] }) + socket.emit("getFile", tab.id, (response: string) => { setActiveFile(response) }) @@ -365,11 +371,19 @@ export default function CodeEditor({ ? tabs[index + 1].id : tabs[index - 1].id : activeId - const nextTab = tabs.find((t) => t.id === nextId) - if (nextTab) selectFile(nextTab) - else setActiveId(null) setTabs((prev) => prev.filter((t) => t.id !== tab.id)) + + if (!nextId) { + console.log("no next id") + setActiveId("") + } else { + const nextTab = tabs.find((t) => t.id === nextId) + if (nextTab) { + console.log("next tab:", nextTab.name) + selectFile(nextTab) + } + } } const handleRename = ( @@ -404,6 +418,10 @@ export default function CodeEditor({ // }) } + useEffect(() => { + console.log("activeId CHANGED:", activeId) + }, [activeId]) + return ( <>
@@ -486,7 +504,7 @@ export default function CodeEditor({ key={tab.id} saved={tab.saved} selected={activeId === tab.id} - onClick={() => { + onClick={(e) => { selectFile(tab) }} onClose={() => closeTab(tab)} @@ -499,7 +517,7 @@ export default function CodeEditor({ ref={editorContainerRef} className="grow w-full overflow-hidden rounded-md relative" > - {activeId === null ? ( + {!activeId ? ( <>
diff --git a/frontend/components/ui/tab.tsx b/frontend/components/ui/tab.tsx index f288df4..8cd4cb6 100644 --- a/frontend/components/ui/tab.tsx +++ b/frontend/components/ui/tab.tsx @@ -2,7 +2,7 @@ import { X } from "lucide-react" import { Button } from "./button" -import { useEffect } from "react" +import { MouseEvent, MouseEventHandler, useEffect } from "react" export default function Tab({ children, @@ -14,7 +14,7 @@ export default function Tab({ children: React.ReactNode saved?: boolean selected?: boolean - onClick?: () => void + onClick?: MouseEventHandler onClose?: () => void }) { return ( diff --git a/frontend/liveblocks.config.ts b/frontend/liveblocks.config.ts index dcbc545..b898d9e 100644 --- a/frontend/liveblocks.config.ts +++ b/frontend/liveblocks.config.ts @@ -114,9 +114,6 @@ export const { useEventListener, useErrorListener, useStorage, - useObject, - useMap, - useList, useBatch, useHistory, useUndo,