sample.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. function createDependencyProposals(range) {
  2. // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
  3. // here you could do a server side lookup
  4. return [
  5. {
  6. label: '"lodash"',
  7. kind: monaco.languages.CompletionItemKind.Function,
  8. documentation: "The Lodash library exported as Node.js modules.",
  9. insertText: '"lodash": "*"',
  10. range: range
  11. },
  12. {
  13. label: '"express"',
  14. kind: monaco.languages.CompletionItemKind.Function,
  15. documentation: "Fast, unopinionated, minimalist web framework",
  16. insertText: '"express": "*"',
  17. range: range
  18. },
  19. {
  20. label: '"mkdirp"',
  21. kind: monaco.languages.CompletionItemKind.Function,
  22. documentation: "Recursively mkdir, like <code>mkdir -p</code>",
  23. insertText: '"mkdirp": "*"',
  24. range: range
  25. },
  26. {
  27. label: '"my-third-party-library"',
  28. kind: monaco.languages.CompletionItemKind.Function,
  29. documentation: "Describe your library here",
  30. insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
  31. insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
  32. range: range
  33. }
  34. ];
  35. }
  36. monaco.languages.registerCompletionItemProvider('json', {
  37. provideCompletionItems: function(model, position) {
  38. // find out if we are completing a property in the 'dependencies' object.
  39. var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
  40. var match = textUntilPosition.match(/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/);
  41. if (!match) {
  42. return { suggestions: [] };
  43. }
  44. var word = model.getWordUntilPosition(position);
  45. var range = {
  46. startLineNumber: position.lineNumber,
  47. endLineNumber: position.lineNumber,
  48. startColumn: word.startColumn,
  49. endColumn: word.endColumn
  50. };
  51. return {
  52. suggestions: createDependencyProposals(range)
  53. };
  54. }
  55. });
  56. monaco.editor.create(document.getElementById("container"), {
  57. value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
  58. language: "json"
  59. });