SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 07:00:11 +01:00
Code Issues Projects Releases Packages Activity

Simplify paths in metadata.js

Browse source
This commit is contained in:
Alex Dima 2021-11-08 16:32:06 +01:00
parent a155838b58
commit 1a21834a97
No known key found for this signature in database
GPG key ID: 39563C1504FDD0C9
33 changed files with 1267 additions and 1198 deletions
Download patch file Download diff file Expand all files Collapse all files

28
gulpfile.js
View file

@ -1,9 +1,9 @@
const gulp = require('gulp');
/**
* @typedef { { src:string; 'npm/dev':string; 'npm/min':string; built:string; releaseDev:string; releaseMin:string; } ICorePaths }
* @typedef { { src:string; dev:string; min:string; esm: string; } IPluginPaths }
* @typedef { { name:string; contrib:string; modulePrefix:string; rootPath:string; paths:IPluginPaths } IPlugin }
* @typedef { { METADATA: {CORE:ICorePaths; PLUGINS:IPlugin[];} } IMetadata }
* @typedef { { src:string; 'npm/dev':string; 'npm/min':string; built:string; releaseDev:string; releaseMin:string; } } ICorePaths
* @typedef { { src:string; dev:string; min:string; esm: string; } } IPluginPaths
* @typedef { { name:string; contrib:string; modulePrefix:string; rootPath:string; paths:IPluginPaths } } IPlugin
* @typedef { { METADATA: {CORE:{paths:ICorePaths}; PLUGINS:IPlugin[];} } } IMetadata
* @type { IMetadata }
*/
const metadata = require('./monaco-editor/metadata');
@ -19,7 +19,7 @@ const uncss = require('uncss');
const File = require('vinyl');
const ts = require('typescript');
const WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/new-samples');
const WEBSITE_GENERATED_PATH = path.join(__dirname, 'monaco-editor/website/playground/new-samples');
const MONACO_EDITOR_VERSION = (function () {
const packageJsonPath = path.join(__dirname, 'package.json');
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath).toString());
@ -156,7 +156,7 @@ function pluginStreams(type, destinationPath) {
* @returns {NodeJS.ReadWriteStream}
*/
function pluginStream(plugin, type, destinationPath) {
const pluginPath = plugin.paths[type]; // dev or min
const pluginPath = path.join(plugin.rootPath, plugin.paths[type]); // dev or min
const contribPath =
path.join(pluginPath, plugin.contrib.substr(plugin.modulePrefix.length)) + '.js';
return gulp
@ -216,7 +216,7 @@ function addPluginContribs(type) {
metadata.METADATA.PLUGINS.forEach(function (plugin) {
allPluginsModuleIds.push(plugin.contrib);
const pluginPath = plugin.paths[type]; // dev or min
const pluginPath = path.join(plugin.rootPath, plugin.paths[type]); // dev or min
const contribPath =
path.join(__dirname, pluginPath, plugin.contrib.substr(plugin.modulePrefix.length)) +
'.js';
@ -294,7 +294,7 @@ function ESM_pluginStreams(destinationPath) {
*/
function ESM_pluginStream(plugin, destinationPath) {
const DESTINATION = path.join(__dirname, destinationPath);
const pluginPath = plugin.paths[`esm`];
const pluginPath = path.join(plugin.rootPath, plugin.paths['esm']);
return gulp
.src([pluginPath + '/**/*'])
.pipe(
@ -830,9 +830,9 @@ gulp.task('prepare-website-branch', async function () {
});
const generateTestSamplesTask = function () {
var sampleNames = fs.readdirSync(path.join(__dirname, 'test/samples'));
var sampleNames = fs.readdirSync(path.join(__dirname, 'monaco-editor/test/samples'));
var samples = sampleNames.map(function (sampleName) {
var samplePath = path.join(__dirname, 'test/samples', sampleName);
var samplePath = path.join(__dirname, 'monaco-editor/test/samples', sampleName);
var sampleContent = fs.readFileSync(samplePath).toString();
return {
name: sampleName,
@ -843,7 +843,7 @@ const generateTestSamplesTask = function () {
'//This is a generated file via gulp generate-test-samples\ndefine([], function() { return';
var suffix = '; });';
fs.writeFileSync(
path.join(__dirname, 'test/samples-all.generated.js'),
path.join(__dirname, 'monaco-editor/test/samples-all.generated.js'),
prefix + JSON.stringify(samples, null, '\t') + suffix
);
@ -904,7 +904,7 @@ const generateTestSamplesTask = function () {
'</html>'
];
fs.writeFileSync(
path.join(__dirname, 'test/playground.generated/' + sampleId + '.html'),
path.join(__dirname, 'monaco-editor/test/playground.generated/' + sampleId + '.html'),
result.join('\n')
);
locations.push({
@ -939,7 +939,7 @@ const generateTestSamplesTask = function () {
'</body>',
'</html>'
];
fs.writeFileSync(path.join(__dirname, 'test/playground.generated/index.html'), index.join('\n'));
fs.writeFileSync(path.join(__dirname, 'monaco-editor/test/playground.generated/index.html'), index.join('\n'));
};
function createSimpleServer(rootDir, port) {
@ -962,7 +962,7 @@ gulp.task('generate-test-samples', taskSeries(generateTestSamplesTask));
gulp.task(
'simpleserver',
taskSeries(generateTestSamplesTask, function () {
const SERVER_ROOT = path.normalize(path.join(__dirname, '../../'));
const SERVER_ROOT = path.normalize(path.join(__dirname, '../'));
createSimpleServer(SERVER_ROOT, 8080);
createSimpleServer(SERVER_ROOT, 8088);
})

55
monaco-editor/metadata.js
View file

@ -17,13 +17,10 @@
modulePrefix: 'vs/language/typescript',
rootPath: './monaco-typescript',
paths: {
// use ./ to indicate it is relative to the repository root
src: './monaco-typescript/release/dev',
dev: './monaco-typescript/release/dev',
min: './monaco-typescript/release/min',
'npm/dev': 'node_modules/monaco-typescript/release/dev',
'npm/min': 'node_modules/monaco-typescript/release/min',
esm: './monaco-typescript/release/esm'
// use ./ to indicate it is relative to the `rootPath`
dev: './release/dev',
min: './release/min',
esm: './release/esm'
}
},
{
@ -32,13 +29,10 @@
modulePrefix: 'vs/language/css',
rootPath: './monaco-css',
paths: {
// use ./ to indicate it is relative to the repository root
src: './monaco-css/release/dev',
dev: './monaco-css/release/dev',
min: './monaco-css/release/min',
'npm/dev': 'node_modules/monaco-css/release/dev',
'npm/min': 'node_modules/monaco-css/release/min',
esm: './monaco-css/release/esm'
// use ./ to indicate it is relative to the `rootPath`
dev: './release/dev',
min: './release/min',
esm: './release/esm'
}
},
{
@ -47,13 +41,10 @@
modulePrefix: 'vs/language/json',
rootPath: './monaco-json',
paths: {
// use ./ to indicate it is relative to the repository root
src: './monaco-json/release/dev',
dev: './monaco-json/release/dev',
min: './monaco-json/release/min',
'npm/dev': 'node_modules/monaco-json/release/dev',
'npm/min': 'node_modules/monaco-json/release/min',
esm: './monaco-json/release/esm'
// use ./ to indicate it is relative to the `rootPath`
dev: './release/dev',
min: './release/min',
esm: './release/esm'
}
},
{
@ -62,13 +53,10 @@
modulePrefix: 'vs/language/html',
rootPath: './monaco-html',
paths: {
// use ./ to indicate it is relative to the repository root
src: './monaco-html/release/dev',
dev: './monaco-html/release/dev',
min: './monaco-html/release/min',
'npm/dev': 'node_modules/monaco-html/release/dev',
'npm/min': 'node_modules/monaco-html/release/min',
esm: './monaco-html/release/esm'
// use ./ to indicate it is relative to the `rootPath`
dev: './release/dev',
min: './release/min',
esm: './release/esm'
}
},
{
@ -77,13 +65,10 @@
modulePrefix: 'vs/basic-languages',
rootPath: './monaco-languages',
paths: {
// use ./ to indicate it is relative to the repository root
src: './monaco-languages/release/dev',
dev: './monaco-languages/release/dev',
min: './monaco-languages/release/min',
'npm/dev': 'node_modules/monaco-languages/release/dev',
'npm/min': 'node_modules/monaco-languages/release/min',
esm: './monaco-languages/release/esm'
// use ./ to indicate it is relative to the `rootPath`
dev: './release/dev',
min: './release/min',
esm: './release/esm'
}
}
]

13
monaco-editor/test/dev-setup.js
View file

@ -35,7 +35,7 @@
let result = {};
result['editor'] = overwrites['editor'] || 'npm/dev';
METADATA.PLUGINS.map(function (plugin) {
result[plugin.name] = overwrites[plugin.name] || 'npm/dev';
result[plugin.name] = overwrites[plugin.name] || 'dev';
});
return result;
})();
@ -55,10 +55,11 @@
);
}
function Component(name, modulePrefix, paths, contrib) {
function Component(name, modulePrefix, paths, rootPath, contrib) {
this.name = name;
this.modulePrefix = modulePrefix;
this.paths = paths;
this.rootPath = rootPath;
this.contrib = contrib;
this.selectedPath = LOADER_OPTS[name];
}
@ -68,11 +69,11 @@
Component.prototype.getResolvedPath = function (PATH_PREFIX) {
let resolvedPath = this.paths[this.selectedPath];
if (/\.\//.test(resolvedPath)) {
// starts with ./ => treat as relative to repo root
// starts with ./ => treat as relative to the root path
if (IS_FILE_PROTOCOL) {
resolvedPath = DIRNAME + '/../' + resolvedPath;
resolvedPath = DIRNAME + '/../' + this.rootPath + '/' + resolvedPath;
} else {
resolvedPath = PATH_PREFIX + '/monaco-editor/' + resolvedPath;
resolvedPath = PATH_PREFIX + '/monaco-editor/' + this.rootPath + '/' + resolvedPath;
}
} else if (
this.selectedPath === 'npm/dev' ||
@ -141,7 +142,7 @@
let RESOLVED_CORE = new Component('editor', 'vs', METADATA.CORE.paths);
self.RESOLVED_CORE_PATH = RESOLVED_CORE.getResolvedPath('');
let RESOLVED_PLUGINS = METADATA.PLUGINS.map(function (plugin) {
return new Component(plugin.name, plugin.modulePrefix, plugin.paths, plugin.contrib);
return new Component(plugin.name, plugin.modulePrefix, plugin.paths, plugin.rootPath, plugin.contrib);
});
METADATA = null;

8
monaco-editor/test/playground.generated/creating-the-diffeditor-hello-diff-world.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -35,10 +35,10 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
var originalModel = monaco.editor.createModel("heLLo world!", "text/plain");
var modifiedModel = monaco.editor.createModel("hello orlando!", "text/plain");
var originalModel = monaco.editor.createModel('heLLo world!', 'text/plain');
var modifiedModel = monaco.editor.createModel('hello orlando!', 'text/plain');
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"));
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
diffEditor.setModel({
original: originalModel,
modified: modifiedModel

14
monaco-editor/test/playground.generated/creating-the-diffeditor-inline-diff-example.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -35,10 +35,16 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
var originalModel = monaco.editor.createModel("This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text", "text/plain");
var modifiedModel = monaco.editor.createModel("just some text\nabcz\nzzzzefgh\nSome more text\nThis line is removed on the left.", "text/plain");
var originalModel = monaco.editor.createModel(
'This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text',
'text/plain'
);
var modifiedModel = monaco.editor.createModel(
'just some text\nabcz\nzzzzefgh\nSome more text\nThis line is removed on the left.',
'text/plain'
);
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), {
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
// You can optionally disable the resizing
enableSplitViewResizing: false,

14
monaco-editor/test/playground.generated/creating-the-diffeditor-multi-line-example.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -35,10 +35,16 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
var originalModel = monaco.editor.createModel("This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text", "text/plain");
var modifiedModel = monaco.editor.createModel("just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.", "text/plain");
var originalModel = monaco.editor.createModel(
'This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text',
'text/plain'
);
var modifiedModel = monaco.editor.createModel(
'just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.',
'text/plain'
);
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), {
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
// You can optionally disable the resizing
enableSplitViewResizing: false
});

17
monaco-editor/test/playground.generated/creating-the-diffeditor-navigating-a-diff.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -36,11 +36,16 @@ loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.
var originalModel = monaco.editor.createModel("just some text\n\nHello World\n\nSome more text", "text/plain");
var modifiedModel = monaco.editor.createModel("just some Text\n\nHello World\n\nSome more changes", "text/plain");
var originalModel = monaco.editor.createModel(
'just some text\n\nHello World\n\nSome more text',
'text/plain'
);
var modifiedModel = monaco.editor.createModel(
'just some Text\n\nHello World\n\nSome more changes',
'text/plain'
);
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"));
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
diffEditor.setModel({
original: originalModel,
modified: modifiedModel
@ -51,7 +56,7 @@ var navi = monaco.editor.createDiffNavigator(diffEditor, {
ignoreCharChanges: true // jump from line to line
});
window.setInterval(function() {
window.setInterval(function () {
navi.next();
}, 2000);

14
monaco-editor/test/playground.generated/creating-the-editor-editor-basic-options.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -39,19 +39,19 @@ loadEditor(function() {
// Here are a few examples of config options that can be passed to the editor.
// You can also call editor.updateOptions at any time to change the options.
var editor = monaco.editor.create(document.getElementById("container"), {
var editor = monaco.editor.create(document.getElementById('container'), {
value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
language: "javascript",
language: 'javascript',
lineNumbers: "off",
lineNumbers: 'off',
roundedSelection: false,
scrollBeyondLastLine: false,
readOnly: false,
theme: "vs-dark",
theme: 'vs-dark'
});
setTimeout(function() {
setTimeout(function () {
editor.updateOptions({
lineNumbers: "on"
lineNumbers: 'on'
});
}, 2000);

11
monaco-editor/test/playground.generated/creating-the-editor-hard-wrapping.html
View file

File diff suppressed because one or more lines are too long

7
monaco-editor/test/playground.generated/creating-the-editor-hello-world.html
View file

@ -11,7 +11,6 @@
/*----------------------------------------SAMPLE CSS END*/
</style>
<a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
@ -23,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -41,9 +40,9 @@ loadEditor(function() {
// Two members of the literal are "value" and "language".
// The editor takes the full size of its container.
monaco.editor.create(document.getElementById("container"), {
monaco.editor.create(document.getElementById('container'), {
value: "function hello() {\n\talert('Hello world!');\n}",
language: "javascript"
language: 'javascript'
});

3
monaco-editor/test/playground.generated/creating-the-editor-syntax-highlighting-for-html-elements.html
View file

@ -11,7 +11,6 @@
/*----------------------------------------SAMPLE CSS END*/
</style>
<a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
@ -23,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<pre id="code" data-lang="text/css" style="width:500px;">
<pre id="code" data-lang="text/css" style="width: 500px">
/* Some example CSS */
@import url("something.css");

266
monaco-editor/test/playground.generated/customizing-the-appearence-exposed-colors.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -38,145 +38,145 @@ loadEditor(function() {
// The editor colors can be customized through CSS or through JS
monaco.editor.defineTheme('myTheme', {
base: 'vs',
inherit: true,
rules: [{ background: 'EDF9FA' }],
colors: {
'editor.foreground': '#000000',
'editor.background': '#EDF9FA',
'editorCursor.foreground': '#8B0000',
'editor.lineHighlightBackground': '#0000FF20',
'editorLineNumber.foreground': '#008800',
'editor.selectionBackground': '#88000030',
'editor.inactiveSelectionBackground': '#88000015'
}
base: 'vs',
inherit: true,
rules: [{ background: 'EDF9FA' }],
colors: {
'editor.foreground': '#000000',
'editor.background': '#EDF9FA',
'editorCursor.foreground': '#8B0000',
'editor.lineHighlightBackground': '#0000FF20',
'editorLineNumber.foreground': '#008800',
'editor.selectionBackground': '#88000030',
'editor.inactiveSelectionBackground': '#88000015'
}
});
monaco.editor.setTheme('myTheme');
monaco.editor.create(document.getElementById("container"), {
value: "My to-do list:\n* buy milk\n* buy coffee\n* write awesome code",
language: "text/plain",
fontFamily: "Arial",
monaco.editor.create(document.getElementById('container'), {
value: 'My to-do list:\n* buy milk\n* buy coffee\n* write awesome code',
language: 'text/plain',
fontFamily: 'Arial',
fontSize: 20
});
// A list of color names:
'foreground' // Overall foreground color. This color is only used if not overridden by a component.
'errorForeground' // Overall foreground color for error messages. This color is only used if not overridden by a component.
'descriptionForeground' // Foreground color for description text providing additional information, for example for a label.
'focusBorder' // Overall border color for focused elements. This color is only used if not overridden by a component.
'contrastBorder' // An extra border around elements to separate them from others for greater contrast.
'contrastActiveBorder' // An extra border around active elements to separate them from others for greater contrast.
'selection.background' // The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
'textSeparator.foreground' // Color for text separators.
'textLink.foreground' // Foreground color for links in text.
'textLink.activeForeground' // Foreground color for active links in text.
'textPreformat.foreground' // Foreground color for preformatted text segments.
'textBlockQuote.background' // Background color for block quotes in text.
'textBlockQuote.border' // Border color for block quotes in text.
'textCodeBlock.background' // Background color for code blocks in text.
'widget.shadow' // Shadow color of widgets such as find/replace inside the editor.
'input.background' // Input box background.
'input.foreground' // Input box foreground.
'input.border' // Input box border.
'inputOption.activeBorder' // Border color of activated options in input fields.
'input.placeholderForeground' // Input box foreground color for placeholder text.
'inputValidation.infoBackground' // Input validation background color for information severity.
'inputValidation.infoBorder' // Input validation border color for information severity.
'inputValidation.warningBackground' // Input validation background color for information warning.
'inputValidation.warningBorder' // Input validation border color for warning severity.
'inputValidation.errorBackground' // Input validation background color for error severity.
'inputValidation.errorBorder' // Input validation border color for error severity.
'dropdown.background' // Dropdown background.
'dropdown.foreground' // Dropdown foreground.
'dropdown.border' // Dropdown border.
'list.focusBackground' // List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
'list.focusForeground' // List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
'list.activeSelectionBackground' // List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
'list.activeSelectionForeground' // List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
'list.inactiveSelectionBackground' // List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
'list.inactiveSelectionForeground' // List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
'list.hoverBackground' // List/Tree background when hovering over items using the mouse.
'list.hoverForeground' // List/Tree foreground when hovering over items using the mouse.
'list.dropBackground' // List/Tree drag and drop background when moving items around using the mouse.
'list.highlightForeground' // List/Tree foreground color of the match highlights when searching inside the list/tree.
'pickerGroup.foreground' // Quick picker color for grouping labels.
'pickerGroup.border' // Quick picker color for grouping borders.
'button.foreground' // Button foreground color.
'button.background' // Button background color.
'button.hoverBackground' // Button background color when hovering.
'badge.background' // Badge background color. Badges are small information labels, e.g. for search results count.
'badge.foreground' // Badge foreground color. Badges are small information labels, e.g. for search results count.
'scrollbar.shadow' // Scrollbar shadow to indicate that the view is scrolled.
'scrollbarSlider.background' // Slider background color.
'scrollbarSlider.hoverBackground' // Slider background color when hovering.
'scrollbarSlider.activeBackground' // Slider background color when active.
'progressBar.background' // Background color of the progress bar that can show for long running operations.
'editor.background' // Editor background color.
'editor.foreground' // Editor default foreground color.
'editorWidget.background' // Background color of editor widgets, such as find/replace.
'editorWidget.border' // Border color of editor widgets. The color is only used if the widget chooses to have a border and if the color is not overridden by a widget.
'editor.selectionBackground' // Color of the editor selection.
'editor.selectionForeground' // Color of the selected text for high contrast.
'editor.inactiveSelectionBackground' // Color of the selection in an inactive editor.
'editor.selectionHighlightBackground' // Color for regions with the same content as the selection.
'editor.findMatchBackground' // Color of the current search match.
'editor.findMatchHighlightBackground' // Color of the other search matches.
'editor.findRangeHighlightBackground' // Color the range limiting the search.
'editor.hoverHighlightBackground' // Highlight below the word for which a hover is shown.
'editorHoverWidget.background' // Background color of the editor hover.
'editorHoverWidget.border' // Border color of the editor hover.
'editorLink.activeForeground' // Color of active links.
'diffEditor.insertedTextBackground' // Background color for text that got inserted.
'diffEditor.removedTextBackground' // Background color for text that got removed.
'diffEditor.insertedTextBorder' // Outline color for the text that got inserted.
'diffEditor.removedTextBorder' // Outline color for text that got removed.
'editorOverviewRuler.currentContentForeground' // Current overview ruler foreground for inline merge-conflicts.
'editorOverviewRuler.incomingContentForeground' // Incoming overview ruler foreground for inline merge-conflicts.
'editorOverviewRuler.commonContentForeground' // Common ancestor overview ruler foreground for inline merge-conflicts.
'editor.lineHighlightBackground' // Background color for the highlight of line at the cursor position.
'editor.lineHighlightBorder' // Background color for the border around the line at the cursor position.
'editor.rangeHighlightBackground' // Background color of highlighted ranges, like by quick open and find features.
'editorCursor.foreground' // Color of the editor cursor.
'editorWhitespace.foreground' // Color of whitespace characters in the editor.
'editorIndentGuide.background' // Color of the editor indentation guides.
'editorLineNumber.foreground' // Color of editor line numbers.
'editorLineNumber.activeForeground' // Color of editor active line number.
'editorRuler.foreground' // Color of the editor rulers.
'editorCodeLens.foreground' // Foreground color of editor code lenses
'editorInlayHint.foreground' // Foreground color of editor inlay hints
'editorInlayHint.background' // Background color of editor inlay hints
'editorBracketMatch.background' // Background color behind matching brackets
'editorBracketMatch.border' // Color for matching brackets boxes
'editorOverviewRuler.border' // Color of the overview ruler border.
'editorGutter.background' // Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.
'editorError.foreground' // Foreground color of error squigglies in the editor.
'editorError.border' // Border color of error squigglies in the editor.
'editorWarning.foreground' // Foreground color of warning squigglies in the editor.
'editorWarning.border' // Border color of warning squigglies in the editor.
'editorMarkerNavigationError.background' // Editor marker navigation widget error color.
'editorMarkerNavigationWarning.background' // Editor marker navigation widget warning color.
'editorMarkerNavigation.background' // Editor marker navigation widget background.
'editorSuggestWidget.background' // Background color of the suggest widget.
'editorSuggestWidget.border' // Border color of the suggest widget.
'editorSuggestWidget.foreground' // Foreground color of the suggest widget.
'editorSuggestWidget.selectedBackground' // Background color of the selected entry in the suggest widget.
'editorSuggestWidget.highlightForeground' // Color of the match highlights in the suggest widget.
'editor.wordHighlightBackground' // Background color of a symbol during read-access, like reading a variable.
'editor.wordHighlightStrongBackground' // Background color of a symbol during write-access, like writing to a variable.
'peekViewTitle.background' // Background color of the peek view title area.
'peekViewTitleLabel.foreground' // Color of the peek view title.
'peekViewTitleDescription.foreground' // Color of the peek view title info.
'peekView.border' // Color of the peek view borders and arrow.
'peekViewResult.background' // Background color of the peek view result list.
'peekViewResult.lineForeground' // Foreground color for line nodes in the peek view result list.
'peekViewResult.fileForeground' // Foreground color for file nodes in the peek view result list.
'peekViewResult.selectionBackground' // Background color of the selected entry in the peek view result list.
'peekViewResult.selectionForeground' // Foreground color of the selected entry in the peek view result list.
'peekViewEditor.background' // Background color of the peek view editor.
'peekViewEditorGutter.background' // Background color of the gutter in the peek view editor.
'peekViewResult.matchHighlightBackground' // Match highlight color in the peek view result list.
'peekViewEditor.matchHighlightBackground' // Match highlight color in the peek view editor.
('foreground'); // Overall foreground color. This color is only used if not overridden by a component.
('errorForeground'); // Overall foreground color for error messages. This color is only used if not overridden by a component.
('descriptionForeground'); // Foreground color for description text providing additional information, for example for a label.
('focusBorder'); // Overall border color for focused elements. This color is only used if not overridden by a component.
('contrastBorder'); // An extra border around elements to separate them from others for greater contrast.
('contrastActiveBorder'); // An extra border around active elements to separate them from others for greater contrast.
('selection.background'); // The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
('textSeparator.foreground'); // Color for text separators.
('textLink.foreground'); // Foreground color for links in text.
('textLink.activeForeground'); // Foreground color for active links in text.
('textPreformat.foreground'); // Foreground color for preformatted text segments.
('textBlockQuote.background'); // Background color for block quotes in text.
('textBlockQuote.border'); // Border color for block quotes in text.
('textCodeBlock.background'); // Background color for code blocks in text.
('widget.shadow'); // Shadow color of widgets such as find/replace inside the editor.
('input.background'); // Input box background.
('input.foreground'); // Input box foreground.
('input.border'); // Input box border.
('inputOption.activeBorder'); // Border color of activated options in input fields.
('input.placeholderForeground'); // Input box foreground color for placeholder text.
('inputValidation.infoBackground'); // Input validation background color for information severity.
('inputValidation.infoBorder'); // Input validation border color for information severity.
('inputValidation.warningBackground'); // Input validation background color for information warning.
('inputValidation.warningBorder'); // Input validation border color for warning severity.
('inputValidation.errorBackground'); // Input validation background color for error severity.
('inputValidation.errorBorder'); // Input validation border color for error severity.
('dropdown.background'); // Dropdown background.
('dropdown.foreground'); // Dropdown foreground.
('dropdown.border'); // Dropdown border.
('list.focusBackground'); // List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
('list.focusForeground'); // List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
('list.activeSelectionBackground'); // List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
('list.activeSelectionForeground'); // List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
('list.inactiveSelectionBackground'); // List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
('list.inactiveSelectionForeground'); // List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
('list.hoverBackground'); // List/Tree background when hovering over items using the mouse.
('list.hoverForeground'); // List/Tree foreground when hovering over items using the mouse.
('list.dropBackground'); // List/Tree drag and drop background when moving items around using the mouse.
('list.highlightForeground'); // List/Tree foreground color of the match highlights when searching inside the list/tree.
('pickerGroup.foreground'); // Quick picker color for grouping labels.
('pickerGroup.border'); // Quick picker color for grouping borders.
('button.foreground'); // Button foreground color.
('button.background'); // Button background color.
('button.hoverBackground'); // Button background color when hovering.
('badge.background'); // Badge background color. Badges are small information labels, e.g. for search results count.
('badge.foreground'); // Badge foreground color. Badges are small information labels, e.g. for search results count.
('scrollbar.shadow'); // Scrollbar shadow to indicate that the view is scrolled.
('scrollbarSlider.background'); // Slider background color.
('scrollbarSlider.hoverBackground'); // Slider background color when hovering.
('scrollbarSlider.activeBackground'); // Slider background color when active.
('progressBar.background'); // Background color of the progress bar that can show for long running operations.
('editor.background'); // Editor background color.
('editor.foreground'); // Editor default foreground color.
('editorWidget.background'); // Background color of editor widgets, such as find/replace.
('editorWidget.border'); // Border color of editor widgets. The color is only used if the widget chooses to have a border and if the color is not overridden by a widget.
('editor.selectionBackground'); // Color of the editor selection.
('editor.selectionForeground'); // Color of the selected text for high contrast.
('editor.inactiveSelectionBackground'); // Color of the selection in an inactive editor.
('editor.selectionHighlightBackground'); // Color for regions with the same content as the selection.
('editor.findMatchBackground'); // Color of the current search match.
('editor.findMatchHighlightBackground'); // Color of the other search matches.
('editor.findRangeHighlightBackground'); // Color the range limiting the search.
('editor.hoverHighlightBackground'); // Highlight below the word for which a hover is shown.
('editorHoverWidget.background'); // Background color of the editor hover.
('editorHoverWidget.border'); // Border color of the editor hover.
('editorLink.activeForeground'); // Color of active links.
('diffEditor.insertedTextBackground'); // Background color for text that got inserted.
('diffEditor.removedTextBackground'); // Background color for text that got removed.
('diffEditor.insertedTextBorder'); // Outline color for the text that got inserted.
('diffEditor.removedTextBorder'); // Outline color for text that got removed.
('editorOverviewRuler.currentContentForeground'); // Current overview ruler foreground for inline merge-conflicts.
('editorOverviewRuler.incomingContentForeground'); // Incoming overview ruler foreground for inline merge-conflicts.
('editorOverviewRuler.commonContentForeground'); // Common ancestor overview ruler foreground for inline merge-conflicts.
('editor.lineHighlightBackground'); // Background color for the highlight of line at the cursor position.
('editor.lineHighlightBorder'); // Background color for the border around the line at the cursor position.
('editor.rangeHighlightBackground'); // Background color of highlighted ranges, like by quick open and find features.
('editorCursor.foreground'); // Color of the editor cursor.
('editorWhitespace.foreground'); // Color of whitespace characters in the editor.
('editorIndentGuide.background'); // Color of the editor indentation guides.
('editorLineNumber.foreground'); // Color of editor line numbers.
('editorLineNumber.activeForeground'); // Color of editor active line number.
('editorRuler.foreground'); // Color of the editor rulers.
('editorCodeLens.foreground'); // Foreground color of editor code lenses
('editorInlayHint.foreground'); // Foreground color of editor inlay hints
('editorInlayHint.background'); // Background color of editor inlay hints
('editorBracketMatch.background'); // Background color behind matching brackets
('editorBracketMatch.border'); // Color for matching brackets boxes
('editorOverviewRuler.border'); // Color of the overview ruler border.
('editorGutter.background'); // Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.
('editorError.foreground'); // Foreground color of error squigglies in the editor.
('editorError.border'); // Border color of error squigglies in the editor.
('editorWarning.foreground'); // Foreground color of warning squigglies in the editor.
('editorWarning.border'); // Border color of warning squigglies in the editor.
('editorMarkerNavigationError.background'); // Editor marker navigation widget error color.
('editorMarkerNavigationWarning.background'); // Editor marker navigation widget warning color.
('editorMarkerNavigation.background'); // Editor marker navigation widget background.
('editorSuggestWidget.background'); // Background color of the suggest widget.
('editorSuggestWidget.border'); // Border color of the suggest widget.
('editorSuggestWidget.foreground'); // Foreground color of the suggest widget.
('editorSuggestWidget.selectedBackground'); // Background color of the selected entry in the suggest widget.
('editorSuggestWidget.highlightForeground'); // Color of the match highlights in the suggest widget.
('editor.wordHighlightBackground'); // Background color of a symbol during read-access, like reading a variable.
('editor.wordHighlightStrongBackground'); // Background color of a symbol during write-access, like writing to a variable.
('peekViewTitle.background'); // Background color of the peek view title area.
('peekViewTitleLabel.foreground'); // Color of the peek view title.
('peekViewTitleDescription.foreground'); // Color of the peek view title info.
('peekView.border'); // Color of the peek view borders and arrow.
('peekViewResult.background'); // Background color of the peek view result list.
('peekViewResult.lineForeground'); // Foreground color for line nodes in the peek view result list.
('peekViewResult.fileForeground'); // Foreground color for file nodes in the peek view result list.
('peekViewResult.selectionBackground'); // Background color of the selected entry in the peek view result list.
('peekViewResult.selectionForeground'); // Foreground color of the selected entry in the peek view result list.
('peekViewEditor.background'); // Background color of the peek view editor.
('peekViewEditorGutter.background'); // Background color of the gutter in the peek view editor.
('peekViewResult.matchHighlightBackground'); // Match highlight color in the peek view result list.
('peekViewEditor.matchHighlightBackground'); // Match highlight color in the peek view editor.
/*
var colors = require('vs/platform/registry/common/platform').Registry.data.get('base.contributions.colors').colorSchema.properties

16
monaco-editor/test/playground.generated/customizing-the-appearence-scrollbars.html
View file

@ -13,11 +13,11 @@
.monaco-editor .monaco-scrollable-element .scrollbar.horizontal,
.monaco-editor .decorationsOverviewRuler,
.monaco-editor .monaco-scrollable-element .scrollbar.vertical .arrow-background {
background: rgba(230, 230, 230, 255);
background: rgba(230, 230, 230, 255);
}
/* Make vertical scrollbar transparent to allow decorations overview ruler to be visible */
.monaco-editor .monaco-scrollable-element .scrollbar.vertical {
background: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
}
@ -32,7 +32,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -46,12 +46,14 @@ loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
// Remember to check out the CSS too!
var htmlCode = "<html><!--long linelong linelong linelong linelong linelong linelong linelong linelong linelong line-->\n<head>\n <!-- HTML comment -->\n <style type=\"text/css\">\n /* CSS comment */\n </style>\n <script type=\"javascript\">\n // JavaScript comment\n </"+"script>\n</head>\n<body></body>\n</html>";
var htmlCode =
'<html><!--long linelong linelong linelong linelong linelong linelong linelong linelong linelong line-->\n<head>\n <!-- HTML comment -->\n <style type="text/css">\n /* CSS comment */\n </style>\n <script type="javascript">\n // JavaScript comment\n </' +
'script>\n</head>\n<body></body>\n</html>';
monaco.editor.create(document.getElementById("container"), {
monaco.editor.create(document.getElementById('container'), {
value: htmlCode,
language: "text/html",
theme: "vs",
language: 'text/html',
theme: 'vs',
scrollbar: {
// Subtle shadows to the left & top. Defaults to true.
useShadows: false,

14
monaco-editor/test/playground.generated/customizing-the-appearence-tokens-and-colors.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -35,7 +35,6 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
// Theme matching (i.e. applying a style to a token) happens in JavaScript.
// We must therefore register the theme rules in JavaScript.
@ -57,14 +56,17 @@ monaco.editor.defineTheme('myCustomTheme', {
]
});
monaco.editor.create(document.getElementById("container"), {
monaco.editor.create(document.getElementById('container'), {
value: getCode(),
language: "text/html",
theme: "myCustomTheme"
language: 'text/html',
theme: 'myCustomTheme'
});
function getCode() {
return "<html><!-- // !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!! -->\n<head>\n <!-- HTML comment -->\n <style type=\"text/css\">\n /* CSS comment */\n </style>\n <script type=\"javascript\">\n // JavaScript comment\n </"+"script>\n</head>\n<body></body>\n</html>";
return (
'<html><!-- // !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!! -->\n<head>\n <!-- HTML comment -->\n <style type="text/css">\n /* CSS comment */\n </style>\n <script type="javascript">\n // JavaScript comment\n </' +
'script>\n</head>\n<body></body>\n</html>'
);
}

67
monaco-editor/test/playground.generated/extending-language-services-codelens-provider-example.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -35,41 +35,44 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
var editor = monaco.editor.create(document.getElementById("container"), {
value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
language: "json"
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!');
}, '');
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;
}
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;
}
});

116
monaco-editor/test/playground.generated/extending-language-services-color-provider-example.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -36,68 +36,68 @@ loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
monaco.languages.register({
id: "colorLanguage"
})
monaco.editor.create(document.getElementById("container"), {
value: "red\nblue\ngreen",
language: "colorLanguage",
colorDecorators: true
id: 'colorLanguage'
});
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 + ")";
}
monaco.editor.create(document.getElementById('container'), {
value: 'red\nblue\ngreen',
language: 'colorLanguage',
colorDecorators: true
});
return [
{
label: label
}
];
},
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 + ')';
}
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
}
}
]
}
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
}
}
];
}
});
})
/*----------------------------------------SAMPLE JS END*/
});

118
monaco-editor/test/playground.generated/extending-language-services-completion-provider-example.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -36,66 +36,72 @@ loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
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
}
];
// 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)
};
}
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"
monaco.editor.create(document.getElementById('container'), {
value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
language: 'json'
});

4
monaco-editor/test/playground.generated/extending-language-services-configure-javascript-defaults.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -59,7 +59,7 @@ var libSource = [
' * Returns the next fact',
' */',
' static next():string',
'}',
'}'
].join('\n');
var libUri = 'ts:filename/facts.d.ts';
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);

73
monaco-editor/test/playground.generated/extending-language-services-configure-json-defaults.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -37,49 +37,48 @@ loadEditor(function() {
// 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);
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"]
}
}
}
}]
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
monaco.editor.create(document.getElementById('container'), {
model: model
});
/*----------------------------------------SAMPLE JS END*/
});
</script>

62
monaco-editor/test/playground.generated/extending-language-services-custom-languages.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -42,10 +42,10 @@ monaco.languages.register({ id: 'mySpecialLanguage' });
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
tokenizer: {
root: [
[/\[error.*/, "custom-error"],
[/\[notice.*/, "custom-notice"],
[/\[info.*/, "custom-info"],
[/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
[/\[error.*/, 'custom-error'],
[/\[notice.*/, 'custom-notice'],
[/\[info.*/, 'custom-info'],
[/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
]
}
});
@ -58,40 +58,38 @@ monaco.editor.defineTheme('myCoolTheme', {
{ token: 'custom-info', foreground: '808080' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'custom-notice', foreground: 'FFA500' },
{ token: 'custom-date', foreground: '008800' },
{ 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'
}];
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"), {
monaco.editor.create(document.getElementById('container'), {
theme: 'myCoolTheme',
value: getCode(),
language: 'mySpecialLanguage'
@ -107,7 +105,7 @@ function getCode() {
'[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: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',
@ -148,8 +146,8 @@ function getCode() {
'[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');;
'<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');
}

84
monaco-editor/test/playground.generated/extending-language-services-folding-provider-example.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -36,11 +36,10 @@ loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
monaco.languages.register({
id: "foldLanguage"
id: 'foldLanguage'
});
var value =
`1. Hit F1 to bring up the Command Palette
var value = `1. Hit F1 to bring up the Command Palette
2. Type 'fold'
3. Choose 'Fold All Block Comments' or 'Fold All Regions'
@ -68,49 +67,50 @@ var value =
27. region2
28. region2
29. region2`
29. region2`;
monaco.editor.create(document.getElementById("container"), {
value: value,
language: "foldLanguage"
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
}
];
}
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
}
];
}
});
/*----------------------------------------SAMPLE JS END*/
});
</script>

59
monaco-editor/test/playground.generated/extending-language-services-hover-provider-example.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -35,53 +35,62 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
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())),
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"), {
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);
return new Promise(
function (c, e) {
req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req._canceled) {
return;
}
req.onreadystatechange = function () { };
}
};
req.open("GET", url, true);
req.responseType = "";
if (req.readyState === 4) {
if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
c(req);
} else {
e(req);
}
req.onreadystatechange = function () {};
}
};
req.send(null);
}, function () {
req._canceled = true;
req.abort();
});
req.open('GET', url, true);
req.responseType = '';
req.send(null);
},
function () {
req._canceled = true;
req.abort();
}
);
}

