@harmoniclabs/monaco-editor 0.52.0

package/website/src/website/data/playground-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: "off",
+	roundedSelection: false,
+	scrollBeyondLastLine: false,
+	readOnly: false,
+	theme: "vs-dark",
+});
+setTimeout(function () {
+	editor.updateOptions({
+		lineNumbers: "on",
+	});
+}, 2000);

package/website/src/website/data/playground-samples/creating-the-editor/editor-basic-options/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Editor Basic Options"
+}

package/website/src/website/data/playground-samples/creating-the-editor/hard-wrapping/sample.html

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

package/website/src/website/data/playground-samples/creating-the-editor/hard-wrapping/sample.js

@@ -0,0 +1,13 @@
+var jsCode =
+	'// jqeuery excerpt:\n//       1         2         3         4\n//34567890123456789012345678901234567890\n/*!\r\n * Sizzle CSS Selector Engine v2.3.0\r\n * https://sizzlejs.com/\r\n *\r\n * Copyright jQuery Foundation and other contributors\r\n * Released under the MIT license\r\n * http://jquery.org/license\r\n *\r\n * Date: 2016-01-04\r\n */\r\n(function( window ) {\r\n\r\nvar i,\r\n\tsupport,\r\n\tExpr,\r\n\tgetText,\r\n\tisXML,\r\n\ttokenize,\r\n\tcompile,\r\n\tselect,\r\n\toutermostContext,\r\n\tsortInput,\r\n\thasDuplicate,\r\n\r\n\t// Local document vars\r\n\tsetDocument,\r\n\tdocument,\r\n\tdocElem,\r\n\tdocumentIsHTML,\r\n\trbuggyQSA,\r\n\trbuggyMatches,\r\n\tmatches,\r\n\tcontains,\r\n\r\n\t// Instance-specific data\r\n\texpando = "sizzle" + 1 * new Date(),\r\n\tpreferredDoc = window.document,\r\n\tdirruns = 0,\r\n\tdone = 0,\r\n\tclassCache = createCache(),\r\n\ttokenCache = createCache(),\r\n\tcompilerCache = createCache(),\r\n\tsortOrder = function( a, b ) {\r\n\t\tif ( a === b ) {\r\n\t\t\thasDuplicate = true;\r\n\t\t}\r\n\t\treturn 0;\r\n\t},\r\n\r\n\t// Instance methods\r\n\thasOwn = ({}).hasOwnProperty,\r\n\tarr = [],\r\n\tpop = arr.pop,\r\n\tpush_native = arr.push,\r\n\tpush = arr.push,\r\n\tslice = arr.slice,\r\n\t// Use a stripped-down indexOf as it\'s faster than native\r\n\t// https://jsperf.com/thor-indexof-vs-for/5\r\n\tindexOf = function( list, elem ) {\r\n\t\tvar i = 0,\r\n\t\t\tlen = list.length;\r\n\t\tfor ( ; i < len; i++ ) {\r\n\t\t\tif ( list[i] === elem ) {\r\n\t\t\t\treturn i;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn -1;\r\n\t},\r\n\r\n\tbooleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",\r\n\r\n\t// Regular expressions\r\n\r\n\t// http://www.w3.org/TR/css3-selectors/#whitespace\r\n\twhitespace = "[\\\\x20\\\\t\\\\r\\\\n\\\\f]",\r\n\r\n\t// http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier\r\n\tidentifier = "(?:\\\\\\\\.|[\\\\w-]|[^\\0-\\\\xa0])+",\r\n\r\n\t// Attribute selectors: http://www.w3.org/TR/selectors/#attribute-selectors\r\n\tattributes = "\\\\[" + whitespace + "*(" + identifier + ")(?:" + whitespace +\r\n\t\t// Operator (capture 2)\r\n\t\t"*([*^$|!~]?=)" + whitespace +\r\n\t\t// "Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]"\r\n\t\t"*(?:\'((?:\\\\\\\\.|[^\\\\\\\\\'])*)\'|\\"((?:\\\\\\\\.|[^\\\\\\\\\\"])*)\\"|(" + identifier + "))|)" + whitespace +\r\n\t\t"*\\\\]",\r\n\r\n\tpseudos = ":(" + identifier + ")(?:\\\\((" +\r\n\t\t// To reduce the number of selectors needing tokenize in the preFilter, prefer arguments:\r\n\t\t// 1. quoted (capture 3; capture 4 or capture 5)\r\n\t\t"(\'((?:\\\\\\\\.|[^\\\\\\\\\'])*)\'|\\"((?:\\\\\\\\.|[^\\\\\\\\\\"])*)\\")|" +\r\n\t\t// 2. simple (capture 6)\r\n\t\t"((?:\\\\\\\\.|[^\\\\\\\\()[\\\\]]|" + attributes + ")*)|" +\r\n\t\t// 3. anything else (capture 2)\r\n\t\t".*" +\r\n\t\t")\\\\)|)",\r\n\r\n\t// Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter\r\n\trwhitespace = new RegExp( whitespace + "+", "g" ),\r\n\trtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\\\\\\\])(?:\\\\\\\\.)*)" + whitespace + "+$", "g" ),\r\n\r\n\trcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" ),\r\n\trcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" ),\r\n\r\n\trattributeQuotes = new RegExp( "=" + whitespace + "*([^\\\\]\'\\"]*?)" + whitespace + "*\\\\]", "g" ),\r\n\r\n\trpseudo = new RegExp( pseudos ),\r\n\tridentifier = new RegExp( "^" + identifier + "$" ),\r\n\r\n\tmatchExpr = {\r\n\t\t"ID": new RegExp( "^#(" + identifier + ")" ),\r\n\t\t"CLASS": new RegExp( "^\\\\.(" + identifier + ")" ),\r\n\t\t"TAG": new RegExp( "^(" + identifier + "|[*])" ),\r\n\t\t"ATTR": new RegExp( "^" + attributes ),\r\n\t\t"PSEUDO": new RegExp( "^" + pseudos ),\r\n\t\t"CHILD": new RegExp( "^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\\\(" + whitespace +\r\n\t\t\t"*(even|odd|(([+-]|)(\\\\d*)n|)" + whitespace + "*(?:([+-]|)" + whitespace +\r\n\t\t\t"*(\\\\d+)|))" + whitespace + "*\\\\)|)", "i" ),\r\n\t\t"bool": new RegExp( "^(?:" + booleans + ")$", "i" ),\r\n\t\t// For use in libraries implementing .is()\r\n\t\t// We use this for POS matching in `select`\r\n\t\t"needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\\\(" +\r\n\t\t\twhitespace + "*((?:-\\\\d)?\\\\d*)" + whitespace + "*\\\\)|)(?=[^-]|$)", "i" )\r\n\t},\r\n\r\n\trinputs = /^(?:input|select|textarea|button)$/i,\r\n\trheader = /^h\\d$/i,\r\n\r\n\trnative = /^[^{]+\\{\\s*\\[native \\w/,\r\n\r\n\t// Easily-parseable/retrievable ID or TAG or CLASS selectors\r\n\trquickExpr = /^(?:#([\\w-]+)|(\\w+)|\\.([\\w-]+))$/,\r\n\r\n\trsibling = /[+~]/,\r\n\r\n\t// CSS escapes\r\n\t// http://www.w3.org/TR/CSS21/syndata.html#escaped-characters\r\n\trunescape = new RegExp( "\\\\\\\\([\\\\da-f]{1,6}" + whitespace + "?|(" + whitespace + ")|.)", "ig" ),\r\n\tfunescape = function( _, escaped, escapedWhitespace ) {\r\n\t\tvar high = "0x" + escaped - 0x10000;\r\n\t\t// NaN means non-codepoint\r\n\t\t// Support: Firefox<24\r\n\t\t// Workaround erroneous numeric interpretation of +"0x"\r\n\t\treturn high !== high || escapedWhitespace ?\r\n\t\t\tescaped :\r\n\t\t\thigh < 0 ?\r\n\t\t\t\t// BMP codepoint\r\n\t\t\t\tString.fromCharCode( high + 0x10000 ) :\r\n\t\t\t\t// Supplemental Plane codepoint (surrogate pair)\r\n\t\t\t\tString.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 );\r\n\t},\r\n\r\n\t// CSS string/identifier serialization\r\n\t// https://drafts.csswg.org/cssom/#common-serializing-idioms\r\n\trcssescape = /([\\0-\\x1f\\x7f]|^-?\\d)|^-$|[^\\x80-\\uFFFF\\w-]/g,\r\n\tfcssescape = function( ch, asCodePoint ) {\r\n\t\tif ( asCodePoint ) {\r\n\r\n\t\t\t// U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER\r\n\t\t\tif ( ch === "\\0" ) {\r\n\t\t\t\treturn "\\uFFFD";\r\n\t\t\t}\r\n\r\n\t\t\t// Control characters and (dependent upon position) numbers get escaped as code points\r\n\t\t\treturn ch.slice( 0, -1 ) + "\\\\" + ch.charCodeAt( ch.length - 1 ).toString( 16 ) + " ";\r\n\t\t}\r\n\r\n\t\t// Other potentially-special ASCII characters get backslash-escaped\r\n\t\treturn "\\\\" + ch;\r\n\t},\r\n\r\n\t// Used for iframes\r\n\t// See setDocument()\r\n\t// Removing the function wrapper causes a "Permission Denied"\r\n\t// error in IE\r\n\tunloadHandler = function() {\r\n\t\tsetDocument();\r\n\t},\r\n\r\n\tdisabledAncestor = addCombinator(\r\n\t\tfunction( elem ) {\r\n\t\t\treturn elem.disabled === true;\r\n\t\t},\r\n\t\t{ dir: "parentNode", next: "legend" }\r\n\t);})';
+
+var editor = monaco.editor.create(document.getElementById("container"), {
+	value: jsCode,
+	language: "javascript",
+
+	wordWrap: "wordWrapColumn",
+	wordWrapColumn: 40,
+
+	// try "same", "indent" or "none"
+	wrappingIndent: "indent",
+});

