How do I implement a smart compose / suggestions / autocomplete feature in lexical.js

Question

Hi I'm new to Lexical and want to create a suggestions plugin similar to how Gmail handles suggestions and smart compose, see attached image. Are there examples of how to do this in Lexical or can anyone point me in the right direction?

Answer 1

Looking at the example from AutoCompletePlugin in lexical playground.

• Define a new node class AutocompleteNode extending DecoratorNode (to show the suggestion)
• Find a way to store suggestion and make it available for your AutocompleteNode to show.(Redux-state/React context/...)
• Implement search for suggestion matches in characters preceding the cursor and logic for updating AutoCompleteNode to show them.
• Register what will happen on key-commands etc. when suggestion is showing. For instance

  editor.registerCommand(
  KEY_ARROW_RIGHT_COMMAND,
  $handleKeypressCommand,
  COMMAND_PRIORITY_LOW,
  

See the link below for details.

https://github.com/facebook/lexical/tree/main/packages/lexical-playground/src/plugins/AutocompletePlugin