Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

I've ended up manually handling @mentions on my own by writing a quill plugin (unfortunately the plugin is closed-source for now), but basically it amounts to:

Create a new parchment format to represent the atmention data, and how it should be rendered. In my case, I also flagged it as read-only (because in ours, @username ends up rendering as a styled User Actual Name once it's done being selected, and I didn't want to allow users to edit the name displayed).

Create a widget that inserts that @mention formatted text in the quill data model.

Figure out when to trigger the widget. I listen to document deltas, and decide when the user has inserted a character inside a word that is at least four characters long and starts with an @, and then pop up the menu which I populate with users who match the text that's entered so far.

I ended up rolling my own because stuff like at.js is pretty heavyweight, and probably every system has its own constraints on atmentions (how to populate the username list, formatting for the list itself (avatars or no?), what to do on atmention-insert (notifications processing), and how to represent an atmention in finished text). So I found it was way easier to do it on my own, since the only thing I was really getting from something like at.js was a pop-up autocomplete list anyway, and those are pretty trivial to do in either vanilla javascript with css show/hide stuff, or (in my case, angular 1.x) in your already-existing front end framework.



Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: