javascriptreactjsace-editorreact-ace

How to specify a list of custom tokens to list for autocompletion in Ace Editor?


After following the setup for autocompletion with Ace Editor, I have it working with react-ace. However, I need some custom tokens to be available in the built-in autocomplete list.

The repository for react-ace has these properties defined as

enableBasicAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
enableLiveAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),

but what is this array ?

I have tried setting enableBasicAutocompletion={ ['custom'] }, and enableBasicAutocompletion={ [ (...args) => console.log(args) ] } but both fails with an error about getCompletions not a function.

How can I add these custom autocomplete keywords to the list?

<AceEditor
    name={ this.uniqueName }
    mode="javascript"
    theme="github"
    onChange={ onChange }
    enableBasicAutocompletion
    enableLiveAutocompletion
/>

Solution

  • use editor.completers array to add a new completer that returns the completions you want

    editor.completers.push({
        getCompletions: function(editor, session, pos, prefix, callback) {
            var completions = [];
            // we can use session and pos here to decide what we are going to show
            ["word1", "word2"].forEach(function(w) {
    
                completions.push({
                    value: w,
                    meta: "my completion",
    
                });
            });
            callback(null, completions);
        }
    })