Right now it's very hard to see that it's even there so that's gonna be one thing. And then we're also going to shrink this featured image box so that it only takes up a little bit of space.

Now these things are completely up to you, this is your portfolio and so I've been trying to keep this entire course lighter on style and UI and give you more of a framework for what your own portfolio should look like so definitely feel free to explore and be creative with how you want every page and every component to look, this is simply how I'm implementing it for myself.

So let's take care of this text area first. If you looked at the documentation, you'd see a few of the standard CSS classes that the rich text editor uses. You also have the ability to inspect inside of the browser to see what the classes are and that's exactly what I did when I was researching this. I looked at the inspector and I saw that we have this draft editor root class here. What this gives us the ability to do is to take this className and we can play with it a little bit even here in the inspector.

So I can do something like add a border. We'll go with a border of one pixel, solid, and we'll just say black. We're gonna use something different, but for right now that just tells me exactly what it'll look like if it has a border. And then we can also add some padding if we wanted so we could say we want some padding of 20 pixels and if you wanted we could also do something like add some extra height. So let's say that we wanna do a height of 100 pixels to start off.

Something like that looks good and if you want you could also even inspect the top element to have a set of styles that matches identically and if you want we could also... I already said padding, let's say border-radius, maybe border-radius of three pixels just to give a little bit of curve around the edges and that's pretty much everything that we're going to need.

So I'm going to just copy each one of these items that we added and this is really following the pattern that I do when I'm building out my own applications, is when I see something that I know I wanna implement, but I wanna see it on screen before I just go and I start typing code into the editor, I type it into the inspector and then from there I bring all of those styles into the application itself.

Now this class is called DraftEditor-root so we're gonna create a dedicated rich text media style file. So let's go into our styles, I'll open up main here and let's create a new style file called rich-text-editor.scss and now inside of here, we're gonna call DraftEditor-root and then I'm gonna paste in those styles that I had inside of the browser.

.DraftEditor-root {
  border: 1px solid black;
  padding: 20px;
  height: 100px;
  border-radius: 3px;
}

So let's hit save and the only difference is I don't wanna use black. Let's look at our variables and see if there's anything that we have here. We have this off white which is kind of close. We can test it out and see, but if I remember correctly from when I was testing this out earlier, I wanted to go with something different so we'll play around with that.

So I'm gonna use off white, everything else should be good.

.DraftEditor-root {
  border: 1px solid $offwhite;
  padding: 20px;
  height: 100px;
  border-radius: 3px;
}

Now we need to import our rich text editor file so open up your main style file and at the very bottom let's add rich-text-editor-scss.

main.scss

@import "./variables.scss";
@import "./mixins.scss";
@import "./base.scss";
@import "./forms.scss";
@import "./button.scss";
@import "./grid.scss";
@import "./navigation.scss";
@import "./portfolio.scss";
@import "./portfolio-manager.scss";
@import "./portfolio-form.scss";
@import "./portfolio-sidebar.scss";
@import "./auth.scss";
@import "./blog.scss";
@import "./loaders.scss";
@import "./blog-form.scss";
@import "./modals.scss";
@import "./react-draft-wysiwyg.scss";
@import "./rich-text-editor.scss";

Okay, so with this in place we should at least see a little change in our styles so you can hit refresh. And open it up and there you go. You can see it, but it's not quite dark enough and so you can go and click inspect on the top toolbar, and let's go and see what we have here. You can see right away this rdw-editor-toolbar, you see how this has a border of this #f1f1f1, this is the border we wanna mimic.

So we wanna go with this color. I'm not gonna create a variable for it because we'll only use it this one time and instead of calling the variable, I'm going to call the hexadecimal value.

.DraftEditor-root {
  border: 1px solid #f1f1f1;
  padding: 20px;
  height: 100px;
  border-radius: 3px;
}

And now our text area is gonna look the exact same as the space above it with that toolbar, so let's close this out. One thing you may note when you're building React applications when you make changes to style files, they don't always trigger an auto refresh so sometimes you have to do that manually. Looking at it again, that looks really good so that's taking up the right amount of space. It's now clear that we actually have a text bar in here and as you'll see, it grows and expands. Oh, and you know what? It looks like we have a little bit of a bug and I bet you anything it's that height that I put in there.

Do you see how when I'm typing the height and this border kinda has this bottom border here at the bottom? It's because I hardcoded the height. Let's fix that before we move on. And let's see if this still works or if this fixes that bug. So I'm opening it up and now if I go into it and start typing, yes, that's perfect.

So now as you type your blogs, it will actually grow and expand and you can scroll within the modal to get down to your save bar so everything there is looking good, I am happy with that. Definitely feel free to play with it and make changes as you need to to get the style you're looking for.

Now let's take care of this featured image. I'm gonna go into Visual Studio Code, go to the blog-form and blog-form styles specifically and all we need to do here is to add an override for that class, that image uploaders class. So image-uploaders and here I want to include our base-grid and call that because that's one of our mixins and then say that we want grid-template-columns of 200 pixels.

And if you're wondering how I got that, that's actually exactly what we did in the portfolio form so if you open up the portfolio form styles you'll see we have image-uploaders. All we did was call base-grid, there we had three uploaders right next to each other so we had three columns of 200 pixels. In this case, we only have one so that's all we need.

Now if you come back and you can see that that looks really nice, so now we have the featured image only taking up as much space as is needed and then we have our title, blog status, everything I think is looking really good.

So in the next guide, I'd like to show you something. I know I said we were just about done with the modal and then I realized that we have not really customized the toolbar yet and that's something that if I didn't show you that, I would feel bad because at some point you're probably gonna be asked how to do that, and it's not the easiest thing to do, especially when it comes to working with images.

So for example, if I type something and I wanna have an image embedded directly inside of here and I go and I click image, you can see that one, my little toolbar here is growing or expanding the modal so that doesn't really look good. But also, it's only allowing me to pull in an image URL and that's probably not what you're wanting.

You don't wanna have to go upload your image to a server, grab the URL and then paste it in here so I'm gonna show you something, not right now. This is gonna take probably a couple guides to build out, but I'm gonna show you something that's very cool, how we can actually encode our own images so we can watch for image uploads inside of the rich text editor.

This is separate from dropzone, this is actually in the editor itself and we'll be able to take that image file and actually covert it down into something that can be transpiled as text. So it can take all of the little bits of the image, it can convert it down into text so it can be stored as a string and then when it gets rendered back from the database, from the API, it will simply look like an image. And so that's a really cool thing to learn so I think it's worth it to spend a little bit of time because my guess is you'll most likely need to implement this in your jobs in some fashion so we're gonna start doing that in the next few guides.

Resources

• Source code