No Comments Yet
Be the first to share your thoughts and start the conversation.
Creating Custom Comment Component
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Â We can do that by creating a new custom component in our components folder, and we can call it comments.tsx.
00:00:11Â Here we can run refce, and here we'll do a similar thing that we have done before.
00:00:16Â We'll just say const and we want to get access to all of the threads, meaning all of the existing common threads.
00:00:23Â And we'll say that's equal to use threads coming from LiveBlocks React Suspense.
00:00:29Â Inside of here, we will return a div with a class name equal to comments container.
00:00:37Â And we will return a composer that allows you to write a comment coming from LiveLog's React UI with a class name equal to comment composer.
00:00:49Â And below it, we have to map over all of the threads.
00:00:52Â So we can say threads.map where we get each individual thread.
00:00:57Â And for each one, we automatically return something known as a thread wrapper.
00:01:02Â Okay.
00:01:03Â And this is a component that we will create.
00:01:05Â So let's pass it a key equal to thread.id and the actual thread equal to thread.
00:01:12Â So now right above, we can create this new component const thread wrapper, which accepts a new thread, and that'll be of a type,
00:01:23Â thread wrapper props, and it will simply return a thread.
00:01:29Â And that's coming from LiveLog's React UI, but of course we will modify it a bit.
00:01:34Â We have to pass it the thread information, equal to thread, and we have to figure out whether this thread is active or not,
00:01:42Â like when we click it.
00:01:43Â So we can get access to that state by saying const isActive is equal to useIsThreadActive coming from LiveBlocks lexical,
00:01:54Â and to it, we pass the thread ID.
00:01:56Â Now with that, we can modify the data state by saying if isActive, give it the active state, else we can simply say something like null.
00:02:10Â Then we can give it additional class names by using the CN property class name from libutils.
00:02:17Â And always it will have the comment thread and border styles.
00:02:24Â And only if it is active, so active and, and we can give it important border blue 500 and a shadow of medium, and only if the thread is resolved,
00:02:40Â so thread.resolved, then we will lower the opacity by giving it the opacity of 40. Okay?
00:02:48Â So now we're exporting these comments that map over the thread wrappers, which means that we can go back to our editor and And we can add the comments
00:02:57Â as another plugin coming from dot dot slash comments.
00:03:01Â If we save this and go back to the editor, would you look at that?
00:03:06Â Now, even this floating comment appeared on the right side, which is great.
00:03:11Â I mean, we can still open it right here, but it is convenient to be able to resolve it from the right side.
00:03:17Â See how the opacity fades if you do resolve it.
00:03:20Â And what we can do now is also add general comments about the document.
00:03:26Â For example, this is a great document.
00:03:30Â And now it is not attached to a specific word, sentence, or paragraph.
00:03:35Â It is attached to the document itself.
00:03:38Â And you can still reply to this comment thread right here and even add some emojis.
00:03:45Â Great.
00:03:46Â So with that, we already have a lot of collaborative functionalities.
00:03:51Â Remember when another person joins, we can see a live collaborator list.
00:03:56Â We have the floating comments as well as general comments on the right side.
00:04:01Â And another thing which you might think we don't already have yet is the live cursor showing us where another user is typing.
00:04:09Â We've gotten that as soon as we wrap our initial config with the live blocks config.
00:04:14Â Let me show you.
00:04:15Â We first have to go back to home and use this second document we have created because that one has the permissions for everyone to access.
00:04:25Â Now I will copy this URL, open up another browser and paste it right here.
00:04:30Â As you can see, both of us are online now.
00:04:33Â And if I start typing something on this end, oh, and this is interesting.
00:04:37Â On the right side, you can now see the view only property as this user cannot currently type or edit this text.
00:04:44Â Very soon we'll dive deeper into permission sharing and allowing other users to edit.
00:04:49Â But for now, we can make the right one watch.
00:04:51Â So as you can see, JavaScript Mastery is editing the text in real time right here.
00:04:57Â And as soon as I bold something or even add a floating comment, Check this out.
00:05:04Â In real time, that comment is added right here and I can now reply to this thread.
00:05:11Â I don't know why I'm yelling, but here it is.
00:05:14Â And we can leave some emojis as well.
00:05:17Â So everything is working flawlessly in real time.
00:05:22Â And even if I go ahead and resolve the thread, you can see that happens on the right side as well.
00:05:28Â Wonderful work so far.
00:05:31Â Another great thing we can do is add the mentions.
00:05:35Â So now if I try to mention somebody, it's not really going to work, right?
00:05:39Â If I try to say Adrian, nothing happens.
00:05:43Â But I'll show you how to mention other people and make them get notifications on their end when they're mentioned.
00:05:50Â So let's focus on adding the mentions next.