How to use monaco-editor-core - 10 common examples
To help you get started, we’ve selected a few monaco-editor-core 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.
microsoft / BotFramework-Composer / Composer / packages / tools / language-servers / language-understanding / demo / src / client.ts View on Github 
});
monaco.editor.defineTheme('lutheme', {
base: 'vs',
inherit: false,
colors: {},
rules: [],
});
// create Monaco editor
const value = `@ ml a
@ composite la = [a, b]
`;
const editor = monaco.editor.create(document.getElementById('container')!, {
model: monaco.editor.createModel(value, 'bflu', monaco.Uri.parse('inmemory://model.json')),
glyphMargin: true,
autoClosingBrackets: 'always',
wordBasedSuggestions: false,
autoIndent: true,
formatOnType: true,
lightbulb: {
enabled: true,
},
theme: 'lutheme',
});
// install Monaco language client services
MonacoServices.install(editor);
// create the web socket
const url = createUrl('/luServer');monaco.languages.register({
id: 'bflu',
extensions: ['.lu'],
aliases: ['LU', 'language-understanding'],
mimetypes: ['application/lu'],
});
monaco.languages.setLanguageConfiguration('bflu', {
autoClosingPairs: [
{ open: '{', close: '}' },
{ open: '[', close: ']' },
{ open: '(', close: ')' },
],
});
monaco.editor.defineTheme('lutheme', {
base: 'vs',
inherit: false,
colors: {},
rules: [],
});
// create Monaco editor
const value = `@ ml a
@ composite la = [a, b]
`;
const editor = monaco.editor.create(document.getElementById('container')!, {
model: monaco.editor.createModel(value, 'bflu', monaco.Uri.parse('inmemory://model.json')),
glyphMargin: true,
autoClosingBrackets: 'always',
wordBasedSuggestions: false,[/^\s*@\{/, { token: 'expression', next: '@expression' }],
[/=\s*[\s\S]+\s*$/, { token: 'structure-property' }],
[/\s*[a-zA-Z0-9_-]+\s*$/, { token: 'structure-name' }],
[/./, 'structure-lg.content'],
],
},
});
monaco.languages.register({
id: 'botbuilderlg',
extensions: ['.lg'],
aliases: ['LG', 'language-generation'],
mimetypes: ['application/lg'],
});
monaco.editor.defineTheme('lgtheme', {
base: 'vs',
inherit: false,
colors: {},
rules: [
{ token: 'template-name', foreground: '0000FF' },
{ token: 'function-name', foreground: '79571E' },
{ token: 'keywords', foreground: '0000FF' },
{ token: 'comments', foreground: '7A7574' },
{ token: 'number', foreground: '00A32B' },
{ token: 'string', foreground: 'DF2C2C' },
{ token: 'structure-name', foreground: '00B7C3' },
],
});
// create Monaco editor
const value = `#ted{ token: 'keywords', foreground: '0000FF' },
{ token: 'comments', foreground: '7A7574' },
{ token: 'number', foreground: '00A32B' },
{ token: 'string', foreground: 'DF2C2C' },
{ token: 'structure-name', foreground: '00B7C3' },
],
});
// create Monaco editor
const value = `#ted
- hello hello
- range
- great
- ted hello `;
const editor = monaco.editor.create(document.getElementById('container')!, {
model: monaco.editor.createModel(value, 'botbuilderlg', monaco.Uri.parse('inmemory://model.json')),
glyphMargin: true,
lightbulb: {
enabled: true,
},
theme: 'lgtheme',
});
// install Monaco language client services
MonacoServices.install(editor);
// create the web socket
const url = createUrl('/lgServer');
const webSocket = createWebSocket(url);
// listen when the web socket is opened
listen({
webSocket,monaco.languages.setMonarchTokensProvider('botframeworklu', {
ignoreCase: true,
tokenizer: {
root: [],
},
});
monaco.languages.register({
id: 'bflu',
extensions: ['.lu'],
aliases: ['LU', 'language-understanding'],
mimetypes: ['application/lu'],
});
monaco.languages.setLanguageConfiguration('bflu', {
autoClosingPairs: [
{ open: '{', close: '}' },
{ open: '[', close: ']' },
{ open: '(', close: ')' },
],
});
monaco.editor.defineTheme('lutheme', {
base: 'vs',
inherit: false,
colors: {},
rules: [],
});
// create Monaco editor
const value = `@ ml aimport * as monaco from 'monaco-editor-core';
import { listen, MessageConnection, Disposable } from 'vscode-ws-jsonrpc';
import {
MonacoLanguageClient,
CloseAction,
ErrorAction,
MonacoServices,
createConnection,
} from 'monaco-languageclient';
import normalizeUrl = require('normalize-url');
const ReconnectingWebSocket = require('reconnecting-websocket');
// register Monaco languages
monaco.languages.setMonarchTokensProvider('botframeworklu', {
ignoreCase: true,
tokenizer: {
root: [],
},
});
monaco.languages.register({
id: 'bflu',
extensions: ['.lu'],
aliases: ['LU', 'language-understanding'],
mimetypes: ['application/lu'],
});
monaco.languages.setLanguageConfiguration('bflu', {
autoClosingPairs: [
{ open: '{', close: '}' },import * as monaco from 'monaco-editor-core';
import { listen, MessageConnection } from 'vscode-ws-jsonrpc';
import {
MonacoLanguageClient,
CloseAction,
ErrorAction,
MonacoServices,
createConnection,
} from 'monaco-languageclient';
import normalizeUrl = require('normalize-url');
const ReconnectingWebSocket = require('reconnecting-websocket');
// register Monaco languages
monaco.languages.setMonarchTokensProvider('botbuilderlg', {
ignoreCase: true,
brackets: [
{ open: '{', close: '}', token: 'delimiter.curly' },
{ open: '[', close: ']', token: 'delimiter.bracket' },
{ open: '(', close: ')', token: 'delimiter.parenthesis' },
],
tokenizer: {
root: [
// template name line
[/^\s*#/, { token: 'template-name', next: '@template_name' }],
// template body
[/^\s*-/, { token: 'template-body-identifier', goBack: 1, next: '@template_body' }],
//comments
[/^\s*>/, { token: 'comments', next: '@comments' }],
// import statement in lg
[/\[.*\]/, 'imports'],self.onmessage = () => {
// ignore the first message
worker.initialize((ctx, createData) => {
return new JSONWorker(ctx, createData)
});
};self.onmessage = () => {
// ignore the first message
worker.initialize((ctx: monaco.worker.IWorkerContext, createData: ICreateData) => {
return new TypeScriptWorker(ctx, createData)
});
};const webSocket = createWebSocket(url);
// listen when the web socket is opened
listen({
webSocket,
onConnection: connection => {
// create and start the language client
const languageClient = createLanguageClient(connection);
const disposable: Disposable = languageClient.start();
connection.onClose(() => disposable.dispose());
// editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.F9, function () {
// connection.sendRequest(DocumentOnTypeFormattingRequest.type );
// });
},
});
const keybinding = editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.F9, function() {
if (webSocket.OPEN) {
}
});
function createLanguageClient(connection: MessageConnection): MonacoLanguageClient {
return new MonacoLanguageClient({
name: 'LU Language Client',
clientOptions: {
// use a language id as a document selector
documentSelector: ['bflu'],
// disable the default error handler
errorHandler: {
error: () => ErrorAction.Continue,
closed: () => CloseAction.DoNotRestart,
},
//middleware
