Fixes #87: Adopt deltaDecorations in samples

website/playground/playground.mdoc

@@ -337,21 +337,18 @@ var editor = monaco.editor.create(document.getElementById("container"), {
 	glyphMargin: true
 });
 
-var decorationId = editor.changeDecorations(function(changeAccessor) {
-	return changeAccessor.addDecoration({
-		startLineNumber: 3,
-		startColumn: 1,
-		endLineNumber: 3,
-		endColumn: 1
-	}, {
-		isWholeLine: true,
-		className: 'myContentClass',
-		glyphMarginClassName: 'myGlyphMarginClass'
-	});
-});
-
+var decorations = editor.deltaDecorations([], [
+	{
+		range: new monaco.Range(3,1,3,1),
+		options: {
+			isWholeLine: true,
+			className: 'myContentClass',
+			glyphMarginClassName: 'myGlyphMarginClass'
+		}
+	}
+]);
 
-// You can now use `decorationId` to change or remove the decoration
+// You can now use `decorations` to change or remove the decoration
 
 =======================HTML
 <div id="container" style="height:100%;"></div>
@@ -389,28 +386,10 @@ var editor = monaco.editor.create(document.getElementById("container"), {
 	language: "javascript"
 });
 
-var lineDecorationId = editor.changeDecorations(function(changeAccessor) {
-	return changeAccessor.addDecoration({
-		startLineNumber: 3,
-		startColumn: 1,
-		endLineNumber: 5,
-		endColumn: 1
-	}, {
-		isWholeLine: true,
-		linesDecorationsClassName: 'myLineDecoration'
-	});
-});
-
-var inlineDecorationId = editor.changeDecorations(function(changeAccessor) {
-	return changeAccessor.addDecoration({
-		startLineNumber: 7,
-		startColumn: 1,
-		endLineNumber: 7,
-		endColumn: 24
-	}, {
-		inlineClassName: 'myInlineDecoration'
-	});
-});
+var decorations = editor.deltaDecorations([], [
+	{ range: new monaco.Range(3,1,5,1), options: { isWholeLine: true, linesDecorationsClassName: 'myLineDecoration' }},
+	{ range: new monaco.Range(7,1,7,24), options: { inlineClassName: 'myInlineDecoration' }},
+]);
 
 =======================HTML
 <div id="container" style="height:100%;"></div>
@@ -496,18 +475,16 @@ var editor = monaco.editor.create(document.getElementById("container"), {
 	nativeContextMenu: false
 });
 
-var decorationId = editor.changeDecorations(function(changeAccessor) {
-	return changeAccessor.addDecoration({
-		startLineNumber: 3,
-		startColumn: 1,
-		endLineNumber: 3,
-		endColumn: 1
-	}, {
-		isWholeLine: true,
-		className: 'myContentClass',
-		glyphMarginClassName: 'myGlyphMarginClass'
-	});
-});
+var decorations = editor.deltaDecorations([], [
+	{
+		range: new monaco.Range(3,1,3,1),
+		options: {
+			isWholeLine: true,
+			className: 'myContentClass',
+			glyphMarginClassName: 'myGlyphMarginClass'
+		}
+	}
+]);
 
 // Add a zone to make hit testing more interesting
 var viewZoneId = null;

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

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

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

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