How to use @theia/monaco - 10 common examples
To help you get started, we’ve selected a few @theia/monaco examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
eclipse-theia / theia / packages / editorconfig / src / browser / editorconfig-document-manager.ts View on Github 
protected addOnSaveHandler(editorWidget: EditorWidget): void {
const monacoEditor = MonacoEditor.get(editorWidget);
if (monacoEditor) {
monacoEditor.document.onWillSaveModel(event => {
event.waitUntil(new Promise(resolve => {
const uri = monacoEditor.uri.toString();
const properties = this.properties[uri];
const edits = [];
edits.push(...this.getEditsTrimmingTrailingWhitespaces(monacoEditor, properties, event.reason));
const edit = this.getEditInsertingFinalNewLine(monacoEditor, properties);
if (edit) {
edits.push(edit);
// get current cursor position
const cursor = monacoEditor.cursor;organizeImports(): void {
const editor = MonacoEditor.get(this.currentEditor);
if (editor) {
// tslint:disable-next-line:no-any
const action = editor.getControl().getAction('editor.action.organizeImports') as any;
// workaround isSupported check
action._run();
}
}private convertEmbeddedLanguages(languages?: ScopeMap): IEmbeddedLanguagesMap | undefined {
if (typeof languages === 'undefined' || languages === null) {
return undefined;
}
// tslint:disable-next-line:no-null-keyword
const result = Object.create(null);
const scopes = Object.keys(languages);
const len = scopes.length;
for (let i = 0; i < len; i++) {
const scope = scopes[i];
const langId = languages[scope];
result[scope] = getEncodedLanguageId(langId);
}
return result;
}protected async init(): Promise {
this.toDispose.push(this.zone = new MonacoEditorZoneWidget(this.editor.getControl()));
this.zone.containerNode.classList.add('theia-debug-exception-widget');
this.toDispose.push(Disposable.create(() => ReactDOM.unmountComponentAtNode(this.zone.containerNode)));
}protected async init(): Promise {
this.toDispose.push(this.zone = new MonacoEditorZoneWidget(this.editor.getControl()));
this.zone.containerNode.classList.add('theia-debug-breakpoint-widget');
const selectNode = this.selectNode = document.createElement('div');
selectNode.classList.add('theia-debug-breakpoint-select');
this.zone.containerNode.appendChild(selectNode);
const inputNode = document.createElement('div');
inputNode.classList.add('theia-debug-breakpoint-input');
this.zone.containerNode.appendChild(inputNode);
const input = this._input = await this.createInput(inputNode);
if (this.toDispose.disposed) {
input.dispose();
return;
}
this.toDispose.push(input);private getEditsTrimmingTrailingWhitespaces(editor: MonacoEditor, properties: KnownProps, saveReason?: TextDocumentSaveReason): monaco.editor.IIdentifiedSingleEditOperation[] {
const edits = [];
if (this.isSet(properties.trim_trailing_whitespace)) {
if (MonacoEditor.get(this.editorManager.activeEditor) === editor) {
const trimReason = (saveReason !== TextDocumentSaveReason.Manual) ? 'auto-save' : undefined;
editor.commandService.executeCommand('editor.action.trimTrailingWhitespace', {
reason: trimReason
});
return [];
}
const lines = editor.document.lineCount;
for (let i = 1; i <= lines; i++) {
const line = editor.document.textEditorModel.getLineContent(i);
const trimmedLine = line.trimRight();
if (line.length !== trimmedLine.length) {
edits.push({
forceMoveMarkers: false,
range: new monaco.Range(i, trimmedLine.length + 1, i, line.length + 1),private onEditorCreated(editor: EditorWidget): void {
const monacoEditor = MonacoEditor.get(editor);
if (monacoEditor) {
this.onEditorAdded(monacoEditor);
editor.disposed.connect(e => this.onEditorRemoved(monacoEditor));
}
}}
});
registry.registerTextmateGrammarScope('source.js.regexp', {
async getGrammarDefinition(): Promise {
return {
format: 'plist',
content: regExpGrammar,
};
}
});
registry.registerGrammarConfiguration(this.js_id, {
embeddedLanguages: {
'meta.tag.js': getEncodedLanguageId('jsx-tags'),
'meta.tag.without-attributes.js': getEncodedLanguageId('jsx-tags'),
'meta.tag.attributes.js.jsx': getEncodedLanguageId('javascriptreact'),
'meta.embedded.expression.js': getEncodedLanguageId('javascriptreact')
},
tokenTypes: {
'entity.name.type.instance.jsdoc': StandardTokenType.Other,
'entity.name.function.tagged-template': StandardTokenType.Other,
'meta.import string.quoted': StandardTokenType.Other,
'variable.other.jsdoc': StandardTokenType.Other
}
});
registry.mapLanguageIdToTextmateGrammar(this.js_id, 'source.js');
const jsxGrammar = require('../../data/javascript.jsx.tmlanguage.json');
registry.registerTextmateGrammarScope('source.jsx', {
async getGrammarDefinition(): Promise {registry.registerTextmateGrammarScope('source.js.regexp', {
async getGrammarDefinition(): Promise {
return {
format: 'plist',
content: regExpGrammar,
};
}
});
registry.registerGrammarConfiguration(this.js_id, {
embeddedLanguages: {
'meta.tag.js': getEncodedLanguageId('jsx-tags'),
'meta.tag.without-attributes.js': getEncodedLanguageId('jsx-tags'),
'meta.tag.attributes.js.jsx': getEncodedLanguageId('javascriptreact'),
'meta.embedded.expression.js': getEncodedLanguageId('javascriptreact')
},
tokenTypes: {
'entity.name.type.instance.jsdoc': StandardTokenType.Other,
'entity.name.function.tagged-template': StandardTokenType.Other,
'meta.import string.quoted': StandardTokenType.Other,
'variable.other.jsdoc': StandardTokenType.Other
}
});
registry.mapLanguageIdToTextmateGrammar(this.js_id, 'source.js');
const jsxGrammar = require('../../data/javascript.jsx.tmlanguage.json');
registry.registerTextmateGrammarScope('source.jsx', {
async getGrammarDefinition(): Promise {
return {
format: 'json',});
registry.registerTextmateGrammarScope('source.js.regexp', {
async getGrammarDefinition(): Promise {
return {
format: 'plist',
content: regExpGrammar,
};
}
});
registry.registerGrammarConfiguration(this.js_id, {
embeddedLanguages: {
'meta.tag.js': getEncodedLanguageId('jsx-tags'),
'meta.tag.without-attributes.js': getEncodedLanguageId('jsx-tags'),
'meta.tag.attributes.js.jsx': getEncodedLanguageId('javascriptreact'),
'meta.embedded.expression.js': getEncodedLanguageId('javascriptreact')
},
tokenTypes: {
'entity.name.type.instance.jsdoc': StandardTokenType.Other,
'entity.name.function.tagged-template': StandardTokenType.Other,
'meta.import string.quoted': StandardTokenType.Other,
'variable.other.jsdoc': StandardTokenType.Other
}
});
registry.mapLanguageIdToTextmateGrammar(this.js_id, 'source.js');
const jsxGrammar = require('../../data/javascript.jsx.tmlanguage.json');
registry.registerTextmateGrammarScope('source.jsx', {
async getGrammarDefinition(): Promise {
return {
