Extract playground samples from mdoc, add possiblity to run them from source

website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.html

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

website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.js

@@ -0,0 +1,8 @@
+var originalModel = monaco.editor.createModel("heLLo world!", "text/plain");
+var modifiedModel = monaco.editor.createModel("hello orlando!", "text/plain");
+
+var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"));
+diffEditor.setModel({
+	original: originalModel,
+	modified: modifiedModel
+});

website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.html

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

website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.js

@@ -0,0 +1,14 @@
+var originalModel = monaco.editor.createModel("This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text", "text/plain");
+var modifiedModel = monaco.editor.createModel("just some text\nabcz\nzzzzefgh\nSome more text\nThis line is removed on the left.", "text/plain");
+
+var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), {
+	// You can optionally disable the resizing
+	enableSplitViewResizing: false,
+
+	// Render the diff inline
+	renderSideBySide: false
+});
+diffEditor.setModel({
+	original: originalModel,
+	modified: modifiedModel
+});

website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.html

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

website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.js

@@ -0,0 +1,11 @@
+var originalModel = monaco.editor.createModel("This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text", "text/plain");
+var modifiedModel = monaco.editor.createModel("just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.", "text/plain");
+
+var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), {
+	// You can optionally disable the resizing
+	enableSplitViewResizing: false
+});
+diffEditor.setModel({
+	original: originalModel,
+	modified: modifiedModel
+});

website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.html

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

website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.js

@@ -0,0 +1,19 @@
+// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.
+var originalModel = monaco.editor.createModel("just some text\n\nHello World\n\nSome more text", "text/plain");
+var modifiedModel = monaco.editor.createModel("just some Text\n\nHello World\n\nSome more changes", "text/plain");
+
+
+var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"));
+diffEditor.setModel({
+	original: originalModel,
+	modified: modifiedModel
+});
+
+var navi = monaco.editor.createDiffNavigator(diffEditor, {
+	followsCaret: true, // resets the navigator state when the user selects something in the editor
+	ignoreCharChanges: true // jump from line to line
+});
+
+window.setInterval(function() {
+	navi.next();
+}, 2000);