Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Already a member? Sign in to continue

Playing

51. Adding mentionable functionality to forms

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

There are loads of moving parts to mentioning users in our discussion posts. So over the next several episodes, we're going to be pulling all of this together.

00:10

But first of all, we're going to take a look at the package that we're going to be using to help drive this. And we're going to install it, put it on our create discussion form, and we can add it to our reply form as well later

00:23

and just figure out how this works and what kind of data we need and just generally how we're going to pull this together. So before we do anything, I'm just going to head over to the create discussion composable that we created.

00:36

And I'm going to set visible to true once again, just so this always shows up. It's going to be a lot easier for us to work with it this way. So over on GitHub, this is the package that we're going to be using. View mention this uses floating view

00:51

behind the scenes to show the list of things that you want to show on this mention functionality. That could be absolutely anything. It doesn't have to be users.

01:02

But of course, that's how we're using this. So let's go ahead and install this, get it on the page and just see how it works. So we need to pull the package in, of course, obviously. And we also need to pull in floating view as well.

01:16

And we also need to include the floating view styles. We've done this for something else as well over in AppJS. It was the markdown toolbar element that we imported directly here. But we're going to import the styles directly here as well,

01:29

or we can include them over in app CSS. So that is the package pulled in. Let's close this off, because the rest of the way I'm going to guide you through how this works.

01:39

So we're going to head over to the create discussion form. And of course, we're going to come down to where our text area is, which is where we want to mention people in. Of course, later on, you could always include this in other fields if you wanted to.

01:53

But let's go ahead and just keep this in our text area just for now. Now, the way that we use this package is we go ahead and import it. So let's do that first of all. It's probably important.

02:03

So import mentionable from and view mention. Let's see if we can just autocomplete that view mention. And we basically just want to wrap our text area within this. So let's go ahead and just wrap mentionable around here.

02:22

And let's head over because nothing really changes at the moment. Nothing's really doing anything. We need to just specify some options in here. And let's just keep an eye on our console as well,

02:32

just to make sure that we're not getting any errors. OK. So the first thing we're going to add to this are the keys that are going to trigger the mention pop up or pop over. And for us, that's just going to be apt, although it could be absolutely anything.

02:49

For example, if you were building a Twitter clone, you would use a hash here to pull out a list of suggested hashtags. But for us, we just need an at symbol. The next option we can apply, which I'm going to do now is an offset.

03:01

This is just how far away the pop over sits when we actually do get a list of results and really importantly, are the list of items. So let's go ahead and just add in a list of items from here

03:13

without really doing much. I'm just going to write Alex. Of course, this is going to be an array, not an object. I'm going to write Alex and Alexander and Mabel.

03:24

Let's just see what happens now when we type apt. And yeah, there we go. So it is actually appearing. We just get no result here.

03:32

So I'm guessing that is just the way that I've structured the items here. I think in here we need a value and a label. So let's go ahead and create out yet an array of objects. And let's say label Alex, or that would probably in reality

03:49

be something like Alex and then the username, just so we know who we're mentioning. And then the value here would just be Alex. And let's go ahead and copy that. Over and we'll put Alexander.

04:06

There and then we'll do that Mabel one as well, so let's do Mabel. And Mabel. OK, so that I think is the structure we need. Let's go over and have a look.

04:16

I type out here. There we go. So we're automatically presented with a list of things that we can click on to add. But of course, we can start to filter this down as well.

04:26

So we can say M for Mabel, Alexander, and there we go. So really, the mentionable UI stuff is now working. Let's take a minute just to style this up and also style up the no result section as well, because by default, everything looks a little bit squashed.

04:42

So we're going to come over to app.css and let's just add some really rough styles in here just to make this look a little bit nicer. So just from memory, the mention item is called mention hyphen item. Let's just test that by setting a black background just to make sure.

05:03

And yeah, so it's mention item. So for each of these, we want to go ahead and set a padding on this. Let's do three. We'll set leading to none so we don't have any line height.

05:13

And let's set a cursor to pointer, because at the moment when we hover over them, we don't look like we're actually doing anything. And I think that looks OK. And then we want a kind of selected state as well.

05:26

So I think that is mentioned selected. We'll find out soon enough. So let's say background gray 100 and cursor pointer. And let's have a look.

05:40

And there. Yeah, there we go. So we can either use the arrow keys on the keyboard to go up and down, or of course, we can just hover over and click one. So there is our kind of mentionable functionality within the UI working.

05:55

However, we have a slight problem in that, first of all, we don't want to obviously manually add all of these items to this list. Second of all, let's say our forum ends up having 10,000 users. We don't want to fetch this data all in one go.

06:14

Doing that would be a huge amount of data pulled in and then put into this items array. So really what we want to do is be able to search, preferably within MeliSearch, which we already have set up for these users. So let's head over to the next episode and look at indexing users so we can search on their usernames.

Episode summary

In this episode, we're kicking off the process of adding @mention functionality to our discussion forms. This is the feature you see on platforms like Twitter or Slack, where typing @ brings up a list of users you can mention in your post or reply.

We start by picking out a handy package called vue-mention, which will help us get the core mentionable UI and mechanics working without building everything from scratch. We install the required dependencies, drop it into our "Create Discussion" form, and wrap it around our textarea where we want users to be able to mention others.

Once that's set up, we try out the package using some hard-coded user examples—"Alex", "Alexander", and "Mabel"—just to make sure the dropdown appears and updates as we type. We also take a moment to tweak the basic styles, so our mention suggestions look clickable and are easier to use with both the mouse and keyboard.

Finally, we touch on a big caveat: hard-coding user lists and loading all users at once isn’t practical, especially if your forum has thousands of members. So, we preview what’s coming next—setting up search functionality (ideally with Meilisearch) to power those suggestions dynamically as you type. If you're excited to see how we index and search users efficiently, stay tuned for the next episode!

Episode discussion

No comments, yet. Be the first!