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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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. label: '"my-third-party-library"',
  53. kind: monaco.languages.CompletionItemKind.Function,
  54. documentation: "Describe your library here",
  55. insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
  56. insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
  57. }
  58. ];
  59. }
  60. monaco.languages.registerCompletionItemProvider('json', {
  61. provideCompletionItems: function(model, position) {
  62. // find out if we are completing a property in the 'dependencies' object.
  63. var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
  64. var match = textUntilPosition.match(/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/);
  65. var suggestions = match ? createDependencyProposals() : [];
  66. return {
  67. suggestions: suggestions
  68. };
  69. }
  70. });
  71. monaco.editor.create(document.getElementById("container"), {
  72. value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
  73. language: "json"
  74. });
  75. /*----------------------------------------SAMPLE CSS END*/
  76. });
  77. </script>
  78. </body>
  79. </html>