import * as React from 'react'; import * as monacoEditor from '@vscode-alt/monaco-editor/esm/vs/editor/editor.api'; import { URI } from '@vscode-alt/monaco-editor/esm/vs/base/common/uri'; import { IThemeState } from '../../themes'; export type IMonacoComponentContentChangedEvent = monacoEditor.editor.IModelContentChangedEvent & { resource: URI; }; export type ChangeHandler = (event: IMonacoComponentContentChangedEvent) => void; export type EditorDidMount = (editor: monacoEditor.editor.IStandaloneCodeEditor) => void; export type IEditorConfigurationOptions = monacoEditor.editor.IEditorConstructionOptions; export type EditorWillMount = (monaco: typeof monacoEditor) => Partial; export interface MonacoEditorBaseProps { /** * Width of editor. Defaults to 100%. */ width?: string | number; /** * Height of editor. Defaults to 500. */ height?: string | number; /** * The initial value of the auto created model in the editor. */ defaultValue?: string; /** * The initial language of the auto created model in the editor. Defaults to 'javascript'. */ language?: string; /** * Theme to be used for rendering. * The current out-of-the-box available themes are: 'vs' (default), 'vs-dark', 'hc-black'. * You can create custom themes via `monaco.editor.defineTheme`. */ theme?: Partial | null; /** * Optional, allow to config loader url and relative path of module, refer to require.config. */ requireConfig?: any; /** * Optional, allow to pass a different context then the global window onto which the monaco instance will be loaded. Useful if you want to load the editor in an iframe. */ context?: any; /** * editor state */ getEditorState?: (resource: any) => Promise<{ data: { getEditorState: monacoEditor.editor.ICodeEditorViewState; }; }>; /** * update editor state */ updateEditorState?: (resource: URI, state: monacoEditor.editor.ICodeEditorViewState) => void; } export interface IMonacoEditorTextComponentProps extends MonacoEditorBaseProps { /** * Value of the auto created model in the editor. * If you specify value property, the component behaves in controlled mode. Otherwise, it behaves in uncontrolled mode. */ value?: string | null; /** * Refer to Monaco interface {monaco.editor.IEditorConstructionOptions}. */ options?: IEditorConfigurationOptions; /** * An event emitted when the editor has been mounted (similar to componentDidMount of React). */ editorDidMount?: EditorDidMount; /** * An event emitted before the editor mounted (similar to componentWillMount of React). */ editorWillMount?: EditorWillMount; /** * An event emitted when the content of the current model has changed. */ onChange?: ChangeHandler; /** * Uri resource */ uri: URI | string; /** * Enable api */ enableApi?: boolean; /** * If component value need to be set */ doUpdateValue?: boolean; updateCursorState?: any; } export interface IMonacoEditorTextExtensionProps { /** * providers functions */ providers: IProviders; } export type IProviders = { codeLenseProvider?: (props: { uri: monacoEditor.UriComponents; context: any; }) => any; documentSymbolProvider?: (props: { uri: monacoEditor.UriComponents; context: any; }) => any; hoverProvider?: (props: { uri: monacoEditor.UriComponents; context: any; hoverMutate: Function; }) => any; completionProvider?: (props: { uri: monacoEditor.UriComponents; context: any; completionMutate: Function; }) => any; documentFormattingProvider?: (props: { uri: monacoEditor.UriComponents; context: any; formattingMutate: Function; }) => any; referenceProvider?: (props: { uri: monacoEditor.UriComponents; context: any; referenceMutate: Function; }) => any; definitionProvider?: (props: { uri: monacoEditor.UriComponents; context: any; definitionMutate: Function; }) => any; documentHighLightProvider?: (props: { uri: monacoEditor.UriComponents; context: any; highlightMutate: Function; }) => any; renameProvider?: (props: { uri: monacoEditor.UriComponents; context: any; renameEditsMutate: Function; }) => any; }; export type IMonacoEditorTextApiProps = { completionMutate?: Function; formattingMutate?: Function; referenceMutate?: Function; symbolMutate?: Function; hoverMutate?: Function; codeLenseMutate?: Function; highlightMutate?: Function; renameEditsMutate?: Function; definitionMutate?: Function; updateModelMutate?: Function; }; export type IMonacoEditorTextProps = IMonacoEditorTextComponentProps & IMonacoEditorTextApiProps & IMonacoEditorTextExtensionProps; export declare class MonacoEditor extends React.Component { } export type DiffEditorDidMount = (editor: monacoEditor.editor.IStandaloneDiffEditor, monaco: typeof monacoEditor) => void; export type DiffEditorWillMount = (monaco: typeof monacoEditor) => void; export type DiffChangeHandler = (value: string) => void; export interface IMonacoDiffEditorProps extends MonacoEditorBaseProps { /** * The original value to compare against. */ original: string; /** * Value of the auto created model in the editor. * If you specify value property, the component behaves in controlled mode. Otherwise, it behaves in uncontrolled mode. */ value: string; /** * Modified Uri resource */ modifiedUri: string; /** * Original Uri resource */ originalUri: string; /** * Refer to Monaco interface {monaco.editor.IDiffEditorConstructionOptions}. */ options?: monacoEditor.editor.IDiffEditorConstructionOptions; /** * Enable api */ enableApi?: boolean; /** * An event emitted when the editor has been mounted (similar to componentDidMount of React). */ editorDidMount?: DiffEditorDidMount; /** * An event emitted before the editor mounted (similar to componentWillMount of React). */ editorWillMount?: DiffEditorWillMount; /** * An event emitted when the content of the current model has changed. */ onChange?: ChangeHandler; updateCursorState?: any; } export type IMonacoDiffEditorTextProps = IMonacoDiffEditorProps & IMonacoEditorTextApiProps & IMonacoEditorTextExtensionProps; export declare class MonacoDiffEditor extends React.Component { } export type IMonacoEditorProps = IMonacoEditorTextProps | IMonacoDiffEditorProps;