diff --git a/README.md b/README.md
index fc0d35bc..66023efd 100644
--- a/README.md
+++ b/README.md
@@ -209,11 +209,6 @@ Create a Monarch tokenizer [here](https://microsoft.github.io/monaco-editor/mona
* run `$/src/monaco-editor> npm run release`
* open http://localhost:8080/monaco-editor/website/
-### Generating the playground samples
-
-* edit `$/src/monaco-editor/website/playground/playground.mdoc`
-* run `$/src/monaco-editor> gulp playground-samples`
-
### Publishing the website
* run `$/src/monaco-editor> npm run website`
diff --git a/gulpfile.js b/gulpfile.js
index a314f968..83949c81 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,8 +8,7 @@ var rimraf = require('rimraf');
var cp = require('child_process');
var httpServer = require('http-server');
-var SAMPLES_MDOC_PATH = path.join(__dirname, 'website/playground/playground.mdoc');
-var WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/samples');
+var WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/new-samples');
var MONACO_EDITOR_VERSION = (function() {
var packageJsonPath = path.join(__dirname, 'package.json');
var packageJson = JSON.parse(fs.readFileSync(packageJsonPath).toString());
@@ -206,144 +205,8 @@ function addPluginThirdPartyNotices() {
// --- website
-gulp.task('clean-playground-samples', function(cb) { rimraf(WEBSITE_GENERATED_PATH, { maxBusyTries: 1 }, cb); });
-gulp.task('playground-samples', ['clean-playground-samples'], function() {
- function toFolderName(name) {
- var result = name.toLowerCase().replace(/[^a-z0-9\-_]/g, '-');
-
- while (result.indexOf('--') >= 0) {
- result = result.replace(/--/, '-');
- }
-
- while (result.charAt(result.length - 1) === '-') {
- result = result.substring(result, result.length - 1);
- }
-
- return result;
- }
-
- function parse(txt) {
- function startsWith(haystack, needle) {
- return haystack.substring(0, needle.length) === needle;
- }
-
- var CHAPTER_MARKER = "=";
- var SAMPLE_MARKER = "==";
- var SNIPPET_MARKER = "=======================";
-
- var lines = txt.split(/\r\n|\n|\r/);
- var result = [];
- var currentChapter = null;
- var currentSample = null;
- var currentSnippet = null;
-
- for (var i = 0; i < lines.length; i++) {
- var line = lines[i];
-
- if (startsWith(line, SNIPPET_MARKER)) {
- var snippetType = line.substring(SNIPPET_MARKER.length).trim();
-
- if (snippetType === 'HTML' || snippetType === 'JS' || snippetType === 'CSS') {
- currentSnippet = currentSample[snippetType];
- } else {
- currentSnippet = null;
- }
- continue;
- }
-
- if (startsWith(line, SAMPLE_MARKER)) {
- currentSnippet = null;
- currentSample = {
- name: line.substring(SAMPLE_MARKER.length).trim(),
- JS: [],
- HTML: [],
- CSS: []
- };
- currentChapter.samples.push(currentSample);
- continue;
- }
-
- if (startsWith(line, CHAPTER_MARKER)) {
- currentSnippet = null;
- currentSample = null;
- currentChapter = {
- name: line.substring(CHAPTER_MARKER.length).trim(),
- samples: []
- };
- result.push(currentChapter);
- continue;
- }
-
- if (currentSnippet) {
- currentSnippet.push(line);
- continue;
- }
-
- if (line === '') {
- continue;
- }
-
- // ignore inter-sample content
- console.warn('IGNORING INTER-SAMPLE CONTENT: ' + line);
- }
-
- return result;
- }
-
- var chapters = parse(fs.readFileSync(SAMPLES_MDOC_PATH).toString());
-
- var allSamples = [];
-
- fs.mkdirSync(WEBSITE_GENERATED_PATH);
-
- chapters.forEach(function(chapter) {
- var chapterFolderName = toFolderName(chapter.name);
-
- chapter.samples.forEach(function(sample) {
- var sampleId = toFolderName(chapter.name + '-' + sample.name);
-
- sample.sampleId = sampleId;
-
- var js = [
- '//---------------------------------------------------',
- '// ' + chapter.name + ' > ' + sample.name,
- '//---------------------------------------------------',
- '',
- ].concat(sample.JS)
- var sampleOut = {
- id: sampleId,
- js: js.join('\n'),
- html: sample.HTML.join('\n'),
- css: sample.CSS.join('\n')
- };
-
- allSamples.push({
- chapter: chapter.name,
- name: sample.name,
- sampleId: sampleId
- });
-
- var content =
-`// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push(${JSON.stringify(sampleOut)});
-`
-
- fs.writeFileSync(path.join(WEBSITE_GENERATED_PATH, sampleId + '.js'), content);
- });
- });
-
- var content =
-`// This is a generated file. Please do not edit directly.
-this.SAMPLES = [];
-this.ALL_SAMPLES = ${JSON.stringify(allSamples)};`
-
- fs.writeFileSync(path.join(WEBSITE_GENERATED_PATH, 'all.js'), content);
-
-});
-
gulp.task('clean-website', function(cb) { rimraf('../monaco-editor-website', { maxBusyTries: 1 }, cb); });
-gulp.task('website', ['clean-website', 'playground-samples'], function() {
+gulp.task('website', ['clean-website'], function() {
return (
gulp.src('website/**/*', { dot: true })
@@ -408,6 +271,87 @@ gulp.task('generate-test-samples', function() {
var prefix = '//This is a generated file via gulp generate-test-samples\ndefine([], function() { return';
var suffix = '; });'
fs.writeFileSync(path.join(__dirname, 'test/samples-all.js'), prefix + JSON.stringify(samples, null, '\t') + suffix );
+
+ var PLAY_SAMPLES = require(path.join(WEBSITE_GENERATED_PATH, 'all.js')).PLAY_SAMPLES;
+ var locations = [];
+ for (var i = 0; i < PLAY_SAMPLES.length; i++) {
+ var sample = PLAY_SAMPLES[i];
+ var sampleId = sample.id;
+ var samplePath = path.join(WEBSITE_GENERATED_PATH, sample.path);
+
+ var html = fs.readFileSync(path.join(samplePath, 'sample.html'));
+ var js = fs.readFileSync(path.join(samplePath, 'sample.js'));
+ var css = fs.readFileSync(path.join(samplePath, 'sample.css'));
+
+ var result = [
+ '<!DOCTYPE html>',
+ '<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->',
+ '<html>',
+ '<head>',
+ ' <base href="..">',
+ ' <meta http-equiv="X-UA-Compatible" content="IE=edge" />',
+ ' <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />',
+ '</head>',
+ '<body>',
+ '<style>',
+ '/*----------------------------------------SAMPLE CSS START*/',
+ '',
+ css,
+ '',
+ '/*----------------------------------------SAMPLE CSS END*/',
+ '</style>',
+ '<a href="playground.generated/index.html">[<< BACK]</a> <br/>',
+ 'THIS IS A GENERATED FILE VIA gulp generate-test-samples',
+ '',
+ '<div id="bar" style="margin-bottom: 6px;"></div>',
+ '',
+ '<div style="clear:both"></div>',
+ '<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">',
+ '<!-- ----------------------------------------SAMPLE HTML START-->',
+ '',
+ html,
+ '',
+ '<!-- ----------------------------------------SAMPLE HTML END-->',
+ '</div>',
+ '<div style="clear:both"></div>',
+ '',
+ '<script src="../metadata.js"></script>',
+ '<script src="dev-setup.js"></script>',
+ '<script>',
+ 'loadEditor(function() {',
+ '/*----------------------------------------SAMPLE JS START*/',
+ '',
+ js,
+ '',
+ '/*----------------------------------------SAMPLE CSS END*/',
+ '});',
+ '</script>',
+ '</body>',
+ '</html>',
+ ];
+ fs.writeFileSync(path.join(__dirname, 'test/playground.generated/' + sampleId + '.html'), result.join('\n'));
+ locations.push({
+ path: sampleId + '.html',
+ name: sample.chapter + ' > ' + sample.name
+ })
+ }
+
+ var index = [
+'<!DOCTYPE html>',
+'<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->',
+'<html>',
+'<head>',
+'</head>',
+'<body>',
+'<a href="../index.html">[<< BACK]</a><br/>',
+'THIS IS A GENERATED FILE VIA gulp generate-test-samples<br/><br/>',
+locations.map(function(location) {
+ return '<a href="' + location.path + '">' + location.name + '</a>';
+}).join('<br/>\n'),
+'</body>',
+'</html>',
+ ]
+ fs.writeFileSync(path.join(__dirname, 'test/playground.generated/index.html'), index.join('\n'));
});
gulp.task('simpleserver', ['generate-test-samples'], function(cb) {
diff --git a/website/playground/playground.mdoc b/website/playground/playground.mdoc
deleted file mode 100644
index 86d51314..00000000
--- a/website/playground/playground.mdoc
+++ /dev/null
@@ -1,1193 +0,0 @@
-= Creating the editor
-
-== Hello world!
-=======================JS
-// The Monaco Editor can be easily created, given an
-// empty container and an options literal.
-// Two members of the literal are "value" and "language".
-// The editor takes the full size of its container.
-
-monaco.editor.create(document.getElementById("container"), {
- value: "function hello() {\n\talert('Hello world!');\n}",
- language: "javascript"
-});
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-
-
-== Editor basic options
-=======================JS
-// Through the options literal, the behaviour of the editor can be easily customized.
-// 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"), {
- value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
- language: "javascript",
-
- lineNumbers: false,
- roundedSelection: false,
- scrollBeyondLastLine: false,
- readOnly: false,
- theme: "vs-dark",
-});
-setTimeout(function() {
- editor.updateOptions({
- lineNumbers: true
- });
-}, 2000);
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-
-
-== Hard wrapping
-
-=======================JS
-var jsCode = "// jqeuery excerpt:\n// 1 2 3 4\n//34567890123456789012345678901234567890\n\/*!\r\n * Sizzle CSS Selector Engine v2.3.0\r\n * https:\/\/sizzlejs.com\/\r\n *\r\n * Copyright jQuery Foundation and other contributors\r\n * Released under the MIT license\r\n * http:\/\/jquery.org\/license\r\n *\r\n * Date: 2016-01-04\r\n *\/\r\n(function( window ) {\r\n\r\nvar i,\r\n\tsupport,\r\n\tExpr,\r\n\tgetText,\r\n\tisXML,\r\n\ttokenize,\r\n\tcompile,\r\n\tselect,\r\n\toutermostContext,\r\n\tsortInput,\r\n\thasDuplicate,\r\n\r\n\t\/\/ Local document vars\r\n\tsetDocument,\r\n\tdocument,\r\n\tdocElem,\r\n\tdocumentIsHTML,\r\n\trbuggyQSA,\r\n\trbuggyMatches,\r\n\tmatches,\r\n\tcontains,\r\n\r\n\t\/\/ Instance-specific data\r\n\texpando = \"sizzle\" + 1 * new Date(),\r\n\tpreferredDoc = window.document,\r\n\tdirruns = 0,\r\n\tdone = 0,\r\n\tclassCache = createCache(),\r\n\ttokenCache = createCache(),\r\n\tcompilerCache = createCache(),\r\n\tsortOrder = function( a, b ) {\r\n\t\tif ( a === b ) {\r\n\t\t\thasDuplicate = true;\r\n\t\t}\r\n\t\treturn 0;\r\n\t},\r\n\r\n\t\/\/ Instance methods\r\n\thasOwn = ({}).hasOwnProperty,\r\n\tarr = [],\r\n\tpop = arr.pop,\r\n\tpush_native = arr.push,\r\n\tpush = arr.push,\r\n\tslice = arr.slice,\r\n\t\/\/ Use a stripped-down indexOf as it\'s faster than native\r\n\t\/\/ https:\/\/jsperf.com\/thor-indexof-vs-for\/5\r\n\tindexOf = function( list, elem ) {\r\n\t\tvar i = 0,\r\n\t\t\tlen = list.length;\r\n\t\tfor ( ; i < len; i++ ) {\r\n\t\t\tif ( list[i] === elem ) {\r\n\t\t\t\treturn i;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn -1;\r\n\t},\r\n\r\n\tbooleans = \"checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped\",\r\n\r\n\t\/\/ Regular expressions\r\n\r\n\t\/\/ http:\/\/www.w3.org\/TR\/css3-selectors\/#whitespace\r\n\twhitespace = \"[\\\\x20\\\\t\\\\r\\\\n\\\\f]\",\r\n\r\n\t\/\/ http:\/\/www.w3.org\/TR\/CSS21\/syndata.html#value-def-identifier\r\n\tidentifier = \"(?:\\\\\\\\.|[\\\\w-]|[^\\0-\\\\xa0])+\",\r\n\r\n\t\/\/ Attribute selectors: http:\/\/www.w3.org\/TR\/selectors\/#attribute-selectors\r\n\tattributes = \"\\\\[\" + whitespace + \"*(\" + identifier + \")(?:\" + whitespace +\r\n\t\t\/\/ Operator (capture 2)\r\n\t\t\"*([*^$|!~]?=)\" + whitespace +\r\n\t\t\/\/ \"Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]\"\r\n\t\t\"*(?:\'((?:\\\\\\\\.|[^\\\\\\\\\'])*)\'|\\\"((?:\\\\\\\\.|[^\\\\\\\\\\\"])*)\\\"|(\" + identifier + \"))|)\" + whitespace +\r\n\t\t\"*\\\\]\",\r\n\r\n\tpseudos = \":(\" + identifier + \")(?:\\\\((\" +\r\n\t\t\/\/ To reduce the number of selectors needing tokenize in the preFilter, prefer arguments:\r\n\t\t\/\/ 1. quoted (capture 3; capture 4 or capture 5)\r\n\t\t\"(\'((?:\\\\\\\\.|[^\\\\\\\\\'])*)\'|\\\"((?:\\\\\\\\.|[^\\\\\\\\\\\"])*)\\\")|\" +\r\n\t\t\/\/ 2. simple (capture 6)\r\n\t\t\"((?:\\\\\\\\.|[^\\\\\\\\()[\\\\]]|\" + attributes + \")*)|\" +\r\n\t\t\/\/ 3. anything else (capture 2)\r\n\t\t\".*\" +\r\n\t\t\")\\\\)|)\",\r\n\r\n\t\/\/ Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter\r\n\trwhitespace = new RegExp( whitespace + \"+\", \"g\" ),\r\n\trtrim = new RegExp( \"^\" + whitespace + \"+|((?:^|[^\\\\\\\\])(?:\\\\\\\\.)*)\" + whitespace + \"+$\", \"g\" ),\r\n\r\n\trcomma = new RegExp( \"^\" + whitespace + \"*,\" + whitespace + \"*\" ),\r\n\trcombinators = new RegExp( \"^\" + whitespace + \"*([>+~]|\" + whitespace + \")\" + whitespace + \"*\" ),\r\n\r\n\trattributeQuotes = new RegExp( \"=\" + whitespace + \"*([^\\\\]\'\\\"]*?)\" + whitespace + \"*\\\\]\", \"g\" ),\r\n\r\n\trpseudo = new RegExp( pseudos ),\r\n\tridentifier = new RegExp( \"^\" + identifier + \"$\" ),\r\n\r\n\tmatchExpr = {\r\n\t\t\"ID\": new RegExp( \"^#(\" + identifier + \")\" ),\r\n\t\t\"CLASS\": new RegExp( \"^\\\\.(\" + identifier + \")\" ),\r\n\t\t\"TAG\": new RegExp( \"^(\" + identifier + \"|[*])\" ),\r\n\t\t\"ATTR\": new RegExp( \"^\" + attributes ),\r\n\t\t\"PSEUDO\": new RegExp( \"^\" + pseudos ),\r\n\t\t\"CHILD\": new RegExp( \"^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\\\(\" + whitespace +\r\n\t\t\t\"*(even|odd|(([+-]|)(\\\\d*)n|)\" + whitespace + \"*(?:([+-]|)\" + whitespace +\r\n\t\t\t\"*(\\\\d+)|))\" + whitespace + \"*\\\\)|)\", \"i\" ),\r\n\t\t\"bool\": new RegExp( \"^(?:\" + booleans + \")$\", \"i\" ),\r\n\t\t\/\/ For use in libraries implementing .is()\r\n\t\t\/\/ We use this for POS matching in `select`\r\n\t\t\"needsContext\": new RegExp( \"^\" + whitespace + \"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\\\(\" +\r\n\t\t\twhitespace + \"*((?:-\\\\d)?\\\\d*)\" + whitespace + \"*\\\\)|)(?=[^-]|$)\", \"i\" )\r\n\t},\r\n\r\n\trinputs = \/^(?:input|select|textarea|button)$\/i,\r\n\trheader = \/^h\\d$\/i,\r\n\r\n\trnative = \/^[^{]+\\{\\s*\\[native \\w\/,\r\n\r\n\t\/\/ Easily-parseable\/retrievable ID or TAG or CLASS selectors\r\n\trquickExpr = \/^(?:#([\\w-]+)|(\\w+)|\\.([\\w-]+))$\/,\r\n\r\n\trsibling = \/[+~]\/,\r\n\r\n\t\/\/ CSS escapes\r\n\t\/\/ http:\/\/www.w3.org\/TR\/CSS21\/syndata.html#escaped-characters\r\n\trunescape = new RegExp( \"\\\\\\\\([\\\\da-f]{1,6}\" + whitespace + \"?|(\" + whitespace + \")|.)\", \"ig\" ),\r\n\tfunescape = function( _, escaped, escapedWhitespace ) {\r\n\t\tvar high = \"0x\" + escaped - 0x10000;\r\n\t\t\/\/ NaN means non-codepoint\r\n\t\t\/\/ Support: Firefox<24\r\n\t\t\/\/ Workaround erroneous numeric interpretation of +\"0x\"\r\n\t\treturn high !== high || escapedWhitespace ?\r\n\t\t\tescaped :\r\n\t\t\thigh < 0 ?\r\n\t\t\t\t\/\/ BMP codepoint\r\n\t\t\t\tString.fromCharCode( high + 0x10000 ) :\r\n\t\t\t\t\/\/ Supplemental Plane codepoint (surrogate pair)\r\n\t\t\t\tString.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 );\r\n\t},\r\n\r\n\t\/\/ CSS string\/identifier serialization\r\n\t\/\/ https:\/\/drafts.csswg.org\/cssom\/#common-serializing-idioms\r\n\trcssescape = \/([\\0-\\x1f\\x7f]|^-?\\d)|^-$|[^\\x80-\\uFFFF\\w-]\/g,\r\n\tfcssescape = function( ch, asCodePoint ) {\r\n\t\tif ( asCodePoint ) {\r\n\r\n\t\t\t\/\/ U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER\r\n\t\t\tif ( ch === \"\\0\" ) {\r\n\t\t\t\treturn \"\\uFFFD\";\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ Control characters and (dependent upon position) numbers get escaped as code points\r\n\t\t\treturn ch.slice( 0, -1 ) + \"\\\\\" + ch.charCodeAt( ch.length - 1 ).toString( 16 ) + \" \";\r\n\t\t}\r\n\r\n\t\t\/\/ Other potentially-special ASCII characters get backslash-escaped\r\n\t\treturn \"\\\\\" + ch;\r\n\t},\r\n\r\n\t\/\/ Used for iframes\r\n\t\/\/ See setDocument()\r\n\t\/\/ Removing the function wrapper causes a \"Permission Denied\"\r\n\t\/\/ error in IE\r\n\tunloadHandler = function() {\r\n\t\tsetDocument();\r\n\t},\r\n\r\n\tdisabledAncestor = addCombinator(\r\n\t\tfunction( elem ) {\r\n\t\t\treturn elem.disabled === true;\r\n\t\t},\r\n\t\t{ dir: \"parentNode\", next: \"legend\" }\r\n\t);})";
-
-var editor = monaco.editor.create(document.getElementById("container"), {
- value: jsCode,
- language: "javascript",
-
- // If `wrappingColumn` is -1, then no wrapping occurs and
- // long lines are rendered on one line. However, this might
- // mean that not all code is rendered (... may be used).
- // If `wrappingColumn` is 0, then viewport width wrapping is set
- // If `wrappingColumn` is > 0, then the lines will wrap at its value
- // Defaults to 300
- wrappingColumn: 40,
-
- // try "same", "indent" or "none"
- wrappingIndent: "indent"
-});
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-
-
-== Syntax highlighting for HTML elements
-=======================JS
-// The colorizeElement-function will read the data-lang-attribute
-// from the element to select the correct language mode. In this
-// sample it is text/css.
-monaco.editor.colorizeElement(document.getElementById('code'));
-
-=======================HTML
-<pre id="code" data-lang="text/css" style="width:500px;">
-/* Some example CSS */
-
-@import url("something.css");
-
-body {
- margin: 0;
- padding: 3em 6em;
- font-family: tahoma, arial, sans-serif;
- color: #000;
-}
-
-#navigation a {
- font-weight: bold;
- text-decoration: none !important;
-}
-
-h1 {
- font-size: 2.5em;
-}
-
-h2 {
- font-size: 1.7em;
-}
-
-h1:before, h2:before {
- content: "some contents";
-}
-
-code {
- font-family: courier, monospace;
- font-size: 80%;
- color: #418A8A;
-}
-</pre>
-
-=======================CSS
-
-
-=======================END
-
-
-
-
-
-
-
-
-= Interacting with the editor
-
-== Adding a command to an editor instance
-
-=======================JS
-var jsCode = [
- '"use strict";',
- 'function Person(age) {',
- ' if (age) {',
- ' this.age = age;',
- ' }',
- '}',
- 'Person.prototype.getAge = function () {',
- ' return this.age;',
- '};'
-].join('\n');
-
-var editor = monaco.editor.create(document.getElementById("container"), {
- value: jsCode,
- language: "javascript"
-});
-
-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')
-
-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
-}, 2000);
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-== Adding an action to an editor instance
-
-=======================JS
-var editor = monaco.editor.create(document.getElementById("container"), {
- value: [
- '',
- 'class Example {',
- '\tprivate m:number;',
- '',
- '\tpublic met(): string {',
- '\t\treturn "Hello world!";',
- '\t}',
- '}'
- ].join('\n'),
- language: "typescript"
-});
-
-// Explanation:
-// Try right clicking on an identifier or keyword => the action will be enabled (due to `tokensAtPosition`)
-// Try right clicking on a string => the action will be disabled (due to `tokensAtPosition`)
-// Try right clicking on whitespace => the action will be disabled (due to `wordAtPosition`)
-// Press F1 (Alt-F1 in IE) => the action will appear and run if it is enabled
-// Press Ctrl-F10 => the action will run if it is enabled
-
-editor.addAction({
- // An unique identifier of the contributed action.
- id: 'my-unique-id',
-
- // A label of the action that will be presented to the user.
- label: 'My Label!!!',
-
- // An optional array of keybindings for the action.
- keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
-
- keybindingContext: null,
-
- // Control if the action should show up in the context menu and where.
- // Built-in groups:
- // 1_goto/* => e.g. 1_goto/1_peekDefinition
- // 2_change/* => e.g. 2_change/2_format
- // 3_edit/* => e.g. 3_edit/1_copy
- // 4_tools/* => e.g. 4_tools/1_commands
- // You can also create your own group.
- // Defaults to null (don't show in context menu).
- contextMenuGroupId: '2_change/2_bla',
-
- // Method that will be executed when the action is triggered.
- // @param editor The editor instance is passed in as a convinience
- run: function(ed) {
- alert("i'm running => " + ed.getPosition());
- return null;
- },
-
- // Optional enablement conditions. All members are optional
- enablement: {
- // The action is enabled only if text in the editor is focused (e.g. blinking cursor).
- // Warning: This condition will be disabled if the action is marked to be displayed in the context menu
- // Defaults to false.
- textFocus: true,
-
- // The action is enabled only if the editor or its widgets have focus (e.g. focus is in find widget).
- // Defaults to false.
- //widgetFocus: true,
-
- // The action is enabled only if the editor is not in read only mode.
- // Defaults to false.
- //writeableEditor: true,
-
- // The action is enabled only if the cursor position is over a word (i.e. not whitespace).
- // Defaults to false.
- wordAtPosition: true,
-
- // The action is enabled only if the cursor position is over tokens of a certain kind.
- // Defaults to no tokens required.
- tokensAtPosition: ['identifier', '', 'keyword'],
- }
-});
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-
-
-== Revealing a position
-
-=======================JS
-var jsCodeArr = [
- '// ------------------------------',
- '// ------------------------------',
- 'function Person(age) {',
- ' if (age) {',
- ' this.age = age;',
- ' }',
- '}',
- 'Person.prototype.getAge = function () {',
- ' return this.age;',
- '};',
- '',
- ''
-];
-
-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. ';
-
-var editor = monaco.editor.create(document.getElementById("container"), {
- value: jsCodeArr.join('\n'),
- language: "javascript"
-});
-
-editor.revealPositionInCenter({ lineNumber: 50, column: 120 });
-// Also see:
-// - editor.revealLine
-// - editor.revealLineInCenter
-// - editor.revealLineInCenterIfOutsideViewport
-// - editor.revealLines
-// - editor.revealLinesInCenter
-// - editor.revealLinesInCenterIfOutsideViewport
-// - editor.revealPosition
-// - editor.revealPositionInCenter
-// - editor.revealPositionInCenterIfOutsideViewport
-// - editor.revealRange
-// - editor.revealRangeInCenter
-// - editor.revealRangeInCenterIfOutsideViewport
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-
-
-== Rendering glyphs in the margin
-
-=======================JS
-var jsCode = [
- '"use strict";',
- 'function Person(age) {',
- ' if (age) {',
- ' this.age = age;',
- ' }',
- '}',
- 'Person.prototype.getAge = function () {',
- ' return this.age;',
- '};'
-].join('\n');
-
-var editor = monaco.editor.create(document.getElementById("container"), {
- value: jsCode,
- language: "javascript",
- glyphMargin: true
-});
-
-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
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================CSS
-.myGlyphMarginClass {
- background: red;
-}
-.myContentClass {
- background: lightblue;
-}
-
-=======================END
-
-
-
-
-== Line and Inline decorations
-
-=======================JS
-var jsCode = [
- '"use strict";',
- 'function Person(age) {',
- ' if (age) {',
- ' this.age = age;',
- ' }',
- '}',
- 'Person.prototype.getAge = function () {',
- ' return this.age;',
- '};'
-].join('\n');
-
-var editor = monaco.editor.create(document.getElementById("container"), {
- value: jsCode,
- 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' }},
-]);
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================CSS
-.myInlineDecoration {
- color: red !important;
- cursor: pointer;
- text-decoration: underline;
- font-weight: bold;
- font-style: oblique;
-}
-.myLineDecoration {
- background: lightblue;
- width: 5px !important;
- left: 3px;
-}
-
-=======================END
-
-
-
-
-== Customizing the line numbers
-
-=======================JS
-function lineNumbersFunc(originalLineNumber) {
- var map = [ 'O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
- if (originalLineNumber < map.length) {
- return map[originalLineNumber];
- }
- return originalLineNumber;
-}
-
-var jsCode = [
- '"use strict";',
- 'function Person(age) {',
- ' if (age) {',
- ' this.age = age;',
- ' }',
- '}',
- 'Person.prototype.getAge = function () {',
- ' return this.age;',
- '};'
-].join('\n');
-
-var editor = monaco.editor.create(document.getElementById("container"), {
- value: jsCode,
- language: "javascript",
- lineNumbers: lineNumbersFunc
-});
-
-=======================HTML
-<div id="container" style="height:100%"></div>
-
-=======================CSS
-
-
-=======================END
-
-
-
-
-== Listening to mouse events
-
-=======================JS
-var jsCode = [
- '"use strict";',
- 'function Person(age) {',
- ' if (age) {',
- ' this.age = age;',
- ' }',
- '}',
- 'Person.prototype.getAge = function () {',
- ' return this.age;',
- '};'
-].join('\n');
-
-var editor = monaco.editor.create(document.getElementById("container"), {
- value: jsCode,
- language: "javascript",
- glyphMargin: true,
- nativeContextMenu: false
-});
-
-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
- });
-});
-
-// Add a content widget (scrolls inline with text)
-var contentWidget = {
- domNode: null,
- getId: function() {
- return 'my.content.widget';
- },
- getDomNode: function() {
- if (!this.domNode) {
- this.domNode = document.createElement('div');
- this.domNode.innerHTML = 'My content widget';
- this.domNode.style.background = 'grey';
- }
- return this.domNode;
- },
- getPosition: function() {
- return {
- position: {
- lineNumber: 7,
- column: 8
- },
- preference: [monaco.editor.ContentWidgetPositionPreference.ABOVE, monaco.editor.ContentWidgetPositionPreference.BELOW]
- };
- }
-};
-editor.addContentWidget(contentWidget);
-
-// Add an overlay widget
-var overlayWidget = {
- domNode: null,
- getId: function() {
- return 'my.overlay.widget';
- },
- getDomNode: function() {
- if (!this.domNode) {
- this.domNode = document.createElement('div');
- this.domNode.innerHTML = 'My overlay widget';
- this.domNode.style.background = 'grey';
- this.domNode.style.right = '30px';
- this.domNode.style.top = '50px';
- }
- return this.domNode;
- },
- getPosition: function() {
- return null;
- }
-};
-editor.addOverlayWidget(overlayWidget);
-
-var output = document.getElementById('output');
-function showEvent(str) {
- 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());
-});
-editor.onMouseDown(function (e) {
- showEvent('mousedown - ' + e.target.toString());
-});
-editor.onContextMenu(function (e) {
- showEvent('contextmenu - ' + e.target.toString());
-});
-editor.onMouseLeave(function (e) {
- showEvent('mouseleave');
-});
-
-=======================HTML
-<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>
-
-=======================CSS
-.myGlyphMarginClass {
- background: red;
-}
-.myContentClass {
- background: lightblue;
-}
-
-=======================END
-
-
-
-
-== Listening to key events
-
-=======================JS
-var editor = monaco.editor.create(document.getElementById("container"), {
- value: "function hello() {\n\talert('Hello world!');\n}",
- language: "javascript"
-});
-
-var myBinding = editor.addCommand(monaco.KeyCode.F9, function() {
- alert('F9 pressed!');
-});
-
-// When cleaning up remember to call myBinding.dispose()
-
-=======================HTML
-<div id="container" style="height:100%"></div>
-
-=======================CSS
-
-
-=======================END
-
-= Customizing the appearence
-
-== Exposed CSS classes
-=======================JS
-// The editor exposes a set of CSS classes that can be overwritten.
-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
-});
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================CSS
-.monaco-editor, .monaco-editor-background {
- background: #EDF9FA;
-}
-
-/* Cursor */
-.monaco-editor .cursor {
- background: darkred !important;
-}
-
-/* Current line */
-.monaco-editor .current-line {
- background: rgba(0, 0, 255, 0.1);
-}
-
-/* Line Numbers */
-.monaco-editor .line-numbers {
- background-color: #EDF9FA;
- color: green;
-}
-
-/* Line Decorations */
-.monaco-editor .lines-decorations {
- background-color: #EDF9FA;
-}
-
-/* Selection */
-.monaco-editor .view-overlays.focused .selected-text {
- background: rgba(128, 0, 0, 0.2) !important;
-}
-.monaco-editor .view-overlays .selected-text {
- background: rgba(128, 0, 0, 0.1) !important;
-}
-
-=======================END
-
-
-
-
-== Scrollbars
-
-=======================JS
-// 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>";
-
-monaco.editor.create(document.getElementById("container"), {
- value: htmlCode,
- language: "text/html",
- theme: "vs",
- scrollbar: {
- // Subtle shadows to the left & top. Defaults to true.
- useShadows: false,
-
- // Render vertical arrows. Defaults to false.
- verticalHasArrows: true,
- // Render horizontal arrows. Defaults to false.
- horizontalHasArrows: true,
-
- // Render vertical scrollbar.
- // Accepted values: 'auto', 'visible', 'hidden'.
- // Defaults to 'auto'
- vertical: 'visible',
- // Render horizontal scrollbar.
- // Accepted values: 'auto', 'visible', 'hidden'.
- // Defaults to 'auto'
- horizontal: 'visible',
-
- verticalScrollbarSize: 17,
- horizontalScrollbarSize: 17,
- arrowSize: 30
- }
-});
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================CSS
-/* Make horizontal scrollbar, decorations overview ruler and vertical scrollbar arrows opaque */
-.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);
-}
-/* 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);
-}
-
-=======================END
-
-
-
-
-== Tokens and colors
-=======================JS
-// This example shows how to integrate the editor with a certain theme and then customize the token colors of that theme.
-var htmlCode = "<html>\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"), {
- value: htmlCode,
- language: "text/html",
- theme: "vs"
-});
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================CSS
-/*
-These rules customize the "Visual Studio" (vs) theme.
-
-Token names can be discovered by:
-a) exploring the .css theme files that come with the editor;
-b) inspecting the dom elements rendered by the editor;
-*/
-.monaco-editor.vs .token.comment { color: orange; }
-.monaco-editor.vs .token.comment.js { color: green; }
-.monaco-editor.vs .token.comment.css { color: blue; }
-
-=======================END
-
-
-
-
-
-
-
-
-= Creating the DiffEditor
-
-== Hello diff world!
-
-=======================JS
-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"));
-diffEditor.setModel({
- original: originalModel,
- modified: modifiedModel
-});
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-
-
-== Multi-line example
-
-=======================JS
-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"), {
- // You can optionally disable the resizing
- enableSplitViewResizing: false
-});
-diffEditor.setModel({
- original: originalModel,
- modified: modifiedModel
-});
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-
-
-== Inline Diff Example
-
-=======================JS
-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"), {
- // You can optionally disable the resizing
- enableSplitViewResizing: false,
-
- // Render the diff inline
- renderSideBySide: false
-});
-diffEditor.setModel({
- original: originalModel,
- modified: modifiedModel
-});
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-
-
-== Navigating a Diff
-=======================JS
-// 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"));
-diffEditor.setModel({
- original: originalModel,
- modified: modifiedModel
-});
-
-var navi = monaco.editor.createDiffNavigator(diffEditor, {
- followsCaret: true, // resets the navigator state when the user selects something in the editor
- ignoreCharChanges: true // jump from line to line
-});
-
-window.setInterval(function() {
- navi.next();
-}, 2000);
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-
-
-
-
-
-
-= Extending Language Services
-
-== Custom languages
-=======================JS
-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"],
- ]
- }
-});
-
-monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
- provideCompletionItems: () => {
- return [
- {
- label: 'simpleText',
- kind: monaco.languages.CompletionItemKind.Text
- }, {
- label: 'testing',
- kind: monaco.languages.CompletionItemKind.Keyword,
- insertText:'testing({{condition}})'
- },
- {
- label: 'ifelse',
- kind: monaco.languages.CompletionItemKind.Snippet,
- insertText: [
- 'if ({{condition}}) {',
- '\t{{}}',
- '} else {',
- '\t',
- '}'
- ].join('\n'),
- documentation: 'If-Else Statement'
- }
- ]
- }
-});
-
-monaco.editor.create(document.getElementById("container"), {
- value: getCode(),
- language: 'mySpecialLanguage'
-});
-
-function getCode() {
- return [
- '[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations',
- '[Sun Mar 7 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37',
- '[Sun Mar 7 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)',
- '[Sun Mar 7 16:05:49 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 16:45:56 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 17:13:50 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 17:21:44 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 17:23:53 2004] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd/twiki/lib/TWiki.pm line 528.',
- '[Sun Mar 7 17:23:53 2004] statistics: Can\'t create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied',
- '[Sun Mar 7 17:27:37 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 17:31:39 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 17:58:00 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 18:00:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 18:10:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 18:19:01 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 18:42:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 18:52:30 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 18:58:52 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 19:03:58 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 19:08:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 20:04:35 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 20:11:33 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 20:12:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 20:25:31 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 20:44:48 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome',
- '[Sun Mar 7 21:20:14 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 21:31:12 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 21:39:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Sun Mar 7 21:44:10 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 01:35:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 01:47:06 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 01:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 02:12:24 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 02:54:54 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 03:46:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 03:48:18 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 03:52:17 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 03:55:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 04:22:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 04:24:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 04:40:32 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 04:55:40 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 04:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 05:22:57 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 05:24:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '[Mon Mar 8 05:31:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
- '<11>httpd[31628]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_inf.html in 29-Mar 15:18:20.50 from xx.xx.xx.xx',
- '<11>httpd[25859]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_bin/shtml.exe/_vti_rpc in 29-Mar 15:18:20.54 from xx.xx.xx.xx',
- ].join('\n');;
-}
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================CSS
-.monaco-editor .token.custom-info {
- color: grey;
-}
-.monaco-editor .token.custom-error {
- color: red;
- font-weight: bold;
- font-size: 1.2em;
-}
-.monaco-editor .token.custom-notice {
- color: orange;
-}
-
-.monaco-editor .token.custom-date {
- color: green;
-}
-
-=======================END
-
-
-== Completion provider example
-=======================JS
-function createDependencyProposals() {
- // 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": "*"'
- },
- {
- label: '"express"',
- kind: monaco.languages.CompletionItemKind.Function,
- documentation: "Fast, unopinionated, minimalist web framework",
- insertText: '"express": "*"'
- },
- {
- label: '"mkdirp"',
- kind: monaco.languages.CompletionItemKind.Function,
- documentation: "Recursively mkdir, like <code>mkdir -p</code>",
- insertText: '"mkdirp": "*"'
- }
- ];
-}
-
-
-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 createDependencyProposals();
- }
- return [];
- }
-});
-
-monaco.editor.create(document.getElementById("container"), {
- value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
- language: "json"
-});
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-
-== Hover provider example
-=======================JS
-
-monaco.languages.register({ id: 'mySpecialLanguage' });
-
-monaco.languages.registerHoverProvider('mySpecialLanguage', {
- provideHover: function(model, position) {
- return xhr('../playground.html').then(function(res) {
- return {
- range: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),
- contents: [
- '**SOURCE**',
- { language: 'html', value: res.responseText.substring(0, 200) }
- ]
- }
- });
- }
-});
-
-monaco.editor.create(document.getElementById("container"), {
- value: '\n\nHover over this text',
- language: 'mySpecialLanguage'
-});
-
-function xhr(url) {
- var req = null;
- return new monaco.Promise(function(c,e,p) {
- 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 () { };
- } else {
- p(req);
- }
- };
-
- req.open("GET", url, true );
- req.responseType = "";
-
- req.send(null);
- }, function () {
- req._canceled = true;
- req.abort();
- });
-}
-
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================CSS
-
-=======================END
-
-
-
-
-== Configure JavaScript defaults
-=======================JS
-// Add additonal d.ts files to the JavaScript language service and change.
-// Also change the default compilation options.
-// The sample below shows how a class Facts is declared and introduced
-// to the system and how the compiler is told to use ES6 (target=2).
-
-// validation settings
-monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
- noSemanticValidation: true,
- noSyntaxValidation: false
-});
-
-// compiler options
-monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
- target: monaco.languages.typescript.ScriptTarget.ES6,
- allowNonTsExtensions: true
-});
-
-// extra libraries
-monaco.languages.typescript.javascriptDefaults.addExtraLib([
- 'declare class Facts {',
- ' /**',
- ' * Returns the next fact',
- ' */',
- ' static next():string',
- '}',
-].join('\n'), 'filename/facts.d.ts');
-
-var jsCode = [
- '"use strict";',
- '',
- "class Chuck {",
- " greet() {",
- " return Facts.next();",
- " }",
- "}"
-].join('\n');
-
-monaco.editor.create(document.getElementById("container"), {
- value: jsCode,
- language: "javascript"
-});
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
-
-== Configure JSON defaults
-=======================JS
-// Configures two JSON schemas, with references.
-
-monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
- schemas: [{
- uri: "http://myserver/foo-schema.json",
- schema: {
- type: "object",
- properties: {
- p1: {
- enum: [ "v1", "v2"]
- },
- p2: {
- $ref: "http://myserver/bar-schema.json"
- }
- }
- }
- },{
- uri: "http://myserver/bar-schema.json",
- schema: {
- type: "object",
- properties: {
- q1: {
- enum: [ "x1", "x2"]
- }
- }
- }
- }]
-});
-
-
-var jsonCode = [
- '{',
- ' "$schema": "http://myserver/foo-schema.json"',
- "}"
-].join('\n');
-
-monaco.editor.create(document.getElementById("container"), {
- value: jsonCode,
- language: "json"
-});
-=======================HTML
-<div id="container" style="height:100%;"></div>
-
-=======================END
diff --git a/website/playground/samples/all.js b/website/playground/samples/all.js
deleted file mode 100644
index 37200140..00000000
--- a/website/playground/samples/all.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-this.SAMPLES = [];
-this.ALL_SAMPLES = [{"chapter":"Creating the editor","name":"Hello world!","sampleId":"creating-the-editor-hello-world"},{"chapter":"Creating the editor","name":"Editor basic options","sampleId":"creating-the-editor-editor-basic-options"},{"chapter":"Creating the editor","name":"Hard wrapping","sampleId":"creating-the-editor-hard-wrapping"},{"chapter":"Creating the editor","name":"Syntax highlighting for HTML elements","sampleId":"creating-the-editor-syntax-highlighting-for-html-elements"},{"chapter":"Interacting with the editor","name":"Adding a command to an editor instance","sampleId":"interacting-with-the-editor-adding-a-command-to-an-editor-instance"},{"chapter":"Interacting with the editor","name":"Adding an action to an editor instance","sampleId":"interacting-with-the-editor-adding-an-action-to-an-editor-instance"},{"chapter":"Interacting with the editor","name":"Revealing a position","sampleId":"interacting-with-the-editor-revealing-a-position"},{"chapter":"Interacting with the editor","name":"Rendering glyphs in the margin","sampleId":"interacting-with-the-editor-rendering-glyphs-in-the-margin"},{"chapter":"Interacting with the editor","name":"Line and Inline decorations","sampleId":"interacting-with-the-editor-line-and-inline-decorations"},{"chapter":"Interacting with the editor","name":"Customizing the line numbers","sampleId":"interacting-with-the-editor-customizing-the-line-numbers"},{"chapter":"Interacting with the editor","name":"Listening to mouse events","sampleId":"interacting-with-the-editor-listening-to-mouse-events"},{"chapter":"Interacting with the editor","name":"Listening to key events","sampleId":"interacting-with-the-editor-listening-to-key-events"},{"chapter":"Customizing the appearence","name":"Exposed CSS classes","sampleId":"customizing-the-appearence-exposed-css-classes"},{"chapter":"Customizing the appearence","name":"Scrollbars","sampleId":"customizing-the-appearence-scrollbars"},{"chapter":"Customizing the appearence","name":"Tokens and colors","sampleId":"customizing-the-appearence-tokens-and-colors"},{"chapter":"Creating the DiffEditor","name":"Hello diff world!","sampleId":"creating-the-diffeditor-hello-diff-world"},{"chapter":"Creating the DiffEditor","name":"Multi-line example","sampleId":"creating-the-diffeditor-multi-line-example"},{"chapter":"Creating the DiffEditor","name":"Inline Diff Example","sampleId":"creating-the-diffeditor-inline-diff-example"},{"chapter":"Creating the DiffEditor","name":"Navigating a Diff","sampleId":"creating-the-diffeditor-navigating-a-diff"},{"chapter":"Extending Language Services","name":"Custom languages","sampleId":"extending-language-services-custom-languages"},{"chapter":"Extending Language Services","name":"Completion provider example","sampleId":"extending-language-services-completion-provider-example"},{"chapter":"Extending Language Services","name":"Hover provider example","sampleId":"extending-language-services-hover-provider-example"},{"chapter":"Extending Language Services","name":"Configure JavaScript defaults","sampleId":"extending-language-services-configure-javascript-defaults"},{"chapter":"Extending Language Services","name":"Configure JSON defaults","sampleId":"extending-language-services-configure-json-defaults"}];
\ No newline at end of file
diff --git a/website/playground/samples/creating-the-diffeditor-hello-diff-world.js b/website/playground/samples/creating-the-diffeditor-hello-diff-world.js
deleted file mode 100644
index 1002b997..00000000
--- a/website/playground/samples/creating-the-diffeditor-hello-diff-world.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"creating-the-diffeditor-hello-diff-world","js":"//---------------------------------------------------\n// Creating the DiffEditor > Hello diff world!\n//---------------------------------------------------\n\nvar originalModel = monaco.editor.createModel(\"heLLo world!\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"hello orlando!\", \"text/plain\");\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"));\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/creating-the-diffeditor-inline-diff-example.js b/website/playground/samples/creating-the-diffeditor-inline-diff-example.js
deleted file mode 100644
index 5cf8b59a..00000000
--- a/website/playground/samples/creating-the-diffeditor-inline-diff-example.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"creating-the-diffeditor-inline-diff-example","js":"//---------------------------------------------------\n// Creating the DiffEditor > Inline Diff Example\n//---------------------------------------------------\n\nvar originalModel = monaco.editor.createModel(\"This line is removed on the right.\\njust some text\\nabcd\\nefgh\\nSome more text\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"just some text\\nabcz\\nzzzzefgh\\nSome more text\\nThis line is removed on the left.\", \"text/plain\");\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"), {\n\t// You can optionally disable the resizing\n\tenableSplitViewResizing: false,\n\n\t// Render the diff inline\n\trenderSideBySide: false\n});\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/creating-the-diffeditor-multi-line-example.js b/website/playground/samples/creating-the-diffeditor-multi-line-example.js
deleted file mode 100644
index 470ff771..00000000
--- a/website/playground/samples/creating-the-diffeditor-multi-line-example.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"creating-the-diffeditor-multi-line-example","js":"//---------------------------------------------------\n// Creating the DiffEditor > Multi-line example\n//---------------------------------------------------\n\nvar originalModel = monaco.editor.createModel(\"This line is removed on the right.\\njust some text\\nabcd\\nefgh\\nSome more text\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"just some text\\nabcz\\nzzzzefgh\\nSome more text.\\nThis line is removed on the left.\", \"text/plain\");\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"), {\n\t// You can optionally disable the resizing\n\tenableSplitViewResizing: false\n});\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/creating-the-diffeditor-navigating-a-diff.js b/website/playground/samples/creating-the-diffeditor-navigating-a-diff.js
deleted file mode 100644
index f0786bdb..00000000
--- a/website/playground/samples/creating-the-diffeditor-navigating-a-diff.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"creating-the-diffeditor-navigating-a-diff","js":"//---------------------------------------------------\n// Creating the DiffEditor > Navigating a Diff\n//---------------------------------------------------\n\n// 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.\nvar originalModel = monaco.editor.createModel(\"just some text\\n\\nHello World\\n\\nSome more text\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"just some Text\\n\\nHello World\\n\\nSome more changes\", \"text/plain\");\n\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"));\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n\nvar navi = monaco.editor.createDiffNavigator(diffEditor, {\n\tfollowsCaret: true, // resets the navigator state when the user selects something in the editor\n\tignoreCharChanges: true // jump from line to line\n});\n\nwindow.setInterval(function() {\n\tnavi.next();\n}, 2000);\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/creating-the-editor-editor-basic-options.js b/website/playground/samples/creating-the-editor-editor-basic-options.js
deleted file mode 100644
index d752413e..00000000
--- a/website/playground/samples/creating-the-editor-editor-basic-options.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"creating-the-editor-editor-basic-options","js":"//---------------------------------------------------\n// Creating the editor > Editor basic options\n//---------------------------------------------------\n\n// Through the options literal, the behaviour of the editor can be easily customized.\n// Here are a few examples of config options that can be passed to the editor.\n// You can also call editor.updateOptions at any time to change the options.\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"// First line\\nfunction hello() {\\n\\talert('Hello world!');\\n}\\n// Last line\",\n\tlanguage: \"javascript\",\n\n\tlineNumbers: false,\n\troundedSelection: false,\n\tscrollBeyondLastLine: false,\n\treadOnly: false,\n\ttheme: \"vs-dark\",\n});\nsetTimeout(function() {\n\teditor.updateOptions({\n\t\tlineNumbers: true\n\t});\n}, 2000);\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/creating-the-editor-hard-wrapping.js b/website/playground/samples/creating-the-editor-hard-wrapping.js
deleted file mode 100644
index 5de3bc64..00000000
--- a/website/playground/samples/creating-the-editor-hard-wrapping.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"creating-the-editor-hard-wrapping","js":"//---------------------------------------------------\n// Creating the editor > Hard wrapping\n//---------------------------------------------------\n\nvar jsCode = \"// jqeuery excerpt:\\n// 1 2 3 4\\n//34567890123456789012345678901234567890\\n\\/*!\\r\\n * Sizzle CSS Selector Engine v2.3.0\\r\\n * https:\\/\\/sizzlejs.com\\/\\r\\n *\\r\\n * Copyright jQuery Foundation and other contributors\\r\\n * Released under the MIT license\\r\\n * http:\\/\\/jquery.org\\/license\\r\\n *\\r\\n * Date: 2016-01-04\\r\\n *\\/\\r\\n(function( window ) {\\r\\n\\r\\nvar i,\\r\\n\\tsupport,\\r\\n\\tExpr,\\r\\n\\tgetText,\\r\\n\\tisXML,\\r\\n\\ttokenize,\\r\\n\\tcompile,\\r\\n\\tselect,\\r\\n\\toutermostContext,\\r\\n\\tsortInput,\\r\\n\\thasDuplicate,\\r\\n\\r\\n\\t\\/\\/ Local document vars\\r\\n\\tsetDocument,\\r\\n\\tdocument,\\r\\n\\tdocElem,\\r\\n\\tdocumentIsHTML,\\r\\n\\trbuggyQSA,\\r\\n\\trbuggyMatches,\\r\\n\\tmatches,\\r\\n\\tcontains,\\r\\n\\r\\n\\t\\/\\/ Instance-specific data\\r\\n\\texpando = \\\"sizzle\\\" + 1 * new Date(),\\r\\n\\tpreferredDoc = window.document,\\r\\n\\tdirruns = 0,\\r\\n\\tdone = 0,\\r\\n\\tclassCache = createCache(),\\r\\n\\ttokenCache = createCache(),\\r\\n\\tcompilerCache = createCache(),\\r\\n\\tsortOrder = function( a, b ) {\\r\\n\\t\\tif ( a === b ) {\\r\\n\\t\\t\\thasDuplicate = true;\\r\\n\\t\\t}\\r\\n\\t\\treturn 0;\\r\\n\\t},\\r\\n\\r\\n\\t\\/\\/ Instance methods\\r\\n\\thasOwn = ({}).hasOwnProperty,\\r\\n\\tarr = [],\\r\\n\\tpop = arr.pop,\\r\\n\\tpush_native = arr.push,\\r\\n\\tpush = arr.push,\\r\\n\\tslice = arr.slice,\\r\\n\\t\\/\\/ Use a stripped-down indexOf as it\\'s faster than native\\r\\n\\t\\/\\/ https:\\/\\/jsperf.com\\/thor-indexof-vs-for\\/5\\r\\n\\tindexOf = function( list, elem ) {\\r\\n\\t\\tvar i = 0,\\r\\n\\t\\t\\tlen = list.length;\\r\\n\\t\\tfor ( ; i < len; i++ ) {\\r\\n\\t\\t\\tif ( list[i] === elem ) {\\r\\n\\t\\t\\t\\treturn i;\\r\\n\\t\\t\\t}\\r\\n\\t\\t}\\r\\n\\t\\treturn -1;\\r\\n\\t},\\r\\n\\r\\n\\tbooleans = \\\"checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped\\\",\\r\\n\\r\\n\\t\\/\\/ Regular expressions\\r\\n\\r\\n\\t\\/\\/ http:\\/\\/www.w3.org\\/TR\\/css3-selectors\\/#whitespace\\r\\n\\twhitespace = \\\"[\\\\\\\\x20\\\\\\\\t\\\\\\\\r\\\\\\\\n\\\\\\\\f]\\\",\\r\\n\\r\\n\\t\\/\\/ http:\\/\\/www.w3.org\\/TR\\/CSS21\\/syndata.html#value-def-identifier\\r\\n\\tidentifier = \\\"(?:\\\\\\\\\\\\\\\\.|[\\\\\\\\w-]|[^\\\\0-\\\\\\\\xa0])+\\\",\\r\\n\\r\\n\\t\\/\\/ Attribute selectors: http:\\/\\/www.w3.org\\/TR\\/selectors\\/#attribute-selectors\\r\\n\\tattributes = \\\"\\\\\\\\[\\\" + whitespace + \\\"*(\\\" + identifier + \\\")(?:\\\" + whitespace +\\r\\n\\t\\t\\/\\/ Operator (capture 2)\\r\\n\\t\\t\\\"*([*^$|!~]?=)\\\" + whitespace +\\r\\n\\t\\t\\/\\/ \\\"Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]\\\"\\r\\n\\t\\t\\\"*(?:\\'((?:\\\\\\\\\\\\\\\\.|[^\\\\\\\\\\\\\\\\\\'])*)\\'|\\\\\\\"((?:\\\\\\\\\\\\\\\\.|[^\\\\\\\\\\\\\\\\\\\\\\\"])*)\\\\\\\"|(\\\" + identifier + \\\"))|)\\\" + whitespace +\\r\\n\\t\\t\\\"*\\\\\\\\]\\\",\\r\\n\\r\\n\\tpseudos = \\\":(\\\" + identifier + \\\")(?:\\\\\\\\((\\\" +\\r\\n\\t\\t\\/\\/ To reduce the number of selectors needing tokenize in the preFilter, prefer arguments:\\r\\n\\t\\t\\/\\/ 1. quoted (capture 3; capture 4 or capture 5)\\r\\n\\t\\t\\\"(\\'((?:\\\\\\\\\\\\\\\\.|[^\\\\\\\\\\\\\\\\\\'])*)\\'|\\\\\\\"((?:\\\\\\\\\\\\\\\\.|[^\\\\\\\\\\\\\\\\\\\\\\\"])*)\\\\\\\")|\\\" +\\r\\n\\t\\t\\/\\/ 2. simple (capture 6)\\r\\n\\t\\t\\\"((?:\\\\\\\\\\\\\\\\.|[^\\\\\\\\\\\\\\\\()[\\\\\\\\]]|\\\" + attributes + \\\")*)|\\\" +\\r\\n\\t\\t\\/\\/ 3. anything else (capture 2)\\r\\n\\t\\t\\\".*\\\" +\\r\\n\\t\\t\\\")\\\\\\\\)|)\\\",\\r\\n\\r\\n\\t\\/\\/ Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter\\r\\n\\trwhitespace = new RegExp( whitespace + \\\"+\\\", \\\"g\\\" ),\\r\\n\\trtrim = new RegExp( \\\"^\\\" + whitespace + \\\"+|((?:^|[^\\\\\\\\\\\\\\\\])(?:\\\\\\\\\\\\\\\\.)*)\\\" + whitespace + \\\"+$\\\", \\\"g\\\" ),\\r\\n\\r\\n\\trcomma = new RegExp( \\\"^\\\" + whitespace + \\\"*,\\\" + whitespace + \\\"*\\\" ),\\r\\n\\trcombinators = new RegExp( \\\"^\\\" + whitespace + \\\"*([>+~]|\\\" + whitespace + \\\")\\\" + whitespace + \\\"*\\\" ),\\r\\n\\r\\n\\trattributeQuotes = new RegExp( \\\"=\\\" + whitespace + \\\"*([^\\\\\\\\]\\'\\\\\\\"]*?)\\\" + whitespace + \\\"*\\\\\\\\]\\\", \\\"g\\\" ),\\r\\n\\r\\n\\trpseudo = new RegExp( pseudos ),\\r\\n\\tridentifier = new RegExp( \\\"^\\\" + identifier + \\\"$\\\" ),\\r\\n\\r\\n\\tmatchExpr = {\\r\\n\\t\\t\\\"ID\\\": new RegExp( \\\"^#(\\\" + identifier + \\\")\\\" ),\\r\\n\\t\\t\\\"CLASS\\\": new RegExp( \\\"^\\\\\\\\.(\\\" + identifier + \\\")\\\" ),\\r\\n\\t\\t\\\"TAG\\\": new RegExp( \\\"^(\\\" + identifier + \\\"|[*])\\\" ),\\r\\n\\t\\t\\\"ATTR\\\": new RegExp( \\\"^\\\" + attributes ),\\r\\n\\t\\t\\\"PSEUDO\\\": new RegExp( \\\"^\\\" + pseudos ),\\r\\n\\t\\t\\\"CHILD\\\": new RegExp( \\\"^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\\\\\\\(\\\" + whitespace +\\r\\n\\t\\t\\t\\\"*(even|odd|(([+-]|)(\\\\\\\\d*)n|)\\\" + whitespace + \\\"*(?:([+-]|)\\\" + whitespace +\\r\\n\\t\\t\\t\\\"*(\\\\\\\\d+)|))\\\" + whitespace + \\\"*\\\\\\\\)|)\\\", \\\"i\\\" ),\\r\\n\\t\\t\\\"bool\\\": new RegExp( \\\"^(?:\\\" + booleans + \\\")$\\\", \\\"i\\\" ),\\r\\n\\t\\t\\/\\/ For use in libraries implementing .is()\\r\\n\\t\\t\\/\\/ We use this for POS matching in `select`\\r\\n\\t\\t\\\"needsContext\\\": new RegExp( \\\"^\\\" + whitespace + \\\"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\\\\\\\(\\\" +\\r\\n\\t\\t\\twhitespace + \\\"*((?:-\\\\\\\\d)?\\\\\\\\d*)\\\" + whitespace + \\\"*\\\\\\\\)|)(?=[^-]|$)\\\", \\\"i\\\" )\\r\\n\\t},\\r\\n\\r\\n\\trinputs = \\/^(?:input|select|textarea|button)$\\/i,\\r\\n\\trheader = \\/^h\\\\d$\\/i,\\r\\n\\r\\n\\trnative = \\/^[^{]+\\\\{\\\\s*\\\\[native \\\\w\\/,\\r\\n\\r\\n\\t\\/\\/ Easily-parseable\\/retrievable ID or TAG or CLASS selectors\\r\\n\\trquickExpr = \\/^(?:#([\\\\w-]+)|(\\\\w+)|\\\\.([\\\\w-]+))$\\/,\\r\\n\\r\\n\\trsibling = \\/[+~]\\/,\\r\\n\\r\\n\\t\\/\\/ CSS escapes\\r\\n\\t\\/\\/ http:\\/\\/www.w3.org\\/TR\\/CSS21\\/syndata.html#escaped-characters\\r\\n\\trunescape = new RegExp( \\\"\\\\\\\\\\\\\\\\([\\\\\\\\da-f]{1,6}\\\" + whitespace + \\\"?|(\\\" + whitespace + \\\")|.)\\\", \\\"ig\\\" ),\\r\\n\\tfunescape = function( _, escaped, escapedWhitespace ) {\\r\\n\\t\\tvar high = \\\"0x\\\" + escaped - 0x10000;\\r\\n\\t\\t\\/\\/ NaN means non-codepoint\\r\\n\\t\\t\\/\\/ Support: Firefox<24\\r\\n\\t\\t\\/\\/ Workaround erroneous numeric interpretation of +\\\"0x\\\"\\r\\n\\t\\treturn high !== high || escapedWhitespace ?\\r\\n\\t\\t\\tescaped :\\r\\n\\t\\t\\thigh < 0 ?\\r\\n\\t\\t\\t\\t\\/\\/ BMP codepoint\\r\\n\\t\\t\\t\\tString.fromCharCode( high + 0x10000 ) :\\r\\n\\t\\t\\t\\t\\/\\/ Supplemental Plane codepoint (surrogate pair)\\r\\n\\t\\t\\t\\tString.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 );\\r\\n\\t},\\r\\n\\r\\n\\t\\/\\/ CSS string\\/identifier serialization\\r\\n\\t\\/\\/ https:\\/\\/drafts.csswg.org\\/cssom\\/#common-serializing-idioms\\r\\n\\trcssescape = \\/([\\\\0-\\\\x1f\\\\x7f]|^-?\\\\d)|^-$|[^\\\\x80-\\\\uFFFF\\\\w-]\\/g,\\r\\n\\tfcssescape = function( ch, asCodePoint ) {\\r\\n\\t\\tif ( asCodePoint ) {\\r\\n\\r\\n\\t\\t\\t\\/\\/ U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER\\r\\n\\t\\t\\tif ( ch === \\\"\\\\0\\\" ) {\\r\\n\\t\\t\\t\\treturn \\\"\\\\uFFFD\\\";\\r\\n\\t\\t\\t}\\r\\n\\r\\n\\t\\t\\t\\/\\/ Control characters and (dependent upon position) numbers get escaped as code points\\r\\n\\t\\t\\treturn ch.slice( 0, -1 ) + \\\"\\\\\\\\\\\" + ch.charCodeAt( ch.length - 1 ).toString( 16 ) + \\\" \\\";\\r\\n\\t\\t}\\r\\n\\r\\n\\t\\t\\/\\/ Other potentially-special ASCII characters get backslash-escaped\\r\\n\\t\\treturn \\\"\\\\\\\\\\\" + ch;\\r\\n\\t},\\r\\n\\r\\n\\t\\/\\/ Used for iframes\\r\\n\\t\\/\\/ See setDocument()\\r\\n\\t\\/\\/ Removing the function wrapper causes a \\\"Permission Denied\\\"\\r\\n\\t\\/\\/ error in IE\\r\\n\\tunloadHandler = function() {\\r\\n\\t\\tsetDocument();\\r\\n\\t},\\r\\n\\r\\n\\tdisabledAncestor = addCombinator(\\r\\n\\t\\tfunction( elem ) {\\r\\n\\t\\t\\treturn elem.disabled === true;\\r\\n\\t\\t},\\r\\n\\t\\t{ dir: \\\"parentNode\\\", next: \\\"legend\\\" }\\r\\n\\t);})\";\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\n\t// If `wrappingColumn` is -1, then no wrapping occurs and\n\t// long lines are rendered on one line. However, this might\n\t// mean that not all code is rendered (... may be used).\n\t// If `wrappingColumn` is 0, then viewport width wrapping is set\n\t// If `wrappingColumn` is > 0, then the lines will wrap at its value\n\t// Defaults to 300\n\twrappingColumn: 40,\n\n\t// try \"same\", \"indent\" or \"none\"\n\twrappingIndent: \"indent\"\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/creating-the-editor-hello-world.js b/website/playground/samples/creating-the-editor-hello-world.js
deleted file mode 100644
index f0821b42..00000000
--- a/website/playground/samples/creating-the-editor-hello-world.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"creating-the-editor-hello-world","js":"//---------------------------------------------------\n// Creating the editor > Hello world!\n//---------------------------------------------------\n\n// The Monaco Editor can be easily created, given an\n// empty container and an options literal.\n// Two members of the literal are \"value\" and \"language\".\n// The editor takes the full size of its container.\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"function hello() {\\n\\talert('Hello world!');\\n}\",\n\tlanguage: \"javascript\"\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/creating-the-editor-syntax-highlighting-for-html-elements.js b/website/playground/samples/creating-the-editor-syntax-highlighting-for-html-elements.js
deleted file mode 100644
index 5d7817bc..00000000
--- a/website/playground/samples/creating-the-editor-syntax-highlighting-for-html-elements.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"creating-the-editor-syntax-highlighting-for-html-elements","js":"//---------------------------------------------------\n// Creating the editor > Syntax highlighting for HTML elements\n//---------------------------------------------------\n\n// The colorizeElement-function will read the data-lang-attribute\n// from the element to select the correct language mode. In this\n// sample it is text/css.\nmonaco.editor.colorizeElement(document.getElementById('code'));\n","html":"<pre id=\"code\" data-lang=\"text/css\" style=\"width:500px;\">\n/* Some example CSS */\n\n@import url(\"something.css\");\n\nbody {\n margin: 0;\n padding: 3em 6em;\n font-family: tahoma, arial, sans-serif;\n color: #000;\n}\n\n#navigation a {\n font-weight: bold;\n text-decoration: none !important;\n}\n\nh1 {\n font-size: 2.5em;\n}\n\nh2 {\n font-size: 1.7em;\n}\n\nh1:before, h2:before {\n content: \"some contents\";\n}\n\ncode {\n font-family: courier, monospace;\n font-size: 80%;\n color: #418A8A;\n}\n</pre>\n","css":"\n"});
diff --git a/website/playground/samples/customizing-the-appearence-exposed-css-classes.js b/website/playground/samples/customizing-the-appearence-exposed-css-classes.js
deleted file mode 100644
index b903f6a0..00000000
--- a/website/playground/samples/customizing-the-appearence-exposed-css-classes.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"customizing-the-appearence-exposed-css-classes","js":"//---------------------------------------------------\n// Customizing the appearence > Exposed CSS classes\n//---------------------------------------------------\n\n// The editor exposes a set of CSS classes that can be overwritten.\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"My to-do list:\\n* buy milk\\n* buy coffee\\n* write awesome code\",\n\tlanguage: \"text/plain\",\n\tfontFamily: \"Arial\",\n\tfontSize: 20\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".monaco-editor, .monaco-editor-background {\n\tbackground: #EDF9FA;\n}\n\n/* Cursor */\n.monaco-editor .cursor {\n\tbackground: darkred !important;\n}\n\n/* Current line */\n.monaco-editor .current-line {\n\tbackground: rgba(0, 0, 255, 0.1);\n}\n\n/* Line Numbers */\n.monaco-editor .line-numbers {\n\tbackground-color: #EDF9FA;\n\tcolor: green;\n}\n\n/* Line Decorations */\n.monaco-editor .lines-decorations {\n\tbackground-color: #EDF9FA;\n}\n\n/* Selection */\n.monaco-editor .view-overlays.focused .selected-text {\n\tbackground: rgba(128, 0, 0, 0.2) !important;\n}\n.monaco-editor .view-overlays .selected-text {\n\tbackground: rgba(128, 0, 0, 0.1) !important;\n}\n"});
diff --git a/website/playground/samples/customizing-the-appearence-scrollbars.js b/website/playground/samples/customizing-the-appearence-scrollbars.js
deleted file mode 100644
index e799c031..00000000
--- a/website/playground/samples/customizing-the-appearence-scrollbars.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"customizing-the-appearence-scrollbars","js":"//---------------------------------------------------\n// Customizing the appearence > Scrollbars\n//---------------------------------------------------\n\n// Remember to check out the CSS too!\nvar htmlCode = \"<html><!--long linelong linelong linelong linelong linelong linelong linelong linelong linelong line-->\\n<head>\\n\t<!-- HTML comment -->\\n\t<style type=\\\"text/css\\\">\\n\t\t/* CSS comment */\\n\t</style>\\n\t<script type=\\\"javascript\\\">\\n\t\t// JavaScript comment\\n\t</\"+\"script>\\n</head>\\n<body></body>\\n</html>\";\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: htmlCode,\n\tlanguage: \"text/html\",\n\ttheme: \"vs\",\n\tscrollbar: {\n\t\t// Subtle shadows to the left & top. Defaults to true.\n\t\tuseShadows: false,\n\n\t\t// Render vertical arrows. Defaults to false.\n\t\tverticalHasArrows: true,\n\t\t// Render horizontal arrows. Defaults to false.\n\t\thorizontalHasArrows: true,\n\n\t\t// Render vertical scrollbar.\n\t\t// Accepted values: 'auto', 'visible', 'hidden'.\n\t\t// Defaults to 'auto'\n\t\tvertical: 'visible',\n\t\t// Render horizontal scrollbar.\n\t\t// Accepted values: 'auto', 'visible', 'hidden'.\n\t\t// Defaults to 'auto'\n\t\thorizontal: 'visible',\n\n\t\tverticalScrollbarSize: 17,\n\t\thorizontalScrollbarSize: 17,\n\t\tarrowSize: 30\n\t}\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":"/* Make horizontal scrollbar, decorations overview ruler and vertical scrollbar arrows opaque */\n.monaco-editor .monaco-scrollable-element .scrollbar.horizontal,\n.monaco-editor .decorationsOverviewRuler,\n.monaco-editor .monaco-scrollable-element .scrollbar.vertical .arrow-background {\n\t background: rgba(230, 230, 230, 255);\n}\n/* Make vertical scrollbar transparent to allow decorations overview ruler to be visible */\n.monaco-editor .monaco-scrollable-element .scrollbar.vertical {\n\t background: rgba(0, 0, 0, 0);\n}\n"});
diff --git a/website/playground/samples/customizing-the-appearence-tokens-and-colors.js b/website/playground/samples/customizing-the-appearence-tokens-and-colors.js
deleted file mode 100644
index b330d6c0..00000000
--- a/website/playground/samples/customizing-the-appearence-tokens-and-colors.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"customizing-the-appearence-tokens-and-colors","js":"//---------------------------------------------------\n// Customizing the appearence > Tokens and colors\n//---------------------------------------------------\n\n// This example shows how to integrate the editor with a certain theme and then customize the token colors of that theme.\nvar htmlCode = \"<html>\\n<head>\\n\t<!-- HTML comment -->\\n\t<style type=\\\"text/css\\\">\\n\t\t/* CSS comment */\\n\t</style>\\n\t<script type=\\\"javascript\\\">\\n\t\t// JavaScript comment\\n\t</\"+\"script>\\n</head>\\n<body></body>\\n</html>\";\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: htmlCode,\n\tlanguage: \"text/html\",\n\ttheme: \"vs\"\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":"/*\nThese rules customize the \"Visual Studio\" (vs) theme.\n\nToken names can be discovered by:\na) exploring the .css theme files that come with the editor;\nb) inspecting the dom elements rendered by the editor;\n*/\n.monaco-editor.vs .token.comment\t\t{ color: orange; }\n.monaco-editor.vs .token.comment.js\t\t{ color: green; }\n.monaco-editor.vs .token.comment.css\t{ color: blue; }\n"});
diff --git a/website/playground/samples/extending-language-services-completion-provider-example.js b/website/playground/samples/extending-language-services-completion-provider-example.js
deleted file mode 100644
index ce5e898e..00000000
--- a/website/playground/samples/extending-language-services-completion-provider-example.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"extending-language-services-completion-provider-example","js":"//---------------------------------------------------\n// Extending Language Services > Completion provider example\n//---------------------------------------------------\n\nfunction createDependencyProposals() {\n // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),\n // here you could do a server side lookup\n return [\n {\n label: '\"lodash\"',\n kind: monaco.languages.CompletionItemKind.Function,\n documentation: \"The Lodash library exported as Node.js modules.\",\n insertText: '\"lodash\": \"*\"'\n },\n {\n label: '\"express\"',\n kind: monaco.languages.CompletionItemKind.Function,\n documentation: \"Fast, unopinionated, minimalist web framework\",\n insertText: '\"express\": \"*\"'\n },\n {\n label: '\"mkdirp\"',\n kind: monaco.languages.CompletionItemKind.Function,\n documentation: \"Recursively mkdir, like <code>mkdir -p</code>\",\n insertText: '\"mkdirp\": \"*\"'\n }\n ];\n}\n\n\nmonaco.languages.registerCompletionItemProvider('json', {\n provideCompletionItems: function(model, position) {\n // find out if we are completing a property in the 'dependencies' object.\n var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});\n\t\tvar match = textUntilPosition.match(/\"dependencies\"\\s*:\\s*{\\s*(\"[^\"]*\"\\s*:\\s*\"[^\"]*\"\\s*,\\s*)*(\"[^\"]*)?$/); if (match) {\n return createDependencyProposals();\n }\n return [];\n }\n});\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n value: \"{\\n\\t\\\"dependencies\\\": {\\n\\t\\t\\n\\t}\\n}\\n\",\n language: \"json\"\n});","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/extending-language-services-configure-javascript-defaults.js b/website/playground/samples/extending-language-services-configure-javascript-defaults.js
deleted file mode 100644
index 1b412b75..00000000
--- a/website/playground/samples/extending-language-services-configure-javascript-defaults.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"extending-language-services-configure-javascript-defaults","js":"//---------------------------------------------------\n// Extending Language Services > Configure JavaScript defaults\n//---------------------------------------------------\n\n// Add additonal d.ts files to the JavaScript language service and change.\n// Also change the default compilation options.\n// The sample below shows how a class Facts is declared and introduced\n// to the system and how the compiler is told to use ES6 (target=2).\n\n// validation settings\nmonaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n\tnoSemanticValidation: true,\n\tnoSyntaxValidation: false\n});\n\n// compiler options\nmonaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n\ttarget: monaco.languages.typescript.ScriptTarget.ES6,\n\tallowNonTsExtensions: true\n});\n\n// extra libraries\nmonaco.languages.typescript.javascriptDefaults.addExtraLib([\n\t'declare class Facts {',\n\t' /**',\n\t' * Returns the next fact',\n\t' */',\n\t' static next():string',\n\t'}',\n].join('\\n'), 'filename/facts.d.ts');\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'',\n\t\"class Chuck {\",\n\t\" greet() {\",\n\t\" return Facts.next();\",\n\t\" }\",\n\t\"}\"\n].join('\\n');\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/extending-language-services-configure-json-defaults.js b/website/playground/samples/extending-language-services-configure-json-defaults.js
deleted file mode 100644
index 5545e9b3..00000000
--- a/website/playground/samples/extending-language-services-configure-json-defaults.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"extending-language-services-configure-json-defaults","js":"//---------------------------------------------------\n// Extending Language Services > Configure JSON defaults\n//---------------------------------------------------\n\n// Configures two JSON schemas, with references.\n\nmonaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n\tschemas: [{\n uri: \"http://myserver/foo-schema.json\",\n schema: {\n type: \"object\",\n properties: {\n p1: {\n enum: [ \"v1\", \"v2\"]\n },\n p2: {\n $ref: \"http://myserver/bar-schema.json\"\n }\n }\n }\n },{\n uri: \"http://myserver/bar-schema.json\",\n schema: {\n type: \"object\",\n properties: {\n q1: {\n enum: [ \"x1\", \"x2\"]\n }\n }\n }\n }]\n});\n\n\nvar jsonCode = [\n\t'{',\n\t' \"$schema\": \"http://myserver/foo-schema.json\"',\n\t\"}\"\n].join('\\n');\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsonCode,\n\tlanguage: \"json\"\n});","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/extending-language-services-custom-languages.js b/website/playground/samples/extending-language-services-custom-languages.js
deleted file mode 100644
index e0ca8f62..00000000
--- a/website/playground/samples/extending-language-services-custom-languages.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"extending-language-services-custom-languages","js":"//---------------------------------------------------\n// Extending Language Services > Custom languages\n//---------------------------------------------------\n\nmonaco.languages.register({ id: 'mySpecialLanguage' });\n\nmonaco.languages.setMonarchTokensProvider('mySpecialLanguage', {\n\ttokenizer: {\n\t\troot: [\n\t\t\t[/\\[error.*/, \"custom-error\"],\n\t\t\t[/\\[notice.*/, \"custom-notice\"],\n\t\t\t[/\\[info.*/, \"custom-info\"],\n\t\t\t[/\\[[a-zA-Z 0-9:]+\\]/, \"custom-date\"],\n\t\t]\n\t}\n});\n\nmonaco.languages.registerCompletionItemProvider('mySpecialLanguage', {\n\tprovideCompletionItems: () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: 'simpleText',\n\t\t\t\tkind: monaco.languages.CompletionItemKind.Text\n\t\t\t}, {\n\t\t\t\tlabel: 'testing',\n\t\t\t\tkind: monaco.languages.CompletionItemKind.Keyword,\n\t\t\t\tinsertText:'testing({{condition}})'\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'ifelse',\n\t\t\t\tkind: monaco.languages.CompletionItemKind.Snippet,\n\t\t\t\tinsertText: [\n\t\t\t\t\t'if ({{condition}}) {',\n\t\t\t\t\t'\\t{{}}',\n\t\t\t\t\t'} else {',\n\t\t\t\t\t'\\t',\n\t\t\t\t\t'}'\n\t\t\t\t].join('\\n'),\n\t\t\t\tdocumentation: 'If-Else Statement'\n\t\t\t}\n\t\t]\n\t}\n});\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: getCode(),\n\tlanguage: 'mySpecialLanguage'\n});\n\nfunction getCode() {\n\treturn [\n\t\t'[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations',\n\t\t'[Sun Mar 7 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37',\n\t\t'[Sun Mar 7 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)',\n\t\t'[Sun Mar 7 16:05:49 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 16:45:56 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[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',\n\t\t'[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',\n\t\t'[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.',\n\t\t'[Sun Mar 7 17:23:53 2004] statistics: Can\\'t create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied',\n\t\t'[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',\n\t\t'[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',\n\t\t'[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',\n\t\t'[Sun Mar 7 18:00:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 18:10:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 18:19:01 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 18:42:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 18:52:30 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 18:58:52 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 19:03:58 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 19:08:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 20:04:35 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 20:11:33 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 20:12:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 20:25:31 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 20:44:48 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome',\n\t\t'[Sun Mar 7 21:20:14 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 21:31:12 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 21:39:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Sun Mar 7 21:44:10 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 01:35:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 01:47:06 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 01:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 02:12:24 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 02:54:54 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 03:46:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 03:48:18 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 03:52:17 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 03:55:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 04:22:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 04:24:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 04:40:32 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 04:55:40 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 04:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[Mon Mar 8 05:22:57 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',\n\t\t'[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',\n\t\t'[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',\n\t\t'<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',\n\t\t'<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',\n\t].join('\\n');;\n}\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".monaco-editor .token.custom-info {\n\tcolor: grey;\n}\n.monaco-editor .token.custom-error {\n\tcolor: red;\n\tfont-weight: bold;\n\tfont-size: 1.2em;\n}\n.monaco-editor .token.custom-notice {\n\tcolor: orange;\n}\n\n.monaco-editor .token.custom-date {\n\tcolor: green;\n}\n"});
diff --git a/website/playground/samples/extending-language-services-hover-provider-example.js b/website/playground/samples/extending-language-services-hover-provider-example.js
deleted file mode 100644
index 1cb72c7f..00000000
--- a/website/playground/samples/extending-language-services-hover-provider-example.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"extending-language-services-hover-provider-example","js":"//---------------------------------------------------\n// Extending Language Services > Hover provider example\n//---------------------------------------------------\n\n\nmonaco.languages.register({ id: 'mySpecialLanguage' });\n\nmonaco.languages.registerHoverProvider('mySpecialLanguage', {\n\tprovideHover: function(model, position) {\n\t\treturn xhr('../playground.html').then(function(res) {\n\t\t\treturn {\n\t\t\t\trange: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),\n\t\t\t\tcontents: [\n\t\t\t\t\t'**SOURCE**',\n\t\t\t\t\t{ language: 'html', value: res.responseText.substring(0, 200) }\n\t\t\t\t]\n\t\t\t}\n\t\t});\n\t}\n});\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: '\\n\\nHover over this text',\n\tlanguage: 'mySpecialLanguage'\n});\n\nfunction xhr(url) {\n\tvar req = null;\n\treturn new monaco.Promise(function(c,e,p) {\n\t\treq = new XMLHttpRequest();\n\t\treq.onreadystatechange = function () {\n\t\t\tif (req._canceled) { return; }\n\n\t\t\tif (req.readyState === 4) {\n\t\t\t\tif ((req.status >= 200 && req.status < 300) || req.status === 1223) {\n\t\t\t\t\tc(req);\n\t\t\t\t} else {\n\t\t\t\t\te(req);\n\t\t\t\t}\n\t\t\t\treq.onreadystatechange = function () { };\n\t\t\t} else {\n\t\t\t\tp(req);\n\t\t\t}\n\t\t};\n\n\t\treq.open(\"GET\", url, true );\n\t\treq.responseType = \"\";\n\n\t\treq.send(null);\n\t}, function () {\n\t\treq._canceled = true;\n\t\treq.abort();\n\t});\n}\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/interacting-with-the-editor-adding-a-command-to-an-editor-instance.js b/website/playground/samples/interacting-with-the-editor-adding-a-command-to-an-editor-instance.js
deleted file mode 100644
index 71ca60ad..00000000
--- a/website/playground/samples/interacting-with-the-editor-adding-a-command-to-an-editor-instance.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"interacting-with-the-editor-adding-a-command-to-an-editor-instance","js":"//---------------------------------------------------\n// Interacting with the editor > Adding a command to an editor instance\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});\n\nvar myCondition1 = editor.createContextKey(/*key name*/'myCondition1', /*default value*/false);\nvar myCondition2 = editor.createContextKey(/*key name*/'myCondition2', /*default value*/false);\n\neditor.addCommand(monaco.KeyCode.Tab, function() {\n // services available in `ctx`\n alert('my command is executing!');\n\n}, 'myCondition1 && myCondition2')\n\nmyCondition1.set(true);\n\nsetTimeout(function() {\n alert('now enabling also myCondition2, try pressing Tab!');\n myCondition2.set(true);\n // you can use myCondition2.reset() to go back to the default\n}, 2000);","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/interacting-with-the-editor-adding-an-action-to-an-editor-instance.js b/website/playground/samples/interacting-with-the-editor-adding-an-action-to-an-editor-instance.js
deleted file mode 100644
index c28af654..00000000
--- a/website/playground/samples/interacting-with-the-editor-adding-an-action-to-an-editor-instance.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"interacting-with-the-editor-adding-an-action-to-an-editor-instance","js":"//---------------------------------------------------\n// Interacting with the editor > Adding an action to an editor instance\n//---------------------------------------------------\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: [\n\t\t'',\n\t\t'class Example {',\n\t\t'\\tprivate m:number;',\n\t\t'',\n\t\t'\\tpublic met(): string {',\n\t\t'\\t\\treturn \"Hello world!\";',\n\t\t'\\t}',\n\t\t'}'\n\t].join('\\n'),\n\tlanguage: \"typescript\"\n});\n\n// Explanation:\n// Try right clicking on an identifier or keyword => the action will be enabled (due to `tokensAtPosition`)\n// Try right clicking on a string => the action will be disabled (due to `tokensAtPosition`)\n// Try right clicking on whitespace => the action will be disabled (due to `wordAtPosition`)\n// Press F1 (Alt-F1 in IE) => the action will appear and run if it is enabled\n// Press Ctrl-F10 => the action will run if it is enabled\n\neditor.addAction({\n\t// An unique identifier of the contributed action.\n\tid: 'my-unique-id',\n\n\t// A label of the action that will be presented to the user.\n\tlabel: 'My Label!!!',\n\n\t// An optional array of keybindings for the action.\n\tkeybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],\n\n\tkeybindingContext: null,\n\n\t// Control if the action should show up in the context menu and where.\n\t// Built-in groups:\n\t// 1_goto/* => e.g. 1_goto/1_peekDefinition\n\t// 2_change/* => e.g. 2_change/2_format\n\t// 3_edit/* => e.g. 3_edit/1_copy\n\t// 4_tools/* => e.g. 4_tools/1_commands\n\t// You can also create your own group.\n\t// Defaults to null (don't show in context menu).\n\tcontextMenuGroupId: '2_change/2_bla',\n\n\t// Method that will be executed when the action is triggered.\n\t// @param editor The editor instance is passed in as a convinience\n\trun: function(ed) {\n\t\talert(\"i'm running => \" + ed.getPosition());\n\t\treturn null;\n\t},\n\n\t// Optional enablement conditions. All members are optional\n\tenablement: {\n\t\t// The action is enabled only if text in the editor is focused (e.g. blinking cursor).\n\t\t// Warning: This condition will be disabled if the action is marked to be displayed in the context menu\n\t\t// Defaults to false.\n\t\ttextFocus: true,\n\n\t\t// The action is enabled only if the editor or its widgets have focus (e.g. focus is in find widget).\n\t\t// Defaults to false.\n\t\t//widgetFocus: true,\n\n\t\t// The action is enabled only if the editor is not in read only mode.\n\t\t// Defaults to false.\n\t\t//writeableEditor: true,\n\n\t\t// The action is enabled only if the cursor position is over a word (i.e. not whitespace).\n\t\t// Defaults to false.\n\t\twordAtPosition: true,\n\n\t\t// The action is enabled only if the cursor position is over tokens of a certain kind.\n\t\t// Defaults to no tokens required.\n\t\ttokensAtPosition: ['identifier', '', 'keyword'],\n\t}\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});
diff --git a/website/playground/samples/interacting-with-the-editor-customizing-the-line-numbers.js b/website/playground/samples/interacting-with-the-editor-customizing-the-line-numbers.js
deleted file mode 100644
index ba565a49..00000000
--- a/website/playground/samples/interacting-with-the-editor-customizing-the-line-numbers.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"interacting-with-the-editor-customizing-the-line-numbers","js":"//---------------------------------------------------\n// Interacting with the editor > Customizing the line numbers\n//---------------------------------------------------\n\nfunction lineNumbersFunc(originalLineNumber) {\n\tvar map = [ 'O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];\n\tif (originalLineNumber < map.length) {\n\t\treturn map[originalLineNumber];\n\t}\n\treturn originalLineNumber;\n}\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tlineNumbers: lineNumbersFunc\n});\n","html":"<div id=\"container\" style=\"height:100%\"></div>\n","css":"\n"});
diff --git a/website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js b/website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js
deleted file mode 100644
index 6b1d31ad..00000000
--- a/website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"interacting-with-the-editor-line-and-inline-decorations","js":"//---------------------------------------------------\n// Interacting with the editor > Line and Inline decorations\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});\n\nvar decorations = editor.deltaDecorations([], [\n\t{ range: new monaco.Range(3,1,5,1), options: { isWholeLine: true, linesDecorationsClassName: 'myLineDecoration' }},\n\t{ range: new monaco.Range(7,1,7,24), options: { inlineClassName: 'myInlineDecoration' }},\n]);\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".myInlineDecoration {\n\tcolor: red !important;\n\tcursor: pointer;\n\ttext-decoration: underline;\n\tfont-weight: bold;\n\tfont-style: oblique;\n}\n.myLineDecoration {\n\tbackground: lightblue;\n\twidth: 5px !important;\n\tleft: 3px;\n}\n"});
diff --git a/website/playground/samples/interacting-with-the-editor-listening-to-key-events.js b/website/playground/samples/interacting-with-the-editor-listening-to-key-events.js
deleted file mode 100644
index 8b60849f..00000000
--- a/website/playground/samples/interacting-with-the-editor-listening-to-key-events.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"interacting-with-the-editor-listening-to-key-events","js":"//---------------------------------------------------\n// Interacting with the editor > Listening to key events\n//---------------------------------------------------\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"function hello() {\\n\\talert('Hello world!');\\n}\",\n\tlanguage: \"javascript\"\n});\n\nvar myBinding = editor.addCommand(monaco.KeyCode.F9, function() {\n\talert('F9 pressed!');\n});\n\n// When cleaning up remember to call myBinding.dispose()\n","html":"<div id=\"container\" style=\"height:100%\"></div>\n","css":"\n"});
diff --git a/website/playground/samples/interacting-with-the-editor-listening-to-mouse-events.js b/website/playground/samples/interacting-with-the-editor-listening-to-mouse-events.js
deleted file mode 100644
index 87a9e252..00000000
--- a/website/playground/samples/interacting-with-the-editor-listening-to-mouse-events.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"interacting-with-the-editor-listening-to-mouse-events","js":"//---------------------------------------------------\n// Interacting with the editor > Listening to mouse events\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tglyphMargin: true,\n\tnativeContextMenu: false\n});\n\nvar decorations = editor.deltaDecorations([], [\n\t{\n\t\trange: new monaco.Range(3,1,3,1),\n\t\toptions: {\n\t\t\tisWholeLine: true,\n\t\t\tclassName: 'myContentClass',\n\t\t\tglyphMarginClassName: 'myGlyphMarginClass'\n\t\t}\n\t}\n]);\n\n// Add a zone to make hit testing more interesting\nvar viewZoneId = null;\neditor.changeViewZones(function(changeAccessor) {\n\t\tvar domNode = document.createElement('div');\n\t\tdomNode.style.background = 'lightgreen';\n\t\tviewZoneId = changeAccessor.addZone({\n\t\t\t\t\tafterLineNumber: 3,\n\t\t\t\t\theightInLines: 3,\n\t\t\t\t\tdomNode: domNode\n\t\t});\n});\n\n// Add a content widget (scrolls inline with text)\nvar contentWidget = {\n\tdomNode: null,\n\tgetId: function() {\n\t\treturn 'my.content.widget';\n\t},\n\tgetDomNode: function() {\n\t\tif (!this.domNode) {\n\t\t\tthis.domNode = document.createElement('div');\n\t\t\tthis.domNode.innerHTML = 'My content widget';\n\t\t\tthis.domNode.style.background = 'grey';\n\t\t}\n\t\treturn this.domNode;\n\t},\n\tgetPosition: function() {\n\t\treturn {\n\t\t\tposition: {\n\t\t\t\tlineNumber: 7,\n\t\t\t\tcolumn: 8\n\t\t\t},\n\t\t\tpreference: [monaco.editor.ContentWidgetPositionPreference.ABOVE, monaco.editor.ContentWidgetPositionPreference.BELOW]\n\t\t};\n\t}\n};\neditor.addContentWidget(contentWidget);\n\n// Add an overlay widget\nvar overlayWidget = {\n\tdomNode: null,\n\tgetId: function() {\n\t\treturn 'my.overlay.widget';\n\t},\n\tgetDomNode: function() {\n\t\tif (!this.domNode) {\n\t\t\tthis.domNode = document.createElement('div');\n\t\t\tthis.domNode.innerHTML = 'My overlay widget';\n\t\t\tthis.domNode.style.background = 'grey';\n\t\t\tthis.domNode.style.right = '30px';\n\t\t\tthis.domNode.style.top = '50px';\n\t\t}\n\t\treturn this.domNode;\n\t},\n\tgetPosition: function() {\n\t\treturn null;\n\t}\n};\neditor.addOverlayWidget(overlayWidget);\n\nvar output = document.getElementById('output');\nfunction showEvent(str) {\n\twhile(output.childNodes.length > 6) {\n\t\toutput.removeChild(output.firstChild.nextSibling.nextSibling);\n\t}\n\toutput.appendChild(document.createTextNode(str));\n\toutput.appendChild(document.createElement('br'));\n}\n\n\n\neditor.onMouseMove(function (e) {\n\tshowEvent('mousemove - ' + e.target.toString());\n});\neditor.onMouseDown(function (e) {\n\tshowEvent('mousedown - ' + e.target.toString());\n});\neditor.onContextMenu(function (e) {\n\tshowEvent('contextmenu - ' + e.target.toString());\n});\neditor.onMouseLeave(function (e) {\n\tshowEvent('mouseleave');\n});\n","html":"<div id=\"output\" style=\"height:29%;font-family:'Courier New', monospace;\">Last 3 events:<br/></div>\n<div style=\"background:#ccc;height:1%\"></div>\n<div id=\"container\" style=\"height:70%;\"></div>\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"});
diff --git a/website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js b/website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js
deleted file mode 100644
index 8493e0ef..00000000
--- a/website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"interacting-with-the-editor-rendering-glyphs-in-the-margin","js":"//---------------------------------------------------\n// Interacting with the editor > Rendering glyphs in the margin\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tglyphMargin: true\n});\n\nvar decorations = editor.deltaDecorations([], [\n\t{\n\t\trange: new monaco.Range(3,1,3,1),\n\t\toptions: {\n\t\t\tisWholeLine: true,\n\t\t\tclassName: 'myContentClass',\n\t\t\tglyphMarginClassName: 'myGlyphMarginClass'\n\t\t}\n\t}\n]);\n\n// You can now use `decorations` to change or remove the decoration\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"});
diff --git a/website/playground/samples/interacting-with-the-editor-revealing-a-position.js b/website/playground/samples/interacting-with-the-editor-revealing-a-position.js
deleted file mode 100644
index bdb973f1..00000000
--- a/website/playground/samples/interacting-with-the-editor-revealing-a-position.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// This is a generated file. Please do not edit directly.
-var SAMPLES = this.SAMPLES || [];
-SAMPLES.push({"id":"interacting-with-the-editor-revealing-a-position","js":"//---------------------------------------------------\n// Interacting with the editor > Revealing a position\n//---------------------------------------------------\n\nvar jsCodeArr = [\n\t'// ------------------------------',\n\t'// ------------------------------',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};',\n\t'',\n\t''\n];\n\njsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));\njsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));\njsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));\n\njsCodeArr[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. ';\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCodeArr.join('\\n'),\n\tlanguage: \"javascript\"\n});\n\neditor.revealPositionInCenter({ lineNumber: 50, column: 120 });\n// Also see:\n// - editor.revealLine\n// - editor.revealLineInCenter\n// - editor.revealLineInCenterIfOutsideViewport\n// - editor.revealLines\n// - editor.revealLinesInCenter\n// - editor.revealLinesInCenterIfOutsideViewport\n// - editor.revealPosition\n// - editor.revealPositionInCenter\n// - editor.revealPositionInCenterIfOutsideViewport\n// - editor.revealRange\n// - editor.revealRangeInCenter\n// - editor.revealRangeInCenterIfOutsideViewport\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});