Draft-js: request for mentions example

[brigand]

I think this would be a very useful example in the repo. I'm struggling to put together the docs to get this working, personally, and I imagine it's a common use case of draft.js.

Some of the core features would be:

• pressing @ opens a user selector popup
• pressing enter inserts the selected item at the cursor position as a segmented block, closes the popup
• escape closes the popup
• if the previous character is a non-symbol non-whitespace, don't open the popup (e.g. in an email address)
• arrow keys up/down change focus in the popup
• @ can be entered on its own, or followed by text without making a mention (e.g. if escape is hit)
• moving the cursor elsewhere in the input closed the popup
• putting the cursor next to an unfinished mention or within the word following the @ opens the selection popup

My understanding is that this requires using most of the public api, which is why it'd make a great example. It'd also cover things like getting the text at the cursor position, which I haven't figured out yet.

[joehua87]

@brigand You should see https://www.draft-js-plugins.com (it has the mention plugin)

[brigand]

Thanks! This is very helpful.

So the consensus is that complex editors should be built with a plugin system instead of the way the examples/docs do it?

[joehua87]

No, it's up to you, just see it as a way to organize things. You can see the code they write & implement as the examples/docs

[jvaill]

@brigand :

Here's another one for your reference -> https://github.com/dooly-ai/draft-js-typeahead