From 5e04caa81678de12fbcae0b9947f34f402d11aab Mon Sep 17 00:00:00 2001 From: Alex Dima Date: Thu, 16 Jun 2016 16:44:09 +0200 Subject: [PATCH] Add playground samples --- gulpfile.js | 146 ++- package.json | 2 +- .../editor.d.ts.txt => monaco.d.ts.txt} | 39 +- website/playground/playground.js | 4 +- website/playground/playground.mdoc | 842 ++++-------------- website/playground/samples/all.js | 3 + ...reating-the-diffeditor-hello-diff-world.js | 3 + ...ting-the-diffeditor-inline-diff-example.js | 3 + ...ating-the-diffeditor-multi-line-example.js | 3 + ...eating-the-diffeditor-navigating-a-diff.js | 3 + ...reating-the-editor-editor-basic-options.js | 3 + .../creating-the-editor-hard-wrapping.js | 3 + .../creating-the-editor-hello-world.js | 3 + ...r-syntax-highlighting-for-html-elements.js | 3 + ...zing-the-appearence-exposed-css-classes.js | 3 + .../customizing-the-appearence-scrollbars.js | 3 + ...mizing-the-appearence-tokens-and-colors.js | 3 + ...-services-configure-javascript-defaults.js | 3 + ...ding-language-services-custom-languages.js | 3 + ...-adding-a-command-to-an-editor-instance.js | 3 + ...-adding-an-action-to-an-editor-instance.js | 3 + ...the-editor-customizing-the-line-numbers.js | 3 + ...-the-editor-line-and-inline-decorations.js | 3 + ...with-the-editor-listening-to-key-events.js | 3 + ...th-the-editor-listening-to-mouse-events.js | 3 + ...e-editor-rendering-glyphs-in-the-margin.js | 3 + ...ng-with-the-editor-revealing-a-position.js | 3 + 27 files changed, 413 insertions(+), 686 deletions(-) rename website/playground/{samples/editor.d.ts.txt => monaco.d.ts.txt} (99%) create mode 100644 website/playground/samples/all.js create mode 100644 website/playground/samples/creating-the-diffeditor-hello-diff-world.js create mode 100644 website/playground/samples/creating-the-diffeditor-inline-diff-example.js create mode 100644 website/playground/samples/creating-the-diffeditor-multi-line-example.js create mode 100644 website/playground/samples/creating-the-diffeditor-navigating-a-diff.js create mode 100644 website/playground/samples/creating-the-editor-editor-basic-options.js create mode 100644 website/playground/samples/creating-the-editor-hard-wrapping.js create mode 100644 website/playground/samples/creating-the-editor-hello-world.js create mode 100644 website/playground/samples/creating-the-editor-syntax-highlighting-for-html-elements.js create mode 100644 website/playground/samples/customizing-the-appearence-exposed-css-classes.js create mode 100644 website/playground/samples/customizing-the-appearence-scrollbars.js create mode 100644 website/playground/samples/customizing-the-appearence-tokens-and-colors.js create mode 100644 website/playground/samples/extending-language-services-configure-javascript-defaults.js create mode 100644 website/playground/samples/extending-language-services-custom-languages.js create mode 100644 website/playground/samples/interacting-with-the-editor-adding-a-command-to-an-editor-instance.js create mode 100644 website/playground/samples/interacting-with-the-editor-adding-an-action-to-an-editor-instance.js create mode 100644 website/playground/samples/interacting-with-the-editor-customizing-the-line-numbers.js create mode 100644 website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js create mode 100644 website/playground/samples/interacting-with-the-editor-listening-to-key-events.js create mode 100644 website/playground/samples/interacting-with-the-editor-listening-to-mouse-events.js create mode 100644 website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js create mode 100644 website/playground/samples/interacting-with-the-editor-revealing-a-position.js diff --git a/gulpfile.js b/gulpfile.js index 7e23beec..9c2b6bb1 100644 --- a/gulpfile.js +++ b/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); }); -} \ No newline at end of file +} + + +// --- 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); + +}); diff --git a/package.json b/package.json index a069df43..3a626818 100644 --- a/package.json +++ b/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" diff --git a/website/playground/samples/editor.d.ts.txt b/website/playground/monaco.d.ts.txt similarity index 99% rename from website/playground/samples/editor.d.ts.txt rename to website/playground/monaco.d.ts.txt index e0a618c5..861ba5cd 100644 --- a/website/playground/samples/editor.d.ts.txt +++ b/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(key: string, defaultValue: T): IKeybindingContextKey; + addAction(descriptor: IActionDescriptor): void; + } + + export interface IStandaloneDiffEditor extends IDiffEditor { + addCommand(keybinding: number, handler: ICommandHandler, context: string): string; + createContextKey(key: string, defaultValue: T): IKeybindingContextKey; + addAction(descriptor: IActionDescriptor): void; + } + export interface ICommandHandler { + (...args: any[]): void; + } + + export interface IKeybindingContextKey { + set(value: T): void; + reset(): void; + } + export interface IEditorOverrideServices { } diff --git a/website/playground/playground.js b/website/playground/playground.js index 3198f5fc..817ff4d1 100644 --- a/website/playground/playground.js +++ b/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;', diff --git a/website/playground/playground.mdoc b/website/playground/playground.mdoc index 085e2156..f6330a65 100644 --- a/website/playground/playground.mdoc +++ b/website/playground/playground.mdoc @@ -4,15 +4,12 @@ =======================JS // The Monaco Editor can be easily created, given an // empty container and an options literal. -// Two members of the literal are "value" and "mode". +// Two members of the literal are "value" and "language". // The editor takes the full size of its container. -var container = document.getElementById("container"); -var jsCode = "function hello() {\n\talert('Hello world!');\n}"; - -Monaco.Editor.create(container, { - value: jsCode, - mode: "text/javascript" +monaco.editor.create(document.getElementById("container"), { + value: "function hello() {\n\talert('Hello world!');\n}", + language: "javascript" }); =======================HTML @@ -26,53 +23,24 @@ Monaco.Editor.create(container, { == Editor basic options =======================JS // Through the options literal, the behaviour of the editor can be easily customized. +// Here are a few examples of config options that can be passed to the editor. +// You can also call editor.updateOptions at any time to change the options. -var container = document.getElementById("container"); -var jsCode = "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line"; +var editor = monaco.editor.create(document.getElementById("container"), { + value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line", + language: "javascript", -// Here are the available config options that can be passed -// to the editor and their default values. Try changing them! -var editor = Monaco.Editor.create(container, { - value: jsCode, - - mode: "text/javascript", - - // Show line numbers in the gutter ? - lineNumbers: true, - - // Tab size in characters - tabSize: "auto", - - // Insert spaces instead of tabs ? - insertSpaces: "auto", - - // Rounded corners for rendering selection ? - roundedSelection: true, - - // Scrolling one page after the last line ? - scrollBeyondLastLine: true, - - // Scrollbars rendering - scrollbar: { - // other values are "visible" or "hidden" - vertical: "auto", - horizontal: "auto" - }, - - // Automatic Layout: Should a timer be installed - // which fires every 100ms to scan the editor's - // container for size changes ? - // Setting to true has a severe performance penalty. - // One can call .layout() on the editor manually. - automaticLayout: false, - - // Is the editor in read only mode ? + lineNumbers: false, + roundedSelection: false, + scrollBeyondLastLine: false, readOnly: false, - - // What theme should be used ? - // Values supported: vs, vs-dark - theme: "vs", + theme: "vs-dark", }); +setTimeout(function() { + editor.updateOptions({ + lineNumbers: true + }); +}, 2000); =======================HTML
@@ -85,12 +53,11 @@ var editor = Monaco.Editor.create(container, { == Hard wrapping =======================JS -var container = document.getElementById("container"); -var jsCode = "// jqeuery-min excerpt:\n// 1 2 3 4\n//34567890123456789012345678901234567890\n(function(e,t){var n,r,i=typeof t,o=e.document,a=e.location,s=e.jQuery,u=e.$,l={},c=[],p=\"1.9.1\",f=c.concat,d=c.push,h=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,b=function(e,t){return new b.fn.init(e,t,r)},x=/[+-]?(?:\\d*\\.|)\\d+(?:[eE][+-]?\\d+|)/.source,w=/\\S+/g,T=/^[\\s\\uFEFF\\xA0]+|[\\s\\uFEFF\\xA0]+$/g,N=/^(?:(<[\\w\\W]+>)[^>]*|#([\\w-]*))$/,C=/^<(\\w+)\\s*\\/?>(?:<\\/\\1>|)$/,k=/^[\\],:{}\\s]*$/,E=/(?:^|:|,)(?:\\s*\\[)+/g,S=/\\\\(?:[\"\\\\\\/bfnrt]|u[\\da-fA-F]{4})/g,A=/\"[^\"\\\\\\r\\n]*\"|true|false|null|-?(?:\\d+\\.|)\\d+(?:[eE][+-]?\\d+|)/g,j=/^-ms-/,D=/-([\\da-z])/gi,L=function(e,t){return t.toUpperCase()},H=function(e){(o.addEventListener||\"load\"===e.type||\"complete\"===o.readyState)&&(q(),b.ready())},q=function(){o.addEventListener?(o.removeEventListener(\"DOMContentLoaded\",H,!1),e.removeEventListener(\"load\",H,!1)):(o.detachEvent(\"onreadystatechange\",H),e.detachEvent(\"onload\",H))};b.fn=b.prototype={jquery:p,constructor:b,init:function(e,n,r){var i,a;if(!e)return this;if(\"string\"==typeof e){if(i=\"<\"===e.charAt(0)&&\">\"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof b?n[0]:n,b.merge(this,b.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:o,!0)),C.test(i[1])&&b.isPlainObject(n))for(i in n)b.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(a=o.getElemen"; +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(container, { +var editor = monaco.editor.create(document.getElementById("container"), { value: jsCode, - mode: "text/javascript", + language: "javascript", // If `wrappingColumn` is -1, then no wrapping occurs and // long lines are rendered on one line. However, this might @@ -100,11 +67,8 @@ var editor = Monaco.Editor.create(container, { // Defaults to 300 wrappingColumn: 40, - // If more than half of the lines are on lines longer than - // `longLineBoundary`, the editor forces viewport width wrapping - // By default the value is 300, but here we're using a larger - // value to circumvent this default behavior - longLineBoundary: 1e4 + // try "same", "indent" or "none" + wrappingIndent: "indent" }); =======================HTML @@ -117,14 +81,10 @@ var editor = Monaco.Editor.create(container, { == Syntax highlighting for HTML elements =======================JS -// The syntax highlighting functionality can be used independently of the editor. -require(["vs/editor/editor.main"], function ($) { - - // 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')); -}); +// The colorizeElement-function will read the data-lang-attribute +// from the element to select the correct language mode. In this +// sample it is text/css. +monaco.editor.colorizeElement(document.getElementById('code')); =======================HTML 
@@ -177,36 +137,32 @@ code {
 
 = Interacting with the editor
 
-== Adding a command
+== Adding a command to an editor instance
 
 =======================JS
-var KeyMod = require('vs/base/common/keyCodes').KeyMod;
-var KeyCode = require('vs/base/common/keyCodes').KeyCode;
-
-var container = document.getElementById("container");
 var jsCode = [
-    '"use strict";',
-    'function Person(age) {',
-    '	if (age) {',
-    '		this.age = age;',
-    '	}',
-    '}',
-    'Person.prototype.getAge = function () {',
-    '	return this.age;',
-    '};'
+	'"use strict";',
+	'function Person(age) {',
+	'	if (age) {',
+	'		this.age = age;',
+	'	}',
+	'}',
+	'Person.prototype.getAge = function () {',
+	'	return this.age;',
+	'};'
 ].join('\n');
 
-var editor = Monaco.Editor.create(container, {
-    value: jsCode,
-    mode: "text/javascript"
+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(KeyCode.Tab, function(ctx, args) {
+editor.addCommand(monaco.KeyCode.Tab, function() {
     // services available in `ctx`
-    alert('my command is executing with context: ' + JSON.stringify(args.context));
+    alert('my command is executing!');
 
 }, 'myCondition1 && myCondition2')
 
@@ -222,16 +178,10 @@ setTimeout(function() {
 
 =======================END
 
-== Adding an action
+== Adding an action to an editor instance
 
 =======================JS
-var KeyMod = require('vs/base/common/keyCodes').KeyMod;
-var KeyCode = require('vs/base/common/keyCodes').KeyCode;
-
-var container = document.getElementById("container");
-var jsCode = "var array = [3, 4, 5];\n";
-
-var editor = Monaco.Editor.create(container, {
+var editor = monaco.editor.create(document.getElementById("container"), {
 	value: [
 		'',
 		'class Example {',
@@ -242,7 +192,7 @@ var editor = Monaco.Editor.create(container, {
 		'\t}',
 		'}'
 	].join('\n'),
-	mode: "text/typescript"
+	language: "typescript"
 });
 
 // Explanation:
@@ -260,7 +210,7 @@ editor.addAction({
 	label: 'My Label!!!',
 
 	// An optional array of keybindings for the action.
-	keybindings: [KeyMod.CtrlCmd | KeyCode.F10],
+	keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
 
 	keybindingContext: null,
 
@@ -314,46 +264,9 @@ editor.addAction({
 
 
 
-== Inserting a code snippet
-=======================JS
-// There is a way to insert a snippet. The snippet syntax is very easy, use {{ and }} to indicate a placeholder.
-// Use the same value inside {{ and }} to have linked editing! That value will be the default entered text.
-// Use an empty placeholder {{}} to indicate the end position of the cursor if the user hits Enter.
-var container = document.getElementById("container");
-var jsCode = "var array = [3, 4, 5];\n";
-
-var editor = Monaco.Editor.create(container, {
-	value: jsCode,
-	mode: "text/javascript"
-});
-
-var snippet = require("vs/editor/contrib/snippet/common/snippet");
-
-var template =
-	'for (var {{index}} = 0; {{index}} < {{array}}.length; {{index}}++) {\n' +
-	'\tvar {{element}} = {{array}}[{{index}}];\n' +
-	'\t{{}}\n' +
-	'}';
-
-editor.setPosition({ lineNumber: 2, column :1 });
-
-snippet.getSnippetController(editor).run(new snippet.CodeSnippet(template), 0, 0);
-
-editor.focus();
-
-
-=======================HTML
-

-
-=======================END
-
-
-
-
 == Revealing a position
 
 =======================JS
-var container = document.getElementById("container");
 var jsCodeArr = [
 	'// ------------------------------',
 	'// ------------------------------',
@@ -375,20 +288,25 @@ 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 jsCode = jsCodeArr.join('\n');
-
-var editor = Monaco.Editor.create(container, {
-	value: jsCode,
-	mode: "text/javascript"
+var editor = monaco.editor.create(document.getElementById("container"), {
+	value: jsCodeArr.join('\n'),
+	language: "javascript"
 });
 
-var shouldRevealLineInCenterOfViewport = true;
-var shouldRevealColumn = true;
-
-editor.revealPosition({
-	lineNumber: 50,
-	column: 120
-}, shouldRevealLineInCenterOfViewport, shouldRevealColumn);
+editor.revealPositionInCenter({ lineNumber: 50, column: 120 });
+// Also see:
+// - editor.revealLine
+// - editor.revealLineInCenter
+// - editor.revealLineInCenterIfOutsideViewport
+// - editor.revealLines
+// - editor.revealLinesInCenter
+// - editor.revealLinesInCenterIfOutsideViewport
+// - editor.revealPosition
+// - editor.revealPositionInCenter
+// - editor.revealPositionInCenterIfOutsideViewport
+// - editor.revealRange
+// - editor.revealRangeInCenter
+// - editor.revealRangeInCenterIfOutsideViewport
 
 =======================HTML
 

@@ -401,7 +319,6 @@ editor.revealPosition({
 == Rendering glyphs in the margin
 
 =======================JS
-var container = document.getElementById("container");
 var jsCode = [
 	'"use strict";',
 	'function Person(age) {',
@@ -414,9 +331,9 @@ var jsCode = [
 	'};'
 ].join('\n');
 
-var editor = Monaco.Editor.create(container, {
+var editor = monaco.editor.create(document.getElementById("container"), {
 	value: jsCode,
-	mode: "text/javascript",
+	language: "javascript",
 	glyphMargin: true
 });
 
@@ -455,7 +372,6 @@ var decorationId = editor.changeDecorations(function(changeAccessor) {
 == Line and Inline decorations
 
 =======================JS
-var container = document.getElementById("container");
 var jsCode = [
 	'"use strict";',
 	'function Person(age) {',
@@ -468,9 +384,9 @@ var jsCode = [
 	'};'
 ].join('\n');
 
-var editor = Monaco.Editor.create(container, {
+var editor = monaco.editor.create(document.getElementById("container"), {
 	value: jsCode,
-	mode: "text/javascript"
+	language: "javascript"
 });
 
 var lineDecorationId = editor.changeDecorations(function(changeAccessor) {
@@ -529,7 +445,6 @@ function lineNumbersFunc(originalLineNumber) {
 	return originalLineNumber;
 }
 
-var container = document.getElementById("container");
 var jsCode = [
 	'"use strict";',
 	'function Person(age) {',
@@ -542,9 +457,9 @@ var jsCode = [
 	'};'
 ].join('\n');
 
-var editor = Monaco.Editor.create(container, {
+var editor = monaco.editor.create(document.getElementById("container"), {
 	value: jsCode,
-	mode: "text/javascript",
+	language: "javascript",
 	lineNumbers: lineNumbersFunc
 });
 
@@ -559,187 +474,9 @@ var editor = Monaco.Editor.create(container, {
 
 
 
-== Customizing the hover
+== Listening to mouse events
 
 =======================JS
-require([
-	'require',
-	'vs/base/common/winjs.base',
-	'vs/editor/common/core/range',
-	'vs/editor/contrib/hover/browser/hoverOperation',
-	'vs/editor/contrib/hover/browser/hoverWidgets'
-], function(require, WinJS) {
-
-	var Range = require('vs/editor/common/core/range').Range;
-	var HoverOperation = require('vs/editor/contrib/hover/browser/hoverOperation').HoverOperation;
-	var ContentHoverWidget = require('vs/editor/contrib/hover/browser/hoverWidgets').ContentHoverWidget;
-
-	var ContentComputer = WinJS.Class.define(function ContentComputer(range, text, tokenType) {
-	}, {
-
-		setContext: function (range, text, tokenType) {
-			this.a = range.startLineNumber;
-			this.b = range.startColumn;
-			this.result = [
-				'Text: ' + text,
-				'Token type: ' + tokenType
-			];
-		},
-
-		computeAsync: function () {
-			return WinJS.Promise.timeout(500).then(function() {
-				return this.a + ' x ' + this.b + ' = ' + (this.a * this.b);
-			}.bind(this));
-		},
-
-		computeSync: function () {
-			return this.a + ' + ' + this.b + ' = ' + (this.a + this.b);
-		},
-
-		onResult: function(r) {
-			this.result.push(r);
-		},
-
-		getResult: function() {
-			return this.result;
-		}
-	});
-
-	var ContentWidget = WinJS.Class.derive(ContentHoverWidget, function ContentWidget(editor) {
-		ContentHoverWidget.call(this, 'my.hover.widget.id', editor);
-		this.lastRange = null;
-		this.computer = new ContentComputer();
-		this.hoverOperation = new HoverOperation(
-			this.computer,
-			this.withResult.bind(this),
-			null,
-			this.withResult.bind(this)
-		);
-	}, {
-
-		startShowingAt: function (range, text, tokenType) {
-			if (this.lastRange && this.lastRange.equalsRange(range)) {
-				// We have to show the widget at the exact same range as before, so no work is needed
-				return;
-			}
-
-			this.hoverOperation.cancel();
-			this.hide();
-
-			this.lastRange = range;
-			this.computer.setContext(range, text, tokenType);
-			this.hoverOperation.start();
-		},
-
-		hide: function () {
-			this.lastRange = null;
-			if (this.hoverOperation) {
-				this.hoverOperation.cancel();
-			}
-			ContentHoverWidget.prototype.hide.call(this);
-		},
-
-		withResult: function (someResult) {
-			this._domNode.innerHTML = someResult.join('
');
-			this.showAt({
-				lineNumber: this.lastRange.startLineNumber,
-				column: this.lastRange.startColumn
-			});
-		}
-	});
-
-	var addCustomHoverTo = (function() {
-
-		var editor = null;
-		var contentWidget = null;
-
-		function hide() {
-			contentWidget.hide();
-		}
-
-		function onMouseMove(e) {
-			var targetType = e.target.type;
-
-			if (targetType === Monaco.Editor.MouseTargetType.CONTENT_WIDGET && e.target.detail === 'my.hover.widget.id') {
-				// mouse moved on top of content hover widget
-				return;
-			}
-
-			if (targetType === Monaco.Editor.MouseTargetType.CONTENT_TEXT) {
-				// Extract current token under cursor
-				var currentTokenInfo = null;
-				editor.getModel().tokenIterator(e.target.position, function (it) {
-					currentTokenInfo = it.next();
-				});
-
-				if(currentTokenInfo) {
-					var showRange = new Range(currentTokenInfo.lineNumber, currentTokenInfo.startColumn, currentTokenInfo.lineNumber, currentTokenInfo.endColumn);
-
-					contentWidget.startShowingAt(showRange, editor.getModel().getValueInRange(showRange), currentTokenInfo.token.type);
-				}
-			} else {
-				hide();
-			}
-		}
-
-		function setup(ed) {
-			editor = ed;
-			contentWidget = new ContentWidget(editor);
-
-			editor.addListener(Monaco.Editor.EventType.MouseMove, onMouseMove);
-			editor.addListener(Monaco.Editor.EventType.MouseLeave, hide);
-			editor.addListener(Monaco.Editor.EventType.KeyDown, hide);
-			editor.addListener(Monaco.Editor.EventType.ModelChanged, hide);
-			editor.addListener('scroll', hide);
-		}
-
-		return setup;
-	})();
-
-
-	var editor = createEditor();
-	addCustomHoverTo(editor);
-});
-
-function createEditor() {
-
-	var container = document.getElementById("container");
-	var jsCode = [
-		'"use strict";',
-		'function Person(age) {',
-		'	if (age) {',
-		'		this.age = age;',
-		'	}',
-		'}',
-		'Person.prototype.getAge = function () {',
-		'	return this.age;',
-		'};'
-	].join('\n');
-
-	return Monaco.Editor.create(container, {
-		value: jsCode,
-		mode: "text/javascript",
-		glyphMargin: true,
-		hover: false
-	});
-
-}
-
-=======================HTML
-

-
-=======================CSS
-
-
-=======================END
-
-
-
-
-== Listening to Mouse Events
-
-=======================JS
-var container = document.getElementById("container");
 var jsCode = [
 	'"use strict";',
 	'function Person(age) {',
@@ -752,9 +489,9 @@ var jsCode = [
 	'};'
 ].join('\n');
 
-var editor = Monaco.Editor.create(container, {
+var editor = monaco.editor.create(document.getElementById("container"), {
 	value: jsCode,
-	mode: "text/javascript",
+	language: "javascript",
 	glyphMargin: true,
 	nativeContextMenu: false
 });
@@ -804,7 +541,7 @@ var contentWidget = {
 				lineNumber: 7,
 				column: 8
 			},
-			preference: [Monaco.Editor.ContentWidgetPositionPreference.ABOVE, Monaco.Editor.ContentWidgetPositionPreference.BELOW]
+			preference: [monaco.editor.ContentWidgetPositionPreference.ABOVE, monaco.editor.ContentWidgetPositionPreference.BELOW]
 		};
 	}
 };
@@ -843,16 +580,16 @@ function showEvent(str) {
 
 
 
-editor.addListener(Monaco.Editor.EventType.MouseMove, function (e) {
+editor.onMouseMove(function (e) {
 	showEvent('mousemove - ' + e.target.toString());
 });
-editor.addListener(Monaco.Editor.EventType.MouseDown, function (e) {
+editor.onMouseDown(function (e) {
 	showEvent('mousedown - ' + e.target.toString());
 });
-editor.addListener(Monaco.Editor.EventType.ContextMenu, function (e) {
+editor.onContextMenu(function (e) {
 	showEvent('contextmenu - ' + e.target.toString());
 });
-editor.addListener(Monaco.Editor.EventType.MouseLeave, function (e) {
+editor.onMouseLeave(function (e) {
 	showEvent('mouseleave');
 });
 
@@ -874,27 +611,17 @@ editor.addListener(Monaco.Editor.EventType.MouseLeave, function (e) {
 
 
 
-== Listening on keydown events
+== Listening to key events
 
 =======================JS
-var KeyMod = require('vs/base/common/keyCodes').KeyMod;
-var KeyCode = require('vs/base/common/keyCodes').KeyCode;
-
-var container = document.getElementById("container");
-var jsCode = "function hello() {\n\talert('Hello world!');\n}";
-
-var editor = Monaco.Editor.create(container, {
-	value: jsCode,
-	mode: "text/javascript"
+var editor = monaco.editor.create(document.getElementById("container"), {
+	value: "function hello() {\n\talert('Hello world!');\n}",
+	language: "javascript"
 });
 
-function onF9() {
+var myBinding = editor.addCommand(monaco.KeyCode.F9, function() {
 	alert('F9 pressed!');
-	// prevent default
-	return true;
-}
-
-var myBinding = editor.addCommand(KeyCode.F9, onF9);
+});
 
 // When cleaning up remember to call myBinding.dispose()
 
@@ -911,32 +638,24 @@ var myBinding = editor.addCommand(KeyCode.F9, onF9);
 == Exposed CSS classes
 =======================JS
 // The editor exposes a set of CSS classes that can be overwritten.
-var container = document.getElementById("container");
-Monaco.Editor.create(container, {
+monaco.editor.create(document.getElementById("container"), {
 	value: "My to-do list:\n* buy milk\n* buy coffee\n* write awesome code",
-	mode: "text/plain"
+	language: "text/plain",
+	fontFamily: "Arial",
+	fontSize: 20
 });
 
 =======================HTML
 

 
 =======================CSS
-/* The editor */
-.monaco-editor {
-	font-family: Arial;
-	font-size: 20px;
-	line-height: inherit;
-	background: #EDF9FA;
-}
-
-/* The editor's background */
-.monaco-editor-background {
+.monaco-editor, .monaco-editor-background {
 	background: #EDF9FA;
 }
 
 /* Cursor */
 .monaco-editor .cursor {
-	background: darkblue;
+	background: darkred !important;
 }
 
 /* Current line */
@@ -956,22 +675,13 @@ Monaco.Editor.create(container, {
 }
 
 /* Selection */
-.monaco-editor .dynamic.focused > .selections-layer > .selected-text {
+.monaco-editor .view-overlays.focused .selected-text {
 	background: rgba(128, 0, 0, 0.2) !important;
 }
-.monaco-editor .dynamic > .selections-layer > .selected-text {
+.monaco-editor .view-overlays .selected-text {
 	background: rgba(128, 0, 0, 0.1) !important;
 }
 
-/* Word Highlight */
-.monaco-editor .wordHighlight {
-	background-color: rgba(0, 0, 0, 0);
-	-webkit-animation: none;
-	-moz-animation: none;
-	-ms-animation: none;
-	animation: none;
-}
-
 =======================END
 
 
@@ -981,12 +691,11 @@ Monaco.Editor.create(container, {
 
 =======================JS
 // Remember to check out the CSS too!
-var container = document.getElementById("container");
-var htmlCode = "\n\n	\n	\n