diff --git a/website/playground/playground.mdoc b/website/playground/playground.mdoc index 0ae0c8f9..d34fb6e2 100644 --- a/website/playground/playground.mdoc +++ b/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 mkdir -p", + 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 +
+ +=======================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 +
+ +=======================END diff --git a/website/playground/samples/all.js b/website/playground/samples/all.js index b3a84cb1..37200140 100644 --- a/website/playground/samples/all.js +++ b/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"}]; \ No newline at end of file +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"}]; \ No newline at end of file diff --git a/website/playground/samples/extending-language-services-completion-provider-example.js b/website/playground/samples/extending-language-services-completion-provider-example.js new file mode 100644 index 00000000..1e5090f8 --- /dev/null +++ b/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 mkdir -p\",\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":"
\n","css":""}); diff --git a/website/playground/samples/extending-language-services-configure-json-defaults.js b/website/playground/samples/extending-language-services-configure-json-defaults.js new file mode 100644 index 00000000..5545e9b3 --- /dev/null +++ b/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":"
\n","css":""});