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

The @patternfly/react-code-editor library uses a CDN to load some Monaco stuff by default. This doesn't work for all consumers. Adjusting so we can do without the CDN.

Author: rebeccaalpert

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: {

package-lock.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/package.json

@@ -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;