Adopt latest editor in samples

package.json

@@ -21,12 +21,12 @@
     "gulp": "^3.9.1",
     "gulp-typedoc": "^2.0.0",
     "http-server": "^0.9.0",
-    "monaco-css": "1.3.1",
+    "monaco-css": "1.3.2",
-    "monaco-editor-core": "0.8.2",
+    "monaco-editor-core": "0.9.0",
-    "monaco-html": "1.2.1",
+    "monaco-html": "1.3.0",
-    "monaco-json": "1.2.2",
+    "monaco-json": "1.3.0",
-    "monaco-languages": "0.7.0",
+    "monaco-languages": "0.8.0",
-    "monaco-typescript": "2.1.2",
+    "monaco-typescript": "2.2.0",
     "rimraf": "^2.5.2",
     "typedoc": "^0.5.0",
     "uncss": "^0.14.1"

test/playground.generated/index.html

@@ -19,7 +19,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples<br/><br/>
 <a class="loading-opts" href="playground.generated/interacting-with-the-editor-customizing-the-line-numbers.html">Interacting with the editor &gt; Customizing the line numbers</a><br/>
 <a class="loading-opts" href="playground.generated/interacting-with-the-editor-listening-to-mouse-events.html">Interacting with the editor &gt; Listening to mouse events</a><br/>
 <a class="loading-opts" href="playground.generated/interacting-with-the-editor-listening-to-key-events.html">Interacting with the editor &gt; Listening to key events</a><br/>
-<a class="loading-opts" href="playground.generated/customizing-the-appearence-exposed-css-classes.html">Customizing the appearence &gt; Exposed CSS classes</a><br/>
+<a class="loading-opts" href="playground.generated/customizing-the-appearence-exposed-colors.html">Customizing the appearence &gt; Exposed CSS classes</a><br/>
 <a class="loading-opts" href="playground.generated/customizing-the-appearence-scrollbars.html">Customizing the appearence &gt; Scrollbars</a><br/>
 <a class="loading-opts" href="playground.generated/customizing-the-appearence-tokens-and-colors.html">Customizing the appearence &gt; Tokens and colors</a><br/>
 <a class="loading-opts" href="playground.generated/creating-the-diffeditor-hello-diff-world.html">Creating the DiffEditor &gt; Hello diff world!</a><br/>

test/samples-all.generated.js

