[chore 🎆] editor & socket works perfect 🌸

Author: devlopersabbir

desktop/src/main/index.ts

@@ -52,40 +52,36 @@ app.whenReady().then(() => {
 
   // Register the custom protocol to serve Monaco Editor worker files locally
   protocol.handle("monaco-editor", (request) => {
-    const url = request.url.substr("monaco-editor://".length); // e.g., "vs/editor/editor.main.js" or "ts.worker.js"
+    const url = request.url.substr("monaco-editor://".length);
 
     let monacoBasePath;
     if (is.dev) {
-      // In development, node_modules is usually outside the bundled app path
-      // __dirname in main.ts is like dist-electron, so ../../node_modules
+      // Adjust this path based on your dev setup relative to dist-electron/main/index.js
       monacoBasePath = join(__dirname, "../../node_modules/monaco-editor/min");
     } else {
-      // In a packaged app, node_modules content is often copied to a resources folder
-      // or directly into the app.asar. Adjust this path based on your build script.
-      // A common pattern is to copy 'node_modules/monaco-editor/min' to 'resources/app.asar/monaco-editor-min'
-      // or similar. For simplicity, let's assume it's directly accessible relative to app.getAppPath().
-      // If it's copied directly into the root of your packaged app:
+      // Adjust this path based on where 'monaco-editor/min' is copied in your packaged app.
+      // Common paths:
+      // If monaco-editor/min is copied to the root of your packaged app:
       monacoBasePath = join(app.getAppPath(), "node_modules/monaco-editor/min");
-      // Or if your build copies it to a specific subfolder like 'assets/monaco':
+      // If it's copied to a specific asset folder like 'assets/monaco':
       // monacoBasePath = join(app.getAppPath(), 'assets', 'monaco');
     }
 
     const filePath = join(monacoBasePath, url);
-    console.log("Serving monaco-editor:// file:", filePath); // Log for debugging
+    console.log("Serving monaco-editor:// file:", filePath); // Keep this for debugging!
 
     if (existsSync(filePath)) {
       return new Response(readFileSync(filePath));
     } else {
-      console.error("Monaco Editor worker/script file not found:", filePath);
+      console.error("Monaco Editor file not found:", filePath);
+      // It's crucial to return a proper 404 or an empty response for missing files.
+      // Returning a null or undefined can cause issues.
       return new Response("File not found", { status: 404 });
     }
   });
   // Set app user model id for windows
   electronApp.setAppUserModelId("com.executeme");
 
-  // Default open or close DevTools by F12 in development
-  // and ignore CommandOrControl + R in production.
-  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
   app.on("browser-window-created", (_, window) => {
     optimizer.watchWindowShortcuts(window);
   });
@@ -96,15 +92,10 @@ app.whenReady().then(() => {
   createWindow();
 
   app.on("activate", function () {
-    // On macOS it's common to re-create a window in the app when the
-    // dock icon is clicked and there are no other windows open.
     if (BrowserWindow.getAllWindows().length === 0) createWindow();
   });
 });
 
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
 app.on("window-all-closed", () => {
   if (process.platform !== "darwin") {
     app.quit();

desktop/src/preload/index.ts

@@ -7,30 +7,23 @@ const api = {};
 // This is crucial for @monaco-editor/react to know where to load its *main* scripts from
 contextBridge.exposeInMainWorld("monacoConfig", {
   getMonacoBasePath: () => {
-    // This path should point to the 'min/vs' directory of your monaco-editor installation.
-    // It needs to be accessible from the renderer process.
-    // In a packaged app, node_modules is often bundled, so we adjust the path.
-    // You might need to adjust `../node_modules/monaco-editor/min/vs` based on your project's build output structure.
-    return `monaco-editor://vs`; // Use your custom protocol for the base path too
+    // This is correct. The renderer will ask for 'monaco-editor://vs'
+    // and your main process protocol handler will resolve it to the local path.
+    return `monaco-editor://vs`;
   }
 });
 
-// Use `contextBridge` APIs to expose Electron APIs to
-// renderer only if context isolation is enabled, otherwise
-// just add to the DOM global.
 if (process.contextIsolated) {
   try {
     contextBridge.exposeInMainWorld("electron", {
       ipcRenderer: {
         send: (channel: string, args?: any[]) => ipcRenderer.send(channel, args),
         on: (channel: string, listener: (...args: any[]) => void) => {
           ipcRenderer.on(channel, listener);
-          // Return a cleanup function for `on` listeners
           return () => ipcRenderer.removeListener(channel, listener);
         }
       }
     });
-    contextBridge.exposeInMainWorld("api", api);
   } catch (error) {
     console.error(error);
   }
@@ -42,6 +35,4 @@ if (process.contextIsolated) {
       on: (channel, listener) => ipcRenderer.on(channel, listener)
     }
   };
-  // @ts-ignore (define in dts)
-  window.api = api;
 }

desktop/src/renderer/index.html

@@ -7,9 +7,8 @@
     <meta
       http-equiv="Content-Security-Policy"
       content="
-  default-src 'self' 'unsafe-inline';
-  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net;
-  style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
+  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net monaco-editor:;
+  style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net monaco-editor:; /* <-- ADD 'monaco-editor:' HERE, NO ** */
   img-src 'self' data:;
   font-src 'self' https://cdn.jsdelivr.net https://fonts.gstatic.com;
   connect-src 'self' wss://145.223.97.55:9292 https://145.223.97.55:9292;

desktop/src/renderer/src/main.tsx

@@ -16,9 +16,7 @@ loader.config({
   }
 });
 
-// Your existing getWorkerUrl configuration
-// This part is correct for defining *worker* URLs, but the loader.config
-// is for the *main* Monaco scripts.
+// This part is for the workers, which you already had mostly correct
 window.MonacoEnvironment = {
   getWorkerUrl: (_moduleId, label) => {
     const workerFilenameMap: { [key: string]: string } = {
@@ -36,7 +34,6 @@ window.MonacoEnvironment = {
     return `monaco-editor://${workerFile}`;
   }
 };
-
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BaseProvider>

origin/index.js

@@ -1,4 +1,5 @@
 export const allowOrigins = [
   "http://localhost:3000",
+  "http://localhost:5173",
   "https://executeme.vercel.app",
 ];