Rich text editing in React with Draft.js | Tuomo Kankaanpää | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Rich text editing in React with Draft.js

teacher avatar Tuomo Kankaanpää, Software Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

19 Lessons (1h 50m)
    • 1. Introduction

    • 2. Course resources

    • 3. What is Draft.js?

    • 4. EditorState

    • 5. ContentState

    • 6. Summary of EditorState and ContentState

    • 7. Setup sample application with create-react-app

    • 8. Add Draft.js

    • 9. Draft.js editor

    • 10. Add rich text utilities to the editor

    • 11. Enhance the rich text utilities

    • 12. Display and convert contents of the editor to JSON

    • 13. Understanding how Draft.js ContentState represents the content

    • 14. Save editor content to database

    • 15. Load saved editor content from database

    • 16. Display saved contents as HTML part 1

    • 17. Display saved contents as HTML part 2

    • 18. Best way to display saved content

    • 19. Summary

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course we will go through how to add rich text editing features (such as bold, underline, italic) to your React application, using an open source framework called Draft.js.

You will learn

  • How to add rich text editor component to your React application
  • How to add features like bold and underline to the editor
  • How to save rich text content to database
  • How to load rich text content from database
  • How to edit saved content
  • How to display saved rich text content e.g. as HTML

Prior knowledge of rich text editing and Draft.js is NOT required. Basic knowledge on React is however required because we will be concentrating on Draft.js features.

My other course about React fundamentals

Meet Your Teacher

Teacher Profile Image

Tuomo Kankaanpää

Software Developer


Hello there! My name is Tuomo Kankaanpää and I am a software developer and teacher living in Finland.

With over seven years of experience developing web and mobile applications professionally I am excited to share my knowledge with you! My goal is to help you learn new topics with ease and hopefully to help you avoid some of the mistakes I have made in the past.

If you have any questions please don't hesitate to contact me! Also be sure to follow my social media, especially here on Skillshare and also sign up for my newsletter so you never miss an update!

See you in class!


