This is simple example showing how to add auto-complete for your custom javascript object i.e context
.
Open Monaco Editor Playground and paste snippet above into the right panel. Hit run and type context. in the right panel:
auto-complete with list of context
's fields should appear
Last active
June 25, 2020 04:19
-
-
Save har07/d922907f84f9d9a028d329c300c8cfdc to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// The Monaco Editor can be easily created, given an | |
// empty container and an options literal. | |
// Two members of the literal are "value" and "language". | |
// The editor takes the full size of its container. | |
// define and initialize context object | |
const extraLib = `class NXContext { | |
inMessage: any; | |
outMessage: any; | |
generic: any; | |
constructor() { | |
this.inMessage = {}; | |
this.outMessage = {}; | |
this.generic = {}; | |
} | |
}; | |
const context = new NXContext(); | |
` | |
const typescript = monaco.languages.typescript; | |
typescript.javascriptDefaults.setCompilerOptions({ | |
noLib: true, | |
lib: ['ESNext', 'ES2015'], | |
target: typescript.ScriptTarget.ESNext, | |
allowNonTsExtensions: true, | |
}); | |
// register context object in extra libraries | |
typescript.javascriptDefaults.addExtraLib(extraLib, 'ts:filename/nxcontext.d.ts'); | |
monaco.editor.create(document.getElementById("container"), { | |
value: "function hello() {\n\talert('Hello world!');\n}", | |
language: "javascript" | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment