8 лет назад · 5b86272f55
--- a/test/dev-setup.js
+++ b/test/dev-setup.js
@@ -8,6 +8,11 @@
 
															 			port = ':' + port;

														
 
															 		}

														
 
															 		DIRNAME = window.location.protocol + '//' + window.location.hostname + port + window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/'));

														
 
															+

														
 
															+		var bases = document.getElementsByTagName('base');

														
 
															+		if (bases.length > 0) {

														
 
															+			DIRNAME = DIRNAME + '/' + bases[0].getAttribute('href');

														
 
															+		}

														
 
															 	}

														
--- a/test/index.html
+++ b/test/index.html
@@ -7,11 +7,11 @@
 
															 </head>

														
 
															 <body>

														
 
															-<h2>Monaco Editor (running from multiple sources)</h2>

														
 
															-

														
 
															 Jump to:

														
 
															 <a href="./smoketest.html?editor=releaseMin">[SMOKETEST]</a>

														
 
															 &nbsp;|&nbsp;

														
 
															+<a href="./playground.generated/index.html">[PLAYGROUND]</a>

														
 
															+&nbsp;|&nbsp;

														
 
															 <a href="./mouse-fixed.html">[fixed element]</a>

														
 
															 &nbsp;|&nbsp;

														
 
															 <a href="./mouse-scrollable-body.html">[scrollable body]</a>

														
--- a/test/playground.generated/creating-the-diffeditor-hello-diff-world.html
+++ b/test/playground.generated/creating-the-diffeditor-hello-diff-world.html
@@ -0,0 +1,53 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/creating-the-diffeditor-inline-diff-example.html
+++ b/test/playground.generated/creating-the-diffeditor-inline-diff-example.html
@@ -0,0 +1,59 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/creating-the-diffeditor-multi-line-example.html
+++ b/test/playground.generated/creating-the-diffeditor-multi-line-example.html
@@ -0,0 +1,56 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/creating-the-diffeditor-navigating-a-diff.html
+++ b/test/playground.generated/creating-the-diffeditor-navigating-a-diff.html
@@ -0,0 +1,64 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+// 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);
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/creating-the-editor-editor-basic-options.html
+++ b/test/playground.generated/creating-the-editor-editor-basic-options.html
@@ -0,0 +1,64 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+// 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);
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/creating-the-editor-hard-wrapping.html
+++ b/test/playground.generated/creating-the-editor-hard-wrapping.html
--- a/test/playground.generated/creating-the-editor-hello-world.html
+++ b/test/playground.generated/creating-the-editor-hello-world.html
@@ -0,0 +1,54 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+// 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"
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/creating-the-editor-syntax-highlighting-for-html-elements.html
+++ b/test/playground.generated/creating-the-editor-syntax-highlighting-for-html-elements.html
@@ -0,0 +1,84 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<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>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+// 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'));
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/customizing-the-appearence-exposed-css-classes.html
+++ b/test/playground.generated/customizing-the-appearence-exposed-css-classes.html
@@ -0,0 +1,84 @@
 
															+<!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*/
														
 
															+
														
 
															+.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;
														
 
															+}
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+// 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
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/customizing-the-appearence-scrollbars.html
+++ b/test/playground.generated/customizing-the-appearence-scrollbars.html
@@ -0,0 +1,85 @@
 
															+<!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*/
														
 
															+
														
 
															+/* 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);
														
 
															+}
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+// 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
														
 
															+	}
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/customizing-the-appearence-tokens-and-colors.html
+++ b/test/playground.generated/customizing-the-appearence-tokens-and-colors.html
@@ -0,0 +1,63 @@
 
															+<!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*/
														
 
															+
														
 
															+/*
														
 
															+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; }
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+// 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"
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/extending-language-services-completion-provider-example.html
+++ b/test/playground.generated/extending-language-services-completion-provider-example.html
@@ -0,0 +1,85 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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"
														
 
															+});
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/extending-language-services-configure-javascript-defaults.html
+++ b/test/playground.generated/extending-language-services-configure-javascript-defaults.html
@@ -0,0 +1,85 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+// 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"
														
 
															+});
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/extending-language-services-configure-json-defaults.html
+++ b/test/playground.generated/extending-language-services-configure-json-defaults.html
@@ -0,0 +1,84 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+// 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"
														
 
															+});
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/extending-language-services-custom-languages.html
+++ b/test/playground.generated/extending-language-services-custom-languages.html
@@ -0,0 +1,159 @@
 
															+<!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*/
														
 
															+
														
 
															+.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;
														
 
															+}
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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');;
														
 
															+}
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/extending-language-services-hover-provider-example.html
+++ b/test/playground.generated/extending-language-services-hover-provider-example.html
@@ -0,0 +1,95 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+
														
 
															+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();
														
 
															+	});
														
 
															+}
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/index.html
+++ b/test/playground.generated/index.html
@@ -0,0 +1,34 @@
 
															+<!DOCTYPE html>
														
 
															+<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
														
 
															+<html>
														
 
															+<head>
														
 
															+</head>
														
 
															+<body>
														
 
															+<a href="../index.html">[&lt;&lt; BACK]</a><br/>
														
 
															+THIS IS A GENERATED FILE VIA gulp generate-test-samples<br/><br/>
														
 
															+<a href="creating-the-editor-hello-world.html">Creating the editor &gt; Hello world!</a><br/>
														
 
															+<a href="creating-the-editor-editor-basic-options.html">Creating the editor &gt; Editor basic options</a><br/>
														
 
															+<a href="creating-the-editor-hard-wrapping.html">Creating the editor &gt; Hard wrapping</a><br/>
														
 
															+<a href="creating-the-editor-syntax-highlighting-for-html-elements.html">Creating the editor &gt; Syntax highlighting for HTML elements</a><br/>
														
 
															+<a href="interacting-with-the-editor-adding-a-command-to-an-editor-instance.html">Interacting with the editor &gt; Adding a command to an editor instance</a><br/>
														
 
															+<a href="interacting-with-the-editor-adding-an-action-to-an-editor-instance.html">Interacting with the editor &gt; Adding an action to an editor instance</a><br/>
														
 
															+<a href="interacting-with-the-editor-revealing-a-position.html">Interacting with the editor &gt; Revealing a position</a><br/>
														
 
															+<a href="interacting-with-the-editor-rendering-glyphs-in-the-margin.html">Interacting with the editor &gt; Rendering glyphs in the margin</a><br/>
														
 
															+<a href="interacting-with-the-editor-line-and-inline-decorations.html">Interacting with the editor &gt; Line and Inline decorations</a><br/>
														
 
															+<a href="interacting-with-the-editor-customizing-the-line-numbers.html">Interacting with the editor &gt; Customizing the line numbers</a><br/>
														
 
															+<a href="interacting-with-the-editor-listening-to-mouse-events.html">Interacting with the editor &gt; Listening to mouse events</a><br/>
														
 
															+<a href="interacting-with-the-editor-listening-to-key-events.html">Interacting with the editor &gt; Listening to key events</a><br/>
														
 
															+<a href="customizing-the-appearence-exposed-css-classes.html">Customizing the appearence &gt; Exposed CSS classes</a><br/>
														
 
															+<a href="customizing-the-appearence-scrollbars.html">Customizing the appearence &gt; Scrollbars</a><br/>
														
 
															+<a href="customizing-the-appearence-tokens-and-colors.html">Customizing the appearence &gt; Tokens and colors</a><br/>
														
 
															+<a href="creating-the-diffeditor-hello-diff-world.html">Creating the DiffEditor &gt; Hello diff world!</a><br/>
														
 
															+<a href="creating-the-diffeditor-multi-line-example.html">Creating the DiffEditor &gt; Multi-line example</a><br/>
														
 
															+<a href="creating-the-diffeditor-inline-diff-example.html">Creating the DiffEditor &gt; Inline Diff Example</a><br/>
														
 
															+<a href="creating-the-diffeditor-navigating-a-diff.html">Creating the DiffEditor &gt; Navigating a Diff</a><br/>
														
 
															+<a href="extending-language-services-custom-languages.html">Extending Language Services &gt; Custom languages</a><br/>
														
 
															+<a href="extending-language-services-completion-provider-example.html">Extending Language Services &gt; Completion provider example</a><br/>
														
 
															+<a href="extending-language-services-hover-provider-example.html">Extending Language Services &gt; Hover provider example</a><br/>
														
 
															+<a href="extending-language-services-configure-javascript-defaults.html">Extending Language Services &gt; Configure JavaScript defaults</a><br/>
														
 
															+<a href="extending-language-services-configure-json-defaults.html">Extending Language Services &gt; Configure JSON defaults</a>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/interacting-with-the-editor-adding-a-command-to-an-editor-instance.html
+++ b/test/playground.generated/interacting-with-the-editor-adding-a-command-to-an-editor-instance.html
@@ -0,0 +1,77 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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);
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/interacting-with-the-editor-adding-an-action-to-an-editor-instance.html
+++ b/test/playground.generated/interacting-with-the-editor-adding-an-action-to-an-editor-instance.html
@@ -0,0 +1,119 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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'],
														
 
															+	}
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/interacting-with-the-editor-customizing-the-line-numbers.html
+++ b/test/playground.generated/interacting-with-the-editor-customizing-the-line-numbers.html
@@ -0,0 +1,71 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/interacting-with-the-editor-line-and-inline-decorations.html
+++ b/test/playground.generated/interacting-with-the-editor-line-and-inline-decorations.html
@@ -0,0 +1,78 @@
 
															+<!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*/
														
 
															+
														
 
															+.myInlineDecoration {
														
 
															+	color: red !important;
														
 
															+	cursor: pointer;
														
 
															+	text-decoration: underline;
														
 
															+	font-weight: bold;
														
 
															+	font-style: oblique;
														
 
															+}
														
 
															+.myLineDecoration {
														
 
															+	background: lightblue;
														
 
															+	width: 5px !important;
														
 
															+	left: 3px;
														
 
															+}
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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' }},
														
 
															+]);
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/interacting-with-the-editor-listening-to-key-events.html
+++ b/test/playground.generated/interacting-with-the-editor-listening-to-key-events.html
@@ -0,0 +1,56 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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()
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/interacting-with-the-editor-listening-to-mouse-events.html
+++ b/test/playground.generated/interacting-with-the-editor-listening-to-mouse-events.html
@@ -0,0 +1,166 @@
 
															+<!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*/
														
 
															+
														
 
															+.myGlyphMarginClass {
														
 
															+	background: red;
														
 
															+}
														
 
															+.myContentClass {
														
 
															+	background: lightblue;
														
 
															+}
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="output" style="height:29%;font-family:'Courier New', monospace;">Last 3 events:<br/></div>
														
 
															+<div style="background:#ccc;height:1%"></div>
														
 
															+<div id="container" style="height:70%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------SAMPLE HTML END-->
														
 
															+</div>
														
 
															+<div style="clear:both"></div>
														
 
															+
														
 
															+<script src="../metadata.js"></script>
														
 
															+<script src="dev-setup.js"></script>
														
 
															+<script>
														
 
															+loadEditor(function() {
														
 
															+/*----------------------------------------SAMPLE JS START*/
														
 
															+
														
 
															+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');
														
 
															+});
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/interacting-with-the-editor-rendering-glyphs-in-the-margin.html
+++ b/test/playground.generated/interacting-with-the-editor-rendering-glyphs-in-the-margin.html
@@ -0,0 +1,81 @@
 
															+<!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*/
														
 
															+
														
 
															+.myGlyphMarginClass {
														
 
															+	background: red;
														
 
															+}
														
 
															+.myContentClass {
														
 
															+	background: lightblue;
														
 
															+}
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/test/playground.generated/interacting-with-the-editor-revealing-a-position.html
+++ b/test/playground.generated/interacting-with-the-editor-revealing-a-position.html
@@ -0,0 +1,85 @@
 
															+<!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*/
														
 
															+
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+</style>
														
 
															+<a href="playground.generated/index.html">[&lt;&lt; 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-->
														
 
															+
														
 
															+<div id="container" style="height:100%;"></div>
														
 
															+
														
 
															+
														
 
															+<!-- ----------------------------------------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*/
														
 
															+
														
 
															+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
														
 
															+
														
 
															+
														
 
															+/*----------------------------------------SAMPLE CSS END*/
														
 
															+});
														
 
															+</script>
														
 
															+</body>
														
 
															+</html>
														
