From efed6b5c6a3fb33f9844916e12920a5f32b3cf25 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Wed, 22 Jul 2026 13:57:03 +0200
Subject: [PATCH] chore: Server monaco editor from Cloudflare (#47973)

How to test:
- Editor should load and work in the SQL Editor
- Search for JS bundles `https://cdnjs.cloudflare.com/*` in the preview
to verify that's it's loaded from a CDN
- Check in the local build whether the Monaco editor is loaded from the
base URL (have to do it locally, SQL Editor doesn't work on the
self-hosted Vercel deployment)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Performance**
* Improved delivery of Studio assets through CDN-based URLs in supported
environments.
* Updated the Monaco editor to load assets from the configured CDN when
available, with a local fallback.
* **Reliability**
* Added support for explicitly enabling or disabling CDN asset delivery
across environments.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/studio/lib/configure-monaco-loader.ts | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/studio/lib/configure-monaco-loader.ts b/apps/studio/lib/configure-monaco-loader.ts
index 6ed89b095d7..fefbd0f38b7 100644
--- a/apps/studio/lib/configure-monaco-loader.ts
+++ b/apps/studio/lib/configure-monaco-loader.ts
@@ -1,19 +1,20 @@
 import { loader } from '@monaco-editor/react'
 
-import { BASE_PATH } from '@/lib/constants'
+import { BASE_PATH, IS_PLATFORM } from '@/lib/constants'
 
-// [Ivan] Serve the Monaco assets locally from the public folder (see #47182, which
-// dropped CDN loading in every environment and re-nested the assets under `vs/`). The
-// worker bootstrap (vs/base/worker/workerMain.js) loads the language workers (e.g.
-// tsWorker.js) via fetch() from inside the web worker. A root-relative path fails to
-// resolve there in some browsers (Firefox throws "... is not a valid URL"), so we point
-// `vs` at an absolute URL including the origin. Guarded on `window` since callers are
-// also evaluated during SSR (where `window` is undefined and there's no editor to mount).
+// [Ivan] Serve the Monaco assets locally from the public folder for self-hosted deployments, but use the CDN for
+// the platform deployment to reduce bundle size and improve caching.
 //
 // Shared by both runtime entry points — `pages/_app.tsx` (Next) and
 // `routes/__root.tsx` (TanStack) — so the asset path can't drift between them.
 export function configureMonacoLoader() {
   if (typeof window !== 'undefined') {
-    loader.config({ paths: { vs: `${window.location.origin}${BASE_PATH}/monaco-editor/vs` } })
+    loader.config({
+      paths: {
+        vs: IS_PLATFORM
+          ? 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs'
+          : `${BASE_PATH}/monaco-editor/vs`,
+      },
+    })
   }
 }