New package `prosemirror-suggest` for mentions and autocompletions

[ifi]

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.

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.

[marijn]

Wonderful stuff! Thanks for sharing.

[trompx]

Awesome @ifi,

Thanks for making this open source ! And thanks marijn for creating prosemirror in the first place

I was planning to create an article editor to showcase list of items (photos, videos …). So the editor had to have a way to suggest the items the user created or liked. It seems your plugin is a perfect fit for that.

I was just wondering if it was designed to suggest content in an infinite scroll way. Imagine the user created 200 items, I’d wish than when he press / an actions menu appears where the user can choose what does he wants to add like:

• h1
• h2
• bold
• quote
• add item
• add liked item

When he clicks add item, there is a list of suggested items pulled from an api endpoint /user/items or /user/likes. So kind of a nested suggest (first suggest actions then suggest items). He should be able to scroll the suggest list and autoload next items when he reaches the bottom of the list.

Do you think this is doable with your package ?

[ifi]

Yes this is something that could be accomplished with the plugin. However, it wouldn’t be trivial.

Prosemirror suggest provides the tools for matching characters as the user types and notifying your codebase of what’s happening. The UI is up to you.

But for the keyhandling and knowing when a user has clicked elsewhere, you can build that on top of prosemirror suggest.

FYI remirror is going through a rewrite at the moment and if you’d like to be involved or make some suggestions, please add comments to the issue.

[rowanc1]

I wanted to leave a note saying that this library inspired prosemirror-autocomplete, which takes a bit of a different approach than the social-style writing tools (mentions/hashtags) and is more inspired by IDEs and Notion/Confluence/GoogleDocs. Let me know what you think!