--- a/website/monarch.html
+++ b/website/monarch.html
@@ -4304,7 +4304,6 @@ return {
 
															 			}

														
 
															 		});

														
 
															 	</script>

														
 
															-	<!--<script type="text/javascript" src="./playground/samples/all.js"></script>-->

														
 
															 	<script type="text/javascript" src="./monarch/monarch.js"></script>

														
 
															 </body>

														
 
															 </html>
														
--- a/website/playground.html
+++ b/website/playground.html
@@ -74,7 +74,7 @@
 
															 			}

														
 
															 		});

														
 
															 	</script>

														
 
															-	<script type="text/javascript" src="./playground/samples/all.js"></script>

														
 
															+	<script type="text/javascript" src="./playground/new-samples/all.js"></script>

														
 
															 	<script type="text/javascript" src="./playground/playground.js"></script>

														
 
															 </body>

														
 
															 </html>
														
--- a/website/playground/new-samples/all.js
+++ b/website/playground/new-samples/all.js
@@ -0,0 +1,156 @@
 
															+(function() {
														
 
															+
														
 
															+var PLAY_SAMPLES = [
														
 
															+	{
														
 
															+		chapter: "Creating the editor",
														
 
															+		name: "Hello world!",
														
 
															+		id: "creating-the-editor-hello-world",
														
 
															+		path: "creating-the-editor/hello-world"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Creating the editor",
														
 
															+		name: "Editor basic options",
														
 
															+		id: "creating-the-editor-editor-basic-options",
														
 
															+		path: "creating-the-editor/editor-basic-options"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Creating the editor",
														
 
															+		name: "Hard wrapping",
														
 
															+		id: "creating-the-editor-hard-wrapping",
														
 
															+		path: "creating-the-editor/hard-wrapping"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Creating the editor",
														
 
															+		name: "Syntax highlighting for HTML elements",
														
 
															+		id: "creating-the-editor-syntax-highlighting-for-html-elements",
														
 
															+		path: "creating-the-editor/syntax-highlighting-for-html-elements"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Interacting with the editor",
														
 
															+		name: "Adding a command to an editor instance",
														
 
															+		id: "interacting-with-the-editor-adding-a-command-to-an-editor-instance",
														
 
															+		path: "interacting-with-the-editor/adding-a-command-to-an-editor-instance"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Interacting with the editor",
														
 
															+		name: "Adding an action to an editor instance",
														
 
															+		id: "interacting-with-the-editor-adding-an-action-to-an-editor-instance",
														
 
															+		path: "interacting-with-the-editor/adding-an-action-to-an-editor-instance"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Interacting with the editor",
														
 
															+		name: "Revealing a position",
														
 
															+		id: "interacting-with-the-editor-revealing-a-position",
														
 
															+		path: "interacting-with-the-editor/revealing-a-position"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Interacting with the editor",
														
 
															+		name: "Rendering glyphs in the margin",
														
 
															+		id: "interacting-with-the-editor-rendering-glyphs-in-the-margin",
														
 
															+		path: "interacting-with-the-editor/rendering-glyphs-in-the-margin"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Interacting with the editor",
														
 
															+		name: "Line and Inline decorations",
														
 
															+		id: "interacting-with-the-editor-line-and-inline-decorations",
														
 
															+		path: "interacting-with-the-editor/line-and-inline-decorations"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Interacting with the editor",
														
 
															+		name: "Customizing the line numbers",
														
 
															+		id: "interacting-with-the-editor-customizing-the-line-numbers",
														
 
															+		path: "interacting-with-the-editor/customizing-the-line-numbers"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Interacting with the editor",
														
 
															+		name: "Listening to mouse events",
														
 
															+		id: "interacting-with-the-editor-listening-to-mouse-events",
														
 
															+		path: "interacting-with-the-editor/listening-to-mouse-events"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Interacting with the editor",
														
 
															+		name: "Listening to key events",
														
 
															+		id: "interacting-with-the-editor-listening-to-key-events",
														
 
															+		path: "interacting-with-the-editor/listening-to-key-events"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Customizing the appearence",
														
 
															+		name: "Exposed CSS classes",
														
 
															+		id: "customizing-the-appearence-exposed-css-classes",
														
 
															+		path: "customizing-the-appearence/exposed-css-classes"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Customizing the appearence",
														
 
															+		name: "Scrollbars",
														
 
															+		id: "customizing-the-appearence-scrollbars",
														
 
															+		path: "customizing-the-appearence/scrollbars"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Customizing the appearence",
														
 
															+		name: "Tokens and colors",
														
 
															+		id: "customizing-the-appearence-tokens-and-colors",
														
 
															+		path: "customizing-the-appearence/tokens-and-colors"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Creating the DiffEditor",
														
 
															+		name: "Hello diff world!",
														
 
															+		id: "creating-the-diffeditor-hello-diff-world",
														
 
															+		path: "creating-the-diffeditor/hello-diff-world"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Creating the DiffEditor",
														
 
															+		name: "Multi-line example",
														
 
															+		id: "creating-the-diffeditor-multi-line-example",
														
 
															+		path: "creating-the-diffeditor/multi-line-example"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Creating the DiffEditor",
														
 
															+		name: "Inline Diff Example",
														
 
															+		id: "creating-the-diffeditor-inline-diff-example",
														
 
															+		path: "creating-the-diffeditor/inline-diff-example"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Creating the DiffEditor",
														
 
															+		name: "Navigating a Diff",
														
 
															+		id: "creating-the-diffeditor-navigating-a-diff",
														
 
															+		path: "creating-the-diffeditor/navigating-a-diff"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Extending Language Services",
														
 
															+		name: "Custom languages",
														
 
															+		id: "extending-language-services-custom-languages",
														
 
															+		path: "extending-language-services/custom-languages"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Extending Language Services",
														
 
															+		name: "Completion provider example",
														
 
															+		id: "extending-language-services-completion-provider-example",
														
 
															+		path: "extending-language-services/completion-provider-example"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Extending Language Services",
														
 
															+		name: "Hover provider example",
														
 
															+		id: "extending-language-services-hover-provider-example",
														
 
															+		path: "extending-language-services/hover-provider-example"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Extending Language Services",
														
 
															+		name: "Configure JavaScript defaults",
														
 
															+		id: "extending-language-services-configure-javascript-defaults",
														
 
															+		path: "extending-language-services/configure-javascript-defaults"
														
 
															+	},
														
 
															+	{
														
 
															+		chapter: "Extending Language Services",
														
 
															+		name: "Configure JSON defaults",
														
 
															+		id: "extending-language-services-configure-json-defaults",
														
 
															+		path: "extending-language-services/configure-json-defaults"
														
 
															+	}
														
 
															+];
														
 
															+
														
 
															+if (typeof exports !== 'undefined') {
														
 
															+	exports.PLAY_SAMPLES = PLAY_SAMPLES
														
 
															+} else {
														
 
															+	self.PLAY_SAMPLES = PLAY_SAMPLES;
														
 
															+}
														
 
															+
														
 
															+})();
														
