fix(CodeEditor): Don't use CDN for loading monaco

jest.config.js

@@ -38,7 +38,8 @@ module.exports = {
     customReact: 'react',
     reactRedux: 'react-redux',
     PFReactCore: '@patternfly/react-core',
-    PFReactTable: '@patternfly/react-table'
+    PFReactTable: '@patternfly/react-table',
+    '^monaco-editor$': '<rootDir>/packages/module/src/__mocks__/monaco-editor.ts'
   },
   globalSetup: '<rootDir>/config/globalSetup.js',
   transform: {

packages/module/package.json

@@ -39,6 +39,7 @@
     "@patternfly/react-table": "^6.1.0",
     "@segment/analytics-next": "^1.76.0",
     "clsx": "^2.1.0",
+    "monaco-editor": "^0.54.0",
     "path-browserify": "^1.0.1",
     "posthog-js": "^1.194.4",
     "react-markdown": "^9.0.1",

packages/module/src/CodeModal/CodeModal.tsx

@@ -5,7 +5,8 @@
 import type { FunctionComponent, MouseEvent } from 'react';
 import { useState, useEffect, useRef } from 'react';
 import path from 'path-browserify';
-import type monaco from 'monaco-editor';
+import * as monaco from 'monaco-editor';
+import { loader } from '@monaco-editor/react';
 
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
@@ -22,6 +23,9 @@ import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 
+// Configure Monaco loader to use the npm package instead of CDN
+loader.config({ monaco });
+
 export interface CodeModalProps {
   /** Class applied to code editor */
   codeEditorControlClassName?: string;

packages/module/src/__mocks__/monaco-editor.ts

@@ -0,0 +1,19 @@
+const mockEditor = {
+  layout: jest.fn(),
+  focus: jest.fn(),
+  dispose: jest.fn(),
+  getModel: jest.fn(),
+  updateOptions: jest.fn()
+};
+
+const mockModel = {
+  updateOptions: jest.fn(),
+  dispose: jest.fn()
+};
+
+module.exports = {
+  editor: {
+    create: jest.fn(() => mockEditor),
+    getModels: jest.fn(() => [mockModel])
+  }
+};