Want to know how to add Code Blocks, Lists, Tables, Images to your Lexical Editor? 🚀 You can watch the Advanced Lexical Course here 🔥 ruclips.net/video/z8AJAXOUTzc/видео.html
You are the first in "years" to do this! I have been looking for a Lexical tutorial for a long, long time. All the tutorials I found weren't any good. Thanks, Usman.
@@usmanabdurehman97 Hey, Usman! Please add code that makes links get opened in a new tab - if that's possible to do it directly within a plugin. I've tried to do it and couldn't get it working. The code that adds or inserts links doesn't do what I want (that is, additing target blank to the link although attrs such as noreferrer get added). I don't where I'm going wrong. GPT-4o and Claude aren't much help either; we tried for hours without any success.
Hi. I have already recorded the lexical advanced course. My bad :'(. Will try to include this an advanced course part 2 or something. Links are too hard to implement in lexical in comparison to other features like code blocks, coloring, tables etc so thought should add them in a video and exclude links.
Thats very nice video.. but i have a question i want to do like if the text is right aligned then the right align icon should be activated .. i tried to do it but did not work. so is there any way ?
Should have added it in this tutorial. My bad. You can look at how to get the current alignment using github.com/facebook/lexical/blob/62b37130366bd37328413e2b1f19839f860db168/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx#L593-L600 . You can then use it to show the current selected align format.
Hey. Great video! Thank you for your work! I'm wondering if custom logic in the update listener can harm performance? It seems like the listener will be fired on every click inside the editor. But I don't have any solution to this. By the way, do you know how to get the position of selection by any chance? For example, I want to select a word and then show a small toolbar under selection. So far, I found only one solution - use native browser selection and calculate position based on it.
For the update listener thing, yes but that is what is being done in the official example in the repo as well. You can try removing it and just updating the state inside selection change command/event and see if it works for you. I haven't really tried it myself. As for the displaying popup on selection position, you can look at the link implementation in lexical playground repo. When there is a link present and you select text, a popup is shown with an input to change the link text. That is official implementation so I will encourage you to look at that
@@usmanabdurehman97 I have noticed that the official lexical playground how has the floating toolbar. Last time I checked the playground, I have not seen it.
Hi Dev. Its a crash course for now which basically deals with adding common features of a rich text editor. Will make an advanced one in the future which would cover tables, images, lists, code blocks etc
Usman, Thanks for making this video. I was trying to learn this and wasted many hours, their documentation is so poor and only meta can understand. Thanks for this tutorial
Want to know how to add Code Blocks, Lists, Tables, Images to your Lexical Editor? 🚀 You can watch the Advanced Lexical Course here 🔥
ruclips.net/video/z8AJAXOUTzc/видео.html
You are the first in "years" to do this! I have been looking for a Lexical tutorial for a long, long time. All the tutorials I found weren't any good. Thanks, Usman.
Thanks for the appreciation man. Crying rn :'). Making an advanced one as well which would come out in a week. Be on the lookout for that
@@usmanabdurehman97 For sure.
@@usmanabdurehman97 Hey, Usman! Please add code that makes links get opened in a new tab - if that's possible to do it directly within a plugin. I've tried to do it and couldn't get it working. The code that adds or inserts links doesn't do what I want (that is, additing target blank to the link although attrs such as noreferrer get added). I don't where I'm going wrong. GPT-4o and Claude aren't much help either; we tried for hours without any success.
Hi. I have already recorded the lexical advanced course. My bad :'(. Will try to include this an advanced course part 2 or something. Links are too hard to implement in lexical in comparison to other features like code blocks, coloring, tables etc so thought should add them in a video and exclude links.
@@usmanabdurehman97 Alright, sport! 😜🙂
aweeeeesome!!!! thank youuuu so, so much!
Hey i have done this but when I am adding image so it is showing me error that Richtextplugin is not inported properly
Hmn. Check the RichTextPlugin import, if it is correct or not. Then check if you have added the ImageNode in the nodes array in the config.
@usmanabdurehman97 yes can you connect with me?
Thats very nice video.. but i have a question i want to do like if the text is right aligned then the right align icon should be activated .. i tried to do it but did not work. so is there any way ?
Should have added it in this tutorial. My bad. You can look at how to get the current alignment using github.com/facebook/lexical/blob/62b37130366bd37328413e2b1f19839f860db168/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx#L593-L600 . You can then use it to show the current selected align format.
@usmanabdurehman97 no the video is outstanding, I understood a lot of things .. thanks for the reference 😀
Hey. Great video! Thank you for your work!
I'm wondering if custom logic in the update listener can harm performance? It seems like the listener will be fired on every click inside the editor. But I don't have any solution to this.
By the way, do you know how to get the position of selection by any chance? For example, I want to select a word and then show a small toolbar under selection. So far, I found only one solution - use native browser selection and calculate position based on it.
For the update listener thing, yes but that is what is being done in the official example in the repo as well. You can try removing it and just updating the state inside selection change command/event and see if it works for you. I haven't really tried it myself.
As for the displaying popup on selection position, you can look at the link implementation in lexical playground repo. When there is a link present and you select text, a popup is shown with an input to change the link text. That is official implementation so I will encourage you to look at that
@@usmanabdurehman97 I have noticed that the official lexical playground how has the floating toolbar. Last time I checked the playground, I have not seen it.
oh nice. I opened it from my mobile yesterday and it didnt appear. Maybe they added it recently. Nice. That is the exact thing you need :D
Mr Usman thanks for this. Jazakallah khayr.
Aoa. Thanks for the nice comment :)
how to add table and images
Hi Dev. Its a crash course for now which basically deals with adding common features of a rich text editor. Will make an advanced one in the future which would cover tables, images, lists, code blocks etc
That's what even I've been looking for. Tables, Images, color formating etc.
@@usmanabdurehman97 It Would be great if we get it soon.
Sure. Would try to put it out as soon as possible.
Advanced Course has been published on my channel. You can check it out coloring, tables, images, code blocks, video embedding, lists etc
Usman, Thanks for making this video. I was trying to learn this and wasted many hours, their documentation is so poor and only meta can understand. Thanks for this tutorial
Thanks man. Ikr. I went through the same trouble while I was working with it and thought to make some videos for it on RUclips. Glad you liked it :)
i was searching for this since last 20 days thanks Usman , please can we add images from local desktop and from link ? or add embed videos
Thanks for the comment. I will make an advanced course for this within 2,3 weeks and will include all these things.
Advanced Course has been published on my channel. You can check it out for uploading images and embedding videos
@@usmanabdurehman97 Thanks man you are the best
Thank you
Thanks for the comment :)