diff --git a/packages/kbn-optimizer/src/index.ts b/packages/kbn-optimizer/src/index.ts index 48777f1d54aaf..9798391d47da4 100644 --- a/packages/kbn-optimizer/src/index.ts +++ b/packages/kbn-optimizer/src/index.ts @@ -17,6 +17,7 @@ * under the License. */ +// cache buster - https://github.com/elastic/kibana/issues/58077 - 1 export { OptimizerConfig } from './optimizer'; export * from './run_optimizer'; export * from './log_optimizer_state'; diff --git a/packages/kbn-ui-shared-deps/entry.js b/packages/kbn-ui-shared-deps/entry.js index 9a5fb479276f7..5028c6efdb40e 100644 --- a/packages/kbn-ui-shared-deps/entry.js +++ b/packages/kbn-ui-shared-deps/entry.js @@ -40,6 +40,8 @@ export const ReactDom = require('react-dom'); export const ReactIntl = require('react-intl'); export const ReactRouter = require('react-router'); // eslint-disable-line export const ReactRouterDom = require('react-router-dom'); +export const Monaco = require('./monaco.ts'); +export const MonacoBare = require('monaco-editor/esm/vs/editor/editor.api'); // load timezone data into moment-timezone Moment.tz.load(require('moment-timezone/data/packed/latest.json')); diff --git a/packages/kbn-ui-shared-deps/index.js b/packages/kbn-ui-shared-deps/index.js index 5f5ac3f1c9c2f..c7c004bd55794 100644 --- a/packages/kbn-ui-shared-deps/index.js +++ b/packages/kbn-ui-shared-deps/index.js @@ -41,4 +41,7 @@ exports.externals = { 'react-intl': '__kbnSharedDeps__.ReactIntl', 'react-router': '__kbnSharedDeps__.ReactRouter', 'react-router-dom': '__kbnSharedDeps__.ReactRouterDom', + '@kbn/ui-shared-deps/monaco': '__kbnSharedDeps__.Monaco', + // this is how plugins/consumers from npm load monaco + 'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBare', }; diff --git a/packages/kbn-ui-shared-deps/monaco.ts b/packages/kbn-ui-shared-deps/monaco.ts new file mode 100644 index 0000000000000..570aca86c484c --- /dev/null +++ b/packages/kbn-ui-shared-deps/monaco.ts @@ -0,0 +1,32 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; + +import 'monaco-editor/esm/vs/base/common/worker/simpleWorker'; +import 'monaco-editor/esm/vs/base/worker/defaultWorkerFactory'; + +import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js'; +import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js'; + +import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js'; // Needed for suggestions +import 'monaco-editor/esm/vs/editor/contrib/hover/hover.js'; // Needed for hover +import 'monaco-editor/esm/vs/editor/contrib/parameterHints/parameterHints.js'; // Needed for signature + +export { monaco }; diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index 37eba706fe18b..9f2bf8558062b 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/packages/kbn-ui-shared-deps/package.json @@ -11,11 +11,11 @@ "devDependencies": { "abortcontroller-polyfill": "^1.4.0", "@elastic/eui": "19.0.0", + "@kbn/babel-preset": "1.0.0", "@elastic/charts": "^16.1.0", "@kbn/dev-utils": "1.0.0", "@kbn/i18n": "1.0.0", "@yarnpkg/lockfile": "^1.1.0", - "abortcontroller-polyfill": "^1.3.0", "angular": "^1.7.9", "core-js": "^3.2.1", "css-loader": "^3.4.2", diff --git a/packages/kbn-ui-shared-deps/tsconfig.json b/packages/kbn-ui-shared-deps/tsconfig.json index c5c3cba147fcf..5d981c73f1d21 100644 --- a/packages/kbn-ui-shared-deps/tsconfig.json +++ b/packages/kbn-ui-shared-deps/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "../../tsconfig.json", "include": [ - "index.d.ts" + "index.d.ts", + "monaco.ts" ] } diff --git a/packages/kbn-ui-shared-deps/webpack.config.js b/packages/kbn-ui-shared-deps/webpack.config.js index 87cca2cc897f8..dc6e7ae33dbec 100644 --- a/packages/kbn-ui-shared-deps/webpack.config.js +++ b/packages/kbn-ui-shared-deps/webpack.config.js @@ -59,6 +59,17 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, + { + include: [require.resolve('./monaco.ts')], + use: [ + { + loader: 'babel-loader', + options: { + presets: [require.resolve('@kbn/babel-preset/webpack_preset')], + }, + }, + ], + }, ], }, diff --git a/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input.tsx b/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input.tsx index e0aa7f6dad2fa..c317451b8201e 100644 --- a/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input.tsx +++ b/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input.tsx @@ -20,7 +20,7 @@ import React, { useEffect, useCallback, useRef, useMemo } from 'react'; import { EuiFormLabel } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'; +import { monaco } from '@kbn/ui-shared-deps/monaco'; import { CodeEditor, useKibana } from '../../../../../plugins/kibana_react/public'; import { suggest, getSuggestion } from './timelion_expression_input_helpers'; @@ -31,7 +31,7 @@ import { } from '../../../../../plugins/timelion/common/types'; const LANGUAGE_ID = 'timelion_expression'; -monacoEditor.languages.register({ id: LANGUAGE_ID }); +monaco.languages.register({ id: LANGUAGE_ID }); interface TimelionExpressionInputProps { value: string; @@ -44,10 +44,10 @@ function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputPro const argValueSuggestions = useMemo(getArgValueSuggestions, []); const provideCompletionItems = useCallback( - async (model: monacoEditor.editor.ITextModel, position: monacoEditor.Position) => { + async (model: monaco.editor.ITextModel, position: monaco.Position) => { const text = model.getValue(); const wordUntil = model.getWordUntilPosition(position); - const wordRange = new monacoEditor.Range( + const wordRange = new monaco.Range( position.lineNumber, wordUntil.startColumn, position.lineNumber, @@ -75,7 +75,7 @@ function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputPro ); const provideHover = useCallback( - async (model: monacoEditor.editor.ITextModel, position: monacoEditor.Position) => { + async (model: monaco.editor.ITextModel, position: monaco.Position) => { const suggestions = await suggest( model.getValue(), functionList.current, diff --git a/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input_helpers.ts b/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input_helpers.ts index 93b6a0d463c01..6f23c864419eb 100644 --- a/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input_helpers.ts +++ b/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input_helpers.ts @@ -19,7 +19,7 @@ import { get, startsWith } from 'lodash'; import { i18n } from '@kbn/i18n'; -import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'; +import { monaco } from '@kbn/ui-shared-deps/monaco'; import { Parser } from 'pegjs'; @@ -215,14 +215,13 @@ export async function suggest( export function getSuggestion( suggestion: ITimelionFunction | TimelionFunctionArgs, type: SUGGESTION_TYPE, - range: monacoEditor.Range -): monacoEditor.languages.CompletionItem { - let kind: monacoEditor.languages.CompletionItemKind = - monacoEditor.languages.CompletionItemKind.Method; + range: monaco.Range +): monaco.languages.CompletionItem { + let kind: monaco.languages.CompletionItemKind = monaco.languages.CompletionItemKind.Method; let insertText: string = suggestion.name; - let insertTextRules: monacoEditor.languages.CompletionItem['insertTextRules']; + let insertTextRules: monaco.languages.CompletionItem['insertTextRules']; let detail: string = ''; - let command: monacoEditor.languages.CompletionItem['command']; + let command: monaco.languages.CompletionItem['command']; switch (type) { case SUGGESTION_TYPE.ARGUMENTS: @@ -230,7 +229,7 @@ export function getSuggestion( title: 'Trigger Suggestion Dialog', id: 'editor.action.triggerSuggest', }; - kind = monacoEditor.languages.CompletionItemKind.Property; + kind = monaco.languages.CompletionItemKind.Property; insertText = `${insertText}=`; detail = `${i18n.translate( 'timelion.expressionSuggestions.argument.description.acceptsText', @@ -245,9 +244,9 @@ export function getSuggestion( title: 'Trigger Suggestion Dialog', id: 'editor.action.triggerSuggest', }; - kind = monacoEditor.languages.CompletionItemKind.Function; + kind = monaco.languages.CompletionItemKind.Function; insertText = `${insertText}($0)`; - insertTextRules = monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet; + insertTextRules = monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet; detail = `(${ (suggestion as ITimelionFunction).chainable ? i18n.translate('timelion.expressionSuggestions.func.description.chainableHelpText', { @@ -270,7 +269,7 @@ export function getSuggestion( title: 'Trigger Suggestion Dialog', id: 'editor.action.triggerSuggest', }; - kind = monacoEditor.languages.CompletionItemKind.Property; + kind = monaco.languages.CompletionItemKind.Property; detail = suggestion.help || ''; break; diff --git a/src/plugins/kibana_react/public/code_editor/code_editor.test.tsx b/src/plugins/kibana_react/public/code_editor/code_editor.test.tsx index 2c305c4ea97da..bcb46fac36856 100644 --- a/src/plugins/kibana_react/public/code_editor/code_editor.test.tsx +++ b/src/plugins/kibana_react/public/code_editor/code_editor.test.tsx @@ -19,13 +19,13 @@ import React from 'react'; import { CodeEditor } from './code_editor'; -import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'; +import { monaco } from '@kbn/ui-shared-deps/monaco'; import { shallow } from 'enzyme'; import 'monaco-editor/esm/vs/basic-languages/html/html.contribution.js'; // A sample language definition with a few example tokens -const simpleLogLang: monacoEditor.languages.IMonarchLanguage = { +const simpleLogLang: monaco.languages.IMonarchLanguage = { tokenizer: { root: [ [/\[error.*/, 'constant'], @@ -36,8 +36,8 @@ const simpleLogLang: monacoEditor.languages.IMonarchLanguage = { }, }; -monacoEditor.languages.register({ id: 'loglang' }); -monacoEditor.languages.setMonarchTokensProvider('loglang', simpleLogLang); +monaco.languages.register({ id: 'loglang' }); +monaco.languages.setMonarchTokensProvider('loglang', simpleLogLang); const logs = ` [Sun Mar 7 20:54:27 2004] [notice] [client xx.xx.xx.xx] This is a notice! @@ -55,23 +55,22 @@ test('is rendered', () => { test('editor mount setup', () => { const suggestionProvider = { - provideCompletionItems: ( - model: monacoEditor.editor.ITextModel, - position: monacoEditor.Position - ) => ({ suggestions: [] }), + provideCompletionItems: (model: monaco.editor.ITextModel, position: monaco.Position) => ({ + suggestions: [], + }), }; const signatureProvider = { provideSignatureHelp: () => ({ signatures: [], activeParameter: 0, activeSignature: 0 }), }; const hoverProvider = { - provideHover: (model: monacoEditor.editor.ITextModel, position: monacoEditor.Position) => ({ + provideHover: (model: monaco.editor.ITextModel, position: monaco.Position) => ({ contents: [], }), }; const editorWillMount = jest.fn(); - monacoEditor.languages.onLanguage = jest.fn((languageId, func) => { + monaco.languages.onLanguage = jest.fn((languageId, func) => { expect(languageId).toBe('loglang'); // Call the function immediately so we can see our providers @@ -79,11 +78,11 @@ test('editor mount setup', () => { func(); }) as any; - monacoEditor.languages.registerCompletionItemProvider = jest.fn(); - monacoEditor.languages.registerSignatureHelpProvider = jest.fn(); - monacoEditor.languages.registerHoverProvider = jest.fn(); + monaco.languages.registerCompletionItemProvider = jest.fn(); + monaco.languages.registerSignatureHelpProvider = jest.fn(); + monaco.languages.registerHoverProvider = jest.fn(); - monacoEditor.editor.defineTheme = jest.fn(); + monaco.editor.defineTheme = jest.fn(); const wrapper = shallow( { ); const instance = wrapper.instance() as CodeEditor; - instance._editorWillMount(monacoEditor); + instance._editorWillMount(monaco); // Verify our mount callback will be called expect(editorWillMount.mock.calls.length).toBe(1); // Verify our theme will be setup - expect((monacoEditor.editor.defineTheme as jest.Mock).mock.calls.length).toBe(1); + expect((monaco.editor.defineTheme as jest.Mock).mock.calls.length).toBe(1); // Verify our language features have been registered - expect((monacoEditor.languages.onLanguage as jest.Mock).mock.calls.length).toBe(1); - expect( - (monacoEditor.languages.registerCompletionItemProvider as jest.Mock).mock.calls.length - ).toBe(1); - expect( - (monacoEditor.languages.registerSignatureHelpProvider as jest.Mock).mock.calls.length - ).toBe(1); - expect((monacoEditor.languages.registerHoverProvider as jest.Mock).mock.calls.length).toBe(1); + 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); }); diff --git a/src/plugins/kibana_react/public/code_editor/code_editor.tsx b/src/plugins/kibana_react/public/code_editor/code_editor.tsx index 62440f12c6d84..37707fdec2140 100644 --- a/src/plugins/kibana_react/public/code_editor/code_editor.tsx +++ b/src/plugins/kibana_react/public/code_editor/code_editor.tsx @@ -19,18 +19,9 @@ import React from 'react'; import ReactResizeDetector from 'react-resize-detector'; -import MonacoEditor, { EditorDidMount, EditorWillMount } from 'react-monaco-editor'; +import MonacoEditor from 'react-monaco-editor'; -import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'; -import 'monaco-editor/esm/vs/base/common/worker/simpleWorker'; -import 'monaco-editor/esm/vs/base/worker/defaultWorkerFactory'; - -import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js'; -import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js'; - -import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js'; // Needed for suggestions -import 'monaco-editor/esm/vs/editor/contrib/hover/hover.js'; // Needed for hover -import 'monaco-editor/esm/vs/editor/contrib/parameterHints/parameterHints.js'; // Needed for signature +import { monaco } from '@kbn/ui-shared-deps/monaco'; import { LIGHT_THEME, DARK_THEME } from './editor_theme'; @@ -55,50 +46,50 @@ export interface Props { * Documentation of options can be found here: * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html */ - options?: monacoEditor.editor.IEditorConstructionOptions; + options?: monaco.editor.IEditorConstructionOptions; /** * Suggestion provider for autocompletion * Documentation for the provider can be found here: * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.completionitemprovider.html */ - suggestionProvider?: monacoEditor.languages.CompletionItemProvider; + suggestionProvider?: monaco.languages.CompletionItemProvider; /** * Signature provider for function parameter info * Documentation for the provider can be found here: * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.signaturehelpprovider.html */ - signatureProvider?: monacoEditor.languages.SignatureHelpProvider; + signatureProvider?: monaco.languages.SignatureHelpProvider; /** * Hover provider for hover documentation * Documentation for the provider can be found here: * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.hoverprovider.html */ - hoverProvider?: monacoEditor.languages.HoverProvider; + hoverProvider?: monaco.languages.HoverProvider; /** * Language config provider for bracket * Documentation for the provider can be found here: * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.languageconfiguration.html */ - languageConfiguration?: monacoEditor.languages.LanguageConfiguration; + languageConfiguration?: monaco.languages.LanguageConfiguration; /** * Function called before the editor is mounted in the view */ - editorWillMount?: EditorWillMount; + editorWillMount?: () => void; /** * Function called before the editor is mounted in the view * and completely replaces the setup behavior called by the component */ - overrideEditorWillMount?: EditorWillMount; + overrideEditorWillMount?: () => void; /** * Function called after the editor is mounted in the view */ - editorDidMount?: EditorDidMount; + editorDidMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void; /** * Should the editor use the dark theme @@ -107,16 +98,20 @@ export interface Props { } export class CodeEditor extends React.Component { - _editor: monacoEditor.editor.IStandaloneCodeEditor | null = null; + _editor: monaco.editor.IStandaloneCodeEditor | null = null; + + _editorWillMount = (__monaco: unknown) => { + if (__monaco !== monaco) { + throw new Error('react-monaco-editor is using a different version of monaco'); + } - _editorWillMount = (monaco: typeof monacoEditor) => { if (this.props.overrideEditorWillMount) { - this.props.overrideEditorWillMount(monaco); + this.props.overrideEditorWillMount(); return; } if (this.props.editorWillMount) { - this.props.editorWillMount(monaco); + this.props.editorWillMount(); } monaco.languages.onLanguage(this.props.languageId, () => { @@ -150,14 +145,15 @@ export class CodeEditor extends React.Component { monaco.editor.defineTheme('euiColors', this.props.useDarkTheme ? DARK_THEME : LIGHT_THEME); }; - _editorDidMount = ( - editor: monacoEditor.editor.IStandaloneCodeEditor, - monaco: typeof monacoEditor - ) => { + _editorDidMount = (editor: monaco.editor.IStandaloneCodeEditor, __monaco: unknown) => { + if (__monaco !== monaco) { + throw new Error('react-monaco-editor is using a different version of monaco'); + } + this._editor = editor; if (this.props.editorDidMount) { - this.props.editorDidMount(editor, monaco); + this.props.editorDidMount(editor); } }; diff --git a/src/plugins/kibana_react/public/code_editor/editor_theme.ts b/src/plugins/kibana_react/public/code_editor/editor_theme.ts index 41702f1b3fc35..6e30135686797 100644 --- a/src/plugins/kibana_react/public/code_editor/editor_theme.ts +++ b/src/plugins/kibana_react/public/code_editor/editor_theme.ts @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'; +import { monaco } from '@kbn/ui-shared-deps/monaco'; import darkTheme from '@elastic/eui/dist/eui_theme_dark.json'; import lightTheme from '@elastic/eui/dist/eui_theme_light.json'; @@ -27,7 +27,7 @@ import lightTheme from '@elastic/eui/dist/eui_theme_light.json'; export function createTheme( euiTheme: typeof darkTheme | typeof lightTheme, selectionBackgroundColor: string -): monacoEditor.editor.IStandaloneThemeData { +): monaco.editor.IStandaloneThemeData { return { base: 'vs', inherit: true, diff --git a/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/expression_input.examples.tsx b/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/expression_input.examples.tsx index 880269385d12f..51caf1db196bc 100644 --- a/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/expression_input.examples.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/expression_input.examples.tsx @@ -7,7 +7,7 @@ import { action } from '@storybook/addon-actions'; import { storiesOf } from '@storybook/react'; import React from 'react'; -import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; +import { monaco } from '@kbn/ui-shared-deps/monaco'; import { ExpressionInput } from '../expression_input'; import { language, LANGUAGE_ID } from '../../../lib/monaco_language_def'; diff --git a/x-pack/legacy/plugins/canvas/public/components/expression_input/expression_input.tsx b/x-pack/legacy/plugins/canvas/public/components/expression_input/expression_input.tsx index 9653decb6db97..faac2ae883c13 100644 --- a/x-pack/legacy/plugins/canvas/public/components/expression_input/expression_input.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/expression_input/expression_input.tsx @@ -8,7 +8,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { EuiFormRow } from '@elastic/eui'; import { debounce } from 'lodash'; -import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'; +import { monaco } from '@kbn/ui-shared-deps/monaco'; import { ExpressionFunction } from '../../../../../../../src/plugins/expressions'; import { CodeEditor } from '../../../../../../../src/plugins/kibana_react/public'; import { @@ -46,7 +46,7 @@ export class ExpressionInput extends React.Component { onChange: PropTypes.func.isRequired, }; - editor: monacoEditor.editor.IStandaloneCodeEditor | null; + editor: monaco.editor.IStandaloneCodeEditor | null; undoHistory: string[]; redoHistory: string[]; @@ -114,9 +114,9 @@ export class ExpressionInput extends React.Component { }; provideSuggestions = ( - model: monacoEditor.editor.ITextModel, - position: monacoEditor.Position, - context: monacoEditor.languages.CompletionContext + model: monaco.editor.ITextModel, + position: monaco.Position, + context: monaco.languages.CompletionContext ) => { const text = model.getValue(); const textRange = model.getFullModelRange(); @@ -128,13 +128,13 @@ export class ExpressionInput extends React.Component { endColumn: textRange.endColumn, }); - let wordRange: monacoEditor.Range; + let wordRange: monaco.Range; let aSuggestions; if (context.triggerCharacter === '{') { const wordUntil = model.getWordAtPosition(position.delta(0, -3)); if (wordUntil) { - wordRange = new monacoEditor.Range( + wordRange = new monaco.Range( position.lineNumber, position.column, position.lineNumber, @@ -151,7 +151,7 @@ export class ExpressionInput extends React.Component { } } else { const wordUntil = model.getWordUntilPosition(position); - wordRange = new monacoEditor.Range( + wordRange = new monaco.Range( position.lineNumber, wordUntil.startColumn, position.lineNumber, @@ -173,7 +173,7 @@ export class ExpressionInput extends React.Component { if (s.type === 'argument') { return { label: s.argDef.name, - kind: monacoEditor.languages.CompletionItemKind.Variable, + kind: monaco.languages.CompletionItemKind.Variable, documentation: { value: getArgReferenceStr(s.argDef), isTrusted: true }, insertText: s.text, command: { @@ -186,7 +186,7 @@ export class ExpressionInput extends React.Component { } else if (s.type === 'value') { return { label: s.text, - kind: monacoEditor.languages.CompletionItemKind.Value, + kind: monaco.languages.CompletionItemKind.Value, insertText: s.text, command: { title: 'Trigger Suggestion Dialog', @@ -198,7 +198,7 @@ export class ExpressionInput extends React.Component { } else { return { label: s.fnDef.name, - kind: monacoEditor.languages.CompletionItemKind.Function, + kind: monaco.languages.CompletionItemKind.Function, documentation: { value: getFunctionReferenceStr(s.fnDef), isTrusted: true, @@ -219,7 +219,7 @@ export class ExpressionInput extends React.Component { }; }; - providerHover = (model: monacoEditor.editor.ITextModel, position: monacoEditor.Position) => { + providerHover = (model: monaco.editor.ITextModel, position: monaco.Position) => { const text = model.getValue(); const word = model.getWordAtPosition(position); @@ -248,7 +248,7 @@ export class ExpressionInput extends React.Component { const startPos = model.getPositionAt(argStart); const endPos = model.getPositionAt(argEnd); - const argRange = new monacoEditor.Range( + const argRange = new monaco.Range( startPos.lineNumber, startPos.column, endPos.lineNumber, @@ -275,10 +275,7 @@ export class ExpressionInput extends React.Component { }; }; - editorDidMount = ( - editor: monacoEditor.editor.IStandaloneCodeEditor, - monaco: typeof monacoEditor - ) => { + editorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => { // Updating tab size for the editor const model = editor.getModel(); if (model) { diff --git a/x-pack/legacy/plugins/canvas/public/lib/monaco_language_def.ts b/x-pack/legacy/plugins/canvas/public/lib/monaco_language_def.ts index e15be9a90beb0..cd054bff3b7d2 100644 --- a/x-pack/legacy/plugins/canvas/public/lib/monaco_language_def.ts +++ b/x-pack/legacy/plugins/canvas/public/lib/monaco_language_def.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; +import { monaco } from '@kbn/ui-shared-deps/monaco'; import { npSetup } from 'ui/new_platform'; export const LANGUAGE_ID = 'canvas-expression'; diff --git a/yarn.lock b/yarn.lock index 7361fe0e74d83..59b857b12dd0b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6442,11 +6442,6 @@ abort-controller@^2.0.3: dependencies: event-target-shim "^5.0.0" -abortcontroller-polyfill@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.3.0.tgz#de69af32ae926c210b7efbcc29bf644ee4838b00" - integrity sha512-lbWQgf+eRvku3va8poBlDBO12FigTQr9Zb7NIjXrePrhxWVKdCP2wbDl1tLDaYa18PWTom3UEWwdH13S46I+yA== - abortcontroller-polyfill@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.4.0.tgz#0d5eb58e522a461774af8086414f68e1dda7a6c4" @@ -10618,7 +10613,7 @@ contour_plot@^0.0.1: resolved "https://registry.yarnpkg.com/contour_plot/-/contour_plot-0.0.1.tgz#475870f032b8e338412aa5fc507880f0bf495c77" integrity sha1-R1hw8DK44zhBKqX8UHiA8L9JXHc= -convert-source-map@1.7.0: +convert-source-map@1.7.0, convert-source-map@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== @@ -10642,13 +10637,6 @@ convert-source-map@^1.5.1, convert-source-map@^1.6.0: dependencies: safe-buffer "~5.1.1" -convert-source-map@^1.7.0: - version "1.7.0" - resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" - integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== - dependencies: - safe-buffer "~5.1.1" - convex-hull@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/convex-hull/-/convex-hull-1.0.3.tgz#20a3aa6ce87f4adea2ff7d17971c9fc1c67e1fff"