# Add Mentions ability

First of all we have to distinguish between (at least) two user inputs where we may want to add mentions feature:
#### User Comments

Everything in this image is in `PostMessageToCommentsForm` the Avatar, the HelpIcon. It's a wrapper over the red item inside which is `FormikCommentInputField` which includes the value length, the arrow button and the field itself.

The form field is an MUI OutlinedInput. And the arrow is an endAdornment.

Comments Callouts, and comments to Cards use the same form field.

#### WYSIWYG form fields:
The WYSIWYG editor is a DraftJS component wrapped inside [react-draft-wysiwyg](https://jpuri.github.io/react-draft-wysiwyg/#/) which claims to support @metions but the implementation lacks of a few important things (e.g. need to supply all possible values, can't search on the fly as user inputs more characters).

## Clientside
#### For user comments
- https://github.com/signavio/react-mentions
- BSD Licence,
- Last package is 6 months old
- Works out of the box, install npm pkg, replace our text field and working
- 👎 not easy to style - not Material
- Article about styling it: https://shwiloo.medium.com/styling-a-react-mentions-component-with-jss-e5d2a89d3ce3
- 👎 Need to figure out how to avoid the suggestions to cut:
I've seen the demos running in my machine and they fix it passing the container ref to the element, but in our case we would need to pass a higher level container, not just the parent.
-

##### Alternatives:
- https://www.npmjs.com/package/rc-mentions
https://react-component.github.io/mentions
https://github.com/react-component/mentions
Tested it. It looks unstable and less robust.

- https://www.primefaces.org/primereact/mention/
Discarded because it's part of a component library

- https://www.reddit.com/r/reactjs/comments/qvdocl/need_suggestions_for_facebooklike_mentions_and/
Reddit post with the same investigation, no solution recommended. Draftjs, Slatejs and Quill I knew them from the investigation of the WYSIWYG editor and I think they are too heavy to print just a comment form field.
But ProseMirror has tourned out to be a great solution even to replace the wysiwyg editor... it's incredibly good

- Prosemirror - from the previous reddit post
- https://github.com/ProseMirror/prosemirror
- https://github.com/ProseMirror/prosemirror-markdown
- https://prosemirror.net/examples/markdown/
- https://github.com/joelewis/prosemirror-mentions
- https://remirror.io/docs

#### For WYSIWYG
Jpuri was very promissing but has been a bit disapointing to dig into it.
- It receives a list of items that can be @mentioned, not a callback.
- To allow a callback we would need to tweak this function: [src/decorators/Mention/Suggestion/index.js ](https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/decorators/Mention/Suggestion/index.js) line ~70.
- Styling the popup could be done just with CSS, but adding custom elements like the user Avatar is complicated, same file line ~235.

Draftjs options:
https://www.draft-js-plugins.com/plugin/mention

## Serverside
#### For user comments
- We need to handle posted coments, detect mentions and create notifications accordingly. Very probably we won't need to change the comment content at all, `react-mentions` already provides sends a link in markdown to the user profile.
- Need to investigate - maybe in the future - if we want the user to be able to edit their comments, we need to check if the component reads the mentions correctly.
- We need to handle Comments Callouts and comments to cards.

#### For WYSIWYG
- Same as before, just parsing the markdown sent should could enough to generate notifications. The mentions in the markdown are just plain links.
- We'd need to handle every place where we send markdown, context fields mainly.