Grafana-UI: Type onEditorDidMount (#33178)

This commit is contained in:
Josh Hunt 2021-04-21 10:16:54 +01:00 committed by GitHub
parent 0dcd0281ab
commit 0463164f8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 5 deletions

View File

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

View File

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

View File

@ -8,6 +8,7 @@ import {
LinkButton,
Segment,
CodeEditor,
MonacoEditor,
CodeEditorSuggestionItem,
CodeEditorSuggestionItemKind,
} from '@grafana/ui';
@ -157,7 +158,7 @@ export class FluxQueryEditor extends PureComponent<Props> {
// 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);
};