While working with Monaco, I came across a challenge in defining the instance type for encapsulating a component package. I am unsure about how to import the interface IStandaloneCodeEditor | IStandaloneDiffEditor, or if it is necessary at all.
<script lang="ts">
import * as monaco from "monaco-editor";
props: {
diffEditor: {
type: Boolean,
default: false,
},
codes: {
type: String,
default: () => {
return "";
},
},
oldCodes: {
type: String,
default: () => {
return "";
},
},
language: {
type: String,
default: () => {
return "json";
},
},
readOnly: {
type: Boolean,
default: () => {
return false;
},
},
theme: {
type: String,
default: () => {
return "vs";
},
},
}
setup(props: any) {
const state = reactive({
editorInstance: {} // **Questioning how to define the type of editorInstance - IStandaloneCodeEditor or IStandaloneDiffEditor seem appropriate but importing them correctly remains uncertain**
});
onMounted(() => {
if (props.diffEditor) {
state.editorInstance = monaco.editor.createDiffEditor(props.containerRef, {
value: props.codes,
readOnly: props.readOnly,
theme: props.theme,
...props.editorOptions,
});
// **Attempting to assign type any to state.editorInstance does not yield the desired outcome**
(<any>state.editorInstance)!.setModel({
original: monaco.editor.createModel(props.oldCodes, props.language),
modified: monaco.editor.createModel(props.codes, props.language),
});
} else {
state.editorInstance = monaco.editor.create(props.containerRef, {
value: props.codes,
language: props.language,
readOnly: props.readOnly,
theme: props.theme,
...props.editorOptions,
});
}
})
const getModifiedEditor = () => {
// Attempting to assign type any to state.editorInstance does not work
return props.diffEditor ? (<any>state.editorInstance)!.getModifiedEditor() : state.editorInstance;
};
const getOriginalEditor = () => {
return props.diffEditor ? (<any>state.editorInstance)!.getOriginalEditor() : state.editorInstance;
};
}
I believe that introducing the interface is the correct approach.
I came across this information in "monaco-editor/esm/vs/editor/editor.api.d.ts"
export interface IStandaloneCodeEditor extends ICodeEditor {
updateOptions(newOptions: IEditorOptions & IGlobalEditorOptions): void;
addCommand(keybinding: number, handler: ICommandHandler, context?: string): string | null;
createContextKey<T>(key: string, defaultValue: T): IContextKey<T>;
addAction(descriptor: IActionDescriptor): IDisposable;
}
export interface IStandaloneDiffEditor extends IDiffEditor {
addCommand(keybinding: number, handler: ICommandHandler, context?: string): string | null;
createContextKey<T>(key: string, defaultValue: T): IContextKey<T>;
addAction(descriptor: IActionDescriptor): IDisposable;
getOriginalEditor(): IStandaloneCodeEditor;
getModifiedEditor(): IStandaloneCodeEditor;
}
and I imported them like so
import {IStandaloneDiffEditor,IStandaloneCodeEditor} from "monaco-editor/esm/vs/editor/editor.api";
error:
TS2305: Module '"../../node_modules/monaco-editor/esm/vs/editor/editor.api"' has no exported member 'IStandaloneDiffEditor'.