Add playground samples

gulpfile.js

@@ -6,6 +6,9 @@ var path = require('path');
 var fs = require('fs');
 var rimraf = require('rimraf');
 
+var SAMPLES_MDOC_PATH = path.join(__dirname, 'website/playground/playground.mdoc');
+var WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/samples');
+
 gulp.task('clean-release', function(cb) { rimraf('release', { maxBusyTries: 1 }, cb); });
 gulp.task('release', ['clean-release'], function() {
 	return es.merge(
@@ -146,7 +149,146 @@ function addPluginDTS() {
 		contents += '\n' + extraContent.join('\n');
 		data.contents = new Buffer(contents);
 
-		fs.writeFileSync('website/playground/samples/editor.d.ts.txt', contents);
+		fs.writeFileSync('website/playground/monaco.d.ts.txt', contents);
 		this.emit('data', data);
 	});
-}
+}
+
+
+// --- website
+
+gulp.task('clean-playground-samples', function(cb) { rimraf(WEBSITE_GENERATED_PATH, { maxBusyTries: 1 }, cb); });
+gulp.task('playground-samples', ['clean-playground-samples'], function() {
+	function toFolderName(name) {
+		var result = name.toLowerCase().replace(/[^a-z0-9\-_]/g, '-');
+
+		while (result.indexOf('--') >= 0) {
+			result = result.replace(/--/, '-');
+		}
+
+		while (result.charAt(result.length - 1) === '-') {
+			result = result.substring(result, result.length - 1);
+		}
+
+		return result;
+	}
+
+	function parse(txt) {
+		function startsWith(haystack, needle) {
+			return haystack.substring(0, needle.length) === needle;
+		}
+
+		var CHAPTER_MARKER = "=";
+		var SAMPLE_MARKER = "==";
+		var SNIPPET_MARKER = "=======================";
+
+		var lines = txt.split(/\r\n|\n|\r/);
+		var result = [];
+		var currentChapter = null;
+		var currentSample = null;
+		var currentSnippet = null;
+
+		for (var i = 0; i < lines.length; i++) {
+			var line = lines[i];
+
+			if (startsWith(line, SNIPPET_MARKER)) {
+				var snippetType = line.substring(SNIPPET_MARKER.length).trim();
+
+				if (snippetType === 'HTML' || snippetType === 'JS' || snippetType === 'CSS') {
+					currentSnippet = currentSample[snippetType];
+				} else {
+					currentSnippet = null;
+				}
+				continue;
+			}
+
+			if (startsWith(line, SAMPLE_MARKER)) {
+				currentSnippet = null;
+				currentSample = {
+					name: line.substring(SAMPLE_MARKER.length).trim(),
+					JS: [],
+					HTML: [],
+					CSS: []
+				};
+				currentChapter.samples.push(currentSample);
+				continue;
+			}
+
+			if (startsWith(line, CHAPTER_MARKER)) {
+				currentSnippet = null;
+				currentSample = null;
+				currentChapter = {
+					name: line.substring(CHAPTER_MARKER.length).trim(),
+					samples: []
+				};
+				result.push(currentChapter);
+				continue;
+			}
+
+			if (currentSnippet) {
+				currentSnippet.push(line);
+				continue;
+			}
+
+			if (line === '') {
+				continue;
+			}
+
+			// ignore inter-sample content
+			console.warn('IGNORING INTER-SAMPLE CONTENT: ' + line);
+		}
+
+		return result;
+	}
+
+	var chapters = parse(fs.readFileSync(SAMPLES_MDOC_PATH).toString());
+
+	var allSamples = [];
+
+	fs.mkdirSync(WEBSITE_GENERATED_PATH);
+
+	chapters.forEach(function(chapter) {
+		var chapterFolderName = toFolderName(chapter.name);
+
+		chapter.samples.forEach(function(sample) {
+			var sampleId = toFolderName(chapter.name + '-' + sample.name);
+
+			sample.sampleId = sampleId;
+
+			var js = [
+				'//---------------------------------------------------',
+				'// ' + chapter.name + ' > ' + sample.name,
+				'//---------------------------------------------------',
+				'',
+			].concat(sample.JS)
+			var sampleOut = {
+				id: sampleId,
+				js: js.join('\n'),
+				html: sample.HTML.join('\n'),
+				css: sample.CSS.join('\n')
+			};
+
+			allSamples.push({
+				chapter: chapter.name,
+				name: sample.name,
+				sampleId: sampleId
+			});
+
+var content =
+`// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push(${JSON.stringify(sampleOut)});
+`
+
+			fs.writeFileSync(path.join(WEBSITE_GENERATED_PATH, sampleId + '.js'), content);
+		});
+	});
+
+	var content =
+`// This is a generated file. Please do not edit directly.
+this.SAMPLES = [];
+this.ALL_SAMPLES = ${JSON.stringify(allSamples)};`
+
+	fs.writeFileSync(path.join(WEBSITE_GENERATED_PATH, 'all.js'), content);
+
+});

package.json

@@ -17,7 +17,7 @@
     "event-stream": "^3.3.2",
     "gulp": "^3.9.1",
     "http-server": "^0.9.0",
-    "monaco-editor-core": "0.4.0",
+    "monaco-editor-core": "0.4.2",
     "monaco-languages": "0.2.0",
     "monaco-typescript": "0.2.0",
     "rimraf": "^2.5.2"

website/playground/samples/editor.d.ts.txt → website/playground/monaco.d.ts.txt

@@ -752,14 +752,29 @@ declare module monaco.editor {
      * `domElement` should be empty (not contain other dom nodes).
      * The editor will read the size of `domElement`.
      */
-    export function create(domElement: HTMLElement, options: IEditorConstructionOptions, services: IEditorOverrideServices): ICodeEditor;
+    export function create(domElement: HTMLElement, options?: IEditorConstructionOptions, services?: IEditorOverrideServices): IStandaloneCodeEditor;
 
     /**
      * Create a new diff editor under `domElement`.
      * `domElement` should be empty (not contain other dom nodes).
      * The editor will read the size of `domElement`.
      */
-    export function createDiffEditor(domElement: HTMLElement, options: IDiffEditorConstructionOptions, services: IEditorOverrideServices): IDiffEditor;
+    export function createDiffEditor(domElement: HTMLElement, options?: IDiffEditorConstructionOptions, services?: IEditorOverrideServices): IStandaloneDiffEditor;
+
+    export interface IDiffNavigator {
+        canNavigate(): boolean;
+        next(): void;
+        previous(): void;
+        dispose(): void;
+    }
+
+    export interface IDiffNavigatorOptions {
+        followsCaret?: boolean;
+        ignoreCharChanges?: boolean;
+        alwaysRevealFirst?: boolean;
+    }
+
+    export function createDiffNavigator(diffEditor: IStandaloneDiffEditor, opts?: IDiffNavigatorOptions): IDiffNavigator;
 
     /**
      * Create a new editor model.
@@ -879,6 +894,26 @@ declare module monaco.editor {
     export interface IDiffEditorConstructionOptions extends IDiffEditorOptions {
     }
 
+    export interface IStandaloneCodeEditor extends ICodeEditor {
+        addCommand(keybinding: number, handler: ICommandHandler, context: string): string;
+        createContextKey<T>(key: string, defaultValue: T): IKeybindingContextKey<T>;
+        addAction(descriptor: IActionDescriptor): void;
+    }
+
+    export interface IStandaloneDiffEditor extends IDiffEditor {
+        addCommand(keybinding: number, handler: ICommandHandler, context: string): string;
+        createContextKey<T>(key: string, defaultValue: T): IKeybindingContextKey<T>;
+        addAction(descriptor: IActionDescriptor): void;
+    }
+    export interface ICommandHandler {
+        (...args: any[]): void;
+    }
+
+    export interface IKeybindingContextKey<T> {
+        set(value: T): void;
+        reset(): void;
+    }
+
     export interface IEditorOverrideServices {
     }
 

website/playground/playground.js

@@ -6,8 +6,8 @@
 
 window.onload = function() {
 	require(['vs/editor/editor.main'], function() {
-		xhr('playground/samples/editor.d.ts.txt').then(function(response) {
-			monaco.languages.typescript.javascriptDefaults.addExtraLib(response.responseText, 'editor.d.ts');
+		xhr('playground/monaco.d.ts.txt').then(function(response) {
+			monaco.languages.typescript.javascriptDefaults.addExtraLib(response.responseText, 'monaco.d.ts');
 			monaco.languages.typescript.javascriptDefaults.addExtraLib([
 				'declare var require: {',
 				'	toUrl(path: string): string;',

website/playground/samples/creating-the-diffeditor-hello-diff-world.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"creating-the-diffeditor-hello-diff-world","js":"//---------------------------------------------------\n// Creating the DiffEditor > Hello diff world!\n//---------------------------------------------------\n\nvar originalModel = monaco.editor.createModel(\"heLLo world!\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"hello orlando!\", \"text/plain\");\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"));\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

website/playground/samples/creating-the-diffeditor-inline-diff-example.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"creating-the-diffeditor-inline-diff-example","js":"//---------------------------------------------------\n// Creating the DiffEditor > Inline Diff Example\n//---------------------------------------------------\n\nvar originalModel = monaco.editor.createModel(\"This line is removed on the right.\\njust some text\\nabcd\\nefgh\\nSome more text\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"just some text\\nabcz\\nzzzzefgh\\nSome more text\\nThis line is removed on the left.\", \"text/plain\");\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"), {\n\t// You can optionally disable the resizing\n\tenableSplitViewResizing: false,\n\n\t// Render the diff inline\n\trenderSideBySide: false\n});\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

website/playground/samples/creating-the-diffeditor-multi-line-example.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"creating-the-diffeditor-multi-line-example","js":"//---------------------------------------------------\n// Creating the DiffEditor > Multi-line example\n//---------------------------------------------------\n\nvar originalModel = monaco.editor.createModel(\"This line is removed on the right.\\njust some text\\nabcd\\nefgh\\nSome more text\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"just some text\\nabcz\\nzzzzefgh\\nSome more text.\\nThis line is removed on the left.\", \"text/plain\");\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"), {\n\t// You can optionally disable the resizing\n\tenableSplitViewResizing: false\n});\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

website/playground/samples/creating-the-diffeditor-navigating-a-diff.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"creating-the-diffeditor-navigating-a-diff","js":"//---------------------------------------------------\n// Creating the DiffEditor > Navigating a Diff\n//---------------------------------------------------\n\n// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.\nvar originalModel = monaco.editor.createModel(\"just some text\\n\\nHello World\\n\\nSome more text\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"just some Text\\n\\nHello World\\n\\nSome more changes\", \"text/plain\");\n\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"));\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n\nvar navi = monaco.editor.createDiffNavigator(diffEditor, {\n\tfollowsCaret: true, // resets the navigator state when the user selects something in the editor\n\tignoreCharChanges: true // jump from line to line\n});\n\nwindow.setInterval(function() {\n\tnavi.next();\n}, 2000);\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

website/playground/samples/creating-the-editor-editor-basic-options.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"creating-the-editor-editor-basic-options","js":"//---------------------------------------------------\n// Creating the editor > Editor basic options\n//---------------------------------------------------\n\n// Through the options literal, the behaviour of the editor can be easily customized.\n// Here are a few examples of config options that can be passed to the editor.\n// You can also call editor.updateOptions at any time to change the options.\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"// First line\\nfunction hello() {\\n\\talert('Hello world!');\\n}\\n// Last line\",\n\tlanguage: \"javascript\",\n\n\tlineNumbers: false,\n\troundedSelection: false,\n\tscrollBeyondLastLine: false,\n\treadOnly: false,\n\ttheme: \"vs-dark\",\n});\nsetTimeout(function() {\n\teditor.updateOptions({\n\t\tlineNumbers: true\n\t});\n}, 2000);\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

website/playground/samples/creating-the-editor-hello-world.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"creating-the-editor-hello-world","js":"//---------------------------------------------------\n// Creating the editor > Hello world!\n//---------------------------------------------------\n\n// The Monaco Editor can be easily created, given an\n// empty container and an options literal.\n// Two members of the literal are \"value\" and \"language\".\n// The editor takes the full size of its container.\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"function hello() {\\n\\talert('Hello world!');\\n}\",\n\tlanguage: \"javascript\"\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

website/playground/samples/creating-the-editor-syntax-highlighting-for-html-elements.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"creating-the-editor-syntax-highlighting-for-html-elements","js":"//---------------------------------------------------\n// Creating the editor > Syntax highlighting for HTML elements\n//---------------------------------------------------\n\n// The colorizeElement-function will read the data-lang-attribute\n// from the element to select the correct language mode. In this\n// sample it is text/css.\nmonaco.editor.colorizeElement(document.getElementById('code'));\n","html":"<pre id=\"code\" data-lang=\"text/css\" style=\"width:500px;\">\n/* Some example CSS */\n\n@import url(\"something.css\");\n\nbody {\n  margin: 0;\n  padding: 3em 6em;\n  font-family: tahoma, arial, sans-serif;\n  color: #000;\n}\n\n#navigation a {\n  font-weight: bold;\n  text-decoration: none !important;\n}\n\nh1 {\n  font-size: 2.5em;\n}\n\nh2 {\n  font-size: 1.7em;\n}\n\nh1:before, h2:before {\n  content: \"some contents\";\n}\n\ncode {\n  font-family: courier, monospace;\n  font-size: 80%;\n  color: #418A8A;\n}\n</pre>\n","css":"\n"});

website/playground/samples/customizing-the-appearence-exposed-css-classes.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"customizing-the-appearence-exposed-css-classes","js":"//---------------------------------------------------\n// Customizing the appearence > Exposed CSS classes\n//---------------------------------------------------\n\n// The editor exposes a set of CSS classes that can be overwritten.\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"My to-do list:\\n* buy milk\\n* buy coffee\\n* write awesome code\",\n\tlanguage: \"text/plain\",\n\tfontFamily: \"Arial\",\n\tfontSize: 20\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".monaco-editor, .monaco-editor-background {\n\tbackground: #EDF9FA;\n}\n\n/* Cursor */\n.monaco-editor .cursor {\n\tbackground: darkred !important;\n}\n\n/* Current line */\n.monaco-editor .current-line {\n\tbackground: rgba(0, 0, 255, 0.1);\n}\n\n/* Line Numbers */\n.monaco-editor .line-numbers {\n\tbackground-color: #EDF9FA;\n\tcolor: green;\n}\n\n/* Line Decorations */\n.monaco-editor .lines-decorations {\n\tbackground-color: #EDF9FA;\n}\n\n/* Selection */\n.monaco-editor .view-overlays.focused .selected-text {\n\tbackground: rgba(128, 0, 0, 0.2) !important;\n}\n.monaco-editor .view-overlays .selected-text {\n\tbackground: rgba(128, 0, 0, 0.1) !important;\n}\n"});

website/playground/samples/customizing-the-appearence-tokens-and-colors.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"customizing-the-appearence-tokens-and-colors","js":"//---------------------------------------------------\n// Customizing the appearence > Tokens and colors\n//---------------------------------------------------\n\n// This example shows how to integrate the editor with a certain theme and then customize the token colors of that theme.\nvar htmlCode = \"<html>\\n<head>\\n\t<!-- HTML comment -->\\n\t<style type=\\\"text/css\\\">\\n\t\t/* CSS comment */\\n\t</style>\\n\t<script type=\\\"javascript\\\">\\n\t\t// JavaScript comment\\n\t</\"+\"script>\\n</head>\\n<body></body>\\n</html>\";\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: htmlCode,\n\tlanguage: \"text/html\",\n\ttheme: \"vs\"\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":"/*\nThese rules customize the \"Visual Studio\" (vs) theme.\n\nToken names can be discovered by:\na) exploring the .css theme files that come with the editor;\nb) inspecting the dom elements rendered by the editor;\n*/\n.monaco-editor.vs .token.comment\t\t{ color: orange; }\n.monaco-editor.vs .token.comment.js\t\t{ color: green; }\n.monaco-editor.vs .token.comment.css\t{ color: blue; }\n"});

website/playground/samples/extending-language-services-configure-javascript-defaults.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"extending-language-services-configure-javascript-defaults","js":"//---------------------------------------------------\n// Extending Language Services > Configure JavaScript defaults\n//---------------------------------------------------\n\n// Add additonal d.ts files to the JavaScript language service and change.\n// Also change the default compilation options.\n// The sample below shows how a class Facts is declared and introduced\n// to the system and how the compiler is told to use ES6 (target=2).\n\n// validation settings\nmonaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n\tnoSemanticValidation: true,\n\tnoSyntaxValidation: false\n});\n\n// compiler options\nmonaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n\ttarget: monaco.languages.typescript.ScriptTarget.ES6,\n\tallowNonTsExtensions: true\n});\n\n// extra libraries\nmonaco.languages.typescript.javascriptDefaults.addExtraLib([\n\t'declare class Facts {',\n\t'    /**',\n\t'     * Returns the next fact',\n\t'     */',\n\t'    static next():string',\n\t'}',\n].join('\\n'), 'filename/facts.d.ts');\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'',\n\t\"class Chuck {\",\n\t\"    greet() {\",\n\t\"        return Facts.next();\",\n\t\"    }\",\n\t\"}\"\n].join('\\n');\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

website/playground/samples/interacting-with-the-editor-adding-a-command-to-an-editor-instance.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"interacting-with-the-editor-adding-a-command-to-an-editor-instance","js":"//---------------------------------------------------\n// Interacting with the editor > Adding a command to an editor instance\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});\n\nvar myCondition1 = editor.createContextKey(/*key name*/'myCondition1', /*default value*/false);\nvar myCondition2 = editor.createContextKey(/*key name*/'myCondition2', /*default value*/false);\n\neditor.addCommand(monaco.KeyCode.Tab, function() {\n    // services available in `ctx`\n    alert('my command is executing!');\n\n}, 'myCondition1 && myCondition2')\n\nmyCondition1.set(true);\n\nsetTimeout(function() {\n    alert('now enabling also myCondition2, try pressing Tab!');\n    myCondition2.set(true);\n    // you can use myCondition2.reset() to go back to the default\n}, 2000);","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

website/playground/samples/interacting-with-the-editor-customizing-the-line-numbers.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"interacting-with-the-editor-customizing-the-line-numbers","js":"//---------------------------------------------------\n// Interacting with the editor > Customizing the line numbers\n//---------------------------------------------------\n\nfunction lineNumbersFunc(originalLineNumber) {\n\tvar map = [ 'O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];\n\tif (originalLineNumber < map.length) {\n\t\treturn map[originalLineNumber];\n\t}\n\treturn originalLineNumber;\n}\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tlineNumbers: lineNumbersFunc\n});\n","html":"<div id=\"container\" style=\"height:100%\"></div>\n","css":"\n"});

website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"interacting-with-the-editor-line-and-inline-decorations","js":"//---------------------------------------------------\n// Interacting with the editor > Line and Inline decorations\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});\n\nvar lineDecorationId = editor.changeDecorations(function(changeAccessor) {\n\treturn changeAccessor.addDecoration({\n\t\tstartLineNumber: 3,\n\t\tstartColumn: 1,\n\t\tendLineNumber: 5,\n\t\tendColumn: 1\n\t}, {\n\t\tisWholeLine: true,\n\t\tlinesDecorationsClassName: 'myLineDecoration'\n\t});\n});\n\nvar inlineDecorationId = editor.changeDecorations(function(changeAccessor) {\n\treturn changeAccessor.addDecoration({\n\t\tstartLineNumber: 7,\n\t\tstartColumn: 1,\n\t\tendLineNumber: 7,\n\t\tendColumn: 24\n\t}, {\n\t\tinlineClassName: 'myInlineDecoration'\n\t});\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".myInlineDecoration {\n\tcolor: red !important;\n\tcursor: pointer;\n\ttext-decoration: underline;\n\tfont-weight: bold;\n\tfont-style: oblique;\n}\n.myLineDecoration {\n\tbackground: lightblue;\n\twidth: 5px !important;\n\tleft: 3px;\n}\n"});