package/website/src/website/data/playground-samples/creating-the-editor/hard-wrapping/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Hard Wrapping"
+}

package/website/src/website/data/playground-samples/creating-the-editor/hello-world/sample.html

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

package/website/src/website/data/playground-samples/creating-the-editor/hello-world/sample.js

@@ -0,0 +1,10 @@
+const value = /* set from `myEditor.getModel()`: */ `function hello() {
+	alert('Hello world!');
+}`;
+
+// Hover on each property to see its docs!
+const myEditor = monaco.editor.create(document.getElementById("container"), {
+	value,
+	language: "javascript",
+	automaticLayout: true,
+});

package/website/src/website/data/playground-samples/creating-the-editor/hello-world/sample.json

@@ -0,0 +1,4 @@
+{
+	"title": "Hello World",
+	"sortingKey": 100
+}

package/website/src/website/data/playground-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>

package/website/src/website/data/playground-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"), {});

package/website/src/website/data/playground-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Syntax Highlighting For Html Elements"
+}

package/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.html

@@ -0,0 +1,8 @@
+<template id="editor-template">
+	<div
+		id="container"
+		style="overflow: hidden; width: 100%; height: 100%; position: absolute"
+	></div>
+</template>
+
+<code-view-monaco></code-view-monaco>

package/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.js

