Add language-service examples to playground

website/playground/playground.mdoc

@@ -1008,6 +1008,55 @@ function getCode() {
 =======================END
 
 
+== Completion provider example
+=======================JS
+function createDependencyProposals() {
+    // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
+    // here you could do a server side lookup
+    return [
+        {
+            label: '"lodash"',
+            kind: monaco.languages.CompletionItemKind.Function,
+            documentation: "The Lodash library exported as Node.js modules.",
+            insertText: '"lodash": "*"'
+        },
+        {
+            label: '"express"',
+            kind: monaco.languages.CompletionItemKind.Function,
+            documentation: "Fast, unopinionated, minimalist web framework",
+            insertText: '"express": "*"'
+        },
+        {
+            label: '"mkdirp"',
+            kind: monaco.languages.CompletionItemKind.Function,
+            documentation: "Recursively mkdir, like <code>mkdir -p</code>",
+            insertText: '"mkdirp": "*"'
+        }
+    ];
+}
+
+
+monaco.languages.registerCompletionItemProvider('json', {
+    provideCompletionItems: function(model, position) {
+        // find out if we are completing a property in the 'dependencies' object.
+        var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
+        var match = textUntilPosition.match(/"dependencies"\s*:\s*{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*("[^"]"]*)?$/);
+        if (match) {
+            return createDependencyProposals();
+        }
+        return [];
+    }
+});
+
+monaco.editor.create(document.getElementById("container"), {
+    value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
+    language: "json"
+});
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
 
 == Hover provider example
 =======================JS
@@ -1120,4 +1169,49 @@ monaco.editor.create(document.getElementById("container"), {
 
 =======================END
 
+== Configure JSON defaults
+=======================JS
+// Configures two JSON schemas, with references.
 
+monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+	schemas: [{
+        uri: "http://myserver/foo-schema.json",
+        schema: {
+            type: "object",
+            properties: {
+                p1: {
+                    enum: [ "v1", "v2"]
+                },
+                p2: {
+                    $ref: "http://myserver/bar-schema.json"
+                }
+            }
+        }
+    },{
+        uri: "http://myserver/bar-schema.json",
+        schema: {
+            type: "object",
+            properties: {
+                q1: {
+                    enum: [ "x1", "x2"]
+                }
+            }
+        }
+    }]
+});
+
+
+var jsonCode = [
+	'{',
+	'    "$schema": "http://myserver/foo-schema.json"',
+	"}"
+].join('\n');
+
+monaco.editor.create(document.getElementById("container"), {
+	value: jsonCode,
+	language: "json"
+});
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END

website/playground/samples/all.js

@@ -1,3 +1,3 @@
 // This is a generated file. Please do not edit directly.
 this.SAMPLES = [];
-this.ALL_SAMPLES = [{"chapter":"Creating the editor","name":"Hello world!","sampleId":"creating-the-editor-hello-world"},{"chapter":"Creating the editor","name":"Editor basic options","sampleId":"creating-the-editor-editor-basic-options"},{"chapter":"Creating the editor","name":"Hard wrapping","sampleId":"creating-the-editor-hard-wrapping"},{"chapter":"Creating the editor","name":"Syntax highlighting for HTML elements","sampleId":"creating-the-editor-syntax-highlighting-for-html-elements"},{"chapter":"Interacting with the editor","name":"Adding a command to an editor instance","sampleId":"interacting-with-the-editor-adding-a-command-to-an-editor-instance"},{"chapter":"Interacting with the editor","name":"Adding an action to an editor instance","sampleId":"interacting-with-the-editor-adding-an-action-to-an-editor-instance"},{"chapter":"Interacting with the editor","name":"Revealing a position","sampleId":"interacting-with-the-editor-revealing-a-position"},{"chapter":"Interacting with the editor","name":"Rendering glyphs in the margin","sampleId":"interacting-with-the-editor-rendering-glyphs-in-the-margin"},{"chapter":"Interacting with the editor","name":"Line and Inline decorations","sampleId":"interacting-with-the-editor-line-and-inline-decorations"},{"chapter":"Interacting with the editor","name":"Customizing the line numbers","sampleId":"interacting-with-the-editor-customizing-the-line-numbers"},{"chapter":"Interacting with the editor","name":"Listening to mouse events","sampleId":"interacting-with-the-editor-listening-to-mouse-events"},{"chapter":"Interacting with the editor","name":"Listening to key events","sampleId":"interacting-with-the-editor-listening-to-key-events"},{"chapter":"Customizing the appearence","name":"Exposed CSS classes","sampleId":"customizing-the-appearence-exposed-css-classes"},{"chapter":"Customizing the appearence","name":"Scrollbars","sampleId":"customizing-the-appearence-scrollbars"},{"chapter":"Customizing the appearence","name":"Tokens and colors","sampleId":"customizing-the-appearence-tokens-and-colors"},{"chapter":"Creating the DiffEditor","name":"Hello diff world!","sampleId":"creating-the-diffeditor-hello-diff-world"},{"chapter":"Creating the DiffEditor","name":"Multi-line example","sampleId":"creating-the-diffeditor-multi-line-example"},{"chapter":"Creating the DiffEditor","name":"Inline Diff Example","sampleId":"creating-the-diffeditor-inline-diff-example"},{"chapter":"Creating the DiffEditor","name":"Navigating a Diff","sampleId":"creating-the-diffeditor-navigating-a-diff"},{"chapter":"Extending Language Services","name":"Custom languages","sampleId":"extending-language-services-custom-languages"},{"chapter":"Extending Language Services","name":"Hover provider example","sampleId":"extending-language-services-hover-provider-example"},{"chapter":"Extending Language Services","name":"Configure JavaScript defaults","sampleId":"extending-language-services-configure-javascript-defaults"}];
+this.ALL_SAMPLES = [{"chapter":"Creating the editor","name":"Hello world!","sampleId":"creating-the-editor-hello-world"},{"chapter":"Creating the editor","name":"Editor basic options","sampleId":"creating-the-editor-editor-basic-options"},{"chapter":"Creating the editor","name":"Hard wrapping","sampleId":"creating-the-editor-hard-wrapping"},{"chapter":"Creating the editor","name":"Syntax highlighting for HTML elements","sampleId":"creating-the-editor-syntax-highlighting-for-html-elements"},{"chapter":"Interacting with the editor","name":"Adding a command to an editor instance","sampleId":"interacting-with-the-editor-adding-a-command-to-an-editor-instance"},{"chapter":"Interacting with the editor","name":"Adding an action to an editor instance","sampleId":"interacting-with-the-editor-adding-an-action-to-an-editor-instance"},{"chapter":"Interacting with the editor","name":"Revealing a position","sampleId":"interacting-with-the-editor-revealing-a-position"},{"chapter":"Interacting with the editor","name":"Rendering glyphs in the margin","sampleId":"interacting-with-the-editor-rendering-glyphs-in-the-margin"},{"chapter":"Interacting with the editor","name":"Line and Inline decorations","sampleId":"interacting-with-the-editor-line-and-inline-decorations"},{"chapter":"Interacting with the editor","name":"Customizing the line numbers","sampleId":"interacting-with-the-editor-customizing-the-line-numbers"},{"chapter":"Interacting with the editor","name":"Listening to mouse events","sampleId":"interacting-with-the-editor-listening-to-mouse-events"},{"chapter":"Interacting with the editor","name":"Listening to key events","sampleId":"interacting-with-the-editor-listening-to-key-events"},{"chapter":"Customizing the appearence","name":"Exposed CSS classes","sampleId":"customizing-the-appearence-exposed-css-classes"},{"chapter":"Customizing the appearence","name":"Scrollbars","sampleId":"customizing-the-appearence-scrollbars"},{"chapter":"Customizing the appearence","name":"Tokens and colors","sampleId":"customizing-the-appearence-tokens-and-colors"},{"chapter":"Creating the DiffEditor","name":"Hello diff world!","sampleId":"creating-the-diffeditor-hello-diff-world"},{"chapter":"Creating the DiffEditor","name":"Multi-line example","sampleId":"creating-the-diffeditor-multi-line-example"},{"chapter":"Creating the DiffEditor","name":"Inline Diff Example","sampleId":"creating-the-diffeditor-inline-diff-example"},{"chapter":"Creating the DiffEditor","name":"Navigating a Diff","sampleId":"creating-the-diffeditor-navigating-a-diff"},{"chapter":"Extending Language Services","name":"Custom languages","sampleId":"extending-language-services-custom-languages"},{"chapter":"Extending Language Services","name":"Completion provider example","sampleId":"extending-language-services-completion-provider-example"},{"chapter":"Extending Language Services","name":"Hover provider example","sampleId":"extending-language-services-hover-provider-example"},{"chapter":"Extending Language Services","name":"Configure JavaScript defaults","sampleId":"extending-language-services-configure-javascript-defaults"},{"chapter":"Extending Language Services","name":"Configure JSON defaults","sampleId":"extending-language-services-configure-json-defaults"}];

website/playground/samples/extending-language-services-completion-provider-example.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"extending-language-services-completion-provider-example","js":"//---------------------------------------------------\n// Extending Language Services > Completion provider example\n//---------------------------------------------------\n\nfunction createDependencyProposals() {\n    // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),\n    // here you could do a server side lookup\n    return [\n        {\n            label: '\"lodash\"',\n            kind: monaco.languages.CompletionItemKind.Function,\n            documentation: \"The Lodash library exported as Node.js modules.\",\n            insertText: '\"lodash\": \"*\"'\n        },\n        {\n            label: '\"express\"',\n            kind: monaco.languages.CompletionItemKind.Function,\n            documentation: \"Fast, unopinionated, minimalist web framework\",\n            insertText: '\"express\": \"*\"'\n        },\n        {\n            label: '\"mkdirp\"',\n            kind: monaco.languages.CompletionItemKind.Function,\n            documentation: \"Recursively mkdir, like <code>mkdir -p</code>\",\n            insertText: '\"mkdirp\": \"*\"'\n        }\n    ];\n}\n\n\nmonaco.languages.registerCompletionItemProvider('json', {\n    provideCompletionItems: function(model, position) {\n        // find out if we are completing a property in the 'dependencies' object.\n        var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});\n        var match = textUntilPosition.match(/\"dependencies\"\\s*:\\s*{\\s*(\"[^\"]*\"\\s*:\\s*\"[^\"]*\"\\s*,\\s*)*(\"[^\"]\"]*)?$/);\n        if (match) {\n            return createDependencyProposals();\n        }\n        return [];\n    }\n});\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n    value: \"{\\n\\t\\\"dependencies\\\": {\\n\\t\\t\\n\\t}\\n}\\n\",\n    language: \"json\"\n});","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

website/playground/samples/extending-language-services-configure-json-defaults.js

@@ -0,0 +1,3 @@
+// This is a generated file. Please do not edit directly.
+var SAMPLES = this.SAMPLES || [];
+SAMPLES.push({"id":"extending-language-services-configure-json-defaults","js":"//---------------------------------------------------\n// Extending Language Services > Configure JSON defaults\n//---------------------------------------------------\n\n// Configures two JSON schemas, with references.\n\nmonaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n\tschemas: [{\n        uri: \"http://myserver/foo-schema.json\",\n        schema: {\n            type: \"object\",\n            properties: {\n                p1: {\n                    enum: [ \"v1\", \"v2\"]\n                },\n                p2: {\n                    $ref: \"http://myserver/bar-schema.json\"\n                }\n            }\n        }\n    },{\n        uri: \"http://myserver/bar-schema.json\",\n        schema: {\n            type: \"object\",\n            properties: {\n                q1: {\n                    enum: [ \"x1\", \"x2\"]\n                }\n            }\n        }\n    }]\n});\n\n\nvar jsonCode = [\n\t'{',\n\t'    \"$schema\": \"http://myserver/foo-schema.json\"',\n\t\"}\"\n].join('\\n');\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsonCode,\n\tlanguage: \"json\"\n});","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});