@@ -100,10 +100,6 @@ define([], function() { return[
 		"name": "sample.ini.txt",
 		"content": "# Example of a .gitconfig file\r\n\r\n[core]\r\n\trepositoryformatversion = 0\r\n\tfilemode = false\r\n\tbare = false\r\n\tlogallrefupdates = true\r\n\tsymlinks = false\r\n\tignorecase = true\r\n\thideDotFiles = dotGitOnly\r\n\r\n# Defines the master branch\r\n[branch \"master\"]\r\n\tremote = origin\r\n\tmerge = refs/heads/master\r\n"
 	},
-	{
-		"name": "sample.pug.txt",
-		"content": "doctype 5\nhtml(lang=\"en\")\n    head\n        title= pageTitle\n        script(type='text/javascript')\n            if (foo) {\n                bar()\n            }\n    body\n        // Disclaimer: You will need to turn insertSpaces to true in order for the\n            syntax highlighting to kick in properly (especially for comments)\n            Enjoy :)\n        h1 Pug - node template engine\n        #container\n            if youAreUsingPug\n                p You are amazing\n            else\n                p Get on it!"
-	},
 	{
 		"name": "sample.java.txt",
 		"content": "import java.util.ArrayList;\nimport org.junit.Test;\n\npublic class Example {\n    @Test \n    public void method() {\n       org.junit.Assert.assertTrue( \"isEmpty\", new ArrayList<Integer>().isEmpty());\n    }\n\t\n   @Test(timeout=100) public void infinity() {\n       while(true);\n    }\n }\n "
@@ -144,6 +140,10 @@ define([], function() { return[
 		"name": "sample.powershell.txt",
 		"content": "$SelectedObjectNames=@();\n$XenCenterNodeSelected = 0;\n#the object info array contains hashmaps, each of which represent a parameter set and describe a target in the XenCenter resource list\nforeach($parameterSet in $ObjInfoArray)\n{\n\tif ($parameterSet[\"class\"] -eq \"blank\")\n\t{\n\t\t#When the XenCenter node is selected a parameter set is created for each of your connected servers with the class and objUuid keys marked as blank\n\t\tif ($XenCenterNodeSelected)\n\t\t{\n\t\t\tcontinue\n\t\t}\n\t\t$XenCenterNodeSelected = 1;\n\t\t$SelectedObjectNames += \"XenCenter\"\n\t}\n\telseif ($parameterSet[\"sessionRef\"] -eq \"null\")\n\t{\n\t\t#When a disconnected server is selected there is no session information, we get null for everything except class\n\t}\n\t\t$SelectedObjectNames += \"a disconnected server\"\n\telse\n\t{\n\t\tConnect-XenServer -url $parameterSet[\"url\"] -opaqueref $parameterSet[\"sessionRef\"]\n\t\t#Use $class to determine which server objects to get\n\t\t#-properties allows us to filter the results to just include the selected object\n\t\t$exp = \"Get-XenServer:{0} -properties @{{uuid='{1}'}}\" -f $parameterSet[\"class\"], $parameterSet[\"objUuid\"]\n\t\t$obj = Invoke-Expression $exp\n\t\t$SelectedObjectNames += $obj.name_label;\n\t} \n}"
 	},
+	{
+		"name": "sample.pug.txt",
+		"content": "doctype 5\nhtml(lang=\"en\")\n    head\n        title= pageTitle\n        script(type='text/javascript')\n            if (foo) {\n                bar()\n            }\n    body\n        // Disclaimer: You will need to turn insertSpaces to true in order for the\n            syntax highlighting to kick in properly (especially for comments)\n            Enjoy :)\n        h1 Pug - node template engine\n        #container\n            if youAreUsingPug\n                p You are amazing\n            else\n                p Get on it!"
+	},
 	{
 		"name": "sample.python.txt",
 		"content": "from banana import *\r\n\r\nclass Monkey:\r\n\t# Bananas the monkey can eat.\r\n\tcapacity = 10\r\n\tdef eat(self, N):\r\n\t\t'''Make the monkey eat N bananas!'''\r\n\t\tcapacity = capacity - N*banana.size\r\n\r\n\tdef feeding_frenzy(self):\r\n\t\teat(9.25)\r\n\t\treturn \"Yum yum\""

website/index/index.js

@@ -164,10 +164,5 @@ function loadDiffSample() {
 
 function changeTheme(theme) {
 	var newTheme = (theme === 1 ? 'vs-dark' : ( theme === 0 ? 'vs' : 'hc-black' ));
-	if (editor) {
+	monaco.editor.setTheme(newTheme);
-		editor.updateOptions({ 'theme' : newTheme });
-	}
-	if (diffEditor) {
-		diffEditor.updateOptions({ 'theme': newTheme });
-	}
 }

website/monarch/monarch.js

@@ -136,7 +136,7 @@ require(["vs/editor/editor.main"], function () {
 	var currentTheme = "vs";
 	select.onchange = function () {
 		currentTheme = select.options[select.selectedIndex].value;
-		sampleEditor.updateOptions({ theme: currentTheme });
+		monaco.editor.setTheme(currentTheme);
 	};
 
 	// on resize

website/playground/new-samples/all.js

@@ -75,9 +75,9 @@ var PLAY_SAMPLES = [
 	},
 	{
 		chapter: "Customizing the appearence",
-		name: "Exposed CSS classes",
+		name: "Exposed colors",
-		id: "customizing-the-appearence-exposed-css-classes",
+		id: "customizing-the-appearence-exposed-colors",
-		path: "customizing-the-appearence/exposed-css-classes"
+		path: "customizing-the-appearence/exposed-colors"
 	},
 	{
 		chapter: "Customizing the appearence",

website/playground/new-samples/creating-the-editor/hard-wrapping/sample.js

@@ -4,13 +4,11 @@ var editor = monaco.editor.create(document.getElementById("container"), {
 	value: jsCode,
 	language: "javascript",
 
-	// If `wrappingColumn` is -1, then no wrapping occurs and
+	wordWrap: 'wordWrapColumn',
-	// long lines are rendered on one line. However, this might
+	wordWrapColumn: 40,
-	// mean that not all code is rendered (... may be used).
+
-	// If `wrappingColumn` is 0, then viewport width wrapping is set
+	// Set this to false to not auto word wrap minified files
-	// If `wrappingColumn` is > 0, then the lines will wrap at its value
+	wordWrapMinified: true,
-	// Defaults to 300
-	wrappingColumn: 40,
 
 	// try "same", "indent" or "none"
 	wrappingIndent: "indent"

website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js

@@ -0,0 +1,154 @@
+// The editor colors can be customized through CSS or through JS
+
+monaco.editor.defineTheme('myTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [{ background: 'EDF9FA' }],
+    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.
+'merge.currentHeaderBackground' // Current header background in inline merge-conflicts.
+'merge.currentContentBackground' // Current content background in inline merge-conflicts.
+'merge.incomingHeaderBackground' // Incoming header background in inline merge-conflicts.
+'merge.incomingContentBackground' // Incoming content background in inline merge-conflicts.
+'merge.commonHeaderBackground' // Common ancestor header background in inline merge-conflicts.
+'merge.commonContentBackground' // Common ancester content background in inline merge-conflicts.
+'merge.border' // Border color on headers and the splitter in inline merge-conflicts.
+'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.
+'editorRuler.foreground' // Color of the editor rulers.
+'editorCodeLens.foreground' // Foreground color of editor code lenses
+'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['base.contributions.colors'].colorSchema.properties
+Object.keys(colors).forEach(function(key) {
+    var val = colors[key];
+    console.log( '//' + val.description + '\n' + key);
+})
+*/

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

@@ -1,32 +0,0 @@
-.monaco-editor, .monaco-editor-background {
-	background: #EDF9FA;
-}
-
-/* Cursor */
-.monaco-editor .cursor {
-	background: darkred !important;
-}
-
-/* Current line */
-.monaco-editor .current-line {
-	background: rgba(0, 0, 255, 0.1);
-}
-
-/* Line Numbers */
-.monaco-editor .line-numbers {
-	background-color: #EDF9FA;
-	color: green;
-}
-
-/* Line Decorations */
-.monaco-editor .lines-decorations {
-	background-color: #EDF9FA;
-}
-
-/* Selection */
-.monaco-editor .view-overlays.focused .selected-text {
-	background: rgba(128, 0, 0, 0.2) !important;
-}
-.monaco-editor .view-overlays .selected-text {
-	background: rgba(128, 0, 0, 0.1) !important;
-}

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

@@ -1,7 +0,0 @@
-// The editor exposes a set of CSS classes that can be overwritten.
-monaco.editor.create(document.getElementById("container"), {
-	value: "My to-do list:\n* buy milk\n* buy coffee\n* write awesome code",
-	language: "text/plain",
-	fontFamily: "Arial",
-	fontSize: 20
-});

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

@@ -13,9 +13,6 @@ var editor = monaco.editor.create(document.getElementById("container"), {
 });
 
 // Explanation:
-// Try right clicking on an identifier or keyword => the action will be enabled (due to `tokensAtPosition`)
-// Try right clicking on a string => the action will be disabled (due to `tokensAtPosition`)
-// Try right clicking on whitespace => the action will be disabled (due to `wordAtPosition`)
 // Press F1 (Alt-F1 in IE) => the action will appear and run if it is enabled
 // Press Ctrl-F10 => the action will run if it is enabled
 
@@ -29,6 +26,10 @@ editor.addAction({
 	// An optional array of keybindings for the action.
 	keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
 
+	// 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',

website/playground/playground.js

@@ -262,7 +262,10 @@ function load() {
 	data.html.model = monaco.editor.createModel('html', 'html');
 
 	editor = monaco.editor.create(editorContainer, {
-		model: data.js.model
+		model: data.js.model,
+		minimap: {
+			enabled: false
+		}
 	});
 
 	var currentToken = 0;