fix(designer): load monaco as part of build instead of CDN (#4401)

* fix(designer): load monaco as part of build instead of CDN

* fix tests

custom-webpack.config.js

@@ -1,6 +1,7 @@
 const ReactConfig = require('@nrwl/react/plugins/webpack');
 const { merge } = require('webpack-merge');
 const webpack = require('webpack');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 module.exports = (config, context) => {
   const webpackConfig = ReactConfig(config, context);
   webpackConfig.resolve.alias['https'] = false;
@@ -10,6 +11,8 @@ module.exports = (config, context) => {
       aliasFields: ['browser', 'browser.esm'],
     },
     plugins: [
+      new MonacoWebpackPlugin(),
+
       new webpack.ProvidePlugin({
         // Make a global `process` variable that points to the `process` package,
         // because the `util` package expects there to be a global variable named `process`.

libs/chatbot/jest.config.ts

@@ -15,10 +15,12 @@ export default {
   transformIgnorePatterns: [
     // all exceptions must be first line
     '/node_modules/(?!@fluentui/react)',
+    '/node_modules/(?!(monaco-editor))',
   ],
   moduleNameMapper: {
     '@fluentui/react/lib/(.*)$': '@fluentui/react/lib-commonjs/$1',
     'react-markdown': 'react-markdown/react-markdown.min.js',
+    '^monaco-editor$': '@monaco-editor/react',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/chatbot',

libs/designer-ui/jest.config.ts

@@ -16,10 +16,12 @@ export default {
     // all exceptions must be first line
     '/node_modules/(?!@fluentui/react)',
     '/node_modules/(?!react-markdown)',
+    '/node_modules/(?!(monaco-editor))',
   ],
   moduleNameMapper: {
     '@fluentui/react/lib/(.*)$': '@fluentui/react/lib-commonjs/$1',
     'react-markdown': 'react-markdown/react-markdown.min.js',
+    '^monaco-editor$': '@monaco-editor/react',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/designer-ui',

libs/designer-ui/src/lib/editor/monaco/index.tsx

@@ -2,10 +2,12 @@ import Constants from '../../constants';
 import { registerWorkflowLanguageProviders } from '../../workflow/languageservice/workflowlanguageservice';
 import { useTheme } from '@fluentui/react';
 import Editor, { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
 import type { IScrollEvent, editor } from 'monaco-editor';
 import type { MutableRefObject } from 'react';
 import { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
 
+loader.config({ monaco });
 export interface EditorContentChangedEventArgs extends editor.IModelContentChangedEvent {
   value?: string;
 }

libs/designer/jest.config.ts

@@ -19,6 +19,7 @@ export default {
   moduleNameMapper: {
     '@fluentui/react/lib/(.*)$': '@fluentui/react/lib-commonjs/$1',
     'react-markdown': 'react-markdown/react-markdown.min.js',
+    '^monaco-editor$': '@monaco-editor/react',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/designer',

package.json

@@ -66,7 +66,7 @@
     "@microsoft/vscode-azext-azureappservice": "^0.8.1",
     "@microsoft/vscode-azext-azureutils": "^0.3.9",
     "@microsoft/vscode-azext-utils": "^0.4.0",
-    "@monaco-editor/react": "4.4.6",
+    "@monaco-editor/react": "4.6.0",
     "@react-hookz/web": "22.0.0",
     "@reduxjs/toolkit": "1.8.5",
     "@swc/helpers": "~0.3.17",
@@ -93,7 +93,8 @@
     "lodash.frompairs": "^4.0.1",
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.2",
-    "monaco-editor": "0.36.1",
+    "monaco-editor": "^0.47.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "monaco-yaml": "^4.0.4",
     "pathfinding": "^0.4.18",
     "prism-react-renderer": "^1.3.5",