mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 17:25:39 +01:00
Move website files to /website/
This commit is contained in:
Alex Dima
parent
430d8e6e17
commit
d9013a86c4
191 changed files with 9 additions and 9 deletions
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
var editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
|
||||
language: 'json'
|
||||
});
|
||||
|
||||
var commandId = editor.addCommand(
|
||||
0,
|
||||
function () {
|
||||
// services available in `ctx`
|
||||
alert('my command is executing!');
|
||||
},
|
||||
''
|
||||
);
|
||||
|
||||
monaco.languages.registerCodeLensProvider('json', {
|
||||
provideCodeLenses: function (model, token) {
|
||||
return {
|
||||
lenses: [
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
id: 'First Line',
|
||||
command: {
|
||||
id: commandId,
|
||||
title: 'First Line'
|
||||
}
|
||||
}
|
||||
],
|
||||
dispose: () => {}
|
||||
};
|
||||
},
|
||||
resolveCodeLens: function (model, codeLens, token) {
|
||||
return codeLens;
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
monaco.languages.register({
|
||||
id: 'colorLanguage'
|
||||
});
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: 'red\nblue\ngreen',
|
||||
language: 'colorLanguage',
|
||||
colorDecorators: true
|
||||
});
|
||||
|
||||
monaco.languages.registerColorProvider('colorLanguage', {
|
||||
provideColorPresentations: (model, colorInfo) => {
|
||||
var color = colorInfo.color;
|
||||
var red256 = Math.round(color.red * 255);
|
||||
var green256 = Math.round(color.green * 255);
|
||||
var blue256 = Math.round(color.blue * 255);
|
||||
var label;
|
||||
if (color.alpha === 1) {
|
||||
label = 'rgb(' + red256 + ', ' + green256 + ', ' + blue256 + ')';
|
||||
} else {
|
||||
label = 'rgba(' + red256 + ', ' + green256 + ', ' + blue256 + ', ' + color.alpha + ')';
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
label: label
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
provideDocumentColors: () => {
|
||||
return [
|
||||
{
|
||||
color: { red: 1, blue: 0, green: 0, alpha: 1 },
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 0,
|
||||
endLineNumber: 1,
|
||||
endColumn: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
color: { red: 0, blue: 1, green: 0, alpha: 1 },
|
||||
range: {
|
||||
startLineNumber: 2,
|
||||
startColumn: 0,
|
||||
endLineNumber: 2,
|
||||
endColumn: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
color: { red: 0, blue: 0, green: 1, alpha: 1 },
|
||||
range: {
|
||||
startLineNumber: 3,
|
||||
startColumn: 0,
|
||||
endLineNumber: 3,
|
||||
endColumn: 0
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
function createDependencyProposals(range) {
|
||||
// returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
|
||||
// here you could do a server side lookup
|
||||
return [
|
||||
{
|
||||
label: '"lodash"',
|
||||
kind: monaco.languages.CompletionItemKind.Function,
|
||||
documentation: 'The Lodash library exported as Node.js modules.',
|
||||
insertText: '"lodash": "*"',
|
||||
range: range
|
||||
},
|
||||
{
|
||||
label: '"express"',
|
||||
kind: monaco.languages.CompletionItemKind.Function,
|
||||
documentation: 'Fast, unopinionated, minimalist web framework',
|
||||
insertText: '"express": "*"',
|
||||
range: range
|
||||
},
|
||||
{
|
||||
label: '"mkdirp"',
|
||||
kind: monaco.languages.CompletionItemKind.Function,
|
||||
documentation: 'Recursively mkdir, like <code>mkdir -p</code>',
|
||||
insertText: '"mkdirp": "*"',
|
||||
range: range
|
||||
},
|
||||
{
|
||||
label: '"my-third-party-library"',
|
||||
kind: monaco.languages.CompletionItemKind.Function,
|
||||
documentation: 'Describe your library here',
|
||||
insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
||||
range: range
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
monaco.languages.registerCompletionItemProvider('json', {
|
||||
provideCompletionItems: function (model, position) {
|
||||
// find out if we are completing a property in the 'dependencies' object.
|
||||
var textUntilPosition = model.getValueInRange({
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: position.lineNumber,
|
||||
endColumn: position.column
|
||||
});
|
||||
var match = textUntilPosition.match(
|
||||
/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/
|
||||
);
|
||||
if (!match) {
|
||||
return { suggestions: [] };
|
||||
}
|
||||
var word = model.getWordUntilPosition(position);
|
||||
var range = {
|
||||
startLineNumber: position.lineNumber,
|
||||
endLineNumber: position.lineNumber,
|
||||
startColumn: word.startColumn,
|
||||
endColumn: word.endColumn
|
||||
};
|
||||
return {
|
||||
suggestions: createDependencyProposals(range)
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
|
||||
language: 'json'
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
// Add additional d.ts files to the JavaScript language service and change.
|
||||
// Also change the default compilation options.
|
||||
// The sample below shows how a class Facts is declared and introduced
|
||||
// to the system and how the compiler is told to use ES6 (target=2).
|
||||
|
||||
// validation settings
|
||||
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
||||
noSemanticValidation: true,
|
||||
noSyntaxValidation: false
|
||||
});
|
||||
|
||||
// compiler options
|
||||
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
||||
target: monaco.languages.typescript.ScriptTarget.ES6,
|
||||
allowNonTsExtensions: true
|
||||
});
|
||||
|
||||
// extra libraries
|
||||
var libSource = [
|
||||
'declare class Facts {',
|
||||
' /**',
|
||||
' * Returns the next fact',
|
||||
' */',
|
||||
' static next():string',
|
||||
'}'
|
||||
].join('\n');
|
||||
var libUri = 'ts:filename/facts.d.ts';
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
|
||||
// When resolving definitions and references, the editor will try to use created models.
|
||||
// Creating a model for the library allows "peek definition/references" commands to work with the library.
|
||||
monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
|
||||
|
||||
var jsCode = [
|
||||
'"use strict";',
|
||||
'',
|
||||
'class Chuck {',
|
||||
' greet() {',
|
||||
' return Facts.next();',
|
||||
' }',
|
||||
'}'
|
||||
].join('\n');
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: jsCode,
|
||||
language: 'javascript'
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
// Configures two JSON schemas, with references.
|
||||
|
||||
var jsonCode = ['{', ' "p1": "v3",', ' "p2": false', '}'].join('\n');
|
||||
var modelUri = monaco.Uri.parse('a://b/foo.json'); // a made up unique URI for our model
|
||||
var model = monaco.editor.createModel(jsonCode, 'json', modelUri);
|
||||
|
||||
// configure the JSON language support with schemas and schema associations
|
||||
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
||||
validate: true,
|
||||
schemas: [
|
||||
{
|
||||
uri: 'http://myserver/foo-schema.json', // id of the first schema
|
||||
fileMatch: [modelUri.toString()], // associate with our model
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
p1: {
|
||||
enum: ['v1', 'v2']
|
||||
},
|
||||
p2: {
|
||||
$ref: 'http://myserver/bar-schema.json' // reference the second schema
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
uri: 'http://myserver/bar-schema.json', // id of the second schema
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
q1: {
|
||||
enum: ['x1', 'x2']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
model: model
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
// Register a new language
|
||||
monaco.languages.register({ id: 'mySpecialLanguage' });
|
||||
|
||||
// Register a tokens provider for the language
|
||||
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
|
||||
tokenizer: {
|
||||
root: [
|
||||
[/\[error.*/, 'custom-error'],
|
||||
[/\[notice.*/, 'custom-notice'],
|
||||
[/\[info.*/, 'custom-info'],
|
||||
[/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Define a new theme that contains only rules that match this language
|
||||
monaco.editor.defineTheme('myCoolTheme', {
|
||||
base: 'vs',
|
||||
inherit: false,
|
||||
rules: [
|
||||
{ token: 'custom-info', foreground: '808080' },
|
||||
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
||||
{ token: 'custom-notice', foreground: 'FFA500' },
|
||||
{ token: 'custom-date', foreground: '008800' }
|
||||
]
|
||||
});
|
||||
|
||||
// Register a completion item provider for the new language
|
||||
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
|
||||
provideCompletionItems: () => {
|
||||
var suggestions = [
|
||||
{
|
||||
label: 'simpleText',
|
||||
kind: monaco.languages.CompletionItemKind.Text,
|
||||
insertText: 'simpleText'
|
||||
},
|
||||
{
|
||||
label: 'testing',
|
||||
kind: monaco.languages.CompletionItemKind.Keyword,
|
||||
insertText: 'testing(${1:condition})',
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
|
||||
},
|
||||
{
|
||||
label: 'ifelse',
|
||||
kind: monaco.languages.CompletionItemKind.Snippet,
|
||||
insertText: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'),
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
||||
documentation: 'If-Else Statement'
|
||||
}
|
||||
];
|
||||
return { suggestions: suggestions };
|
||||
}
|
||||
});
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
theme: 'myCoolTheme',
|
||||
value: getCode(),
|
||||
language: 'mySpecialLanguage'
|
||||
});
|
||||
|
||||
function getCode() {
|
||||
return [
|
||||
'[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations',
|
||||
'[Sun Mar 7 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37',
|
||||
'[Sun Mar 7 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)',
|
||||
'[Sun Mar 7 16:05:49 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 16:45:56 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:13:50 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:21:44 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:23:53 2004] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd/twiki/lib/TWiki.pm line 528.',
|
||||
"[Sun Mar 7 17:23:53 2004] statistics: Can't create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied",
|
||||
'[Sun Mar 7 17:27:37 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:31:39 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:58:00 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:00:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:10:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:19:01 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:42:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:52:30 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:58:52 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 19:03:58 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 19:08:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:04:35 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:11:33 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:12:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:25:31 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:44:48 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome',
|
||||
'[Sun Mar 7 21:20:14 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 21:31:12 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 21:39:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 21:44:10 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 01:35:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 01:47:06 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 01:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 02:12:24 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 02:54:54 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 03:46:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 03:48:18 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 03:52:17 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 03:55:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:22:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:24:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:40:32 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:55:40 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 05:22:57 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 05:24:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 05:31:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'<11>httpd[31628]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_inf.html in 29-Mar 15:18:20.50 from xx.xx.xx.xx',
|
||||
'<11>httpd[25859]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_bin/shtml.exe/_vti_rpc in 29-Mar 15:18:20.54 from xx.xx.xx.xx'
|
||||
].join('\n');
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
monaco.languages.register({
|
||||
id: 'foldLanguage'
|
||||
});
|
||||
|
||||
var value = `1. Hit F1 to bring up the Command Palette
|
||||
2. Type 'fold'
|
||||
3. Choose 'Fold All Block Comments' or 'Fold All Regions'
|
||||
|
||||
5. comment1
|
||||
6. comment1
|
||||
7. comment1
|
||||
|
||||
9. unfoldable text
|
||||
10. unfoldable text
|
||||
11. unfoldable text
|
||||
|
||||
13. comment2
|
||||
14. comment2
|
||||
15. comment2
|
||||
16. comment2
|
||||
17. comment2
|
||||
|
||||
19. foldable text
|
||||
20. foldable text
|
||||
21. foldable text
|
||||
|
||||
23. region1
|
||||
24. region1
|
||||
25. region1
|
||||
|
||||
27. region2
|
||||
28. region2
|
||||
29. region2`;
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: value,
|
||||
language: 'foldLanguage'
|
||||
});
|
||||
|
||||
monaco.languages.registerFoldingRangeProvider('foldLanguage', {
|
||||
provideFoldingRanges: function (model, context, token) {
|
||||
return [
|
||||
// comment1
|
||||
{
|
||||
start: 5,
|
||||
end: 7,
|
||||
kind: monaco.languages.FoldingRangeKind.Comment
|
||||
},
|
||||
// comment2
|
||||
{
|
||||
start: 13,
|
||||
end: 17,
|
||||
kind: monaco.languages.FoldingRangeKind.Comment
|
||||
},
|
||||
// foldable text
|
||||
{
|
||||
start: 19,
|
||||
end: 21
|
||||
},
|
||||
// region1
|
||||
{
|
||||
start: 23,
|
||||
end: 25,
|
||||
kind: monaco.languages.FoldingRangeKind.Region
|
||||
},
|
||||
// region2
|
||||
{
|
||||
start: 27,
|
||||
end: 29,
|
||||
kind: monaco.languages.FoldingRangeKind.Region
|
||||
}
|
||||
];
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
monaco.languages.register({ id: 'mySpecialLanguage' });
|
||||
|
||||
monaco.languages.registerHoverProvider('mySpecialLanguage', {
|
||||
provideHover: function (model, position) {
|
||||
return xhr('../playground.html').then(function (res) {
|
||||
return {
|
||||
range: new monaco.Range(
|
||||
1,
|
||||
1,
|
||||
model.getLineCount(),
|
||||
model.getLineMaxColumn(model.getLineCount())
|
||||
),
|
||||
contents: [
|
||||
{ value: '**SOURCE**' },
|
||||
{ value: '```html\n' + res.responseText.substring(0, 200) + '\n```' }
|
||||
]
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: '\n\nHover over this text',
|
||||
language: 'mySpecialLanguage'
|
||||
});
|
||||
|
||||
function xhr(url) {
|
||||
var req = null;
|
||||
return new Promise(
|
||||
function (c, e) {
|
||||
req = new XMLHttpRequest();
|
||||
req.onreadystatechange = function () {
|
||||
if (req._canceled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.readyState === 4) {
|
||||
if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
|
||||
c(req);
|
||||
} else {
|
||||
e(req);
|
||||
}
|
||||
req.onreadystatechange = function () {};
|
||||
}
|
||||
};
|
||||
|
||||
req.open('GET', url, true);
|
||||
req.responseType = '';
|
||||
|
||||
req.send(null);
|
||||
},
|
||||
function () {
|
||||
req._canceled = true;
|
||||
req.abort();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
const value = `
|
||||
const f = (a, b) => a + b;
|
||||
|
||||
const result = f(2, 5);
|
||||
`;
|
||||
|
||||
const editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value,
|
||||
language: 'javascript'
|
||||
});
|
||||
|
||||
monaco.languages.registerInlayHintsProvider('javascript', {
|
||||
provideInlayHints(model, range, token) {
|
||||
return [
|
||||
{
|
||||
kind: monaco.languages.InlayHintKind.Type,
|
||||
position: { column: 13, lineNumber: 4 },
|
||||
text: `: Number`
|
||||
},
|
||||
{
|
||||
kind: monaco.languages.InlayHintKind.Type,
|
||||
position: { column: 13, lineNumber: 2 },
|
||||
text: `: Number`
|
||||
},
|
||||
{
|
||||
kind: monaco.languages.InlayHintKind.Type,
|
||||
position: { column: 16, lineNumber: 2 },
|
||||
text: `: Number`,
|
||||
whitespaceBefore: true // see difference between a and b parameter
|
||||
},
|
||||
{
|
||||
kind: monaco.languages.InlayHintKind.Parameter,
|
||||
position: { column: 18, lineNumber: 4 },
|
||||
text: `a:`
|
||||
},
|
||||
{
|
||||
kind: monaco.languages.InlayHintKind.Parameter,
|
||||
position: { column: 21, lineNumber: 4 },
|
||||
text: `b:`,
|
||||
whitespaceAfter: true // similar to whitespaceBefore
|
||||
}
|
||||
];
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
/** @type {monaco.languages.SemanticTokensLegend} */
|
||||
const legend = {
|
||||
tokenTypes: [
|
||||
'comment',
|
||||
'string',
|
||||
'keyword',
|
||||
'number',
|
||||
'regexp',
|
||||
'operator',
|
||||
'namespace',
|
||||
'type',
|
||||
'struct',
|
||||
'class',
|
||||
'interface',
|
||||
'enum',
|
||||
'typeParameter',
|
||||
'function',
|
||||
'member',
|
||||
'macro',
|
||||
'variable',
|
||||
'parameter',
|
||||
'property',
|
||||
'label'
|
||||
],
|
||||
tokenModifiers: [
|
||||
'declaration',
|
||||
'documentation',
|
||||
'readonly',
|
||||
'static',
|
||||
'abstract',
|
||||
'deprecated',
|
||||
'modification',
|
||||
'async'
|
||||
]
|
||||
};
|
||||
|
||||
/** @type {(type: string)=>number} */
|
||||
function getType(type) {
|
||||
return legend.tokenTypes.indexOf(type);
|
||||
}
|
||||
|
||||
/** @type {(modifier: string[]|string|null)=>number} */
|
||||
function getModifier(modifiers) {
|
||||
if (typeof modifiers === 'string') {
|
||||
modifiers = [modifiers];
|
||||
}
|
||||
if (Array.isArray(modifiers)) {
|
||||
let nModifiers = 0;
|
||||
for (let modifier of modifiers) {
|
||||
const nModifier = legend.tokenModifiers.indexOf(modifier);
|
||||
if (nModifier > -1) {
|
||||
nModifiers |= (1 << nModifier) >>> 0;
|
||||
}
|
||||
}
|
||||
return nModifiers;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
const tokenPattern = new RegExp('([a-zA-Z]+)((?:\\.[a-zA-Z]+)*)', 'g');
|
||||
|
||||
monaco.languages.registerDocumentSemanticTokensProvider('plaintext', {
|
||||
getLegend: function () {
|
||||
return legend;
|
||||
},
|
||||
provideDocumentSemanticTokens: function (model, lastResultId, token) {
|
||||
const lines = model.getLinesContent();
|
||||
|
||||
/** @type {number[]} */
|
||||
const data = [];
|
||||
|
||||
let prevLine = 0;
|
||||
let prevChar = 0;
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
|
||||
for (let match = null; (match = tokenPattern.exec(line)); ) {
|
||||
// translate token and modifiers to number representations
|
||||
let type = getType(match[1]);
|
||||
if (type === -1) {
|
||||
continue;
|
||||
}
|
||||
let modifier = match[2].length ? getModifier(match[2].split('.').slice(1)) : 0;
|
||||
|
||||
data.push(
|
||||
// translate line to deltaLine
|
||||
i - prevLine,
|
||||
// for the same line, translate start to deltaStart
|
||||
prevLine === i ? match.index - prevChar : match.index,
|
||||
match[0].length,
|
||||
type,
|
||||
modifier
|
||||
);
|
||||
|
||||
prevLine = i;
|
||||
prevChar = match.index;
|
||||
}
|
||||
}
|
||||
return {
|
||||
data: new Uint32Array(data),
|
||||
resultId: null
|
||||
};
|
||||
},
|
||||
releaseDocumentSemanticTokens: function (resultId) {}
|
||||
});
|
||||
|
||||
// add some missing tokens
|
||||
monaco.editor.defineTheme('myCustomTheme', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
colors: {},
|
||||
rules: [
|
||||
{ token: 'comment', foreground: 'aaaaaa', fontStyle: 'italic' },
|
||||
{ token: 'keyword', foreground: 'ce63eb' },
|
||||
{ token: 'operator', foreground: '000000' },
|
||||
{ token: 'namespace', foreground: '66afce' },
|
||||
|
||||
{ token: 'type', foreground: '1db010' },
|
||||
{ token: 'struct', foreground: '0000ff' },
|
||||
{ token: 'class', foreground: '0000ff', fontStyle: 'bold' },
|
||||
{ token: 'interface', foreground: '007700', fontStyle: 'bold' },
|
||||
{ token: 'enum', foreground: '0077ff', fontStyle: 'bold' },
|
||||
{ token: 'typeParameter', foreground: '1db010' },
|
||||
{ token: 'function', foreground: '94763a' },
|
||||
|
||||
{ token: 'member', foreground: '94763a' },
|
||||
{ token: 'macro', foreground: '615a60' },
|
||||
{ token: 'variable', foreground: '3e5bbf' },
|
||||
{ token: 'parameter', foreground: '3e5bbf' },
|
||||
{ token: 'property', foreground: '3e5bbf' },
|
||||
{ token: 'label', foreground: '615a60' },
|
||||
|
||||
{ token: 'type.static', fontStyle: 'bold' },
|
||||
{ token: 'class.static', foreground: 'ff0000', fontStyle: 'bold' }
|
||||
]
|
||||
});
|
||||
|
||||
const editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: [
|
||||
'Available token types:',
|
||||
' [comment] [string] [keyword] [number] [regexp] [operator] [namespace]',
|
||||
' [type] [struct] [class] [interface] [enum] [typeParameter] [function]',
|
||||
' [member] [macro] [variable] [parameter] [property] [label]',
|
||||
'',
|
||||
'Available token modifiers:',
|
||||
' [type.declaration] [type.documentation] [type.member] [type.static]',
|
||||
' [type.abstract] [type.deprecated] [type.modification] [type.async]',
|
||||
'',
|
||||
'Some examples:',
|
||||
' [class.static.token] [type.static.abstract]',
|
||||
' [class.static.token] [type.static]',
|
||||
'',
|
||||
' [struct]',
|
||||
'',
|
||||
' [function.private]',
|
||||
'',
|
||||
'An error case:',
|
||||
' [notInLegend]'
|
||||
].join('\n'),
|
||||
language: 'plaintext',
|
||||
theme: 'myCustomTheme',
|
||||
// semantic tokens provider is disabled by default
|
||||
'semanticHighlighting.enabled': true
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div id="container" style="height: 100%"></div>
|
||||
|
|
@ -0,0 +1,480 @@
|
|||
monaco.languages.registerDocumentSymbolProvider('json', {
|
||||
provideDocumentSymbols: function (model, token) {
|
||||
return [
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'File',
|
||||
kind: 0,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Module',
|
||||
kind: 1,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Namespace',
|
||||
kind: 2,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Package',
|
||||
kind: 3,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Class',
|
||||
kind: 4,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Method',
|
||||
kind: 5,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Property',
|
||||
kind: 6,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Field',
|
||||
kind: 7,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Constructor',
|
||||
kind: 8,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Enum',
|
||||
kind: 9,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Interface',
|
||||
kind: 10,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Function',
|
||||
kind: 11,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Variable',
|
||||
kind: 12,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Constant',
|
||||
kind: 13,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'String',
|
||||
kind: 14,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Number',
|
||||
kind: 15,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Boolean',
|
||||
kind: 16,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Array',
|
||||
kind: 17,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Object',
|
||||
kind: 18,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Key',
|
||||
kind: 19,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Null',
|
||||
kind: 20,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'EnumMember',
|
||||
kind: 21,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Struct',
|
||||
kind: 22,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Event',
|
||||
kind: 23,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'Operator',
|
||||
kind: 24,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
range: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
},
|
||||
name: 'TypeParameter',
|
||||
kind: 25,
|
||||
detail: '',
|
||||
tags: [],
|
||||
selectionRange: {
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 2,
|
||||
endColumn: 1
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
// press Ctrl+Shift+O to show the symbols in the editor
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
|
||||
language: 'json'
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue