Move website files to /website/

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>

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

@@ -0,0 +1,36 @@
+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);

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>

website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.js

@@ -0,0 +1,52 @@
+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:
+// Press F1 => the action will appear and run if it is enabled
+// Press Ctrl-F10 => the action will run if it is enabled
+// Press Chord Ctrl-K, Ctrl-M => 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,
+		// chord
+		monaco.KeyMod.chord(
+			monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK,
+			monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM
+		)
+	],
+
+	// A precondition for this action.
+	precondition: null,
+
+	// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
+	keybindingContext: null,
+
+	contextMenuGroupId: 'navigation',
+
+	contextMenuOrder: 1.5,
+
+	// Method that will be executed when the action is triggered.
+	// @param editor The editor instance is passed in as a convenience
+	run: function (ed) {
+		alert("i'm running => " + ed.getPosition());
+	}
+});

website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.html

@@ -0,0 +1 @@
+<div id="container" style="height: 100%"></div>

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

website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.css

@@ -0,0 +1,13 @@
+.myInlineDecoration {
+	color: red !important;
+	cursor: pointer;
+	text-decoration: underline;
+	font-weight: bold;
+	font-style: oblique;
+}
+
+.myLineDecoration {
+	background: lightblue;
+	width: 5px !important;
+	margin-left: 3px;
+}

website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.html

@@ -0,0 +1 @@
+<div id="container" style="height: 100%"></div>

website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/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 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' }
+		}
+	]
+);

website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.html

@@ -0,0 +1 @@
+<div id="container" style="height: 100%"></div>

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

@@ -0,0 +1,11 @@
+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!');
+});
+
+// You can't dispose `addCommand`
+// If you need to dispose it you might use `addAction` or `registerCommand`

website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.css

@@ -0,0 +1,6 @@
+.myGlyphMarginClass {
+	background: red;
+}
+.myContentClass {
+	background: lightblue;
+}

website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.html

@@ -0,0 +1,5 @@
+<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>

website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.js

@@ -0,0 +1,117 @@
+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,
+	contextmenu: 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');
+});

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

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>

website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/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',
+	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

website/playground/new-samples/interacting-with-the-editor/revealing-a-position/sample.html

@@ -0,0 +1 @@
+<div id="container" style="height: 100%"></div>

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

@@ -0,0 +1,41 @@
+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