diff --git a/packages/grafana-ui/src/components/Monaco/types.ts b/packages/grafana-ui/src/components/Monaco/types.ts index 982d48f0611..5371a9ccdc6 100644 --- a/packages/grafana-ui/src/components/Monaco/types.ts +++ b/packages/grafana-ui/src/components/Monaco/types.ts @@ -1,8 +1,11 @@ -import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; +// We use `import type` to guarentee it'll be erased from the JS and it doesnt accidently bundle monaco +import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; export type CodeEditorChangeHandler = (value: string) => void; export type CodeEditorSuggestionProvider = () => CodeEditorSuggestionItem[]; +export type MonacoEditor = monaco.editor.IStandaloneCodeEditor; + export interface CodeEditorProps { value: string; language: string; @@ -17,9 +20,9 @@ export interface CodeEditorProps { /** * Callback after the editor has mounted that gives you raw access to monaco * - * @alpha -- experimental - real type is: monaco.editor.IStandaloneCodeEditor + * @alpha -- experimental */ - onEditorDidMount?: (editor: any) => void; + onEditorDidMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void; /** Handler to be performed when editor is blurred */ onBlur?: CodeEditorChangeHandler; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 9178abe20a4..bceb4083fcd 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -38,7 +38,7 @@ export { QueryField } from './QueryField/QueryField'; // Code editor export { CodeEditor } from './Monaco/CodeEditorLazy'; -export { CodeEditorSuggestionItem, CodeEditorSuggestionItemKind } from './Monaco/types'; +export { MonacoEditor, CodeEditorSuggestionItem, CodeEditorSuggestionItemKind } from './Monaco/types'; export { variableSuggestionToCodeEditorSuggestion } from './Monaco/utils'; // TODO: namespace diff --git a/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx b/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx index 0a07b05328a..de2e33bc672 100644 --- a/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx @@ -8,6 +8,7 @@ import { LinkButton, Segment, CodeEditor, + MonacoEditor, CodeEditorSuggestionItem, CodeEditorSuggestionItemKind, } from '@grafana/ui'; @@ -157,7 +158,7 @@ export class FluxQueryEditor extends PureComponent { // For some reason in angular, when this component gets re-mounted, the width // is not set properly. This forces the layout shortly after mount so that it // displays OK. Note: this is not an issue when used directly in react - editorDidMountCallbackHack = (editor: any) => { + editorDidMountCallbackHack = (editor: MonacoEditor) => { setTimeout(() => editor.layout(), 100); };