--- a/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.css
+++ b/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.css
--- a/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.html
+++ b/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.js
+++ b/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.js
@@ -0,0 +1,8 @@
 
															+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
														
 
															+});
														
--- a/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.css
+++ b/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.css
--- a/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.html
+++ b/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.js
+++ b/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.js
@@ -0,0 +1,14 @@
 
															+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
														
 
															+});
														
--- a/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.css
+++ b/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.css
--- a/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.html
+++ b/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.js
+++ b/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.js
@@ -0,0 +1,11 @@
 
															+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
														
 
															+});
														
--- a/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.css
+++ b/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.css
--- a/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.html
+++ b/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.js
+++ b/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.js
@@ -0,0 +1,19 @@
 
															+// 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);
														
--- a/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.css
+++ b/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.css
--- a/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.html
+++ b/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.js
+++ b/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.js
@@ -0,0 +1,19 @@
 
															+// 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);
														
--- a/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.css
+++ b/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.css
--- a/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.html
+++ b/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.js
+++ b/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.js
--- a/website/playground/new-samples/creating-the-editor/hello-world/sample.css
+++ b/website/playground/new-samples/creating-the-editor/hello-world/sample.css
--- a/website/playground/new-samples/creating-the-editor/hello-world/sample.html
+++ b/website/playground/new-samples/creating-the-editor/hello-world/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/creating-the-editor/hello-world/sample.js
+++ b/website/playground/new-samples/creating-the-editor/hello-world/sample.js
@@ -0,0 +1,9 @@
 
															+// 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"
														
 
															+});
														
