No Comments Yet
Be the first to share your thoughts and start the conversation.
Implementing Mention Functionality
Loading...
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
00:00:00Â To add the mention functionality, we'll have to navigate over to the provider.
00:00:05Â And here we have this resolve users part, which helps us with the live collaborators.
00:00:11Â But now we have to figure out which users are in which rooms so that we know who we can mention.
00:00:17Â We can do that by saying resolve, mention suggestions.
00:00:21Â And that's going to be an async function that accepts a text and a room ID.
00:00:27Â And we can open up a new function block.
00:00:30Â And here we want to fetch all the room users by saying await and call the getDocumentUsers, meaning the users that belong to a specific document like this.
00:00:44Â I'm going to comment it out for now because we haven't yet created a server action that allows this.
00:00:50Â So let's navigate over to users actions and right below the get clerk users will export const the get document users, which is another async server action
00:01:05Â that accepts a couple of things as props.
00:01:07Â the room ID, the current user, and the text.
00:01:12Â And we can define the type by saying room ID is of a type string, current user is of a type string as well, and the text is of a type string.
00:01:25Â And then we can open up a new function block right here.
00:01:29Â You know the drill.
00:01:31Â In every server action, we open up a try and catch block.
00:01:35Â In the console log, we can say something like error fetching document users.
00:01:41Â And in the try, we can get access to the room information by saying await.
00:01:47Â And we can pass in the room ID.
00:01:54Â Once we have the room, we have to get access to the users within that room by saying const users is equal to object.keys,
00:02:04Â and then get the keys from room users accesses.
00:02:08Â And we want to filter it out by saying .filter by email.
00:02:13Â where the email is not the current user.
00:02:17Â So we want to get all the other users that we might want to mention.
00:02:22Â So we're not going to mention ourselves.
00:02:23Â Next, if the text.length exists, meaning if we're trying to mention somebody, then we need to transfer that over into lowercase text.
00:02:33Â So we can say const lowercase text is equal to text.toLowerCase.
00:02:39Â And then we want to filter out the users by that.
00:02:41Â So let's filter out those users by saying const filteredUsers is equal to users.filter where we take in an email of a type string and then filter it by
00:02:57Â saying email.toLowerCase dot includes lower case text.
00:03:06Â So first, we're filtering ourselves out, and then we're trying to filter to see which specific user we want to mention.
00:03:13Â And now within here, we can return parse stringify the filtered users.
00:03:19Â And if there's no text we're searching, we can recommend to mention any user.
00:03:23Â So we can here return parse stringify just the users.
00:03:27Â I hope that makes sense.
00:03:28Â So now going back to the provider, we can say const room users, call the get document users, and to it, we need to pass the information that we declared.
00:03:40Â So we can pass in the room ID.
00:03:43Â We can pass the current user, which is equal to clerk user question mark dot email addresses, zero dot email address.
00:03:54Â And we can add an exclamation mark at the end because we know it'll be there.
00:03:58Â And we can pass the text.
00:04:00Â Finally, the room users.
00:04:04Â And I just noticed that I don't yet have the access to the clerk user.
00:04:08Â So we can fetch it right here at the top by saying const user, which we can rename to clerk user is equal to use user coming from clerk next.js.
00:04:22Â Great.
00:04:23Â And you can notice here at the end, I have a typo, it's just email address.
00:04:28Â Great.
00:04:29Â So now LiveBlocks should know which users are we allowed to mention.
00:04:34Â And going back to our application, we can give it a shot by adding one new comment, and we can try using the mention functionality,
00:04:43Â and then start typing their name.
00:04:45Â Now, you'll see that it doesn't work just yet, and there's a reason for it.
00:04:50Â It doesn't work because technically we have no collaborators on this document.
00:04:55Â Yes, there was an Adrian here before, but that's just because we mocked the permissions of this document so everyone can access it.
00:05:03Â But they're not technically collaborators.
00:05:06Â That's something we'll implement once we add this amazing share model, where you'll be able to invite different people to be editors or viewers on your documents.
00:05:16Â But for the time being, all of the other real-time collaborative features are fully working.
00:05:22Â So what we'll do next is ensure that our application is enterprise-ready.