New package `prosemirror-suggest` for mentions and autocompletions

I’d like to announce a new prosemirror-suggest package made available by the remirror project for adding suggestion and autocomplete functionality to your editor.

So what is a suggestion?

For the purpose of this plugin, a suggestion is functionality in your editor that responds to activation characters and passes the positional and query information to handler methods. These triggered handler methods can use the provided data to implement a variety of features such as autocomplete, mentions and action keystrokes.

Okay… What does prosemirror-suggest do exactly?

It exposes the primitives for capturing these activation characters and passing information through the handlers. As a result, you gain granular control over every aspect of the user’s experience when interacting with a suggestion.

Primitives like the following are available.

  • ExitReason - Okay, so the user exited the suggestion, but what caused it? Did they naturally progress out by typing characters? Did they delete the activation character, jump to another part of the document, paste a whole bunch of text, jump to another suggestion? Perhaps you need to provide functionality that make use of the reason behind the exit.
  • ChangeReason - So the suggestion was changed in some way. But what changed? Did the user just start a new mention? Did they add text, remove text, paste a whole bunch of text, jump from one suggestion to another, move the cursor? Perhaps you can make use of this information.
  • Positional - Where is the cursor in relation to the matched query? If it’s in the middle of the text perhaps you only want to transform part of the text, or maybe you don’t care. You decide.
  • Ignore Matches - So the user has exited the suggestion, ignoring your autocomplete popup. And then they backspace into it. Should you show them the suggestion again? How do you ignore this. There’s a method passed to all handlers which allows you to ignore a specific match and prevents event handlers being called again until the match character is deleted.

What does prosemirror-suggest not do?

It doesn’t provide UI helpers. It is up to you to translate the events and data into meaningful interactions for your users.

How about you show us some examples?

The following examples are available for you to try out [https://docs.remirror.org/showcase/social]

Search emoji on : key

The emojis are inserted as plain text. It’s up to you whether you insert the emoji as a node, mark or plaintext.

Editable mention on @ key

Each mention is a mark that wraps the mentioned text with a spec property of inclusive: false

Editable tag on # key

Enough! Take my money.

Haha, it’s open source. :sweat_smile:

Special thanks to…

A shoutout goes to prosemirror-suggestions for the brilliant plugin which helped shape the way this has been written.

Another shoutout to the creators of tiptap for their library which has inspired and helped shape remirror

What are the next steps?

At the moment all the examples shown above are built into remirror. If anyone is interested in some examples of prosemirror-suggest within a vanilla JS environment let me know in your replies and I’ll try and get something running.

Better yet, if you’d like to challenge yourself to provide a PR with some vanilla examples you will be eternally loved.

7 Likes

Wonderful stuff! Thanks for sharing.

1 Like