@@ -0,0 +1,35 @@
+customElements.define(
+	"code-view-monaco",
+	class CodeViewMonaco extends HTMLElement {
+		_monacoEditor;
+		/** @type HTMLElement */
+		_editor;
+
+		constructor() {
+			super();
+
+			const shadowRoot = this.attachShadow({ mode: "open" });
+
+			// Copy over editor styles
+			const styles = document.querySelectorAll(
+				"link[rel='stylesheet'][data-name^='vs/']"
+			);
+			for (const style of styles) {
+				shadowRoot.appendChild(style.cloneNode(true));
+			}
+
+			const template = /** @type HTMLTemplateElement */ (
+				document.getElementById("editor-template")
+			);
+			shadowRoot.appendChild(template.content.cloneNode(true));
+
+			this._editor = shadowRoot.querySelector("#container");
+			this._monacoEditor = monaco.editor.create(this._editor, {
+				automaticLayout: true,
+				language: "html",
+
+				value: `<div>Hello World</div>`,
+			});
+		}
+	}
+);

package/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.json

@@ -0,0 +1,4 @@
+{
+	"title": "Web Component",
+	"sortingKey": 10000
+}

package/website/src/website/data/playground-samples/customizing-the-appearence/chapter.json

@@ -0,0 +1,3 @@
+{
+	"title": "Customizing The Appearance"
+}

