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
- Supports textarea and contenteditable fields
- No external dependencies like jquery or bootstrap
- Can add and remove inputs dynamically.
- DOES NOT provide any suggestion algorithms or database, you have to provide the
composer
, a method which takes in current value and returns the suggestion.
Textarea
- Provides a completely different Component
AutoComposeTextarea
to support textarea. - Uses overlay to show the suggestion.
Contenteditable
- Inserts the suggestion into HTML directly.
- Current text style will be applied to the suggestion too.
Suggestion
- User can accept partial suggestion, by placing the cursor in the middle of the suggestion.
- User can accept the full suggestion by placing the cursor at the end of suggestion or using keys
Tab
,Left arrow
orDown arrow
. - OnChange event provides
acceptedSuggestion
, which gives the partial suggestion if user accepts only partial suggestion. - OnReject event will be triggered if the shown suggestion is not accepted by user.