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

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