251
monaco-editor/test/playground.generated/extending-language-services-semantic-tokens-provider-example.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -37,152 +37,171 @@ loadEditor(function() {
/** @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'
]
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);
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;
}
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();
getLegend: function () {
return legend;
},
provideDocumentSemanticTokens: function (model, lastResultId, token) {
const lines = model.getLinesContent();
/** @type {number[]} */
const data = [];
/** @type {number[]} */
const data = [];
let prevLine = 0;
let prevChar = 0;
let prevLine = 0;
let prevChar = 0;
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
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;
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
);
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) { }
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,
rules: [
{ token: 'comment', foreground: 'aaaaaa', fontStyle: 'italic' },
{ token: 'keyword', foreground: 'ce63eb' },
{ token: 'operator', foreground: '000000' },
{ token: 'namespace', foreground: '66afce' },
base: 'vs',
inherit: true,
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: '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: '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' }
]
{ 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
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
});
/*----------------------------------------SAMPLE JS END*/
});
</script>

953
monaco-editor/test/playground.generated/extending-language-services-symbols-provider-example.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -36,486 +36,487 @@ loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
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
}
},
];
}
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"
monaco.editor.create(document.getElementById('container'), {
value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
language: 'json'
});
/*----------------------------------------SAMPLE JS END*/
});
</script>

