Bump "monaco-editor" and "react-monaco-editor" to latest versions (#90158)

* Update version of react-monaco-editor and monaco-editor libraries

* Fix yarn lock file

* Fix CI

* Fix unit tests

* Fix CI

* Fix comment

* move monaco instance in window.MonacoEnvironment

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -247,7 +247,7 @@
     "moment": "^2.24.0",
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.27",
-    "monaco-editor": "^0.17.0",
+    "monaco-editor": "^0.22.3",
     "mustache": "^2.3.2",
     "ngreact": "^0.5.1",
     "nock": "12.0.3",
@@ -772,7 +772,7 @@
     "react-fast-compare": "^2.0.4",
     "react-grid-layout": "^0.16.2",
     "react-markdown": "^4.3.1",
-    "react-monaco-editor": "^0.27.0",
+    "react-monaco-editor": "^0.41.2",
     "react-popper-tooltip": "^2.10.1",
     "react-resize-detector": "^4.2.0",
     "react-reverse-portal": "^1.0.4",

packages/kbn-monaco/src/register_globals.ts

@@ -39,6 +39,8 @@ const mapLanguageIdToWorker: { [key: string]: any } = {
 
 // @ts-ignore
 window.MonacoEnvironment = {
+  // needed for functional tests so that we can get value from 'editor'
+  monaco,
   getWorker: (module: string, languageId: string) => {
     const workerSrc = mapLanguageIdToWorker[languageId] || defaultWorkerSrc;
 

packages/kbn-test/jest-preset.js

@@ -93,9 +93,9 @@ module.exports = {
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   transformIgnorePatterns: [
-    // ignore all node_modules except monaco-editor which requires babel transforms to handle dynamic import()
+    // ignore all node_modules except monaco-editor and react-monaco-editor which requires babel transforms to handle dynamic import()
     // since ESM modules are not natively supported in Jest yet (https://github.com/facebook/jest/issues/4842)
-    '[/\\\\]node_modules(?![\\/\\\\]monaco-editor)[/\\\\].+\\.js$',
+    '[/\\\\]node_modules(?![\\/\\\\](monaco-editor|react-monaco-editor))[/\\\\].+\\.js$',
     'packages/kbn-pm/dist/index.js',
   ],
 

packages/kbn-ui-shared-deps/webpack.config.js

@@ -85,6 +85,13 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
           },
         ],
       },
+      {
+        test: /\.(ttf)(\?|$)/,
+        loader: 'url-loader',
+        options: {
+          limit: 8192,
+        },
+      },
     ],
   },
 

src/plugins/kibana_react/public/code_editor/code_editor.stories.tsx

@@ -165,7 +165,6 @@ storiesOf('CodeEditor', module)
               provideCompletionItems: provideSuggestions,
             }}
             options={{
-              wordBasedSuggestions: false,
               quickSuggestions: true,
             }}
           />

src/plugins/kibana_react/public/code_editor/code_editor.test.tsx

@@ -50,9 +50,6 @@ test('editor mount setup', () => {
       suggestions: [],
     }),
   };
