Autocompletion for an object in the monaco editor

Autocomplete.js

function ShowAutocompletion(obj) { 
    // Disable default autocompletion for javascript
    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ noLib: true  });
  
    // Helper function to return the monaco completion item type of a thing
    function getType(thing, isMember) {
      isMember =  (isMember == undefined) ? (typeof isMember == "boolean") ? isMember : false : false; // Give isMember a default value of false
    
      switch ((typeof thing).toLowerCase()) { 
        case "object": 
          return monaco.languages.CompletionItemKind.Class;

        case "function": 
          return (isMember) ? monaco.languages.CompletionItemKind.Method : monaco.languages.CompletionItemKind.Function;

        default: 
          return (isMember) ? monaco.languages.CompletionItemKind.Property : monaco.languages.CompletionItemKind.Variable;
      }
    }
  
    // Register object that will return autocomplete items 
    monaco.languages.registerCompletionItemProvider('javascript', {
      // Run this function when the period or open parenthesis is typed (and anything after a space)
      triggerCharacters: ['.', '('],

      // Function to generate autocompletion results
      provideCompletionItems: function(model, position, token) {
        // Split everything the user has typed on the current line up at each space, and only look at the last word
        var last_chars = model.getValueInRange({startLineNumber: position.lineNumber, startColumn: 0, endLineNumber: position.lineNumber, endColumn: position.column});
        var words = last_chars.replace("\t", "").split(" "); 
        var active_typing = words[words.length - 1]; // What the user is currently typing (everything after the last space)
          
        // This if statement adds support for autocomplete inside if statements and stuff
        if (active_typing.includes('(')) {
          active_typing = active_typing.split('(');
          active_typing = active_typing[active_typing.length - 1];
        }
  
        // If the last character typed is a period then we need to look at member objects of the obj object 
        var is_member = active_typing.charAt(active_typing.length - 1) == ".";

        // Array of autocompletion results
        var result = [];
            
        // Used for generic handling between member and non-member objects
        var last_token = obj; 
        var prefix = ''; 
      
        if (is_member) { 
          // Is a member, get a list of all members, and the prefix
          var parents = active_typing.substring(0, active_typing.length - 1).split("."); 
          last_token = obj[parents[0]]; 
          prefix = parents[0]; 

          // Loop through all the parents the current one will have (to generate prefix)
          for (var i = 1; i < parents.length; i++) { 
            var propToLookFor = parents[i];
            
            // Support for arrays
            var isPropAnArray = propToLookFor.charAt(propToLookFor.length - 1) == ']';
            if (isPropAnArray)
              propToLookFor = propToLookFor.split('[')[0];

            if (last_token.hasOwnProperty(propToLookFor)) { 
              prefix += '.' + propToLookFor; 
              last_token = last_token[propToLookFor];

              if (isPropAnArray && Array.isArray(last_token))
              {
                last_token = last_token[0];
              }
            } else { 
              // Not valid
              return result;
            }
          }
      
          prefix += '.';
        }
          
        // Array properties
        if (Array.isArray(last_token))
          last_token = { length: 0 };
      
        // Get all the child properties of the last token
        for (var prop in last_token) { 
          // Do not show properites that begin with "__"
          if (last_token.hasOwnProperty(prop) && !prop.startsWith("__")) { 
            // Get the detail type (try-catch) incase object does not have prototype 
            var details = ''; 
            try { 
              details = last_token[prop].__proto__.constructor.name; 
            } catch (e) { 
              details = typeof last_token[prop]; 
            }
            
            // Create completion object
            var to_push = {
              label: prefix + prop,
              kind: getType(last_token[prop], is_member), 
              detail: details,     
              insertText: prop
            };

            // Change insertText and documentation for functions
            if (to_push.detail.toLowerCase() == 'function') { 
              to_push.insertText += "(";
              to_push.documentation = (last_token[prop].toString()).split("{")[0]; // Show function prototype in the documentation popup
            }

            // Add to final results
            result.push(to_push);
          }
        }

        return {
            suggestions: result
        };
      }
  });
}

example.js

// This simple example will show autocompletion for "Person" with the given properties of name, age
ShowAutocompletion({ 
  Person: { 
    name: "",
    age: 0
  }
});

I see, that is not was this was designed for. From the link you added looks like it would be fundamentally different.

This was made when a friend of mine was working on a little game editor, he wanted to expose the editor to only the game objects available to the user. This allowed him to write the code that works, and pass it directly to the monaco editor and it would add auto-completion for it to the user.

The things this is auto completing should already exist in the context of whatever the editor code is going to be run in once written.

I understand, thanks for your response!

var code = 'const person = ' + JSON.stringify(yourObject);
var libUri = 'ts:filename/facts.d.ts';
monaco.languages.typescript.typescriptDefaults.addExtraLib(code, libUri);
monaco.editor.createModel(code, 'typescript', monaco.Uri.parse(libUri));

:)

Just came across this, exactly what I needed. Thx for sharing!

var code = 'const person = ' + JSON.stringify(yourObject); var libUri = 'ts:filename/facts.d.ts'; monaco.languages.typescript.typescriptDefaults.addExtraLib(code, libUri); monaco.editor.createModel(code, 'typescript', monaco.Uri.parse(libUri));

:)

This is the recommended usage of monaco-editor, but it cannot solve the variable autocompletion on this.