32
monaco-editor/test/playground.generated/interacting-with-the-editor-adding-a-command-to-an-editor-instance.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -47,28 +47,32 @@ var jsCode = [
'};'
].join('\n');
var editor = monaco.editor.create(document.getElementById("container"), {
var editor = monaco.editor.create(document.getElementById('container'), {
value: jsCode,
language: "javascript"
language: 'javascript'
});
var myCondition1 = editor.createContextKey(/*key name*/'myCondition1', /*default value*/false);
var myCondition2 = editor.createContextKey(/*key name*/'myCondition2', /*default value*/false);
var myCondition1 = editor.createContextKey(/*key name*/ 'myCondition1', /*default value*/ false);
var myCondition2 = editor.createContextKey(/*key name*/ 'myCondition2', /*default value*/ false);
editor.addCommand(monaco.KeyCode.Tab, function() {
// services available in `ctx`
alert('my command is executing!');
}, 'myCondition1 && myCondition2')
editor.addCommand(
monaco.KeyCode.Tab,
function () {
// services available in `ctx`
alert('my command is executing!');
},
'myCondition1 && myCondition2'
);
myCondition1.set(true);
setTimeout(function() {
alert('now enabling also myCondition2, try pressing Tab!');
myCondition2.set(true);
// you can use myCondition2.reset() to go back to the default
setTimeout(function () {
alert('now enabling also myCondition2, try pressing Tab!');
myCondition2.set(true);
// you can use myCondition2.reset() to go back to the default
}, 2000);
/*----------------------------------------SAMPLE JS END*/
});
</script>

13
monaco-editor/test/playground.generated/interacting-with-the-editor-adding-an-action-to-an-editor-instance.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -35,7 +35,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
var editor = monaco.editor.create(document.getElementById("container"), {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'',
'class Example {',
@ -46,7 +46,7 @@ var editor = monaco.editor.create(document.getElementById("container"), {
'\t}',
'}'
].join('\n'),
language: "typescript"
language: 'typescript'
});
// Explanation:
@ -65,7 +65,10 @@ editor.addAction({
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10,
// chord
monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK, monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM)
monaco.KeyMod.chord(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK,
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM
)
],
// A precondition for this action.
@ -80,7 +83,7 @@ editor.addAction({
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convenience
run: function(ed) {
run: function (ed) {
alert("i'm running => " + ed.getPosition());
return null;
}

9
monaco-editor/test/playground.generated/interacting-with-the-editor-customizing-the-line-numbers.html
View file

@ -11,7 +11,6 @@
/*----------------------------------------SAMPLE CSS END*/
</style>
<a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
@ -23,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -37,7 +36,7 @@ loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
function lineNumbersFunc(originalLineNumber) {
var map = [ 'O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
var map = ['O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
if (originalLineNumber < map.length) {
return map[originalLineNumber];
}
@ -56,9 +55,9 @@ var jsCode = [
'};'
].join('\n');
var editor = monaco.editor.create(document.getElementById("container"), {
var editor = monaco.editor.create(document.getElementById('container'), {
value: jsCode,
language: "javascript",
language: 'javascript',
lineNumbers: lineNumbersFunc
});

27
monaco-editor/test/playground.generated/interacting-with-the-editor-line-and-inline-decorations.html
View file

@ -23,6 +23,7 @@
margin-left: 3px;
}
/*----------------------------------------SAMPLE CSS END*/
</style>
<a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
@ -34,7 +35,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -59,15 +60,27 @@ var jsCode = [
'};'
].join('\n');
var editor = monaco.editor.create(document.getElementById("container"), {
var editor = monaco.editor.create(document.getElementById('container'), {
value: jsCode,
language: "javascript"
language: 'javascript'
});
var decorations = editor.deltaDecorations([], [
{ range: new monaco.Range(3,1,5,1), options: { isWholeLine: true, linesDecorationsClassName: 'myLineDecoration' }},
{ range: new monaco.Range(7,1,7,24), options: { inlineClassName: 'myInlineDecoration' }},
]);
var decorations = editor.deltaDecorations(
[],
[
{
range: new monaco.Range(3, 1, 5, 1),
options: {
isWholeLine: true,
linesDecorationsClassName: 'myLineDecoration'
}
},
{
range: new monaco.Range(7, 1, 7, 24),
options: { inlineClassName: 'myInlineDecoration' }
}
]
);
/*----------------------------------------SAMPLE JS END*/

9
monaco-editor/test/playground.generated/interacting-with-the-editor-listening-to-key-events.html
View file

@ -11,7 +11,6 @@
/*----------------------------------------SAMPLE CSS END*/
</style>
<a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
@ -23,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -36,12 +35,12 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
var editor = monaco.editor.create(document.getElementById("container"), {
var editor = monaco.editor.create(document.getElementById('container'), {
value: "function hello() {\n\talert('Hello world!');\n}",
language: "javascript"
language: 'javascript'
});
var myBinding = editor.addCommand(monaco.KeyCode.F9, function() {
var myBinding = editor.addCommand(monaco.KeyCode.F9, function () {
alert('F9 pressed!');
});

70
monaco-editor/test/playground.generated/interacting-with-the-editor-listening-to-mouse-events.html
View file

@ -28,9 +28,11 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="output" style="height:29%;font-family:'Courier New', monospace;">Last 3 events:<br/></div>
<div style="background:#ccc;height:1%"></div>
<div id="container" style="height:70%;"></div>
<div id="output" style="height: 29%; font-family: 'Courier New', monospace">
Last 3 events:<br />
</div>
<div style="background: #ccc; height: 1%"></div>
<div id="container" style="height: 70%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -55,43 +57,46 @@ var jsCode = [
'};'
].join('\n');
var editor = monaco.editor.create(document.getElementById("container"), {
var editor = monaco.editor.create(document.getElementById('container'), {
value: jsCode,
language: "javascript",
language: 'javascript',
glyphMargin: true,
contextmenu: false
});
var decorations = editor.deltaDecorations([], [
{
range: new monaco.Range(3,1,3,1),
options: {
isWholeLine: true,
className: 'myContentClass',
glyphMarginClassName: 'myGlyphMarginClass'
var decorations = editor.deltaDecorations(
[],
[
{
range: new monaco.Range(3, 1, 3, 1),
options: {
isWholeLine: true,
className: 'myContentClass',
glyphMarginClassName: 'myGlyphMarginClass'
}
}
}
]);
]
);
// Add a zone to make hit testing more interesting
var viewZoneId = null;
editor.changeViewZones(function(changeAccessor) {
var domNode = document.createElement('div');
domNode.style.background = 'lightgreen';
viewZoneId = changeAccessor.addZone({
afterLineNumber: 3,
heightInLines: 3,
domNode: domNode
});
editor.changeViewZones(function (changeAccessor) {
var domNode = document.createElement('div');
domNode.style.background = 'lightgreen';
viewZoneId = changeAccessor.addZone({
afterLineNumber: 3,
heightInLines: 3,
domNode: domNode
});
});
// Add a content widget (scrolls inline with text)
var contentWidget = {
domNode: null,
getId: function() {
getId: function () {
return 'my.content.widget';
},
getDomNode: function() {
getDomNode: function () {
if (!this.domNode) {
this.domNode = document.createElement('div');
this.domNode.innerHTML = 'My content widget';
@ -99,13 +104,16 @@ var contentWidget = {
}
return this.domNode;
},
getPosition: function() {
getPosition: function () {
return {
position: {
lineNumber: 7,
column: 8
},
preference: [monaco.editor.ContentWidgetPositionPreference.ABOVE, monaco.editor.ContentWidgetPositionPreference.BELOW]
preference: [
monaco.editor.ContentWidgetPositionPreference.ABOVE,
monaco.editor.ContentWidgetPositionPreference.BELOW
]
};
}
};
@ -114,10 +122,10 @@ editor.addContentWidget(contentWidget);
// Add an overlay widget
var overlayWidget = {
domNode: null,
getId: function() {
getId: function () {
return 'my.overlay.widget';
},
getDomNode: function() {
getDomNode: function () {
if (!this.domNode) {
this.domNode = document.createElement('div');
this.domNode.innerHTML = 'My overlay widget';
@ -127,7 +135,7 @@ var overlayWidget = {
}
return this.domNode;
},
getPosition: function() {
getPosition: function () {
return null;
}
};
@ -135,15 +143,13 @@ editor.addOverlayWidget(overlayWidget);
var output = document.getElementById('output');
function showEvent(str) {
while(output.childNodes.length > 6) {
while (output.childNodes.length > 6) {
output.removeChild(output.firstChild.nextSibling.nextSibling);
}
output.appendChild(document.createTextNode(str));
output.appendChild(document.createElement('br'));
}
editor.onMouseMove(function (e) {
showEvent('mousemove - ' + e.target.toString());
});

27
monaco-editor/test/playground.generated/interacting-with-the-editor-rendering-glyphs-in-the-margin.html
View file

@ -28,7 +28,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -53,22 +53,25 @@ var jsCode = [
'};'
].join('\n');
var editor = monaco.editor.create(document.getElementById("container"), {
var editor = monaco.editor.create(document.getElementById('container'), {
value: jsCode,
language: "javascript",
language: 'javascript',
glyphMargin: true
});
var decorations = editor.deltaDecorations([], [
{
range: new monaco.Range(3,1,3,1),
options: {
isWholeLine: true,
className: 'myContentClass',
glyphMarginClassName: 'myGlyphMarginClass'
var decorations = editor.deltaDecorations(
[],
[
{
range: new monaco.Range(3, 1, 3, 1),
options: {
isWholeLine: true,
className: 'myContentClass',
glyphMarginClassName: 'myGlyphMarginClass'
}
}
}
]);
]
);
// You can now use `decorations` to change or remove the decoration

9
monaco-editor/test/playground.generated/interacting-with-the-editor-revealing-a-position.html
View file

@ -22,7 +22,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->
<div id="container" style="height:100%;"></div>
<div id="container" style="height: 100%"></div>
<!-- ----------------------------------------SAMPLE HTML END-->
@ -54,11 +54,12 @@ jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
jsCodeArr[49] += 'And this is some long line. And this is some long line. And this is some long line. And this is some long line. And this is some long line. ';
jsCodeArr[49] +=
'And this is some long line. And this is some long line. And this is some long line. And this is some long line. And this is some long line. ';
var editor = monaco.editor.create(document.getElementById("container"), {
var editor = monaco.editor.create(document.getElementById('container'), {
value: jsCodeArr.join('\n'),
language: "javascript"
language: 'javascript'
});
editor.revealPositionInCenter({ lineNumber: 50, column: 120 });

2
monaco-editor/test/samples-all.generated.js
View file

@ -14,7 +14,7 @@ define([], function() { return[
},
{
"name": "run-editor-js-validationParticipant.js",
"content": "define([\r\n\t'vs/base/common/severity'\r\n], function(severity) {\r\n\t'use strict';\r\n\tfunction ValidateParticipant() {\r\n\r\n\t}\r\n\r\n\tValidateParticipant.ID = 'doc.validateParticipant';\r\n\tValidateParticipant.prototype.validate = function(mirrorModel, markerService) {\r\n\r\n\t\tvar marker = {\r\n\t\t\tseverity: severity.Error,\r\n\t\t\tmessage: [\r\n\t\t\t\t{ isText: true, text: '\\u2188 ' },\r\n\t\t\t\t{ tagName: 'span', style: 'color:red', text: 'I AM' },\r\n\t\t\t\t{ isText: true, text: ' A VALIDATION PARTICIPANT \\u2188' }\r\n\t\t\t],\r\n\t\t\tstartLineNumber: 1,\r\n\t\t\tstartColumn: 1,\r\n\t\t\tendLineNumber: 1,\r\n\t\t\tendColumn: 3\r\n\t\t};\r\n\r\n\t\tmarkerService.changeOne(ValidateParticipant.ID, mirrorModel.getAssociatedResource(), [marker]);\r\n\t};\r\n\treturn {\r\n\t\tValidateParticipant: ValidateParticipant\r\n\t};\r\n});"
"content": "define(['vs/base/common/severity'], function (severity) {\n\t'use strict';\n\tfunction ValidateParticipant() {}\n\n\tValidateParticipant.ID = 'doc.validateParticipant';\n\tValidateParticipant.prototype.validate = function (mirrorModel, markerService) {\n\t\tvar marker = {\n\t\t\tseverity: severity.Error,\n\t\t\tmessage: [\n\t\t\t\t{ isText: true, text: '\\u2188 ' },\n\t\t\t\t{ tagName: 'span', style: 'color:red', text: 'I AM' },\n\t\t\t\t{ isText: true, text: ' A VALIDATION PARTICIPANT \\u2188' }\n\t\t\t],\n\t\t\tstartLineNumber: 1,\n\t\t\tstartColumn: 1,\n\t\t\tendLineNumber: 1,\n\t\t\tendColumn: 3\n\t\t};\n\n\t\tmarkerService.changeOne(ValidateParticipant.ID, mirrorModel.getAssociatedResource(), [marker]);\n\t};\n\treturn {\n\t\tValidateParticipant: ValidateParticipant\n\t};\n});\n"
},
{
"name": "run-editor-korean.txt",