package/website/src/website/data/playground-samples/customizing-the-appearence/exposed-colors/sample.html

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

package/website/src/website/data/playground-samples/customizing-the-appearence/exposed-colors/sample.js

@@ -0,0 +1,150 @@
+// The editor colors can be customized through CSS or through JS
+
+monaco.editor.defineTheme("myTheme", {
+	base: "vs",
+	inherit: true,
+	rules: [],
+	colors: {
+		"editor.foreground": "#000000",
+		"editor.background": "#EDF9FA",
+		"editorCursor.foreground": "#8B0000",
+		"editor.lineHighlightBackground": "#0000FF20",
+		"editorLineNumber.foreground": "#008800",
+		"editor.selectionBackground": "#88000030",
+		"editor.inactiveSelectionBackground": "#88000015",
+	},
+});
+monaco.editor.setTheme("myTheme");
+
+monaco.editor.create(document.getElementById("container"), {
+	value: "My to-do list:\n* buy milk\n* buy coffee\n* write awesome code",
+	language: "text/plain",
+	fontFamily: "Arial",
+	fontSize: 20,
+});
+
+// A list of color names:
+("foreground"); // Overall foreground color. This color is only used if not overridden by a component.
+("errorForeground"); // Overall foreground color for error messages. This color is only used if not overridden by a component.
+("descriptionForeground"); // Foreground color for description text providing additional information, for example for a label.
+("focusBorder"); // Overall border color for focused elements. This color is only used if not overridden by a component.
+("contrastBorder"); // An extra border around elements to separate them from others for greater contrast.
+("contrastActiveBorder"); // An extra border around active elements to separate them from others for greater contrast.
+("selection.background"); // The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
+("textSeparator.foreground"); // Color for text separators.
+("textLink.foreground"); // Foreground color for links in text.
+("textLink.activeForeground"); // Foreground color for active links in text.
+("textPreformat.foreground"); // Foreground color for preformatted text segments.
+("textBlockQuote.background"); // Background color for block quotes in text.
+("textBlockQuote.border"); // Border color for block quotes in text.
+("textCodeBlock.background"); // Background color for code blocks in text.
+("widget.shadow"); // Shadow color of widgets such as find/replace inside the editor.
+("input.background"); // Input box background.
+("input.foreground"); // Input box foreground.
+("input.border"); // Input box border.
+("inputOption.activeBorder"); // Border color of activated options in input fields.
+("input.placeholderForeground"); // Input box foreground color for placeholder text.
+("inputValidation.infoBackground"); // Input validation background color for information severity.
+("inputValidation.infoBorder"); // Input validation border color for information severity.
+("inputValidation.warningBackground"); // Input validation background color for information warning.
+("inputValidation.warningBorder"); // Input validation border color for warning severity.
+("inputValidation.errorBackground"); // Input validation background color for error severity.
+("inputValidation.errorBorder"); // Input validation border color for error severity.
+("dropdown.background"); // Dropdown background.
+("dropdown.foreground"); // Dropdown foreground.
+("dropdown.border"); // Dropdown border.
+("list.focusBackground"); // List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
+("list.focusForeground"); // List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
+("list.activeSelectionBackground"); // List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
+("list.activeSelectionForeground"); // List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
+("list.inactiveSelectionBackground"); // List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
+("list.inactiveSelectionForeground"); // List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
+("list.hoverBackground"); // List/Tree background when hovering over items using the mouse.
+("list.hoverForeground"); // List/Tree foreground when hovering over items using the mouse.
+("list.dropBackground"); // List/Tree drag and drop background when moving items around using the mouse.
+("list.highlightForeground"); // List/Tree foreground color of the match highlights when searching inside the list/tree.
+("pickerGroup.foreground"); // Quick picker color for grouping labels.
+("pickerGroup.border"); // Quick picker color for grouping borders.
+("button.foreground"); // Button foreground color.
+("button.background"); // Button background color.
+("button.hoverBackground"); // Button background color when hovering.
+("badge.background"); // Badge background color. Badges are small information labels, e.g. for search results count.
+("badge.foreground"); // Badge foreground color. Badges are small information labels, e.g. for search results count.
+("scrollbar.shadow"); // Scrollbar shadow to indicate that the view is scrolled.
+("scrollbarSlider.background"); // Slider background color.
+("scrollbarSlider.hoverBackground"); // Slider background color when hovering.
+("scrollbarSlider.activeBackground"); // Slider background color when active.
+("progressBar.background"); // Background color of the progress bar that can show for long running operations.
+("editor.background"); // Editor background color.
+("editor.foreground"); // Editor default foreground color.
+("editorWidget.background"); // Background color of editor widgets, such as find/replace.
+("editorWidget.border"); // Border color of editor widgets. The color is only used if the widget chooses to have a border and if the color is not overridden by a widget.
+("editor.selectionBackground"); // Color of the editor selection.
+("editor.selectionForeground"); // Color of the selected text for high contrast.
+("editor.inactiveSelectionBackground"); // Color of the selection in an inactive editor.
+("editor.selectionHighlightBackground"); // Color for regions with the same content as the selection.
+("editor.findMatchBackground"); // Color of the current search match.
+("editor.findMatchHighlightBackground"); // Color of the other search matches.
+("editor.findRangeHighlightBackground"); // Color the range limiting the search.
+("editor.hoverHighlightBackground"); // Highlight below the word for which a hover is shown.
+("editorHoverWidget.background"); // Background color of the editor hover.
+("editorHoverWidget.border"); // Border color of the editor hover.
+("editorLink.activeForeground"); // Color of active links.
+("diffEditor.insertedTextBackground"); // Background color for text that got inserted.
+("diffEditor.removedTextBackground"); // Background color for text that got removed.
+("diffEditor.insertedTextBorder"); // Outline color for the text that got inserted.
+("diffEditor.removedTextBorder"); // Outline color for text that got removed.
+("editorOverviewRuler.currentContentForeground"); // Current overview ruler foreground for inline merge-conflicts.
+("editorOverviewRuler.incomingContentForeground"); // Incoming overview ruler foreground for inline merge-conflicts.
+("editorOverviewRuler.commonContentForeground"); // Common ancestor overview ruler foreground for inline merge-conflicts.
+("editor.lineHighlightBackground"); // Background color for the highlight of line at the cursor position.
+("editor.lineHighlightBorder"); // Background color for the border around the line at the cursor position.
+("editor.rangeHighlightBackground"); // Background color of highlighted ranges, like by quick open and find features.
+("editorCursor.foreground"); // Color of the editor cursor.
+("editorWhitespace.foreground"); // Color of whitespace characters in the editor.
+("editorIndentGuide.background"); // Color of the editor indentation guides.
+("editorLineNumber.foreground"); // Color of editor line numbers.
+("editorLineNumber.activeForeground"); // Color of editor active line number.
+("editorRuler.foreground"); // Color of the editor rulers.
+("editorCodeLens.foreground"); // Foreground color of editor code lenses
+("editorInlayHint.foreground"); // Foreground color of editor inlay hints
+("editorInlayHint.background"); // Background color of editor inlay hints
+("editorBracketMatch.background"); // Background color behind matching brackets
+("editorBracketMatch.border"); // Color for matching brackets boxes
+("editorOverviewRuler.border"); // Color of the overview ruler border.
+("editorGutter.background"); // Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.
+("editorError.foreground"); // Foreground color of error squigglies in the editor.
+("editorError.border"); // Border color of error squigglies in the editor.
+("editorWarning.foreground"); // Foreground color of warning squigglies in the editor.
+("editorWarning.border"); // Border color of warning squigglies in the editor.
+("editorMarkerNavigationError.background"); // Editor marker navigation widget error color.
+("editorMarkerNavigationWarning.background"); // Editor marker navigation widget warning color.
+("editorMarkerNavigation.background"); // Editor marker navigation widget background.
+("editorSuggestWidget.background"); // Background color of the suggest widget.
+("editorSuggestWidget.border"); // Border color of the suggest widget.
+("editorSuggestWidget.foreground"); // Foreground color of the suggest widget.
+("editorSuggestWidget.selectedBackground"); // Background color of the selected entry in the suggest widget.
+("editorSuggestWidget.highlightForeground"); // Color of the match highlights in the suggest widget.
+("editor.wordHighlightBackground"); // Background color of a symbol during read-access, like reading a variable.
+("editor.wordHighlightStrongBackground"); // Background color of a symbol during write-access, like writing to a variable.
+("peekViewTitle.background"); // Background color of the peek view title area.
+("peekViewTitleLabel.foreground"); // Color of the peek view title.
+("peekViewTitleDescription.foreground"); // Color of the peek view title info.
+("peekView.border"); // Color of the peek view borders and arrow.
+("peekViewResult.background"); // Background color of the peek view result list.
+("peekViewResult.lineForeground"); // Foreground color for line nodes in the peek view result list.
+("peekViewResult.fileForeground"); // Foreground color for file nodes in the peek view result list.
+("peekViewResult.selectionBackground"); // Background color of the selected entry in the peek view result list.
+("peekViewResult.selectionForeground"); // Foreground color of the selected entry in the peek view result list.
+("peekViewEditor.background"); // Background color of the peek view editor.
+("peekViewEditorGutter.background"); // Background color of the gutter in the peek view editor.
+("peekViewResult.matchHighlightBackground"); // Match highlight color in the peek view result list.
+("peekViewEditor.matchHighlightBackground"); // Match highlight color in the peek view editor.
+
+/*
+var colors = require('vs/platform/registry/common/platform').Registry.data.get('base.contributions.colors').colorSchema.properties
+Object.keys(colors).forEach(function(key) {
+    var val = colors[key];
+    console.log( '//' + val.description + '\n' + key);
+})
+*/

