<!DOCTYPE html> <!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples --> <html> <head> <base href=".."> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <style> /*----------------------------------------SAMPLE CSS START*/ /*----------------------------------------SAMPLE CSS END*/ </style> <a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/> THIS IS A GENERATED FILE VIA gulp generate-test-samples <div id="bar" style="margin-bottom: 6px;"></div> <div style="clear:both"></div> <div id="outer-container" style="width:800px;height:450px;border: 1px solid grey"> <!-- ----------------------------------------SAMPLE HTML START--> <div id="container" style="height:100%;"></div> <!-- ----------------------------------------SAMPLE HTML END--> </div> <div style="clear:both"></div> <script src="../metadata.js"></script> <script src="dev-setup.js"></script> <script> loadEditor(function() { /*----------------------------------------SAMPLE JS START*/ 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" }); /*----------------------------------------SAMPLE CSS END*/ }); </script> </body> </html>