docs: add information about E2B

README.md

@@ -29,7 +29,9 @@ npm run dev
 
 ### Backend
 
-The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker.
+The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview.
+
+You will need to make an account on [E2B](https://e2b.dev/) to get an API key.
 
 #### Socket.io server
 
@@ -181,3 +183,4 @@ It should be in the form `category(scope or module): message` in your commit mes
 - [Express](https://expressjs.com/)
 - [Socket.io](https://socket.io/)
 - [Drizzle ORM](https://orm.drizzle.team/)
+- [E2B](https://e2b.dev/)

backend/server/.env.example

@@ -5,3 +5,4 @@ PORT=4000
 WORKERS_KEY=
 DATABASE_WORKER_URL=
 STORAGE_WORKER_URL=
+E2B_API_KEY=

frontend/components/editor/index.tsx

@@ -105,16 +105,6 @@ export default function CodeEditor({
   const [provider, setProvider] = useState<TypedLiveblocksProvider>()
   const userInfo = useSelf((me) => me.info)
 
-  // Liveblocks providers map to prevent reinitializing providers
-  type ProviderData = {
-    provider: LiveblocksProvider<never, never, never, never>;
-    yDoc: Y.Doc;
-    yText: Y.Text;
-    binding?: MonacoBinding;
-    onSync: (isSynced: boolean) => void;
-  };
-  const providersMap = useRef(new Map<string, ProviderData>());
-
   // Refs for libraries / features
   const editorContainerRef = useRef<HTMLDivElement>(null)
   const monacoRef = useRef<typeof monaco | null>(null)
@@ -342,77 +332,43 @@ export default function CodeEditor({
 
     if (!editorRef || !tab || !model) return
 
-    let providerData: ProviderData;
+    const yDoc = new Y.Doc()
+    const yText = yDoc.getText(tab.id)
+    const yProvider: any = new LiveblocksProvider(room, yDoc)
 
-    // When a file is opened for the first time, create a new provider and store in providersMap.
-    if (!providersMap.current.has(tab.id)) {
-      const yDoc = new Y.Doc();
-      const yText = yDoc.getText(tab.id);
-      const yProvider = new LiveblocksProvider(room, yDoc);
-
-      // Inserts the file content into the editor once when the tab is changed.
-      const onSync = (isSynced: boolean) => {
-        if (isSynced) {
-          const text = yText.toString()
-          if (text === "") {
-            if (activeFileContent) {
-              yText.insert(0, activeFileContent)
-            } else {
-              setTimeout(() => {
-                yText.insert(0, editorRef.getValue())
-              }, 0)
-            }
+    const onSync = (isSynced: boolean) => {
+      if (isSynced) {
+        const text = yText.toString()
+        if (text === "") {
+          if (activeFileContent) {
+            yText.insert(0, activeFileContent)
+          } else {
+            setTimeout(() => {
+              yText.insert(0, editorRef.getValue())
+            }, 0)
           }
         }
       }
-
-      yProvider.on("sync", onSync)
-
-      // Save the provider to the map.
-      providerData = { provider: yProvider, yDoc, yText, onSync };
-      providersMap.current.set(tab.id, providerData);
-
-    } else {
-      // When a tab is opened that has been open before, reuse the existing provider.
-      providerData = providersMap.current.get(tab.id)!;
     }
 
+    yProvider.on("sync", onSync)
+
+    setProvider(yProvider)
+
     const binding = new MonacoBinding(
-      providerData.yText,
+      yText,
       model,
       new Set([editorRef]),
-      providerData.provider.awareness as unknown as Awareness
-    );
-
-    providerData.binding = binding;
-  
-    setProvider(providerData.provider);
+      yProvider.awareness as Awareness
+    )
 
     return () => {
-      // Cleanup logic
-      if (binding) {
-        binding.destroy();
-      }
-      if (providerData.binding) {
-        providerData.binding = undefined;
-      }
-    };
-  }, [room, activeFileContent]);
-
-    // Added this effect to clean up when the component unmounts
-    useEffect(() => {
-      return () => {
-        // Clean up all providers when the component unmounts
-        providersMap.current.forEach((data) => {
-          if (data.binding) {
-            data.binding.destroy();
-          }
-          data.provider.disconnect();
-          data.yDoc.destroy();
-        });
-        providersMap.current.clear();
-      };
-    }, []);
+      yDoc.destroy()
+      yProvider.destroy()
+      binding.destroy()
+      yProvider.off("sync", onSync)
+    }
+  }, [editorRef, room, activeFileContent])
 
   // Connection/disconnection effect
   useEffect(() => {