package/website/src/website/data/playground-samples/customizing-the-appearence/exposed-colors/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Exposed Colors"
+}

package/website/src/website/data/playground-samples/customizing-the-appearence/scrollbars/sample.css

@@ -0,0 +1,13 @@
+/* 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);
+}

package/website/src/website/data/playground-samples/customizing-the-appearence/scrollbars/sample.html

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

package/website/src/website/data/playground-samples/customizing-the-appearence/scrollbars/sample.js

@@ -0,0 +1,32 @@
+// 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,
+	},
+});

package/website/src/website/data/playground-samples/customizing-the-appearence/scrollbars/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Scrollbars"
+}

package/website/src/website/data/playground-samples/customizing-the-appearence/tokens-and-colors/sample.html

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

package/website/src/website/data/playground-samples/customizing-the-appearence/tokens-and-colors/sample.js

@@ -0,0 +1,40 @@
+// Theme matching (i.e. applying a style to a token) happens in JavaScript.
+// We must therefore register the theme rules in JavaScript.
+
+// A custom theme must name its base theme (i.e. 'vs', 'vs-dark' or 'hc-black')
+// It can then choose to inherit the rules from the base theme or not
+// A rule token matching is prefix based: e.g.
+//  - string will match a token with type: string, string.double.js or string.html
+//  - string.double will match a token with type string.double but will not match string or string.html
+
+// !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!!
+
+monaco.editor.defineTheme("myCustomTheme", {
+	base: "vs", // can also be vs-dark or hc-black
+	inherit: true, // can also be false to completely replace the builtin rules
+	rules: [
+		{
+			token: "comment",
+			foreground: "ffa500",
+			fontStyle: "italic underline",
+		},
+		{ token: "comment.js", foreground: "008800", fontStyle: "bold" },
+		{ token: "comment.css", foreground: "0000ff" }, // will inherit fontStyle from `comment` above
+	],
+	colors: {
+		"editor.foreground": "#000000",
+	},
+});
+
+monaco.editor.create(document.getElementById("container"), {
+	value: getCode(),
+	language: "text/html",
+	theme: "myCustomTheme",
+});
+
+function getCode() {
+	return (
+		'<html><!-- // !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!! -->\n<head>\n	<!-- HTML comment -->\n	<style type="text/css">\n		/* CSS comment */\n	</style>\n	<script type="javascript">\n		// JavaScript comment\n	</' +
+		"script>\n</head>\n<body></body>\n</html>"
+	);
+}

