Simplify paths in `metadata.js`

gulpfile.js

@@ -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);
 	})

monaco-editor/metadata.js

@@ -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'
 				}
 			}
 		]

monaco-editor/test/dev-setup.js

@@ -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;
 

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

@@ -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

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

@@ -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,
 

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

@@ -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
 });

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

@@ -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 diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"));
+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'));
 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);
 

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

@@ -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);
 

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

@@ -9,7 +9,6 @@
 <style>
 /*----------------------------------------SAMPLE CSS START*/
 
-
 
 
 /*----------------------------------------SAMPLE CSS END*/
@@ -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'
 });
 
 

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

@@ -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");

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

@@ -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

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

@@ -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,

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

@@ -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>'
+	);
 }
 
 

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

@@ -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;
+	}
 });
 
 

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

@@ -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"
-})
+	id: 'colorLanguage'
+});
+
+monaco.editor.create(document.getElementById('container'), {
+	value: 'red\nblue\ngreen',
+	language: 'colorLanguage',
+	colorDecorators: true
+});
 
-monaco.editor.create(document.getElementById("container"), {
-    value: "red\nblue\ngreen",
-    language: "colorLanguage",
-    colorDecorators: true
+monaco.languages.registerColorProvider('colorLanguage', {
+	provideColorPresentations: (model, colorInfo) => {
+		var color = colorInfo.color;
+		var red256 = Math.round(color.red * 255);
+		var green256 = Math.round(color.green * 255);
+		var blue256 = Math.round(color.blue * 255);
+		var label;
+		if (color.alpha === 1) {
+			label = 'rgb(' + red256 + ', ' + green256 + ', ' + blue256 + ')';
+		} else {
+			label = 'rgba(' + red256 + ', ' + green256 + ', ' + blue256 + ', ' + color.alpha + ')';
+		}
+
+		return [
+			{
+				label: label
+			}
+		];
+	},
+
+	provideDocumentColors: () => {
+		return [
+			{
+				color: { red: 1, blue: 0, green: 0, alpha: 1 },
+				range: {
+					startLineNumber: 1,
+					startColumn: 0,
+					endLineNumber: 1,
+					endColumn: 0
+				}
+			},
+			{
+				color: { red: 0, blue: 1, green: 0, alpha: 1 },
+				range: {
+					startLineNumber: 2,
+					startColumn: 0,
+					endLineNumber: 2,
+					endColumn: 0
+				}
+			},
+			{
+				color: { red: 0, blue: 0, green: 1, alpha: 1 },
+				range: {
+					startLineNumber: 3,
+					startColumn: 0,
+					endLineNumber: 3,
+					endColumn: 0
+				}
+			}
+		];
+	}
 });
 
-monaco.languages.registerColorProvider("colorLanguage", {
-    provideColorPresentations: (model, colorInfo) => {
-        var color = colorInfo.color;
-        var red256 = Math.round(color.red * 255);
-        var green256 = Math.round(color.green * 255);
-        var blue256 = Math.round(color.blue * 255);
-        var label;
-        if (color.alpha === 1) {
-            label = "rgb(" + red256 + ", " + green256 + ", " + blue256 + ")";
-        } else {
-            label = "rgba(" + red256 + ", " + green256 + ", " + blue256 + ", " + color.alpha + ")";
-        }
-
-        return [
-            {
-                label: label
-            }
-        ];
-    },
-
-    provideDocumentColors: () => {
-        return [
-            {
-                color: { red: 1, blue: 0, green: 0, alpha: 1 },
-                range:{
-                    startLineNumber: 1,
-                    startColumn: 0,
-                    endLineNumber: 1,
-                    endColumn: 0
-                }
-            },
-            {
-                color: { red: 0, blue: 1, green: 0, alpha: 1 },
-                range:{
-                    startLineNumber: 2,
-                    startColumn: 0,
-                    endLineNumber: 2,
-                    endColumn: 0
-                }
-            },
-            {
-                color: { red: 0, blue: 0, green: 1, alpha: 1 },
-                range:{
-                    startLineNumber: 3,
-                    startColumn: 0,
-                    endLineNumber: 3,
-                    endColumn: 0
-                }
-            }
-        ]
-    }
-
-})
 
 /*----------------------------------------SAMPLE JS END*/
 });

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

@@ -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'
 });
 
 

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

@@ -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);

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

@@ -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>

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

@@ -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');
 }
 
 

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

@@ -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>

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

@@ -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;
+				}
+
+				if (req.readyState === 4) {
+					if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
+						c(req);
+					} else {
+						e(req);
+					}
+					req.onreadystatechange = function () {};
 				}
-				req.onreadystatechange = function () { };
-			}
-		};
-
-		req.open("GET", url, true);
-		req.responseType = "";
-
-		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();
+		}
+	);
 }
 
 

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

