Build a Rich Text Editor in Next.js 14 ( TipTap - Tutorial )

[Music] hello everyone out there welcome to solve it out this is Annie here and today's project is on how to build a text editor on next J 14 here you can see this is a notes speaker app where I can write notes here and add it and the notes will get displayed just below this text editor the main focus of this project is how to create this text editor and use it with nextjs let me show you a quick demo of this text editor I can write something on it like maybe solve it out also I can copy and paste something let me copy this to arrog graph and paste it in the next line now let me me do some changes like for this one I want it to be bold for the next line I want it to be italic the next I wanted this to be underline for this part I wanted this to be right nextext for this much part I want it to be bullet point here here I don't want the bullet point for the next part this one I want it to be the ordered list I click this one okay ordered list is created now a small part I want to create as Asma block quat you can select it here you can see and the small part here I want to make it a code here so yeah this are the changes that you can do you can undo it redo it and now let me add this note here if I add it and I refresh it on refresh you can see our note is added for this uh display of the note I'm not using any back end the note is getting stored in the local storage as I said earlier the main focus of this project is how to build this text editor and display it like we have selected the Styles how we have selected during writing the note and while displaying the note it should maintain the same style the main focus of this project is to build the text editor and also to parse the HTML code so what's we are waiting for let's jump on to the code I have installed the next shase along with typescript and Telvin CSS this is my package.json you can check it out that the typescript the TN CSS and the next 14.11 is our project conf configuration now here I have made some changes like in the main page. TSX inside app I have removed the code and have maintained a simple class name a background of slate or you can say black almost uh Min height of screen withd full and padding bottom 10 this much with this much CHS style I have just written out solve it out here for the main page here I have created a component folder where I have written out the four components that we are going to use one is the note peer the notes the tip Tab and the toolbar so this four components we are going to use so I have predefined it and just written out the name here so our folder structure is ready so let me now run the project you can see this is a solv it out here written now we are going to discuss about the tip tab editor now this is the editor which we will be using in our next J scod so this is quite widely used editor and let us go to the docs this editor TP tab. da here if we go to the getting started we can see here A bunch of X TXS it is it can be used in so we want next Chase and we'll click the next chase you can see what are the requirements here how to install the dependencies and how to create a component here we'll follow it but first let us write the note peer component here first let us call the note peer component and then here we're going to start with a form field as you can see in our deployed link this is the form field where we will means where we are adding if I write something here this is a form field and we have to add it here that we are form submitting the form here we'll write the style for the form Max with of 3XL with full GRE display grid Place items Center margin Auto the padding of 10 padding top and with a margin bottom of 10 this will be our note speaker heading which have a text Excel a Tex Center and the color is Sky and a margin bottom 10 you save it here and see this is what we have done till now next for the input field I want it to be the tip tab text editor so let us go to the tip tab docs and do the npm install of the tab editor as our installation is completed now let me put the component here this is our tip tab component that we have created we will import it first let import it in the top and here I'm going to pass two props one is the content and other is the on change function let me first Define the two here first will be the use State another will be the onchange function here call the use State you can see uh I have defined the UST State content and set content and defined the type as string and for handle content change I have placed the content there in inside the set content okay this error is coming because we haven't configured the tip tab still yet so next we'll do that if we mention the two props here you can see our error from the notemaker is gone now let us first configure our Editor to configure we will be following the docs here that is how to create a new component like after the installation we're going to create this editor configure this editor part so let me copy the code total code and we'll do the changes accordingly okay here our two props will be there our on change and content prop is here and let us save it now you can see this error in the terminal is coming because in note peer we have used the use state but we have not defined the use client that is in next Chase if you're using the state then you should Define the component as the client component if I do this you can see the error is now gone so next we'll change this editor according to our need now we'll not need the content here we'll remove it rather we will be using editor props you can see here I close this this is the editor props inside there is an attribute where I have defined the class and I have written all the Telvin CSS customization classes because uh we I want to decorate our editor uh using the telin CSS so I have used here all the telin CSS classes there is display Flex Tex call padding then there is justify content start border and right and left then border G 700 text G 400 item start so there are multiple CSS classes next we are going to add the on change function first above the editor we are going to create a function named handle change in this handle change function I'm accepting a new content prop of string and on on change I'm passing the new content okay this handle change function I will be using inside the editor when the content will change it will pass the HTML inside the handle change function and from the handle change function I am passing the content prop to the note peer on change function okay here we are going to send the means on submit of the form we are going to send this data to local storage for storing so this way our props are getting pass now we are going to return a div here inside the div there is a toolbar here and toolbar is also having some props that is the editor prop and the content and this editor content is the main where we are pasting or writing our notes here for the editor content I want to to add a style first that is white space is equal to preline this is specially used because um when I'm pasting the uh laurum or any other line is decorated that should that format should maintain so for that you have to use this style that is wi white space Prine so that it maintains its format so now let let me import the toolbar and this type will remove when we will write the props here inside the toolbar so our tipt uh component is almost ready here let us move to our toolbar component now to start with the toolbar component first I need to download a library for the icons that is BL side react this is a very good library for the react icons and here I want to import a bunch of their icons see here the Bold strike through italic list list ordered heading to underline code undo redo code so yeah I have uh implemented a bunch or you can see imported a bunch bunch of uh lde react icons now I'll Define the props now the toolbar the props that is receiving in the toolbar is this mentioned here the editor and the content so let us write here the props now this props will have a specific type which we'll Define here the type props will have a editor which will follow a type of editor or null and the content will be string now this editor we will import it from the tip tab so the type editor is been imported from the tip tab react and now all the errors or the red lines are gone save this here if the editor is null then I don't want anything to return okay if there is no editor then the toolbar shouldn't exist only so this is a just normal check next let me add some Styles here some basic Styles like padding uh border radius display Flex justify between align items start Gap and a with full and the flex wrap border so these are some basic styles next we'll go to the specific buttons another div to wrap up all the button here this div will have a display Flex justify start item Center G five with full and for LG the width will be 10 by 12 and a flex strap now we are going to write our first button so if you focus on this part of the button you can see the button has an onclick function here where uh like whenever we click a button there is a tendency to refresh the page but to prevent it from refreshing I have used e. prevent default and this part is our main functional part that where this part will show that editor dochain do Focus this this is our toggle bold and do run so this function is the tipt function which will help us to toggle from like the content from Bold or not bold okay so to toggle this onclick function will help this is the basic class name where if the editor is active that whenever I'm clicking the Bold uh button then there should be a different background color to show that this button is active elsewise it will have no background and just a text of Skype okay this is the class name part to show between the active and non-active and this is the main functional part of the button where you are doing this chain. focus. toggle bold. run here to find the Bold function I have used this bold blue side react icon and called it between the button so let's save it bit and show you guys how does our first button looks like you can see here this is our first button and if I click it will like show this background and if I again click it will go back to its state like this we are going to create all of our buttons in the main site you can see there are so many buttons here we're going to create it one by one so our bold button is done next we will create our italic button this is our italic button we are almost using the same function as there is a change in the on click here it is change. focus. toggle italic for now and then run elsewise almost all the code is same and the icon is different here I'm using the italic next there will be our underline button and so on now I have added all the buttons here let me go through the code most of the button codes are almost equal just there is a minimum uh change of the function so I have uh pasted down here this is the Bold button you can see the main function is editor. chain. focus. toggle b. Run next is our italic button where the toggle italic function has only changed rather all the like on click function or the class name is same next there is a strike through button a heading button the on unordered bullet list button the ordered number list button also the block code the code the undo the redo all these buttons are present here and this functions are the inbuilt functions in the tipt editor so it's very easy to call those functions and apply it in our buttons so let me just check our Local Host you can see all our buttons are here just one button is missing till now that is the underline part or which we have to download or you can say install another library tipt library for the underline function now here let me paste the underline button then you will understand what's the library we have to install you can see if I write here the toggle underline it will show that the toggle underline does not exist on the chained commands because the underline function is not present in this tip tab react Library we have to install another uh library of tip tab only for the underly function so let's go to our tip tab component and here first let us install the underline extension of hip as the installation is completed here we going to import the underline from tip tab SL extension underline and we'll pass it inside the code editor extensions as we save it here if we now go to the toolbar you can see toggle underline error has been removed can see in our local H the underline option has been added like if I click it here you can see the underline option is there now if we go to our main deployed link we can see here an add button is also present we'll quickly add that then our toolbar function is completed we'll move to the below part and where our div is getting ended we going to write you see if our content prop is present like if there is any content in the editor then only this button will show so this is a type submit button with some basic uh Style and there is the add heading if I save it and go to the Local Host if I write something here then you can see this add button and if there is nothing in the editor then the add button will remain hidden so our toolbar code is completed next let's go to our note peaker and save our form data in the Local Host now inside note peer let us write our onsubmit Handler here let us write the const function now for the handle submit function I have written from prevented the refresh there and have created a new object where I have used an ID and the content now for the ID I have to install the U uu ID so let us quickly install that let's import The UU ID here you can see here that could not find the module as we are using typescript we must also install the types of u u ID now the error is gone as we have installed the types so we are first going to check the console if our data is getting in the console or not let me copy some paragraph from Laura msum maybe this much paste it let me type something it's working fine let me add some Styles like gold metallic underline Al together and let me click add button so if I go to the console you can see this is the object here and this is the content showing here okay the content is actually have all the HTML code so this is a great thing our notemaker or working fine now we have to store it in the local storage now when we storing in the local storage we must keep in mind that we are going to store an array of objects there so after storing one object we are going to again update that array and store another object as as we go on adding our notes so with keeping that in mind we'll first check if there is an existing data string by doing local storage. getet item my data the array will get stored in the name of my data here next we'll check if the existing data string is present then we have to parse the data or there will be a new empty array will be created finally we will update the data with using a spread operator we will update our new data there if there is an existing string and we'll set it in the local storage the Jen format lastly we'll make our set content empty so our state has been return to its initial State our note Pier component is almost done let us check if our data is getting stored in our the local storage or not let me write something here let us solve it out we add some Styles and add it here let us check the storage if we go to local storage you can see here my data is present okay my data with an ID is there and the content is there now let us quickly pass this data and display it on our screen now to parse the data we will be writing our code in the notes component let us first call the notes in our main homepage inside the notes component I want to call a use State and a use effect hook first let me import this to here I have defined a use State data and set data and inside the use effect I am calling my my data item or the my data object array and if I'm checking here that if the existing data string is present then we are going to do jon. bars existing data string and inside the set data use State I am passing the existing data and this whole use effect is called one time as our dependency are is empty inside the div element I'm going to put a little style here that is a Max we of 6 XL and the margin Auto and addding of left and right is five now I want to display my notes in a machinary style the machinary style of the data means that whenever I am adding any of the notes the there will be no Gap in between like a note may be this long for the first note or it may be this short for the second note but the gap between this two must be filled so this type of layout is known as the machinary layout now to follow this I'm going to download a library or can say install a library there that is react machinary we are going to use the react responsive machinary npm where it is mostly used here you can see for the pictures like some pin interest pictures where we can see different layouts there and this is quite easy to apply also Implement in the code is easier so let us do this let us use it copy paste it in our terminal copy and paste in our terminal our package is installed let us go to notes here we'll import machinary and responsive machinary from react responsive machinary here again there is a typescript error where you have to save the types here so just copy from here and paste it in the terminal so our types are installed and the error is also gone now let us implement it responsive Machinery is mainly used for the breaking points of different devices like for mobile view only one column is required for the laptop view a three column will be displayed so for this easiness we use the responsive machinary next we'll use the machinary component here we're going to map out the object that we are getting from the local storage here inside the set data we will map out our data here is our map function where we have an item and the index number add a div here of course Kei is equal to index now in our deployed link you can see here each note has a heading you can see Note One Note two note three so for that heading we are going to use index to number our heading as the index value of the array starts from zero so plus one is added so when the first element is added it must display as note one next for parsing the main content of the note I want to use a self closing div tag here I want to set a property of the div that is dangerously set inner HTML to the item content this will automatically read the HTML and display only the specific Styles accordingly so we don't have to use any other but party parcel for styling the element here for this error here to remove it you have to use the use client as we are using the hooks and the error is gone now let me quickly add some style in our content now for the Styles here from the white space preline to rounded LG this all are the telin CSS classes which I have applied the pros mirror is solely dedicated some specially customized CSS class for the tipt editor now if you want to write some customized CSS uh which is like not present in the tailwind and you want to customize your app using the cascading CSS so here in global. CSS you can actually write your customized CSS part here I have written the pros mirror have used it and have mentioned uh few CSS Styles according to me which I want to customize it you can go through this part I'll provide you the link of my GitHub code and you can go through this CSS part let us move back to the notes and we have completed the class class name part here now one thing that we have missed it that is in our deployed link our notes are following some color structure that is colors are coming randomly and beautifully it's making it more visually presentable so to apply this let us first write the color array this a small CSS part which can actually make your display presentable here I took a bunch of colors that is a array of like almost five colors here now I'll implement this colors in my inside my div for the color to randomly occur inside my first dip so where the key is been taken I'll write the style here where I want the text color to follow like U whenever the length of the color and the index number I'm doing mod there so that it randomly uh make a circular round of the array that is uh after completing the five colors there then it again start from the uh first color so it keeps on changing the number of post we make it goes round and round so yeah there is this is a way where how we can actually you know show multiple colors there also I want the note heading to maintain the same background color so yeah the previous one was only for the text color and for the note also the background color I want to follow it in the same matter same way it should change the color according to the the post so our note component is done now let us go and check so now let's check how our note speaker Local Host app is working here so let me write out so I wrote here my new about my new tutorial so let me add it you can see my note has been added here with the color here now let's add something else now let me add this random note here and let's check how it's working you see notes are getting added and our machinary layout is getting followed or not let's add a few more notes and see our machinary layout is getting followed as there are different sizes of the notes that is uh I'm writing and it's getting stored in a really good manner so this is how our notes speaker app is working the way you can Implement your text editor in any of your nextjs application now this uh implementing the text editor really seems easy right now I hope you all understood the process if you haven't understood I'll definitely share my GitHub code you can go through it you can customize your CSS according to your choice also you can comment down below if you have any doubts or any comment regarding this project till then this is Annie signing of let's meet in another new project

Channel: Solve It Out

Views: 2,222

Keywords: Tiptap Rich Text Editor, Next.js, Typescript, Frontend

Id: LiELuVk12ig

Length: 37min 30sec (2250 seconds)

Published: Sat Mar 02 2024