pin version of monaco-editor and pass it to the loader

nextjs/csp/policies/monaco.ts

@@ -7,7 +7,9 @@ export function monaco(): CspDev.DirectiveDescriptor {
     'script-src': [
       KEY_WORDS.BLOB,
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js',
+      'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js.map',
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.js',
+      'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.js.map',
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.nls.js',
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/basic-languages/solidity/solidity.js',
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/basic-languages/elixir/elixir.js',
@@ -20,6 +22,10 @@ export function monaco(): CspDev.DirectiveDescriptor {
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/language/typescript/tsWorker.js',
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/base/worker/workerMain.js',
     ],
+    'connect-src': [
+      'https://cdn.jsdelivr.net/npm/[email protected]/min-maps/vs/loader.js.map',
+      'https://cdn.jsdelivr.net/npm/[email protected]/min-maps/vs/editor/editor.main.js.map',
+    ],
     'style-src': [
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.css',
     ],

package.json

@@ -63,7 +63,7 @@
     "@helia/verified-fetch": "2.6.12",
     "@metamask/post-message-stream": "^7.0.0",
     "@metamask/providers": "^10.2.1",
-    "@monaco-editor/react": "^4.7.0",
+    "@monaco-editor/react": "4.7.0",
     "@multisender.app/multisender-react-widget": "0.2.3",
     "@next/bundle-analyzer": "16.1.7",
     "@nouns/assets": "^0.10.0",
@@ -115,7 +115,7 @@
     "js-cookie": "^3.0.1",
     "magic-bytes.js": "1.8.0",
     "mixpanel-browser": "2.67.0",
-    "monaco-editor": "^0.34.1",
+    "monaco-editor": "0.52.2",
     "next": "16.1.7",
     "next-themes": "0.4.4",
     "nextjs-routes": "2.2.5",

pnpm-lock.yaml

@@ -75,8 +75,8 @@ importers:
         specifier: ^10.2.1
         version: 10.2.1
       '@monaco-editor/react':
-        specifier: ^4.7.0
-        version: 4.7.0(monaco-editor@0.34.1)([email protected]([email protected]))([email protected])
+        specifier: 4.7.0
+        version: 4.7.0(monaco-editor@0.52.2)([email protected]([email protected]))([email protected])
       '@multisender.app/multisender-react-widget':
         specifier: 0.2.3
         version: 0.2.3(75cca8bf91576fd15aab39089e230044)
@@ -231,8 +231,8 @@ importers:
         specifier: 2.67.0
         version: 2.67.0
       monaco-editor:
-        specifier: ^0.34.1
-        version: 0.34.1
+        specifier: 0.52.2
+        version: 0.52.2
       next:
         specifier: 16.1.7
         version: 16.1.7(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
@@ -10400,8 +10400,8 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  monaco-editor@0.34.1:
-    resolution: {integrity: sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==}
+  monaco-editor@0.52.2:
+    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
 
   [email protected]:
     resolution: {integrity: sha512-t3oESfijIPGsmsdLEKjF+grHfrbnKSXflJtgb1wY14cjxZpS6GnhHRXTxxzCAoCCnq1YYfpEPwY3gjiCPhOufQ==}
@@ -17468,10 +17468,10 @@ snapshots:
     dependencies:
       state-local: 1.0.7
 
-  '@monaco-editor/[email protected](monaco-editor@0.34.1)([email protected]([email protected]))([email protected])':
+  '@monaco-editor/[email protected](monaco-editor@0.52.2)([email protected]([email protected]))([email protected])':
     dependencies:
       '@monaco-editor/loader': 1.7.0
-      monaco-editor: 0.34.1
+      monaco-editor: 0.52.2
       react: 19.1.4
       react-dom: 19.1.4([email protected])
 
@@ -28129,7 +28129,7 @@ snapshots:
       requirejs: 2.3.8
       requirejs-config-file: 4.0.0
 
-  monaco-editor@0.34.1: {}
+  monaco-editor@0.52.2: {}
 
   [email protected]:
     dependencies:

ui/shared/monaco/CodeEditor.tsx

@@ -1,7 +1,7 @@
 import type { SystemStyleObject } from '@chakra-ui/react';
 import { Box, Flex, useToken, Center } from '@chakra-ui/react';
 import type { EditorProps } from '@monaco-editor/react';
-import MonacoEditor from '@monaco-editor/react';
+import MonacoEditor, { loader as monacoLoader } from '@monaco-editor/react';
 import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import React from 'react';
 
@@ -26,6 +26,14 @@ import { defScilla, configScilla } from './utils/defScilla';
 import getFullPathOfImportedFile from './utils/getFullPathOfImportedFile';
 import * as themes from './utils/themes';
 import useThemeColors from './utils/useThemeColors';
+
+// Loader defaults to a jsdelivr monaco-editor version bundled in @monaco-editor/loader, not the app dependency.
+monacoLoader.config({
+  paths: {
+    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs',
+  },
+});
+
 const EDITOR_OPTIONS: EditorProps['options'] = {
   readOnly: true,
   minimap: { enabled: false },