feat: integrate monaco-editor locally

Author: seer-by-sentry[bot]

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@hookform/resolvers": "^5.0.1",
     "@monaco-editor/react": "^4.7.0",
+    "monaco-editor": "^0.47.0",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -106,7 +107,8 @@
     "postcss": "^8.5.4",
     "tailwindcss": "^4.1.8",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vite-plugin-static-copy": "^1.0.1"
   },
   "trustedDependencies": [
     "@sentry/cli",

src/main.tsx

@@ -1,4 +1,5 @@
 import * as Sentry from "@sentry/react";
+import { loader } from '@monaco-editor/react';
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./i18n";
@@ -7,6 +8,13 @@ import "./index.css";
 
 import App from "./App";
 
+// Configure the loader to use local assets from the 'public/vs' directory
+loader.config({
+  paths: {
+    vs: '/vs'
+  }
+});
+
 try {
   Sentry.init({
     dsn: "https://cffe540e38313f6e71bcca722906b654@o4508483919609856.ingest.us.sentry.io/4508854105210880",

vite.config.ts

@@ -2,6 +2,7 @@ import { sentryVitePlugin } from "@sentry/vite-plugin";
 import react from "@vitejs/plugin-react";
 import path from "path";
 import { defineConfig } from "vite";
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 const host = process.env.TAURI_DEV_HOST;
 
@@ -17,6 +18,14 @@ export default defineConfig(async () => ({
       org: "bestcodes-official",
       project: "codequill-react",
     }),
+    viteStaticCopy({
+      targets: [
+        {
+          src: path.resolve(__dirname, 'node_modules/monaco-editor/min/vs'),
+          dest: '.', // Copies 'vs' folder to the root of the 'public' directory
+        },
+      ],
+    }),
   ],
 
   resolve: {