See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello, everybody. My name is Don McGahn camper and I'm irritating The course greets text anything in the react with drafts ESP In this course where we learned the basics off drafts A s a framework for building rich text Any thirst in the react like react drafts A s was created by Facebook and has been used for Facebook's own components. Sets us comments and status updates. It is a great way to treat sex editors to your react application. This course is a basics course for draft CS, so no prior knowledge on draft CS is required. Basic knowledge on react, however, is expected since we will be focusing on traffic after this course, you will be able to at draft editor with treats, text editing features to your own. React up the case. A few of the topics we will cover our what is Editor and Content state and why are they important? How to add for its text editor Component to react application how to add features like boat and underlined to your editor component how to take its text content from your draft editor to a database and how to display saved Brits text content, different ways Success html So it turned me on this course let's get started 2. Course resources: all the quote for the application where coding in discourse can be found from Jacob. You can go to my profile momento and get up. And from there you click repositories. And from there you shirts for the trap Js basics course. And you can find all the court from this repository. Andi, this got here is the finished application. And if you wish to see the coat in earlier steps or after its video from different steps, I have created branches for all those steps. So, for example, if you are watching the video where we at traits text anything but, um, support the editor, you can find the state of the application from these brands there. And there you go. So, yeah, if you wish to follow along or see the coat for the finished application, this is where you invite 3. What is Draft.js?: terrific ts. It's a framework for billeting greets text editors react, and it is powered by immuno immutable model, which means that it uses mutable chance under the WHO Breath test was originally created by Facebook. When they need it, toe afford their own internal or its text. 18 futures success comments and status updates, for example. So they came up with Trap Tess, and they open sourced it in 2060. Interruptus editor of the State and the representation are separate. Which means, for example, if you no weird person any tourists where you at some hitter? One element, for example, to the text it That's H one inside the Condit. And when you say that content database, for example, the H one tacky saved alongside with the content but interest. So yes, it's done a bit differently as we will see upcoming Lexus and as any direct component Draft Yes, Editor also triggers rear ender every time the state updates. So every time we type into the editor, it re renders. Here we have, ah, an example editor on the traffic status from pace and we can type in here, have a world, and every time we press a key? No, no, no. It re renders the component. And in this demo we can see how the different styles can be applied. Harry's bunch of buttons on top of the editor, which we can use that different styles for text that pitch, for example, we had a bold on hair elements when you install draft. Yes, it doesn't look like tastes when you first. That determines the fates. Editor has bare minimum, thinks on it, so it's highly customizable, customer miserable. But you don't get teas like right away. You have to beat these on your own. But no worries we would. They predict that on the upcoming election. Yes, let's hope in the editor state editor state object on the next section. 4. EditorState: draft CST. There's something called Editor State handled it state off the whole editor. So what is interested? It is on top level state object for the editor, and it is an immutable record that triple since the entire state off the track editor. So it's basically full snaps snap shirt off the state off the editor, it told the current text content state, which means basically the text off the editor. And it also hopes the current selection state. That means if there is some part of the text selected in the editor, that information is stored in editor state object, then it also includes the fully decorated representation off the confidence. So, for example, if we have added some styling that it text in the editor, information about those styles is said in the editors that object then also, it includes under reduced act with is comprised off contents that object and convince state objects are something we're gonna look into. The Knicks takes 5. ContentState: contents state. We talked about editor state object in the previous section. Andi convinced that object is a bit different than Interstate object. It's also a new, immutable record, but it represents the entire contents off the editor, which means that text block and in less styles and something called Entity Raines's. It also represents to selection states, often Editor, which are before and after the rendering off the contents. So we have one selection state that's valid for the their state before the convince surrendered and then also one after hundreds are rendered. And if you're wondering about the look on endless, that's an indirect kiss, we will cover them in the next sections. Then there is a method called Get current Content in the editor state object that returns that current currently being the state that is currently being rendered in the editor. And that is type off Convent ST Options. And that's the the most used to use case for Content state or how you get the Garden State the get critical event middle goal in the editor state option 6. Summary of EditorState and ContentState: So, to sum up the editor state and conduct state objects, here is an illustration off both of them. So first we have the editor state that is this my guest square, Yellow Square. And it holds in it content state object and the under readers deck. And, uh, the under reduced that was compressed off content state opportunites. Inside the content state, we have the editor contents and to selection states, which were Alexis, a selection state before the rendering and selection state after surrendering. So this is what the litter state and constant state objects look like and how they are, they are being used. 7. Setup sample application with create-react-app: Okay, so we're gonna use, create, react up for discourse, create our application and use the draft. Yes, Editor, if you are not familiar with create react up, it's basically allows us to get started with react application first and easily and you don't have to take care of any configuration. It works on Mac os windows and niks. Okay, so we start by installing it or creating a reactive create rick up application. We use baggage meter, yard for peace. So we're ran Tisco month. Urine creates react up and then our application name. So I would open my terminal. I mean, the folder that I want to create the application and I will type inter comment you're in, create react up and then the application name I want for our app. And I'm gonna use dressed. Seven. Pull up, then it's working. It'll take your seconds. Didn't stall or create the application. Meanwhile, we can see that this create react to create that create this kind of folder structure. Andi way Don't we are not required any configuration on we or we will get the votes we need to build our APS a week and start coding right away. Once the installation is known, we will good our application folder on run yarn start. And it will earn the app in development Moat in his mattress. Look, a host 3000. And it also comes with Toyota reloading. So Pates will automatically reload when we make changes. The gold. But let's see how our use license going. Okay? It's finished. No, we can move if people typing unless we see we have a folder draft symbol up. We can go inside that And in here I will open my my resource to the coat which I used to used to typing my gold. They tried here. Andi here received the create direct up. Created all these folders and files for us. So weekend start coding right away. Let's we need to still start the application so we can see. So we're typing that you're stark, which will I'm sorry, which will start the development server. Andi, our application will open in this look all house, local host, 3000 address like this. So you should see this kind of baits right now. Let's take a break and continue in the next six 8. Add Draft.js: Okay, now that we have over create three up installed and ready to go, we can add draft. Yes, our approach. So I'm here at the trip to his work website and we're gonna go to get up on the upper right hand corner. Did the trip Js repressive story on your weekend find getting started. Okay, so we see that it's distributed via NPM on it depends react on directo and we can install it with Yorn with urine at draft Js and indiscriminate. We have reacted direct. Don't also. But let's see if we open up our project in the area code and I will take a look at the package chase and file. We can already see that create react up in stores to react and react dome so we don't need to install those We only the structure. Yes, back. It's so let's open up terminal on our protect folder and we're gonna type in. You're at caressed Js, and it's downloading and installing it. Here we go. Now we have trapped. Yes, at it are protected and we can check the packet station fall and we see that it's at it in here. Okay, so I know where you're ready to use it on. Let's take a break and continue in the next video 9. Draft.js editor: Okay, now we have trust status. Anything extolled? So let's take a look. We can create a simple editor component. No, we have our application. It's the default. Create wrecked up applications. Or let's some cleanup. That is the updates file. I'm just gonna free you quite a bit goat here because we don't need it. I get a little bit bigger, Andi. She and what we want to do with add a new component to know if I saying this and take out the pro jher, we should see the blank Bates. That's okay. Next up. Uh, I went up at a editor component, so let's create that. I read. Click here and you find we name it my editor Caisse on a weekend it your And in this file, we will have our traffic. Yes, Editor, So we can use it multiple places. So I'm gonna right a little bit code now and explained as we go, And when I am written So with first important react, then we import editor and neither state from draft. Yes. So these are This is the actual editor component, and this is the editor state that we talked about very earlier. and we're gonna need it when we create our editor and we burn them from chase packets, which we just store. Then we create basic, create component. Andi, it comes director for and render Method. And let's just return a diva. No world here on Leslie. We need to export this components of export default. Like Peter like this Do we have here? Yeah, OK, we don't have to care about those right now. Now we have our component. We don't use the editor yet, but I just wanna make this component and see that we get it working and then at the editor . So know what we do. We go back to the APP, Jess. And in the up test, we import our editor and display. So import my editor from my editor like, thes. They're in the same folder. And you don't need the doctor. Yes, in this case like this. And then we just So it's so my editor with that no way should have Hello world printed on the webpage. See, there it is. Cool. Next up, let's at the actual editor component. So I'm gonna kiss and what we want is the actual draft chest editorship editor like this, and we need to passing some props for this. So first we departed editor state something, and then we need unchanged method. This method is called every time the convent off The editorial is updated reports every time to receive it. Change anything. So, for example, if typing some later, this is fired. So that's something. Eso what? Tsp We can at them to our or we can add estate for component. So distant state. Yes, these Andi just die. I'm explain after. Okay, so here we define a state for this editor and we have this editor state variable in it. And as I mentioned earlier, nearly we dio if we want to create an empty editor, we need to have these senators. They don't create empathy metal goal. So we can't just do something like these. So it's industry or rule or and the object because, as we remember, the editor state has has the, uh, content state and the under reduced deck in it. So it's not It can be No. So we need to use this function, go when we create and the editor state I know we can passing passage in here just distance . They don't editor state like this. Then we also need the own change metal method on in the change meant that we want toe update his editor state. So when this is fired, it receives the trust. Says editor passes an editor state object as parameter for these engines handler. So we can just take it and then update despite its components state with the new editor state. So let's do that in here. We can define t stood on change equals these. So here we define a function that take, uh, gets editor states variable as parameter. And in that function, we called piece that said state method on update the editor state with the editor stated object. And this is a bit shorthand. I started writing it. So this could also be like this on snow since they like this. But this is a modern way to do it, and it's cleaner. So you should use that. Okay, then we need to passing the the function that we want to use the witches qualities that change like this and savor component. And if everything is OK, we should have working Editor in our hands. Let's open up our pressure. And even if you referenced the pates, you don't see anything. It's just white, but actually there is editor here. We can see cursor changing, and if we click there, let me to a little bit that now if I type, there is stuff coming through so we can inspect it in a week. I see there is a component here, the operate the upper left corner, but we just don't see that it's there and we can type. Indeed. Okay, right now, our faces draft Js editor. But right now it's quite played and simple. It doesn't have any cool features yet. So next up we will see how weekend at some rich styling, rich style buttons and stuff for it. So it becomes a bit more useful. Okay, so let's take a break and continue in the next six 10. Add rich text utilities to the editor: I know that we have our editor component the same flavors. Ready? We can start getting some rich text editing utilities to it. So let's get right to it. I'm gonna open my editor. This is the my editor component. And actually, first I'm gonna add some styling 40 so we can actually see it on the page. It's just makes makes it easier for us to si com Bolden. So I'm gonna wrap this editor in a deal and at some styling for Steve make this. We're gonna add we off 100 pixels. We're gonna have some margin for it. So marching, let's make it 10 pixels on each side. And then also, let's at a great border for the editor. So Bolger on one pixel white so late, border and gray cool like this, then we can passing. They did their status. This saying Oh, this? Yeah. Okay. No one had Stanton, Ethan, etc. It works. Yep. Looks good. We have some border ground. Our editor, and then we have, uh it's with that said the pixels court. Okay, next up, let's let's at some some of those rt utilities. So first of all, I am going to import something cold. Reach your feels from the trap T s library and this rich details he said, Ah, it provides some utility functions to handle different kind of breadsticks. Pete Church. So let's start at at the ocean on t where we get so what I need to do is at a prop here called Handle Key Command. That's my get teached up and look, and we need to bind this. Bind it to taste. So that is correct that these variable escort correct taste variable inside inside the function. It's like that on Let's make it a bit clearer, separate thes one their whole lives like. So no, we need to defined this. So let's add it, command and it takes the command asked a parameter. So what happens in the truck, says Editor, is whenever we executes some kind of key command, for example, control be if your own windows or commend to be if your own neck, which is the command for bolting the text or command or control U for underlining and so one. So we can handle those key commands with this T's, uh, function. And when some of those, for example, command bees pressed. It calls this handle key command function, and it passes the command that was called called as a parameter here. Andi, In this function, we need to take a comment, see what it is on based on that, it it the contents off the editor. And luckily, we have the Richie tills object that provides those utility functions. And it really it really takes all the hard work. Well, I would be have and it takes the command on its editor state accordingly. So let's let's type in the code. And I'm gonna explain it more detail after we have attempted. So first, we need the editor state from our state. Then we create a new state. Greeks, your pills have a look equipment, and as a parameter, we see we need first the editor state object that's going to be modified, and then the command. And so first we passing editor state on Second is to command. And as we can see here, command is just a string. For example, undo, redo, italic goat bolt. And so so And we get it as a parameter. But we don't have to care about what it is because the handle G command function from reaching tools takes care of it. So let's pass in the command like so. And this function now applies the command to the editor state and then returns the modified stay editor state object and it saved in the new state function here. Sorry, near ST are variable here. Okay, next up. We need to update the editor with the new state on, and we should first check that the new state. It said if it said so, the function returned a valid state and not know we are going to call distant on change function with the news day. So we're taking advantage off dysfunction here because it takes deep new editor state that's parameter and sits the States. We can use that passing the uniformed. It is our state as permed like so and then we also need to return through. So Trump CS knows that the command was properly handled and in the case, both the new status invalid. Well, what three turn falls like so and now we have implemented the handle Kikkoman function, and then we passing it as a prop for the editor comported. And now, when we save on open our editor. Uh, if we type in here Hello? And then press some whole turkey for its next anything futures, for example. I'm person now, come and be for Bolding and then typing in world, we can see that the world is now bolted. Andi, if I want toe also like this, for example, italic and underlined again, uh, just highlighted press command e for italic And come on you for underlying like so. So, no, We have reads text editing features on our editor that work with the Hokies that the general whole turkeys for before its next Pete Church. Okay, let's take a break and continue in the next section. 11. Enhance the rich text utilities: okay, now that we have implemented to reach equals handle key command, we have the it's text editing features enabled. We keep findings for example, Bolding by command or control. Be now what press it type and it bald the next. But let's at some buttons also that do the same thing. So if user doesn't know the key commands or key bindings, he or she can use the bottoms. So I opened up my editor component and let's at just the second t Okay, let's at some buttons here that do the same thing. So I'm gonna first make a deep here buttons and then we just at the bottom Andi a tactically candor for So come on, click. And here we can called the 100 key command function that we have defined here and even the command as a parameter. And as we can see here I have. It's just that the code shows the the comment type different values it can be, but we can add, for example, coat undo, redo, delete, strike through boat italic all these kind of comments and we do it by just passing a string . For example, bold forties head lucky command function. So first, excuse me. Yeah, sure about that. Yeah. So this on with Scottish key command and give the commander's stream. So if we want this to be bold for bold with that in bold, let's a text board for and we can do the same way italic underline. For example, I'm gonna cope with ease. Don't. It's like this. Andi lets it also it's right at both of them. Creates a coat, look out of the text. Or let's see if this works first. I said the file go today, toe the the pits. And okay, now we have this border around. The whole thing here is the actually editors. Let's move these buttons outside of this. Books can do it. Why? Moving outside of the, uh, Steve on and placed it there. And no, we have that around these Kush render made. It needs to return only one one element out of it. It's basic react rules like this on gonna do some invitation like that. Okay, I save it on. Let's look at the brochure. Now we have it outside that outside the editor and I'm just denied some the margin. Same here. So it looks nicer like these. Okay, now we have it. Right. Uh, now we have a correctly aligned like so Okay, so let's give it a try. Yeah, that world. And I highlight Hello world and passport. And this we can see it applies to Bolding for that. Next. It's a metallic onda Also underlined. Yeah, works. And also the keep earnings work also. So if I want the bolt, take the boat away I can press comment or con Toby and it takes the boat away. I learned a lot that yes, we can see the style stays all if we don't disable it. So I'm gonna think underline away on board Make this up like so Okay, good. Let's try that. Also, court blocks here. So trapped a s supports styling off code books if you wanna have code displayed there. So let's at another welcome the same way the test That's a big handler for it called a stop and key command with the command And in this case with the years gold, like so And I'm good text for the people asked cold like so I say it on. Open my pressure on now we have this Copa than there is gold. Yeah, I can make it. It's for Method s. He's, uh, fermented as a goat block. It's the default formatting for it. It can be modified. Yes, like so. So now we have a quote formatting, and we can also the other other stocks for it. Like so Okay, so some up we and it's and weapons that we can use the style our the next in the editor. And we just added click hander for each of them calling the taste of handling key command function that is defined here and we passing the command as a stream old Republican black gold in this case. And these are the This is exactly what happens when we used the key findings Come and be moment. Why commend you for a bold italic underline, for example, it calls this unlucky command function because it's defied here for editor calls it, and it actually gives the command stream aspect parameter. And if you press comment me, it gives exactly please this function called. Okay, now we have editor with it's text editing features in it. And as I said earlier, director Yes, yes, very customizable. So it doesn't give you an editor right out of the books, so or finished editor. So you need to customize it and you can make it the way you about the look. So you're in customized very much on bond and at a different features for it, which will which we will learn more in the next section. But for now, let's take a break and continue in the next section. 12. Display and convert contents of the editor to JSON: now that we have our editor, which has on some rt features. It's text editing features weekend. Take a look at the actually contents state off this editor. So now we only have this editor. And of course, if we want to use it, we need some way to take the contents off the editor and safety somewhere, maybe, and display later on again. So we are gonna diving toe the content State off track test editor. To do that, we're going to act, uh, display just the deep here under that Displaced the current contents state off a editor. Are the current content off the editor as change in for me. And we started by creating a deep under the editor. I'm in my editor component. Let's leave Andi, then I'm just enough at a pre back inside it. So it is a brief or method text because we are displaying change in here. We want to use the pre deck here. Okay, Next up. Well, we don't have anything to render it, so let's leave it empty for no. And it's at a function called Erin. You're Comitan us role Js. But this function will render the current content off editor as as a rock JSA. Actually, that And how do we do that? How do we take the editor and it content and display the content association? Drifting, yes, provides a function trunks, and for that purpose is that we can use We can import it from the truck chase library and it's called convert Toe raw like so, Andi this function, they expect it takes the content state that you wanna show a station and returns to taste in changing representation. So inside our render Clinton s rotation, we first want to take the current condense state off the editor. So let's type content just a in calls. And it's this that state indeed the state, because we have the editor state saved in our component state, we can take it from there and here Note that we convert raw method requires contents. The doctor. So this is and it hurts their doctor. And so we need to take conference, need object out of the editor state, object somehow, and thats done the editor state object explosives were funks and get current content like so wits returns the content state off that editor state. So now we have our current content state in it. Andi. Then we were not take the role, Jason. So we have been conned. Straw equals and Texas? No, We called the convert to pro and passing the Golden State like so so No, we have dictation formats off the current content state saved in the row. I really And then what we want to do is display it as a string on disputation object. Gemma script hoped it this role. So we went out string. If I so weekends just to return the final value, which we can get by calling attention dot string, you fly and it takes the actual risk adopted. Asked a first parliament here, and then we're gonna type in who and to what these two parameters are. I can show from the, uh, misty in recommendation. Indian recommendations are the first value Is the actual actual object to convert to change in strength. Then the 2nd 1 is replaced her, which enables us to filter some values out. But if it, if it snow or not provided all properties of the object are included, Directional Temptation Street. And that's except exactly what we want. And we're passing these parameters because we want space parameter toe have value too. So it acts to to, uh, white spaces display off the street. It is not relevant for Trump test, but I just tested it and it worked. It looks the best with the sitting. So if you're you don't understand that. No worries. It's not crucial. FORTRAN chance. But the up but editor know we have the Surrender content status rotation, which returns the station string off the correct tickle than state and no weaken display here in the pre element By calling, he stood Brender confident asked rotation like so same. Let's see what we get. Okay, as we see here now is a tasting object. Andi, actually, let's take a break at this point and, uh, diving to this structure, I'll start the break 13. Understanding how Draft.js ContentState represents the content: Now that we have our editors current contents displayed on the editor here a station we can take a little bit deeper. Look on how this content is actually represent. Represent it In the draft is editor When we exported as chasing So first we can see we have two properties in the map and books here at top level on what we're interested in this point is thick looks property. It's an array off objects Ondas we can see we now have only one object in it. But what're FTS does is it represents every text paragraph as the book. So when we enter percenter Quintus editor we could more objects in our blocks array. So every time you press enter so that so you taints lines you create you block and every book has a que property Wits is to identify it. It's a rental me randomly generated unique value and it's used to identify I didn't like this. Uh, the blocks on the identification is needed when we were working with and it maps. Then we have detects variable, which is the actual text plain text off the Parker. So if I add here, I clear this end type in something like this. First, this is the second row like this, so we can see that the text value is the contents off the text content off the block. Then we have type would mean which can, in this case is on styled. But later on, if we will not do some custom styling for our blocks, we could type for them. And then based on this type, we can have different styles. Then we have dipped in. Less tolerant is in. The Durant is on a date. Uh, this data, it's something that if you have some day that that's the block, it should be here. Then we have the end of the range is wits, which is an array off values. It works with the end of the map. So we're not gonna go to entities at this point. But in short, you cannot different kind of entities, for example, at mention. And it would be an entity. Andi, the mention is defined at the end of the map and in that in the map there or in this in the deranged says all right is they find the range off the text in that block that is part of the but that is it. We're not going to go the entities at this point, but but it's just good to know that they are there. And you can read more about them from the practice docks, if you if you wish, but that this point, we don't need to know more about those. But what we are interested at this point is the inland Start ranges array. Now the boat are empty. But let's see what happens if we take, for example, the first word here and make it boat. We see that they changes and it at his object inside the inland style Arantes array. Andi In that object there is offset link and style, and this defines different. These divines the styles for different parts off the text in this book, so we can treff ts understand based on peace, which parts off the text style. So in this case, that way we know that the opposite is 12. So 12 character Andi the length is five. So five nick next characters after the 12 character should be style bolt as we can't see we have here 123456789 10 10 11 12 and then five Starters want to treat poor apply. Are born in. It's the same goes for other styles. Yeah, it it adds it. Here the officer is a thin length three. That's great. And if we underlined both of these, for example, it just adds one underlying style. And it's oxidase eight and late night. So it is how practice styles thes next. And as you can see, the actual styles are separated from the content off the off the editor. So in this case, we have to text, which is here. It's touched the text and then we have the styles defined here different separately. And this way they don't interfere with the actual convent off the block. And this is very handy because later on, when we saved these values and load or any initialize an editor with that saved, it is our state. This is very straightforward and easy to understand. Way too to represent reached, text, uh, properties off tickled. Okay, let's take a break and continue in the next section. 14. Save editor content to database: Okay, now that we know how to get the change in for for months, off the editor contents, let's take a look a weekend, take the contents and save them for later use. Because, of course, every editor we went up, be able to take the content and save it somewhere and then loaded back to the editor. So let's open our editor and what we're gonna do no is to let's at two buttons under here one which will save the content off the editor and the other one will load. And you could use server Fourth East, for example. You could make it rest, call some a P I and say that data, too. Backend server, some database. And then when we loaded you could maker request that the FBI and request the content also. But for example, we're going to use just the biblical stories or saving and loading the content. But it would be the same with any other type of their stories for loading abundant. So first off, let's make a deep under the editor and at at a button there let's make first it save button , and after that we make the load load But let's that button Andi text for it is stay contact . Like so And no, we one of the fine handler weekender for these. So on the click. And let's create a new function. It is called save content like these and we have it here. Andi, in this function, when one up thank thank you changed him stream from the current state And then I see say some stream two local store like So? So what? This function actually does interesting returns except station String. We want the safe to the database, but this name is a bit bit misleading because it surrender. So let's do peace and renamed tastes to get content as chase like So now we need to update also thescore here. So it works very first. Yes, torques. I'm gonna add a little bit marching 40 stew So they're on the same. They're aligned. It's a way Yeah, Okay. Ah, Okay, so here we want the occasion. It is crystal. Get content. Espero change this. And then we went up saving to the look of storage. I did this commenced. Yep. So we're gonna David look of streets and we can access They Look, look oh, story to bite called storage star Don't on said item that's giving the name dressed editor There's gonna be anything but chase on the second parameter is the actual Jason. So that Okay, let's take a look. We'd like something her same. We get an error and disease because our saved content a function called when the way defined the kick handler in here. We need to bind his components. These the function also because we're getting using here. So the same thing us with handler Kik amount with that wind this like so? No. When we tried to type something on a personal content, no terrorist. But how do we know that something actually happened? We can open the developer tools in the groom weekend, just right click and somewhere from debates. And so, like, inspect, uh, on where we want to find application on. Then we have here. Okay, that's elected. So we have stories and local stories on the address here. I have some other look on storage data also, but now we can see we have this trip editor content changing variable here. If I open it, we can see it's exactly the same US we have Just say it. Not so. It's exactly the same as is here and now We have successfully saved this constant state to the local stories on the weekend, at some other content board death. And now, Now we see we have this second look. There is the bold style takes, but it is not yet updated. So we need to say, press the same content. CLee key. Now, if we watched it, we can see it updated with the With the current state, there is the boast life like these. And it is basically how you would say save your convents from the editor. So you you take contents state here, you convert it Tow rope chalice script with him in here with the convert to roll function called. Then we make a tasting string out of it with this Jason string. If I and we take that string and save it to the local stories in here. So if you want to use an a p I, for example, to save the change in tow back in server. But this is the place where you would make the a P. I call and sent the change in toe the A P I. Okay, that's how we can save the content. Let's take a break here on. Continue next with the implementation off the load button and let's see how we're gonna load the editor confident from the local storage. 15. Load saved editor content from database: in the last video, we took our editor content and say, Did the hookup starts? That's what is here. Now let's at the load here which loads that content abundant for the editor from the local story. It's if there is some content saved. So first of let's Open O. R. Sure its editor, uh, at the bottom here it's supposed to content and at on the candor, but same way asked the same convent. Then we will create the load company function an inside here. We want to mode content from local storage. Yes, so that saved. Then we want toe Pool A that draft it either with that. Okay, so let's get started. Blake loading the content from Little Coast Loco stories. Yeah, so at first we think would be created. What variable saying aktham or yeah, quotes, local storage. Get I can and the name of our little ghost threats. He was draft editor content. Jason Jays like this. Men if if the or actually we could well, let's create smoke conduct function, which loads, just loads the content from the local streets and returns it. Then let's create function that will populate editor. So let's go with that sit and eat herbs, confident and as perimeter it gets the I didn't like these, so here we would actually call the sip. Yeah, and that's finished load conference function. We have loaded the tape data from from the local store. It's then let's return. Uh, and actually now when we load this, it's the it's chasing stream. But let's make it so that we will return the actual JavaScript object for it. And if deceptive, it's new. We will return Donald. So that's a big data. If it said, Let's return chastened parse today and otherwise just know like these. So first off, we loaded load to save data from global stories. If the save data is set, we will parson because it's station stream. It's a stream variable. We will. They taste in parts and converted to temper script, okay with gays in bars and return on. If saved date was not set, we will just returned. No, no intercept editor content. We want to it actually actual content. So we will get to row editor. Data equals distant load to come. Like so. You know, we have the same day that the javascript object saved in this variable. Then we will need to take if the road editor database said, And if it's you know, it's not equal to know we will initialized anything. Otherwise we won't because, as I mentioned earlier, you can't initialize it is her we with no or the string or something like that. But you need to create that editor state object, which will We used a polite the editor. So here, let's convert the convent ST, uh, let's convert the Rohit our data, which is test plain javascript object that was created by that, uh, convert to roll function. Let's take that and converted toe content state confident. State equals And no, as we did with the contents, said earlier, we converted to JavaScript. Help check. We will now use function that's provided by attracts. Asked the converted back to subject the the I'm sorry to convert the JavaScript optic back to content. State opted. No way. Use a function called core Nibert from raw and pat in D. Uh, so I don't checked. And the third day like this and when it also import the quarterback from raw function from the draft, Yes. Yeah, you know, we have recorded today. And no, we want toe update the editor state with this content state. And to do that, we had this the editor state saved in our components state, and we created it with any thirsted create them. But there is also another function in a better state object that can be used to create an editor state out of content state, which we have right here. So we will create here a teeter state, be close, and we will use the function from editor state object, which is called create with content. And it takes contents that object as a parameter like this. So no, we have an editor state object here. And finally, we will update the states in either state object with this new editor state. So we called distorts at ST like this. And now we should be able to load the content of the editor from local storage. So let's see. I referenced Page and now our editor is empty and here is its contents adaptation. But that's we can see here from our local streets. You were again. If you missed it, you can open it by right clicking anywhere on the page. on inspect just by the way Google Chrome, which I'm using. I'm not sure how to do this utter protesters, but I'm sure it's something familiar. But if you want given its chrome on, it goes anywhere. Problem. Bates, right Click inspect select application from here. Then you on the left, left inside. You want local stories and your site, and you can see here I have to trust editor confrontation. And as we can see, there is some contact there. There is that content that we saved earlier, and there is two blocks. Actually, it's probably easier to inspect here who looks 1st 1 has text. Hello, World 2nd 1 has second line, and the 2nd 1 has also some styles Bolding going on over there. So now when we click load content, we should have this editor populated with this taste content from the local starts. Let's see and it works. So we take local load content and uploaded this content from the local starts we contested but empty editor and saved content and we can see it updated in global story. There's nothing there. No refreshed the page on her slowed content. It is the empty because the same state. If you type something here fresh load, it will empty the editor. But if we want, want some content in to be saved and let's at some styles one. The line. Now here are heirs to stay, to have the first line with both styles. Second line with metallic styles on the third line with underlying and no people perceptive content. It will save it to the local streets this week and see if we refresh the page. The editor start up is empty, but when we click load content, it will load the content. Get it like so So summing up we add it. We added, um road London button here when it's clicked, said editor Content Function. Yes, said editor content function is called. Actually, we don't need the perimeter there. Andi. In that function, we load the roll Tim, a script object from the local stories with this load condemned function where we load station stream from local stories and if it's said we will parse it so it becomes javascript object and return it. And then from that JavaScript object, we will create a draft A s contents type content, state object here with the convert from raw function and convert from raw function is provided by traffic Js library. So we being boarded here Next up, we need to create editor state out of that content state. So here we great new editor state with editor state create with content function. And that function takes confidence that up to as perimeter and returns editor stayed object that is initialized with that content state. And finally, we will update our components state with the new editor state Variable. Did the state object like so? And that makes it so that the editor is this place they saved 90 Thursday. Okay, that is how you will you can load data from local starts or anywhere. And I should add that if you want to use server, they're saving for saving the date. The simple or a P I request loading today them. You should do it here. So instead, off loading the change in string from local streets. This is where you would do that. The a p I request upload the data from the server, then return it. But this ghost, same way with that And that style also. So this is the place that you need changing U one and use some other loading. The other destination where you want Load the date, but okay, let's take a break on. Continue in the next section. 16. Display saved contents as HTML part 1: Okay, now that we have over Editor component gloating on saving data, we can We still need to someplace to show it. So of course we had saved the data and then loaded, but that does us no good if we can't display. And right now we are just initializing the editor with the safety Duncan on, you can get it here. But what if we wanted to show this on a web page, for example, without the editor we can. What we can do is to display as html and there is the model gold craftiest expert H d m O. That just just that takes the saved content state. Andi converts it to HD and mail. Here is how it's installed. Distributed were npm and then we take ST html from the library on from the Constant State through that on that you do it. So let's take a look awakened. Do that in our area. First off, I'm gonna create on other editor component just because thesis, this has all be the show's chasing Andi, Let's create another that instead of change on shows the HTML So I'm testing enough. Copy this editor component and based it right here, then fine. Green aiming at the editor html like so. And then I also rename there and in here, and I'm gonna delete the content that's changing. Cool. Andi Also the Oh, I don't Yeah, I leave it here because we still save it. Stays on everything else. Should be good. I'm gonna save this. Andi called Yes, and import that component. So And instead of my editor, I'm gonna call render mighty html like So now we save on open the brochure and we can see that we have the same editor here on. We are able to save the content and tinnitus and load We're gonna load. Yeah. Great. Now what we're gonna do east at HTML display under this he's editor. It could be without the editor if we load the data from somewhere else. But in this example where it's just gonna use the contents of this. So let's it start by actually installing the traffic to his expert dates TML. And I'm opening my terminal. I mean, my approach folder, the guide set in PNG still, but I'm gonna use yarn. You can use whichever you want. Norine, act this your at equals in P and you stop your at and it was trapped to his expert mates. Do not a genius export, do you know? Like so? Then we'll install it. Okay. Done. No, We will go back to our editor and to the my editor html component. And here we want to show the HTML version off the any other content here. So let's start by adding function called get just a second. I'm gonna use the same convention. This here. So its content s role h d melt. Like so then inside here, we want to take the content state off the current editor Don't stay called Deep States Interstate and get great content which returns the contents, That object, then next up, we were not for the html which is now where we will use the state to html function that we get from the trying to this export eight stand boat module so steak to its Tamil on and we're passing the gone. Then stay. Now this returns the a stand mo version conduct state and we still need to import it. So we go back to the top and I've been important state to html from Kraft J s export html like so I see. And still in here in just get content. As for all animal function, we want to return the steam like so No, we will. First I want to show the HTML or we want to show the HTML here, so we do not render the HTML. So if we get, for example, paragraph element p element, we wanna show Liston p crater them, you know the tax and not rendered actual para craft. So that's why we're using the brief thick, which which means the reform of the fix the deck And inside there we're gonna call Teesta, get Kunde and pastoral html like So let's say and see, we're doing looks promising. So we are Editor is no empathy and we have p tug on b are attacking side. Now if we start to type in there, we see that it shows that it should be. It's one part craft. If we make other, we see that there was two paragraph No, and let's see what happens if we at some rto. So I'm gonna highlight this on used bolt. We can see that it that's the strong backs over there Let's see how it would look if we took the pre thick away. So I'm going up. It raised thes and just display the HTML inside the deal. Saving on. It's actually yeah, it's actually showing the tax. Also, because my bad I forgot that. React all the automatically sanitizes some aged amount is included here or a coat here. So that's why we don't actually need the Prefect over here. Or if we, it chose to tax without the pre deck book. The the pre Tech What it does it know that we have changed line? This would be on a different life, so it's no exam time because we don't have a pretty good that's all. It's put it back there, so we get a little bit nicer. You clark, on a weekend, some standing there and we see that there are corresponding decks. So if you wanna show your editor content shtml you can use tissue method. You installed Draft A as expert as their mouth module on import, state its function from it, and then you just take the content state. We take the golden stand out of the editor state, and we passed the content state to the state edged Imo function, and it returns the HTML representation calls that funded state and then you can is played. Yeah, I think Let's take a break on continued in the next section. 17. Display saved contents as HTML part 2: last video we created. Let's get going on this road function and divided into red stand mark on board. And this is what they looked like so we can have the contents known as HTML below here. On one thing I mentioned in the video works that you could set the HTML inside here, so it's rendered because now we just displayed with the text tags visible and not rendered . So one way, which is not recommended by but it is this one way you can show or render aid. Stay inside. Yes, by using this, dangerously said in her aged amount of function. Weaken, find a recommendation from it in the reactor dogs. So here we can read that in general, setting age Denmark from code is risky because it's in the event. Veritably exposure users to her side, scripting at that so you can sit AIDS and directly from react. But you have to type out in dangerously said in a statement. And Paris, an object with underscore underscored eight steam monkey to remind yourself that it's dangerous. Okay, so this is one way to set it. But it's not recommended, because if the HTML is not clean you can. You can expose your users the curse side scripting at that. But let's see how that would work week in our example. So in here we would but put it for this diva. So here we have at a prop after boot that nine jersey said Inner, it's date milk and your we need an object with has underscore underscore aide Steve appropriately and the value for the property east the html to be rendered. So I created object, and I'm just underscoring. Milk is on. Don't get content us roids damn well like so And we will not erase this inside the demon. What we say And we see our editor, we don't see anything. But when you type in, we can see. See that it renders states them as a well received the content. And if we create another line, we see that every spare aircraft If we inspect this or in a tent another line on I bowled it. This it's rendered passport. So if we inspect this right click that inspector, we can see that there is a paragraph, paragraph by aircraft inside there. Is it strong back? So we render stands them up But I said this is not the recommend. This is not recommended by react. So let's take it out from here and go to the only one toe. See the aid, Stammel? In this case, we don't want to render it thes. Yeah, Now it's working. District heads dim. Okay. Next, applets. Dick break and continue in the next video. 18. Best way to display saved content: Okay. So as we saw, we can display our content as HTML. But there is another way to do that. And it is a bit easier. I'd say on that is that we can use on other editor or we're gonna use Tract. Is editor to show the conduct as we saw on this are when we load the content, let's same something, save it. And then I referenced the bench and flowed content. We see that content is displayed correctly in the editor, Of course, So we can use actually this or tractors editor to displace the golden. But the cat sees that we were not wanted to be unedited ball, so usually doesn't know that it's actually an editor, that you can get it. So we're gonna use something close treat only, uh, if we look at the truck chase stocks before the guitar component, we can see that there is a read only prop for the editor component, and it sets whether the letter should be rendered as static dumb, with all creditability disabled. So that's what we want to use. So let's give it that right. And I'm gonna create a new component which scored display editor Js and I'll import react. And then we want to create the component. So I'm just gonna type in this pullup boilerplate code. And like so I don't know, we have displayed it Opponent that for now just returns. He sticks on sweets over the captain. It's important that look like so. And for now, I don't wanna grender my editor aids damn milk. So let's render that display the Dirk on board. Like So Now, if we saved and opened Editor Shari, the browser we treat this is displayed it. Okay, cool. Next. But we want to do is in this editor we want to add We are sorry is displayed. It are We went toe at editor component here that displaced that saved contents. And we want to somehow load the contents from the local story so way would need button note content in here. So let's that on. That's a click handler like this, Andi the allergic for loading Texas pretty much the same as we had in our other components . So let's go to my editor component and just copy paste these two functions load content and set editor content on base them over here uh, And then I taste changed his toe, actually be set and confident like this. And as we see, we have some ever. So we need to import stuff first. Import after state and Robert from role from dressed Js like this. Now, if we see the pressure, we see the blood condemn brutal antis, discredit her text. Okay, Next up, we want toe. So let's recap. So here, when blood content is clicked, takes the takes the wrote it or data from local starts With this load content, a lot of content function, then if it's no or if it's not know it creates a golden state out of it on, then a new editor state out of that content state with the editor state create with content function, then it just sets the editor state object in the components state to the new editor state. And let's at actually construct from here where we re look, I said the state What? This oh, table. Okay. And now we're only missing the editor component. So let's after that. But this, uh, import there, I think there were some out of feeling going on. I didn't notice, but yeah, so we want the editor component out of the draft KSK like this. But then I had it here. Did her and no, we want a passing the editor state that prop So on, then then the read only proper. So this editor cannot be modified like this. And now, let's say on C Yep, we're getting an error and cannot re proper to get current content off. No. Okay, so this is because here we said the editor state No Andi, because an interstate cannot be Newell because it's an object. So it's trying to called dysfunction for no. So we need to create an empty editor state object. And we did that with the editor state create and thes on. Let's at actually here also call else Block actually. So if the Row editor date that is no, we want to set piece that said stay editor, state toe editor state create and like this so it creates an empty editor because there's nothing saved. Really. It's safeties on and see the brochure. Now we have empathy and debates on If we look at the application on the local stories, we can see that we have here saved. Hello world takes our local stories. So now when we pressed slowed content, we should get this content to our editor and it looks like it works. So there are also some bolt styling for the next the world world text. So we set this text with the other component and now this display components just this place it onda we get the nice nice display off that saved saved fixed on It was all done with the editor practice editor component. And we didn't need to convert manually anything or think about everything, things to pay HTML or something else. We didn't have to think about that ourselves. The draft text editor takes care of all it and because we had to read only read only prop the user is none the wiser that it is actually editor component Or is this just rendered made stay in metal with the traffic ts expert, it's the mail package. So this is actually the way I suggest you display your content when using prepped A s. Okay, let's take a break and continue in the next section 19. Summary: So in this course, we learned how to use Draft A s at Breadsticks editing features to a reactor application. I am planning on releasing more courses, so please let me know. First of all, what you thought of discourse. But also, if you would like to learn more advanced trapped c'est thinks you can reach me, for example from Twitter at two men or email me at at code ball stuff block. In the meantime, you should check out my book code Post that look. I frequently write posts, posts and tutorials on Draft A s react and other Web development topics. So you should take this out also. But again, thank you for taking this course, and hopefully we will see again short.