In this lesson, let's implement mentions in our editor. You know the feature where you type an ad symbol and can tag another user just like in Google Docs and in a lot of other modern apps for that matter. Now, searching the editor component for mention colon, you'll find a configuration option for it after list. Notice here that there's also another instance nested under the comments plugin config.
This gives you control over how mentions work in the doc and the comments separately. We want the one that controls mentions in the document. But once you know how one works, you know how the other works too. So first take note that we have a feeds option that is an array.
That means we could support multiple mention prefixes such as the at sign and then maybe a hashtag as well. The marker property is what determines the character you type to trigger the menu. The feed option is an array of items to populate the dropdown menu. Right now, it's simply empty.
We could fill it with a list of strings, just like this. Notice that each one does start with the marker defined right above. In the browser, this works just great. But to provide more information about each selected user, we could pass objects with an ID property instead of the strings.
This doesn't visually do anything different yet, but we can customize the rendering of each option with an item renderer method. This receives each individual item in the menu. In this case, the object with the ID and name property. js DOM APIs, We can now create a new element, add classes to that element, or whatever other changes we'd like.
Then we can set the element text to the item name. Lastly, we do need to return the new element so that the editor can render it. Nice! Over in the browser, the labels are now the pretty names of the users as opposed to that handle with the marker at the start.
Using this approach, we can easily customize the menu text like we did here, but we can also add avatar images, change styles, or whatever else we'd like. Another thing we can do to make this more scalable is to provide an async callback function to the feed option instead of a hard-coded array. In here, we can make a request to an API endpoint to get the mentions from our backend. I'll just copy and paste that for the sake of time.
This is a fetch request to an API endpoint that we haven't created yet. ts, I'll paste in the handler for us. Here I've hard-coded our dummy data with names and usernames. filtered them based on the search query variable, and then sent the filtered data back as the response.
In your system, you'd probably use this API endpoint to list users from your database. Lastly, back on the client side, we can map over the array and provide the user objects in the proper shape expected by the editor. Also, one quick thing I missed. is the search text that we're passing to the fetch request is provided as an argument by the editor to this callback function.
It still works, except now our mentions are populated dynamically from our backend. Also note that in a real world app, you'd probably want to implement a little caching on this request to prevent it from refetching on each new character typed. Finally, there are a couple of other options worth mentioning. The drop-down limit option allows us to limit how many options display at one time no matter how many items are in the feed.
And the minimum characters option lets us require one or more characters to be typed after the marker before the menu appears. Reacting to mentions, such as sending email notifications to the mentioned user, is something you'll need to work out in your own system. Common solutions for this include, number one, using built-in CK Azure events to listen for mention on the front end and then make an API request. Or option number two, searching the documents or crawling the documents on document save.
In conclusion, mentions are a powerful feature for collaborative document editing, allowing users to tag each other and create a more interactive experience. Our Google Docs clone would definitely not be complete without them. In this lesson, let's implement mentions in our editor. You know the feature where you type an ad symbol and can tag another user just like in Google Docs and in a lot of other modern apps for that matter.
Now, searching the editor component for mention colon, you'll find a configuration option for it after list. Notice here that there's also another instance nested under the comments plugin config. This gives you control over how mentions work in the doc and the comments separately. We want the one that controls mentions in the document.
But once you know how one works, you know how the other works too. So first take note that we have a feeds option that is an array. That means we could support multiple mention prefixes such as the at sign and then maybe a hashtag as well. The marker property is what determines the character you type to trigger the menu.
The feed option is an array of items to populate the dropdown menu. Right now, it's simply empty. We could fill it with a list of strings, just like this. Notice that each one does start with the marker defined right above.
In the browser, this works just great. But to provide more information about each selected user, we could pass objects with an ID property instead of the strings. This doesn't visually do anything different yet, but we can customize the rendering of each option with an item renderer method. This receives each individual item in the menu.
In this case, the object with the ID and name property. js DOM APIs, We can now create a new element, add classes to that element, or whatever other changes we'd like. Then we can set the element text to the item name. Lastly, we do need to return the new element so that the editor can render it.
Nice! Over in the browser, the labels are now the pretty names of the users as opposed to that handle with the marker at the start. Using this approach, we can easily customize the menu text like we did here, but we can also add avatar images, change styles, or whatever else we'd like. Another thing we can do to make this more scalable is to provide an async callback function to the feed option instead of a hard-coded array.
In here, we can make a request to an API endpoint to get the mentions from our backend. I'll just copy and paste that for the sake of time. This is a fetch request to an API endpoint that we haven't created yet. ts, I'll paste in the handler for us.
Here I've hard-coded our dummy data with names and usernames. filtered them based on the search query variable, and then sent the filtered data back as the response. In your system, you'd probably use this API endpoint to list users from your database. Lastly, back on the client side, we can map over the array and provide the user objects in the proper shape expected by the editor.
Also, one quick thing I missed. is the search text that we're passing to the fetch request is provided as an argument by the editor to this callback function. It still works, except now our mentions are populated dynamically from our backend. Also note that in a real world app, you'd probably want to implement a little caching on this request to prevent it from refetching on each new character typed.
Finally, there are a couple of other options worth mentioning. The drop-down limit option allows us to limit how many options display at one time no matter how many items are in the feed. And the minimum characters option lets us require one or more characters to be typed after the marker before the menu appears. Reacting to mentions, such as sending email notifications to the mentioned user, is something you'll need to work out in your own system.
Common solutions for this include, number one, using built-in CK Azure events to listen for mention on the front end and then make an API request. Or option number two, searching the documents or crawling the documents on document save. In conclusion, mentions are a powerful feature for collaborative document editing, allowing users to tag each other and create a more interactive experience. Our Google Docs clone would definitely not be complete without them.