https://github.com/jkhaui/predictable
A contenteditable text editor with predictive typeahead, similar to Gmail's Smart Compose feature.
https://github.com/jkhaui/predictable
autocomplete contenteditable gmail lookahead predictive-text smart-compose typeahead
Last synced: about 5 hours ago
JSON representation
A contenteditable text editor with predictive typeahead, similar to Gmail's Smart Compose feature.
- Host: GitHub
- URL: https://github.com/jkhaui/predictable
- Owner: jkhaui
- Created: 2019-08-01T07:27:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:15:07.000Z (over 3 years ago)
- Last Synced: 2026-03-15T16:07:54.105Z (3 months ago)
- Topics: autocomplete, contenteditable, gmail, lookahead, predictive-text, smart-compose, typeahead
- Language: JavaScript
- Size: 5.28 MB
- Stars: 83
- Watchers: 2
- Forks: 20
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Predictable
_Predictable_ is a basic PoC web app to demonstrate how predictive text/autocomplete/lookahead/typeahead
can be applied to a contenteditable element. This functionality is seen in real-world apps, with the
seminal example being Gmail's "Smart Compose feature". Pressing the Tab key will autocomplete a suggested
phrase.
Quick Start
> `git clone https://github.com/jkhaui/predictable`
> `npm install`
> `npm start`
This project is bootstrapped with create-react-app. It also uses Medium-Editor as a solid
base for contenteditable. However, neither React nor Medium-Editor are tightly coupled to
Predictable's functionality, which is written in vanilla JS and can easily be modified to work with
any contenteditable container.
N.b. Being a simple PoC, there are some obvious bugs. E.g. The first word of the text editor
in Chrome is, for some strange reason, positioned differently to the rest of the text. This causes the
autocomplete placeholder to appear misaligned if applied at the very beginning of a document.
This example uses a large corpus of phrases related to the legal domain, but they can be easily swapped
out for another data source. Improvements and PRs are highly welcomed.
Demo:
