A JavaScript plugin to provide UI support for Gmail like smart compose in textarea and contenteditable.

Instructions for Demo

Following fields have been initated with AutoCompose. As this example is just to demo the UI functionality, the composer is dumb. It will show same suggestion, no matter what you type.

Textarea Demo

Contenteditable Demo

Code for this Demo

Above example uses the following code

const options = {
    onChange: function({ acceptedSuggestion }) {
        console.log('"' + acceptedSuggestion + '" has been inserted into #' + this.id);
    },
    onReject: function({ suggestion }) {
        console.log('"' + suggestion + '" has been rejected');
    },
    composer: function(text, callback) {
        callback(' No matter what you type this sample will show same suggestion. As mentioned in the documentation, this plugin is only to provide UI support for anyone who wants to implement Gmail like smart compose.');
    }
};

const instance1 = new AutoCompose(options, document.getElementById('contenteditable'));
const instance2 = new AutoComposeTextarea(options, document.getElementById('textarea'));

// instance1.addInputs(document.getElementById('contenteditable1'));
// instance1.removeInputs(document.getElementById('contenteditable1'));
// instance1.destroy(); // removes autocompose from all inputs
                                

Trivia

General

1. Supports textarea and contenteditable fields
2. No external dependencies like jquery or bootstrap
3. Can add and remove inputs dynamically.
4. DOES NOT provide any suggestion algorithms or database, you have to provide thecomposer, a method which takes in current value and returns the suggestion.

Textarea

1. Provides a completely different Component AutoComposeTextarea to support textarea.
2. Uses overlay to show the suggestion.

Contenteditable

1. Inserts the suggestion into HTML directly.
2. Current text style will be applied to the suggestion too.

Suggestion

1. User can accept partial suggestion, by placing the cursor in the middle of the suggestion.
2. User can accept the full suggestion by placing the cursor at the end of suggestion or using keysTab, Left arrow or Down arrow.
3. OnChange event provides acceptedSuggestion, which gives the partial suggestion if user accepts only partial suggestion.
4. OnReject event will be triggered if the shown suggestion is not accepted by user.