package/website/src/website/data/playground-samples/customizing-the-appearence/tokens-and-colors/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Tokens And Colors"
+}

package/website/src/website/data/playground-samples/extending-language-services/chapter.json

@@ -0,0 +1,3 @@
+{
+	"title": "Extending Language Services"
+}

package/website/src/website/data/playground-samples/extending-language-services/codelens-provider-example/sample.html

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

package/website/src/website/data/playground-samples/extending-language-services/codelens-provider-example/sample.js

@@ -0,0 +1,39 @@
+var editor = monaco.editor.create(document.getElementById("container"), {
+	value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
+	language: "json",
+});
+
+var commandId = editor.addCommand(
+	0,
+	function () {
+		// services available in `ctx`
+		alert("my command is executing!");
+	},
+	""
+);
+
+monaco.languages.registerCodeLensProvider("json", {
+	provideCodeLenses: function (model, token) {
+		return {
+			lenses: [
+				{
+					range: {
+						startLineNumber: 1,
+						startColumn: 1,
+						endLineNumber: 2,
+						endColumn: 1,
+					},
+					id: "First Line",
+					command: {
+						id: commandId,
+						title: "First Line",
+					},
+				},
+			],
+			dispose: () => {},
+		};
+	},
+	resolveCodeLens: function (model, codeLens, token) {
+		return codeLens;
+	},
+});

package/website/src/website/data/playground-samples/extending-language-services/codelens-provider-example/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Codelens Provider Example"
+}

package/website/src/website/data/playground-samples/extending-language-services/color-provider-example/sample.html

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

package/website/src/website/data/playground-samples/extending-language-services/color-provider-example/sample.js

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

package/website/src/website/data/playground-samples/extending-language-services/color-provider-example/sample.json

@@ -0,0 +1,3 @@
+{
+	"title": "Color Provider Example"
+}

package/website/src/website/data/playground-samples/extending-language-services/completion-provider-example/sample.html

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