-  const signatureProvider = {
-    provideSignatureHelp: () => ({ signatures: [], activeParameter: 0, activeSignature: 0 }),
-  };
   const hoverProvider = {
     provideHover: (model: monaco.editor.ITextModel, position: monaco.Position) => ({
       contents: [],
@@ -82,7 +79,6 @@ test('editor mount setup', () => {
       onChange={() => {}}
       editorWillMount={editorWillMount}
       suggestionProvider={suggestionProvider}
-      signatureProvider={signatureProvider}
       hoverProvider={hoverProvider}
     />
   );
@@ -99,6 +95,5 @@ test('editor mount setup', () => {
   // Verify our language features have been registered
   expect((monaco.languages.onLanguage as jest.Mock).mock.calls.length).toBe(1);
   expect((monaco.languages.registerCompletionItemProvider as jest.Mock).mock.calls.length).toBe(1);
-  expect((monaco.languages.registerSignatureHelpProvider as jest.Mock).mock.calls.length).toBe(1);
   expect((monaco.languages.registerHoverProvider as jest.Mock).mock.calls.length).toBe(1);
 });

src/plugins/vis_type_timelion/public/components/timelion_expression_input.tsx

@@ -115,7 +115,6 @@ function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputPro
               minimap: {
                 enabled: false,
               },
-              wordBasedSuggestions: false,
               wordWrap: 'on',
               wrappingIndent: 'indent',
             }}

test/functional/services/inspector.ts

@@ -241,7 +241,7 @@ export function InspectorProvider({ getService }: FtrProviderContext) {
 
       await retry.try(async () => {
         request = await browser.execute(
-          () => (window as any).monaco.editor.getModels()[0].getValue() as string
+          () => (window as any).MonacoEnvironment.monaco.editor.getModels()[0].getValue() as string
         );
       });
 

x-pack/plugins/canvas/public/components/expression_input/expression_input.tsx

@@ -324,7 +324,6 @@ export class ExpressionInput extends React.Component<Props> {
                 minimap: {
                   enabled: false,
                 },
-                wordBasedSuggestions: false,
                 wordWrap: 'on',
                 wrappingIndent: 'indent',
               }}

yarn.lock

@@ -6488,7 +6488,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.23", "@types/react@^16.9.36":
+"@types/react@*", "@types/react@^16.9.36":
   version "16.9.36"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.36.tgz#ade589ff51e2a903e34ee4669e05dbfa0c1ce849"
   integrity sha512-mGgUb/Rk/vGx4NCvquRuSH0GHBQKb1OqpGS9cT9lFxlTLHZgkksgI60TuIxubmn7JuCb+sENHhQciqa0npm0AQ==
@@ -21069,10 +21069,10 @@ moment-timezone@^0.5.27:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.28.0.tgz#cdfe73ce01327cee6537b0fafac2e0f21a237d75"
   integrity sha512-Z5KOjYmnHyd/ukynmFd/WwyXHd7L4J9vTI/nn5Ap9AVUgaAE15VvQ9MOGmJJygEUklupqIrFnor/tjTwRU+tQw==
 
-monaco-editor@^0.17.0:
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.17.1.tgz#8fbe96ca54bfa75262706e044f8f780e904aa45c"
-  integrity sha512-JAc0mtW7NeO+0SwPRcdkfDbWLgkqL9WfP1NbpP9wNASsW6oWqgZqNIWt4teymGjZIXTElx3dnQmUYHmVrJ7HxA==
+monaco-editor@*, monaco-editor@^0.22.3:
+  version "0.22.3"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.22.3.tgz#69b42451d3116c6c08d9b8e052007ff891fd85d7"
+  integrity sha512-RM559z2CJbczZ3k2b+ouacMINkAYWwRit4/vs0g2X/lkYefDiu0k2GmgWjAuiIpQi+AqASPOKvXNmYc8KUSvVQ==
 
 monitor-event-loop-delay@^1.0.0:
   version "1.0.0"
@@ -24247,12 +24247,12 @@ react-moment-proptypes@^1.7.0:
   dependencies:
     moment ">=1.6.0"
 
-react-monaco-editor@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.27.0.tgz#2dbf47b8fd4d8e4763934051f07291d9b128bb89"
-  integrity sha512-Im40xO4DuFlQ6kVcSBHC+p70fD/5aErUy1uyLT9RZ4nlehn6BOPpwmcw/2IN/LfMvy8X4WmLuuvrNftBZLH+vA==
+react-monaco-editor@^0.41.2:
+  version "0.41.2"
+  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.41.2.tgz#7ec9cadc101d73003a908fca61c50011f237d2b5"
+  integrity sha512-0nNqkkSLtUQDHtcCASv3ccYukD+P2uvFzcFZGh6iWg9RZF3Rj9/+jqsTNo2cl4avkX8JVGC/qnZr/g7hxXTBTQ==
   dependencies:
-    "@types/react" "^16.8.23"
+    monaco-editor "*"
     prop-types "^15.7.2"
 
 react-motion@^0.4.8: