React Text Editor Tutorial - TipTap

hey what's up everyone so in this video i'll be showing you how you can create a text editor just like this one in react and we'll be using a library called tip top so tip top is actually straightforward and what i'll be showing you in this particular video is how to customize your editor to have this kind of a design where you have these icons and stuff and i'll also show you how you can get your output from this editor and then store it instead and once you do that you can either send that data to the database or you can show it on the ui like i have done right here so right here if i type react you can see i'm showing the data directory on the ui from the state so right here we have react and you can format it to be italics underlined uh bold you can have a straight through you can also make it a heading so we have all these steps right here you can add a list of items so we can have one and as you can see this is already like having these terms so you can unselect them the one that you don't want to be included so that you have a nice list right here two three and so on and so forth you can include this in a block code and okay it's not working actually uh something is wrong and let me try it on this one block code okay like that i don't know why this one did not work uh it should have maybe you can like add a block code first and then you can have now a list so we can add a list of numbers just like these and so on and so forth then we have these icons for reverting the changes or for going back the changes and then you can see the output for this editor is in form of html and then we can pass that html and show it on the ui so i'll show you how to pass the html and show it on the ui because it will not work directly okay and another form of output that this editor provides is json data okay but in this particular video we will be using html so this is a cool editor which you can implement on your site or even a client's site so in case you're new here my name is charles i'm a javascript developer and i create coding content here on youtube if you like the content in this video please remember to leave a thumbs up and also support my channel by subscribing so i have just created a new react app and all we have is the name react at our app component so i also did some cleanup so you can see we don't have those uh starter files that we usually have right here so when i check the browser this is all that we have so i want us to start taking a look at tip tap which is our a framework for creating the text editor so visit tiptop.dev okay and then you'll click on get started okay so once you do that you'll check the various libraries and frameworks that are you can make use of tip-top so i want to make use of tip tap on react so just click on react right there if you're using react and then um i don't know i lost the sport bar right here let me refresh again and here we go okay cool so when you scroll down here you'll see instructions for making use of tiptop and there is actually a template which you can install to get started with but i don't want us to make use of a template i want us to use the step by step guide so when i scroll again there is a video right there you can watch it if you want but when i scroll again right here now these are the steps so the first step is to create a new react app and i have already done this so just run npx create react app and then the name of your application and then down here you will install dependencies okay so down here it's the dependencies and you can see these are the dependencies at tip top react and then we have a starter kit so these are the most basic ones but i also want you to install other dependencies so that uh you install everything together and you go back to installing the dependencies for completing your text editor so i have already like listed uh every dependency that you need for this particular uh session or video so you will install a tip react and then you will install tip top starter kit and then right here i want us to add the underline feature uh it doesn't come by default so you will install at tip top and then stroke extension hyphen underline and then i want us to pass our output which is in form of html so that we can see it on the ui so you will install html hyphen react hyphen passer and then for the icons that we'll be using on our editor i'll be making use of react icons but you can use any other icons that you want to so make sure that you run this installation i just copied the way it is word by word uh from the screen okay and then after the installation those are the dependencies then you can come down here and you'll see the instructions of making use of tiptop so there is this of creating a new component right here but i'll jump that and i'll scroll down here i'll jump that and i'll come to the complete setup which is optional you can use the above which is like mandatory or you can come to this complete setup which is optional so what i want us to do in this particular video i want us to customize this particular complete setup okay so it has loaded so we have a setup for react and view so you can click on view if you're using view but i want us to have this kind of a text editor on our app okay so uh first things first we have the index.js file right there and the styles right there so what i want us to do is to copy everything in index.js file and what it will give us is this particular text editor with all these buttons and the text pre-filled right here okay and we'll customize that to have like a custom editor for ourselves with icons and not just buttons so that is what i'm actually showing you in this particular video because getting started with tip-top it's actually very easy so right here i'll just uh highlight everything from the top to bottom it's actually quite a lot so i'll highlight everything i will copy that and then i'll go to my text editor and right here i'll create a new folder called components and then i'll create a new file and i'll call this file tip tab t tab dot dsx i'll hit enter and then i'll paste everything that i just copied okay so i'll paste everything just like that okay everything is fine uh what i want us to do is to remove this right here and then right here for our component i want us to remove this pre-filled text so at the content you can click on there and then you can scroll down here and then you can press shift and then click again and then i'll delete everything right there because i don't want it and then right here export default function i want us to actually like create a normal r function which will export by default at the bottom so right here i can say um const tipped up uh will be equal to an error function like that and then now down here i can export that right here okay so i can export default tip tap okay just like that and then for now uh this is actually all we need but at the very top now what i want us to do is to remove this uh scss file so i'll remove that we will be making use of app.css for all the styles that we will be uh making use of so i'll save that and then i'll come to app.js and instead of react right here let's render our tip-top component so i'll say tip tap okay and then it when i click on this one it's auto imported which is awesome and i close it like that i save and let's preview what we have at the moment on the browser so you can see um i haven't like even like check the code how it's working but we will already be having a working text editor right here and let's see what we have so it's comparing okay there we go and there we go we already have all these buttons and when i click on here you'll see that we have some input fields to type okay so um i can say react is awesome now we have the option of highlighting these and then maybe clicking on bold and now it's bold and then i have the option of clicking that making it itaric and now it's italic so these buttons are actually working but they don't have the styles uh that are necessary all the styles so these are the default browser styles so when i click on block quote you'll see that we have indented this but it doesn't have the styles so what we will do is that uh we will add the styles and when we come to our tip-top documentation um let me scroll actually i can see where the scroll bar is i will see that we have styles dot scss right here so you can click on that and then right here you have all the styles that we initially need so i highlight everything from bottom up or from up to bottom uh whichever way you choose so i'll copy that and then i'll come to up dot css and you can see i have just uh default family styles right here nothing much so you can choose any family that you want and then right here i'll just paste what i just copied and now you'll notice that we have some issues because this code is for scss and right here we are using pure css so how can we fix that okay so to fix that we need to come to uh pros mira so this is the class that is provided by tiptop by default but it's very customizable so you can like edit any css and uh customize your text editor the way you want so right here i'll just cross that one and then i'll copy these class and i'll include it just before everything right here so i'll include it right here and then i'll include it before the ul and the ol actually remember to leave some space right there uh cool then i'll do the same for all our headings right here very fast very fast so we proceed after the h6 and then chord and then to pre and now for pre uh you'll notice that it has the code right here indented so what i can do i can close it just right here and then right here i'll include the post the pros mirror and then i'll say pre and code then i remove this one so this is how you can remove the errors so with scss we have indented styles but with css we don't have that okay just pure css we don't have it so i'll move this one and then when i save now i have all my styles and this update css is actually being imported at our app so all those styles will also be applied at tip top okay so when we check now you'll see that our block code should be having a line right there so i think we have some issues with our styles and when i come to app dot css right here and we go to where we have our hr and brock quote you'll notice that this style is not varied in css so we need to like provide our own style a nicely so what i'll do i remove the rgb stuff and i'll paste this color which i just copied and i'll make it just a bit grayish okay and then i'll like copy this grayish color and i'll include it here and then the next thing is that i'll check if we have any of such cell anywhere we have this one so what i'll do this is for cod i'll test this one and i'll make it to be more whitish and i don't think that we have any other issue so i'll save that okay cool so let's see what we have i'll come back right here and we have this now block code right there and when i write react and click on code you'll see that it have that background a grayish color and then react right there so this is now actually working the styles are working but i want us to customize this text editor further and make it our own so we will add icons right here remove some stuff and then maybe add the underline which is most basic and generally style the the editor to look nice okay so for that let's first go to our tip tab and understand how they have like uh worked uh on this so all these buttons are the one that are being displayed at the top there okay and this is a component so this is a component called menuba which is accepting editor as a plot and if there is no edit types returning null s is returning the buttons right there the buttons all the buttons are pretty self-explanatory right there we will be customizing them in a minute and then down here now we have our tip top component where we have editor it's calling use editor and this user editor is being imported from tip-top react we also have editor content from tip-top react and starter kit from our starter kit so these are the libraries that we just installed and we'll be making use of the others uh just in a moment okay so now down here you can see the starter kit is included as an extension and we have the user data right here from tip top react and then now down here we have the menu bar which is at the very top and we have our editor content so you can like go through the code to try and understand it pretty self-explanatory so now let us start adding the uh icons and i'll be using a react icons so right here let us start by importing a bold uh icon for bold and i'll say import i'll destructure for bold and this will come from react icons so i'll say from yeah typhon icons and then i'll say stroke fa standing for font awesome icons okay so with react icons we have different types of icons in this case i'll be making use of the font for some icons okay now in bold right here we'll replace with far bold so this is a component for bold just like that okay and now we should be having that icon added so i'll save that then when i come back right here we should see these uh changed to an icon so let's see actually let me confirm that it's compiling there we go and let me just refresh and now we have a bold uh icon right there and i'll do the same for the rest so follow along if you are following uh just like this so now for the italic for the italic i'll make use of far italic so once i import uh just like these now i'll be able to auto import the rest okay so right here i can say far uh italic and actually i'm not getting a suggestion i lied to you so i'll just uh self close it like that and i think i'll have to manually import it right here so for italic and then uh i'll scroll down here right here we have strike so this is abstract through component so i'll say far strike through i don't know why i'm not getting the suggestions to to import to alpha strike uh pro [Music] so since i'm not getting the suggestions to auto import uh what i'll do i'll import every uh react icon component that i need right here and then i'll make use of it so that will be much faster for me so right here i'll import fast right through first strike through and then i will import [Music] far heading for heading and then i will import um far list o l so this is for ordered list and then we'll have a list and then you l for an ordered list and then for a quote left for this for broke good for quote left and then we will have far redo we will have far undo for undo uh we will have underline which was just suggested right there for underlying and then um i think this will be enough for the rest uh we won't be adding them so let's go through this and see what we have for card i would add code if you want to add code you can look for an icon for that and then for clear marks actually i don't know what that means so i'll just remove it if you want it again you know what to do clear nodes i'll remove it paragraph everything by default will be just a paragraph so i'll just remove that because it's the default and then for the heading now right here i can have the icon for heading you can save heading and in this case let me just include one heading so i remove the rest of the headings so i remove this one um i will remove this one you can add some custom styles for uh the icons for the headings so that uh some a certain icon is smaller the other one is bigger other one is uh uh maybe bigger than that okay what i might say i'm just like i don't know okay cool so bullet list another list for then uh list ul that is for the bullet list and then for the ordered list is far and then um list okay good and then let me remove this spacing so you'll have to do this if you want your text editor to look nice it's a bit of a workout but it's just easy stuff okay actually you are you you you don't need to follow me along you can do it on your own so cod block so this is the block code i believe actually not so i'll just remove it so if it's not broke code i'll just remove it and then um for the block code i'll include the fuckwood i think left or something far code left there we go and then horizontal rule you can include the horizontal rule if you want and a hard break i remove the hard brake and undo alcifa and then i'll have undo and for do i'll have and redo so a bit of a workout there i'll save to format and remove all the white spaces so uh so far so good let's see what we have on actually it's not saving yeah there we go let's see now what we have on the browser so we should have removed most of this stuff and then now we have only this with the icons the most basic the heading the board the italic you can customize and include as much elements as you want okay so for me i want it to be just simple now i also need the underline the underline doesn't come by default so to include the underline but uh you need to import underline from the from from the library that we installed so right here i'll say import and i'll say underline and this will come from uh at uh tiptop uh extension underline okay so yeah i think underline is a basic one so we need to have it on our text editor so now down here at the extensions you'll actually add the underline there so where do we have extensions this is a starter kit and then you can use a comma and then you can say underline just like that and we don't have any content for our text editor so i'll make sure that this is actually even completely empty and then to make use of these um we need to choose hammer to include it maybe we can choose it uh to be after the far italic so what i'll do i highlight this one and i'll duplicate it at the very bottom and now we can see here we have on click it's calling editor dot chain dot forecast and then here we have toggle italic now instead of toggle itaric we will save toggle underline so i remove that and i'll say underline and then dot run and we will now change the icon to underline so uh line just like that now i'll save now let's test uh our underline if it's working we can like include it in that way but maybe it's not working so let's make sure it's working so i will refresh and uh let's see if it's added so we have an underlying icon right there i'll click on this and i'll say hello and then i highlight it and i'll click on underline and it's actually now underlined cool so that is working now let us now style this to look much better than what we have at the moment so for that uh we need to add a class to our [Music] component uh maybe right here or somewhere yeah at this div let's have a class name last name and we will set this class name to be equal to uh let's call it text hyphen editor since we don't have such a class name anywhere and then i'll come to app.css and [Music] maybe just here before our pros mirror we can have that okay or anywhere so it will have dot text hyphen editor and then i'll have the styles right here so first of all we have some styles for this class and i want us to have a padding of 10px and then actually my one is not working my keyboard is spoiled so i'll copy that and i'll paste it here uh a very bad developer experience right here and then i'll say amboda top of a 1px and i'll call it solid gray so i want us to actually see our pros mira text editor so we don't have that right here so i want us to start seeing it so that uh you know where to input your your text okay so let's have a background background will be white so all right and then let's have the border radius buddha hyphen radius to be 0 0 and then here you will have five the x and this one five x and then let's have a min height for our input area so i'll say i mean height are not main but mean uh this one will be 100 px okay i keep forgetting 100 px right there so i'll save that and let's make sure that we can see our pros mirror or where we are supposed to enter the text okay so we actually have this top board only but we have some styling around the text the uh what would how how do i call it um the padding and stuff okay so uh for the and you can see the height is also there when i click on each forecast so why we included only the top one is because we have the text editor class which will surround everything so let's actually add that so this one will make the difference so right here i'll say a a hyphen radius of 5 px and let's add that border so i'll say boda to be 1px and then it will be solid gray solid gray just like that so we should not be seeing it so when i save that and actually i didn't save this one uh i'll make sure to save it also let me check on our menu bar okay let me save first and see what we have okay so now you can see we have this border around our text editor which is actually very nice now i don't want it to be that big and i can control the width using our app so where we have the app let us add some styles so i can give up a max width of 700px and then i can uh change the margin top and bottom to be 5 ram and then so that we center our up we include an auto for left and right okay and then we have the font family that's uh that is working good cool now that we'll be much better uh there we go now our text editor is just right here and you can see now we can click on these to add some input very very awesome okay now the thing is i want us to sell the buttons right here and for that we will target the menu our menu bar so if we check at the menu bar you come to tip tap you'll see that we need to include a class for our everything right here so that so let us wrap everything with a div and make sure the very bottom we also do the same okay it was drawing an error right there so i had to check now right here you can add a class for our menu bar so i'll say class name to be equal to menu hyphen bar just like that so i'll save that now we can customize our menu bar in our css so after the text editor we can select dot menu hyphen ba and include the stars right here so for this one let's have a padding [Music] of a padding bottom of about 5px and then let us have a display of flex so we want to separate the undo and 32 icons from the rest so let me show you what i mean so we want these two icons to be on this side so that is why we are including a display of flex and then we will align the items to the center and we will justify the content to be space between so i'll say space between actually not around but between just like that so i'll save that and we should be having now uh having that on a separate so when we check this one you'll see that we have our buttons right there and um our undo and redo so we should actually change the structure of our html for that to work out okay so what we will do i'll include a div right here to wrap our undo and redo so i'll add a div and i'll cut this one and close it just right here and then i'll wrap the rest with a div as well so right here let me say dave again and let me now cut the opening tag and then go to the very top and include it right here so i'll save that now we should be having though these particular uh icons separate from our undo and redo so when i come uh yeah this is now what we have these are on this side these are on this side pretty nice and this is now starting to come along now let us tell the buttons these buttons which has the icons so i'll go back to the code editor and go to up dot css so right here say dot menu hyphen bar button and we will be adding a bit of styling let us include increase the font size for our buttons or icons that is so they will take the shape of the parent so this is my program right here but uh don't worry i'll fix it soon so right here we have we will have 18 px and i'll have some margin for this for this particular icons or buttons of 7px and then uh that is the general margin around them but for the margin right it will be a bit more so let's have so let us have the margin right is 15 px so a bit custom right here and then we will remove the outline when we click on the button so i'll set it to none and we will remove the border and we'll set it to none so i want us to uh remain only with the icon so i remove even the background color so that we only remain with the icon and set it to none okay and then let us change the color to be rgb and this will be 70 and then 70 and then 70 and we'll change the casa right here to pointer so pasta will be pointer when you're using actually we missed the semicolon that is why i'm not getting the suggestions okay cool so that is about the button and um let us see what we have i'll save and let's see so we should transform there we go so they are much bigger and they don't have that background they outline in the border which is pretty awesome pretty cool okay cool now uh i want us to sell the active state so when you say hello and then i write this one and include bold you will see it's bold but now we should see that b here it's active so that is what i want us to work on so we already have a class that is being added automatically by our tip tab so you can see right here class name editor dot is active bro code if broker is active we add a class name of is active else we add null so there is active class is already there all we need to do is to style it okay so now right here um we will say button dot is hyphen active actually it's not hyphen i think it's an underscore active and we can add the stars here so right here we will change the background of the button uh to be rgb and we will include 1 97 and then actually i missed the one 197 and then 197 again and finally 197 so that is british color you can include any kind you want so right here also add a padding to it of 2 px and then i'll include 3px so this is top and bottom left right and then now down here our attacks have a good radius so that it doesn't rule us the corners are doesn't look so sharp that is all we need to do for the is active state so let's say now so i'll wait for it to load or compile or let me just refresh to make sure that it's refreshed okay let's see if it's working hello and then let's have that so it has added hello but the inactive state is not there so let me see our tip top right here and it's actually a hyphen so i'll come back and change this to a hyphen i was wrong so i'll save that and then let's see if it's uh working so there we go now you can see bolt it's uh having the active state so we know that bolt is active and when we say hello react and i write this one remove so you can see right there when we are right here it's not active when we arrive there it's active when we are right here we can activate the uh this one [Music] so there is a bit of an error okay cool the class so let's let us fix the underline uh the active state is uh actually messed up at our underline because we did a copy paste so for underlying um let us see let's go to where far bored for italic and for underline so this is not itaric but i hope underline will work i'm not even sure let's save and see so it should refresh and [Music] i don't know let's see if this is working so let me manually refresh this one and let's say hello i highlight it click on itaric now we only have the italic one let's see if this one is working that one is working as well independently actually cool so now we have styled everything to look nice you can take this further that the next level now i want to show you how you can take the data from this input or this tip-top input and save it to the database or show it on the ui because if you can do that then there is no point of doing all this so just stick around with me so when you come to the text editor at tiptop component uh scroll down right here we had two things when we called the use editor hook from tiptop we included uh the extensions and content but we have what we call an on update property which will like be checking whether we are updating our edital note and then we can extract the value from there so right here we can say on update and it's actually suggested right there full colon and right here we can return something using another function so right here we can have another function and be able to return some stuff or do something with it we don't necessarily have to return anything but we can do something in there but now this our function has access to editor so if i do this i will have access to edit just like we had access to our editor right here at menuba okay the same same way we will have access to it right here and now this editor will give us uh the method for getting the output or the that input and output it to be something else like we will have access to that html that we type in there so right here we can see cost html will be equal to ebitda uh dot get and you'll see now here we have dot get text json html and whatever so i want us to make use of html you can get the json and save it the database or you can get the html i think html is much easier to work with if you are not doing much implementation of the data so get html now we have our output right here at our html so if we come right here and say log console.log html and save we should be seeing it at the console so let's test it out and make sure you're getting those values at that particular constant so i'll hit f12 to open the console and the console currently we don't have anything but as soon as we type anything we should get it there so when i say hello you can see that by default it's a paragraph that is why i didn't include the paragraph stuff right there but now when i highlight that and underline you'll see p and then you hello so this is in form of html uh well cool when i underline when i change it to italic we have all the html right there so now we can like store this instead and maybe save it the database or display it on the ui so i need to show you how to display this html on the ui because by default it will not work out we need to like pass it or something okay cool so now i'll come to up okay to update gs actually i'll close the stylings now we are no longer using them and right here i'll play some piece of state so i'll make use of the used state hook from react so i think if i just use it i'll get an auto import so use state and this is coming from react i invoke it and this will be a string and then right here we can say const and let's have desk for description and set desk for set description to be equal to use state and that is a string pretty nice now we can call this uh set desk or pass it uh via props to our tiptop so right here i'll set our desk to be equal to i call the curry brackets set desk i save once i save i can go to tiptop and at the tip component i can receive that as a plot set desk and then our down here instead of logging this to the console we can call set desk so i'll remove this one and i'll say set desk or set a description to html so i'll save that and now we have that data in our state we have it at our description so we can like create a new component for the output and actually there is no need for me to create one i can just display the output right here in form of a div so i'll include a div and right here i can include the output so uh now this is the point that we use the html react password which we are installed so right here i can say import uh this is pasa and these will come from html and react password html to react password or something now that html doesn't display directly right here so right here i can include the curry brackets and then i can say pasa so pasa why is it passa and i'll invoke this and i'll pass the desk this one the desk okay and i can see this is having a typo set code and uh yeah that is actually all but first to now like sell the html that will be displayed right here i will make use of a class name and this class name is the close mirror so the styles will be similar to that so right here pass pros how is it written uh close i think it had a copy iterator to start with and then it had closed mirror so i don't want to start it again you can start it again if you want but i'll just use this one and now we have actually now uh passed our output using this react html react parser and now we can we will be able to see the output hopefully so let me refresh to make sure that everything is refreshed and uh i'm actually so tired right now yeah let me uh wrap this up by showing the demo so i can say hello and there we go you can see now it's outputting down here and then when i write it include the block quote you can see it's working when i come right here and say one and i want that one to be at least one two you can see it's working as expected cool so there we go we have created a text editor using react and tip tap another thing is what we have done mostly is studying it getting the input storing it storing it instead so you can take that state and save it to the database or you can show it directly on the ui and that is it for this particular video if you enjoyed leave a thumbs up subscribe to the channel for more awesome videos just like this one and now i'll see you on the next one you

Channel: Chaoo Charles

Views: 19,333

Keywords: chaoo charles, chaoocharles, chaoo, charles, react text editor, tiptap editor

Id: JFzH4bDEUPo

Length: 47min 48sec (2868 seconds)

Published: Tue Feb 15 2022