1
0

sample.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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({
  40. startLineNumber: 1,
  41. startColumn: 1,
  42. endLineNumber: position.lineNumber,
  43. endColumn: position.column
  44. });
  45. var match = textUntilPosition.match(
  46. /"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/
  47. );
  48. if (!match) {
  49. return { suggestions: [] };
  50. }
  51. var word = model.getWordUntilPosition(position);
  52. var range = {
  53. startLineNumber: position.lineNumber,
  54. endLineNumber: position.lineNumber,
  55. startColumn: word.startColumn,
  56. endColumn: word.endColumn
  57. };
  58. return {
  59. suggestions: createDependencyProposals(range)
  60. };
  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. });