website/playground/samples/interacting-with-the-editor-listening-to-key-events.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"interacting-with-the-editor-listening-to-key-events","js":"//---------------------------------------------------\n// Interacting with the editor > Listening to key events\n//---------------------------------------------------\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"function hello() {\\n\\talert('Hello world!');\\n}\",\n\tlanguage: \"javascript\"\n});\n\nvar myBinding = editor.addCommand(monaco.KeyCode.F9, function() {\n\talert('F9 pressed!');\n});\n\n// When cleaning up remember to call myBinding.dispose()\n","html":"<div id=\"container\" style=\"height:100%\"></div>\n","css":"\n"});

website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"interacting-with-the-editor-rendering-glyphs-in-the-margin","js":"//---------------------------------------------------\n// Interacting with the editor > Rendering glyphs in the margin\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tglyphMargin: true\n});\n\nvar decorationId = editor.changeDecorations(function(changeAccessor) {\n\treturn changeAccessor.addDecoration({\n\t\tstartLineNumber: 3,\n\t\tstartColumn: 1,\n\t\tendLineNumber: 3,\n\t\tendColumn: 1\n\t}, {\n\t\tisWholeLine: true,\n\t\tclassName: 'myContentClass',\n\t\tglyphMarginClassName: 'myGlyphMarginClass'\n\t});\n});\n\n\n// You can now use `decorationId` to change or remove the decoration\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"});

website/playground/samples/interacting-with-the-editor-revealing-a-position.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"interacting-with-the-editor-revealing-a-position","js":"//---------------------------------------------------\n// Interacting with the editor > Revealing a position\n//---------------------------------------------------\n\nvar jsCodeArr = [\n\t'// ------------------------------',\n\t'// ------------------------------',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};',\n\t'',\n\t''\n];\n\njsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));\njsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));\njsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));\n\njsCodeArr[49] += 'And this is some long line. And this is some long line. And this is some long line. And this is some long line. And this is some long line. ';\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCodeArr.join('\\n'),\n\tlanguage: \"javascript\"\n});\n\neditor.revealPositionInCenter({ lineNumber: 50, column: 120 });\n// Also see:\n// - editor.revealLine\n// - editor.revealLineInCenter\n// - editor.revealLineInCenterIfOutsideViewport\n// - editor.revealLines\n// - editor.revealLinesInCenter\n// - editor.revealLinesInCenterIfOutsideViewport\n// - editor.revealPosition\n// - editor.revealPositionInCenter\n// - editor.revealPositionInCenterIfOutsideViewport\n// - editor.revealRange\n// - editor.revealRangeInCenter\n// - editor.revealRangeInCenterIfOutsideViewport\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});