Implement Autocomplete in Draft JS but without a "trigger" like "@" Implement Autocomplete in Draft JS but without a "trigger" like "@" reactjs reactjs

Implement Autocomplete in Draft JS but without a "trigger" like "@"


Instead Of draft-js-typeahead - TypeaheadEditor is a react component that wraps draft's Editor. You can use React-Autosuggest component that meets the requirements. It has custom rendering that works natively with React elements. It's fast and pretty easily customizable. Have full control over suggestions rendering.

We can make it handle JS objects instead of plain strings.

  1. the onSuggestionSelected props is a callback to get the selected suggestion
  2. suggestionRenderer method takes suggestion and returns React markup

Check out React-Autosuggest.

You can use above component by using a custom block renderer, it is possible to introduce complex rich interactions within the frame of your editor.

You have to break your head to achieve what you want to, its not straight forward. This was my suggestion through which you might achieve it but its not that easy.