diff --git a/config/webpack.config.js b/config/webpack.config.js
index 422f60736e76f5a83b269aa85b99862395df02e6..f4324ffafc719cd7689be475e3ad805c7cfa8c43 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -398,7 +398,9 @@ module.exports = {
     new VueLoaderPlugin(),
 
     // automatically configure monaco editor web workers
-    new MonacoWebpackPlugin(),
+    new MonacoWebpackPlugin({
+      globalAPI: true,
+    }),
 
     // fix legacy jQuery plugins which depend on globals
     new webpack.ProvidePlugin({
diff --git a/package.json b/package.json
index a3b26bbe02720ea211459abe9483de2c22a9d6f3..1a721d0f019f11de228fb3f60cdc9658ecb95c04 100644
--- a/package.json
+++ b/package.json
@@ -144,8 +144,8 @@
     "mathjax": "3",
     "mermaid": "^8.10.2",
     "minimatch": "^3.0.4",
-    "monaco-editor": "^0.20.0",
-    "monaco-editor-webpack-plugin": "^1.9.1",
+    "monaco-editor": "^0.25.2",
+    "monaco-editor-webpack-plugin": "^4.0.0",
     "monaco-yaml": "^2.5.1",
     "mousetrap": "1.6.5",
     "pdfjs-dist": "^2.0.943",
@@ -263,7 +263,7 @@
   },
   "resolutions": {
     "chokidar": "^3.4.0",
-    "monaco-editor": "0.20.0"
+    "monaco-editor": "0.24.0"
   },
   "engines": {
     "node": ">=10.13.0",
diff --git a/spec/frontend/editor/source_editor_spec.js b/spec/frontend/editor/source_editor_spec.js
index cf3e2c025e4cb184addb57308d44f11a02199329..d87d373c952884440e659874eacc69403816a317 100644
--- a/spec/frontend/editor/source_editor_spec.js
+++ b/spec/frontend/editor/source_editor_spec.js
@@ -246,7 +246,7 @@ describe('Base editor', () => {
     let editorEl2;
     let inst1;
     let inst2;
-    const readOnlyIndex = '68'; // readOnly option has the internal index of 68 in the editor's options
+    const readOnlyIndex = '78'; // readOnly option has the internal index of 78 in the editor's options
 
     beforeEach(() => {
       setFixtures('<div id="editor1"></div><div id="editor2"></div>');
diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js
index d1bc11538a3bc7d7a197b3557d0ca240d66c6146..9cebe2d1e014baf5904765e1916fd9d4de6d307a 100644
--- a/spec/frontend/environment.js
+++ b/spec/frontend/environment.js
@@ -67,6 +67,24 @@ class CustomEnvironment extends JSDOMEnvironment {
       getEntriesByName: () => [],
     });
 
+    //
+    // Monaco-related environment variables
+    //
+    this.global.MonacoEnvironment = { globalAPI: true };
+    Object.defineProperty(this.global, 'matchMedia', {
+      writable: true,
+      value: (query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => null, // deprecated
+        removeListener: () => null, // deprecated
+        addEventListener: () => null,
+        removeEventListener: () => null,
+        dispatchEvent: () => null,
+      }),
+    });
+
     this.global.PerformanceObserver = class {
       /* eslint-disable no-useless-constructor, no-unused-vars, no-empty-function, class-methods-use-this */
       constructor(callback) {}
diff --git a/spec/frontend_integration/ide/helpers/ide_helper.js b/spec/frontend_integration/ide/helpers/ide_helper.js
index 6c09b44d891b22ef60e65a92f10a1c94b0aeb8aa..56b2e298aa3079a627b0387ca8903af02c81fa8e 100644
--- a/spec/frontend_integration/ide/helpers/ide_helper.js
+++ b/spec/frontend_integration/ide/helpers/ide_helper.js
@@ -7,6 +7,7 @@ import {
   screen,
   findByText,
 } from '@testing-library/dom';
+import { editor as monacoEditor } from 'monaco-editor';
 
 const isFolderRowOpen = (row) => row.matches('.folder.is-open');
 
@@ -23,7 +24,10 @@ export const switchLeftSidebarTab = (name) => {
 export const getStatusBar = () => document.querySelector('.ide-status-bar');
 
 export const waitForMonacoEditor = () =>
-  new Promise((resolve) => window.monaco.editor.onDidCreateEditor(resolve));
+  new Promise((resolve) => monacoEditor.onDidCreateEditor(resolve));
+
+export const waitForEditorDispose = (instance) =>
+  new Promise((resolve) => instance.onDidDispose(resolve));
 
 export const waitForEditorModelChange = (instance) =>
   new Promise((resolve) => instance.onDidChangeModel(resolve));
@@ -38,14 +42,14 @@ export const findAndSetEditorValue = async (value) => {
   const editor = await findMonacoEditor();
   const uri = editor.getAttribute('data-uri');
 
-  window.monaco.editor.getModel(uri).setValue(value);
+  monacoEditor.getModel(uri).setValue(value);
 };
 
 export const getEditorValue = async () => {
   const editor = await findMonacoEditor();
   const uri = editor.getAttribute('data-uri');
 
-  return window.monaco.editor.getModel(uri).getValue();
+  return monacoEditor.getModel(uri).getValue();
 };
 
 const findTreeBody = () => screen.findByTestId('ide-tree-body');
diff --git a/yarn.lock b/yarn.lock
index b747fac356651c39b41a2240c4238415b5691857..66641d33503916ea342b40f713c643f8c15017ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8550,17 +8550,22 @@ moment-mini@^2.22.1:
   resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.22.1.tgz#bc32d73e43a4505070be6b53494b17623183420d"
   integrity sha512-OUCkHOz7ehtNMYuZjNciXUfwTuz8vmF1MTbAy59ebf+ZBYZO5/tZKuChVWCX+uDo+4idJBpGltNfV8st+HwsGw==
 
-monaco-editor-webpack-plugin@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.9.1.tgz#eb4bbb1c5e5bfb554541c1ae1542e74c2a9f43fd"
-  integrity sha512-x7fx1w3i/uwZERIgztHAAK3VQMsL8+ku0lFXXbO81hKDg8IieACqjGEa2mqEueg0c/fX+wd0oI+75wB19KJAsA==
+monaco-editor-webpack-plugin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.0.0.tgz#95be3f48f4220999b909266a9997727f0deab947"
+  integrity sha512-4BT9XDRQXraMQjxEUjR+uuubRe3RIPkvVoGw8zwWG++s7wq6TAiXaSOMdkdS9TrjCREgSnygCOlVzY6MS8RPuA==
   dependencies:
-    loader-utils "^1.2.3"
+    loader-utils "^2.0.0"
 
-monaco-editor@0.20.0, monaco-editor@^0.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.20.0.tgz#5d5009343a550124426cb4d965a4d27a348b4dea"
-  integrity sha512-hkvf4EtPJRMQlPC3UbMoRs0vTAFAYdzFQ+gpMb8A+9znae1c43q8Mab9iVsgTcg/4PNiLGGn3SlDIa8uvK1FIQ==
+monaco-editor@0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.24.0.tgz#990b55096bcc95d08d8d28e55264c6eb17707269"
+  integrity sha512-o1f0Lz6ABFNTtnEqqqvlY9qzNx24rQZx1RgYNQ8SkWkE+Ka63keHH/RqxQ4QhN4fs/UYOnvAtEUZsPrzccH++A==
+
+monaco-editor@^0.25.2:
+  version "0.25.2"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.25.2.tgz#119e2b15bbd968a1a99c03cac9c329316d7c37e9"
+  integrity sha512-5iylzSJevCnzJn9UVsW8yOZ3yHjmAs4TfvH3zsbftKiFKmHG0xirGN6DK9Kk04VSWxYCZZAIafYJoNJJMAU1KA==
 
 monaco-yaml@^2.5.1:
   version "2.5.1"