--- a/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.css
+++ b/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.css
@@ -0,0 +1 @@
 
															+
														
--- a/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.html
+++ b/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.html
@@ -0,0 +1,35 @@
 
															+<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>
														
--- a/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.js
+++ b/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.js
@@ -0,0 +1,4 @@
 
															+// 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'));
														
--- a/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.css
+++ b/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.css
@@ -0,0 +1,32 @@
 
															+.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;
														
 
															+}
														
--- a/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.html
+++ b/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.js
+++ b/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.js
@@ -0,0 +1,7 @@
 
															+// 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
														
 
															+});
														
--- a/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.css
+++ b/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.css
@@ -0,0 +1,10 @@
 
															+/* 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);
														
 
															+}
														
--- a/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.html
+++ b/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.js
+++ b/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.js
@@ -0,0 +1,30 @@
 
															+// 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
														
 
															+	}
														
 
															+});
														
--- a/website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.css
+++ b/website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.css
@@ -0,0 +1,10 @@
 
															+/*
														
 
															+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; }
														
--- a/website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.html
+++ b/website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.js
+++ b/website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.js
@@ -0,0 +1,8 @@
 
															+// 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"
														
 
															+});
														
--- a/website/playground/new-samples/extending-language-services/completion-provider-example/sample.css
+++ b/website/playground/new-samples/extending-language-services/completion-provider-example/sample.css
--- a/website/playground/new-samples/extending-language-services/completion-provider-example/sample.html
+++ b/website/playground/new-samples/extending-language-services/completion-provider-example/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/extending-language-services/completion-provider-example/sample.js
+++ b/website/playground/new-samples/extending-language-services/completion-provider-example/sample.js
@@ -0,0 +1,41 @@
 
															+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"
														
 
															+});
														
--- a/website/playground/new-samples/extending-language-services/configure-javascript-defaults/sample.css
+++ b/website/playground/new-samples/extending-language-services/configure-javascript-defaults/sample.css
--- a/website/playground/new-samples/extending-language-services/configure-javascript-defaults/sample.html
+++ b/website/playground/new-samples/extending-language-services/configure-javascript-defaults/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/extending-language-services/configure-javascript-defaults/sample.js
+++ b/website/playground/new-samples/extending-language-services/configure-javascript-defaults/sample.js
@@ -0,0 +1,41 @@
 
															+// 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"
														
 
															+});
														
--- a/website/playground/new-samples/extending-language-services/configure-json-defaults/sample.css
+++ b/website/playground/new-samples/extending-language-services/configure-json-defaults/sample.css
--- a/website/playground/new-samples/extending-language-services/configure-json-defaults/sample.html
+++ b/website/playground/new-samples/extending-language-services/configure-json-defaults/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/extending-language-services/configure-json-defaults/sample.js
+++ b/website/playground/new-samples/extending-language-services/configure-json-defaults/sample.js
@@ -0,0 +1,40 @@
 
															+// 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"
														
 
															+});
														
--- a/website/playground/new-samples/extending-language-services/custom-languages/sample.css
+++ b/website/playground/new-samples/extending-language-services/custom-languages/sample.css
@@ -0,0 +1,15 @@
 
															+.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;
														
 
															+}
														
--- a/website/playground/new-samples/extending-language-services/custom-languages/sample.html
+++ b/website/playground/new-samples/extending-language-services/custom-languages/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/extending-language-services/custom-languages/sample.js
+++ b/website/playground/new-samples/extending-language-services/custom-languages/sample.js
@@ -0,0 +1,99 @@
 
															+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');;
														
 
															+}
														
--- a/website/playground/new-samples/extending-language-services/hover-provider-example/sample.css
+++ b/website/playground/new-samples/extending-language-services/hover-provider-example/sample.css
--- a/website/playground/new-samples/extending-language-services/hover-provider-example/sample.html
+++ b/website/playground/new-samples/extending-language-services/hover-provider-example/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/extending-language-services/hover-provider-example/sample.js
+++ b/website/playground/new-samples/extending-language-services/hover-provider-example/sample.js
@@ -0,0 +1,50 @@
 
															+
														
 
															+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();
														
 
															+	});
														
 
															+}
														
--- a/website/playground/new-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.css
+++ b/website/playground/new-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.css
--- a/website/playground/new-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.html
+++ b/website/playground/new-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.js
+++ b/website/playground/new-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.js
@@ -0,0 +1,33 @@
 
															+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);
														
--- a/website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.css
+++ b/website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.css
--- a/website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.html
+++ b/website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.js
+++ b/website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.js
@@ -0,0 +1,74 @@
 
															+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'],
														
 
															+	}
														
 
															+});
														
--- a/website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.css
+++ b/website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.css
@@ -0,0 +1 @@
 
															+
														
--- a/website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.html
+++ b/website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%"></div>
														
--- a/website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.js
+++ b/website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.js
@@ -0,0 +1,25 @@
 
															+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
														
 
															+});
														
--- a/website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.css
+++ b/website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.css
@@ -0,0 +1,12 @@
 
															+.myInlineDecoration {
														
 
															+	color: red !important;
														
 
															+	cursor: pointer;
														
 
															+	text-decoration: underline;
														
 
															+	font-weight: bold;
														
 
															+	font-style: oblique;
														
 
															+}
														
 
															+.myLineDecoration {
														
 
															+	background: lightblue;
														
 
															+	width: 5px !important;
														
 
															+	left: 3px;
														
 
															+}
														
--- a/website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.html
+++ b/website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.js
+++ b/website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.js
@@ -0,0 +1,21 @@
 
															+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' }},
														
 
															+]);
														
--- a/website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.css
+++ b/website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.css
@@ -0,0 +1 @@
 
															+
														
--- a/website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.html
+++ b/website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%"></div>
														
--- a/website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.js
+++ b/website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.js
@@ -0,0 +1,10 @@
 
															+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()
														
--- a/website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.css
+++ b/website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.css
@@ -0,0 +1,6 @@
 
															+.myGlyphMarginClass {
														
 
															+	background: red;
														
 
															+}
														
 
															+.myContentClass {
														
 
															+	background: lightblue;
														
 
															+}
														
--- a/website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.html
+++ b/website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.html
@@ -0,0 +1,3 @@
 
															+<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>
														
--- a/website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.js
+++ b/website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.js
@@ -0,0 +1,113 @@
 
															+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');
														
 
															+});
														
--- a/website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.css
+++ b/website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.css
@@ -0,0 +1,6 @@
 
															+.myGlyphMarginClass {
														
 
															+	background: red;
														
 
															+}
														
 
															+.myContentClass {
														
 
															+	background: lightblue;
														
 
															+}
														
--- a/website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.html
+++ b/website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.html
@@ -0,0 +1 @@
 
															+<div id="container" style="height:100%;"></div>
														
--- a/website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.js
+++ b/website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.js
@@ -0,0 +1,30 @@
 
															+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
														
--- a/website/playground/new-samples/interacting-with-the-editor/revealing-a-position/sample.css
+++ b/website/playground/new-samples/interacting-with-the-editor/revealing-a-position/sample.css
	`@@ -0,0 +1 @@`
			`+<div id="container" style="height:100%;"></div>`