extending-language-services-completion-provider-example.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
  3. <html>
  4. <head>
  5. <base href="..">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  8. </head>
  9. <body>
  10. <style>
  11. /*----------------------------------------SAMPLE CSS START*/
  12. /*----------------------------------------SAMPLE CSS END*/
  13. </style>
  14. <a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
  15. THIS IS A GENERATED FILE VIA gulp generate-test-samples
  16. <div id="bar" style="margin-bottom: 6px;"></div>
  17. <div style="clear:both"></div>
  18. <div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
  19. <!-- ----------------------------------------SAMPLE HTML START-->
  20. <div id="container" style="height:100%;"></div>
  21. <!-- ----------------------------------------SAMPLE HTML END-->
  22. </div>
  23. <div style="clear:both"></div>
  24. <script src="../metadata.js"></script>
  25. <script src="dev-setup.js"></script>
  26. <script>
  27. loadEditor(function() {
  28. /*----------------------------------------SAMPLE JS START*/
  29. function createDependencyProposals() {
  30. // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
  31. // here you could do a server side lookup
  32. return [
  33. {
  34. label: '"lodash"',
  35. kind: monaco.languages.CompletionItemKind.Function,
  36. documentation: "The Lodash library exported as Node.js modules.",
  37. insertText: '"lodash": "*"'
  38. },
  39. {
  40. label: '"express"',
  41. kind: monaco.languages.CompletionItemKind.Function,
  42. documentation: "Fast, unopinionated, minimalist web framework",
  43. insertText: '"express": "*"'
  44. },
  45. {
  46. label: '"mkdirp"',
  47. kind: monaco.languages.CompletionItemKind.Function,
  48. documentation: "Recursively mkdir, like <code>mkdir -p</code>",
  49. insertText: '"mkdirp": "*"'
  50. }
  51. ];
  52. }
  53. monaco.languages.registerCompletionItemProvider('json', {
  54. provideCompletionItems: function(model, position) {
  55. // find out if we are completing a property in the 'dependencies' object.
  56. var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
  57. var match = textUntilPosition.match(/"dependencies"\s*:\s*{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*("[^"]*)?$/); if (match) {
  58. return createDependencyProposals();
  59. }
  60. return [];
  61. }
  62. });
  63. monaco.editor.create(document.getElementById("container"), {
  64. value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
  65. language: "json"
  66. });
  67. /*----------------------------------------SAMPLE CSS END*/
  68. });
  69. </script>
  70. </body>
  71. </html>