@@ -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();
-
-        /** @type {number[]} */
-        const data = [];
-
-        let prevLine = 0;
-        let prevChar = 0;
-
-        for (let i = 0; i < lines.length; i++) {
-            const line = lines[i];
-
-            for (let match = null; match = tokenPattern.exec(line);) {
-                // translate token and modifiers to number representations
-                let type = getType(match[1]);
-                if (type === -1) {
-                    continue;
-                }
-                let modifier = match[2].length
-                    ? getModifier(match[2].split('.').slice(1))
-                    : 0;
-
-                data.push(
-                    // translate line to deltaLine
-                    i - prevLine,
-                    // for the same line, translate start to deltaStart
-                    prevLine === i ? match.index - prevChar : match.index,
-                    match[0].length,
-                    type,
-                    modifier
-                );
-
-                prevLine = i;
-                prevChar = match.index;
-            }
-        }
-        return {
-            data: new Uint32Array(data),
-            resultId: null
-        };
-    },
-    releaseDocumentSemanticTokens: function (resultId) { }
+	getLegend: function () {
+		return legend;
+	},
+	provideDocumentSemanticTokens: function (model, lastResultId, token) {
+		const lines = model.getLinesContent();
+
+		/** @type {number[]} */
+		const data = [];
+
+		let prevLine = 0;
+		let prevChar = 0;
+
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+
+			for (let match = null; (match = tokenPattern.exec(line)); ) {
+				// translate token and modifiers to number representations
+				let type = getType(match[1]);
+				if (type === -1) {
+					continue;
+				}
+				let modifier = match[2].length ? getModifier(match[2].split('.').slice(1)) : 0;
+
+				data.push(
+					// translate line to deltaLine
+					i - prevLine,
+					// for the same line, translate start to deltaStart
+					prevLine === i ? match.index - prevChar : match.index,
+					match[0].length,
+					type,
+					modifier
+				);
+
+				prevLine = i;
+				prevChar = match.index;
+			}
+		}
+		return {
+			data: new Uint32Array(data),
+			resultId: null
+		};
+	},
+	releaseDocumentSemanticTokens: function (resultId) {}
 });
 
 // add some missing tokens
 monaco.editor.defineTheme('myCustomTheme', {
-    base: 'vs',
-    inherit: true,
-    rules: [
-        { token: 'comment', foreground: 'aaaaaa', fontStyle: 'italic' },
-        { token: 'keyword', foreground: 'ce63eb' },
-        { token: 'operator', foreground: '000000' },
-        { token: 'namespace', foreground: '66afce' },
-
-        { token: 'type', foreground: '1db010' },
-        { token: 'struct', foreground: '0000ff' },
-        { token: 'class', foreground: '0000ff', fontStyle: 'bold' },
-        { token: 'interface', foreground: '007700', fontStyle: 'bold' },
-        { token: 'enum', foreground: '0077ff', fontStyle: 'bold' },
-        { token: 'typeParameter', foreground: '1db010' },
-        { token: 'function', foreground: '94763a' },
-
-        { token: 'member', foreground: '94763a' },
-        { token: 'macro', foreground: '615a60' },
-        { token: 'variable', foreground: '3e5bbf' },
-        { token: 'parameter', foreground: '3e5bbf' },
-        { token: 'property', foreground: '3e5bbf' },
-        { token: 'label', foreground: '615a60' },
-
-        { token: 'type.static', fontStyle: 'bold' },
-        { token: 'class.static', foreground: 'ff0000', fontStyle: 'bold' }
-    ]
+	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: 'member', foreground: '94763a' },
+		{ token: 'macro', foreground: '615a60' },
+		{ token: 'variable', foreground: '3e5bbf' },
+		{ token: 'parameter', foreground: '3e5bbf' },
+		{ token: 'property', foreground: '3e5bbf' },
+		{ token: 'label', foreground: '615a60' },
+
+		{ token: 'type.static', fontStyle: 'bold' },
+		{ token: 'class.static', foreground: 'ff0000', fontStyle: 'bold' }
+	]
 });
 
-const editor = monaco.editor.create(document.getElementById("container"), {
-    value: [
-        'Available token types:',
-        '    [comment] [string] [keyword] [number] [regexp] [operator] [namespace]',
-        '    [type] [struct] [class] [interface] [enum] [typeParameter] [function]',
-        '    [member] [macro] [variable] [parameter] [property] [label]',
-        '',
-        'Available token modifiers:',
-        '    [type.declaration] [type.documentation] [type.member] [type.static]',
-        '    [type.abstract] [type.deprecated] [type.modification] [type.async]',
-        '',
-        'Some examples:',
-        '    [class.static.token]     [type.static.abstract]',
-        '    [class.static.token]     [type.static]',
-        '',
-        '    [struct]',
-        '',
-        '    [function.private]',
-        '',
-        'An error case:',
-        '    [notInLegend]'
-    ].join('\n'),
-    language: "plaintext",
-    theme: 'myCustomTheme',
-    // semantic tokens provider is disabled by default
-    'semanticHighlighting.enabled': true
+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>

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

@@ -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>

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

@@ -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>

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

@@ -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;
 	}

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

@@ -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
 });
 

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

@@ -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*/

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

@@ -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!');
 });
 

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

@@ -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());
 });

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

@@ -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
 

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

@@ -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 });

monaco-editor/test/samples-all.generated.js

@@ -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",