Now let's go ahead and let's add the text sidebar. Before we do that I want to go ahead and actually prepare the use editor hook to be ready to add a text. So Let's head inside of our use editor here. And what we're gonna add is a very simple add text method. So it's gonna be in the same logic as our add rectangle, add circle, all of those things.
So let's go ahead and just build the most basic add text we can imagine. So I'm gonna go inside of the types here and I'm gonna go ahead inside of the editor, add text, is very simply gonna go and return, well, nothing, right? Let's go ahead and do it now. So add text will very simply create an object which will be new fabric dot text box and we're gonna pass in hello right here And let's go ahead and give it some options. So for the fill, we can actually use the fill color.
So we're going to preserve it. So the same way we are doing the following, let me collapse these elements we don't need here. And let me just focus on, there we go, Add circle. So we're doing this basically, right? We are preserving the current fill color in this text.
And then what I want to do is I also want to create some default text options the way I have default triangle options. So I'm going to copy this and paste it and I'm gonna call this text options. I'm going to add type to be text box like this. I'm gonna leave left and top that can stay the same. And then I have to add the following.
So first of all, it's not going to have the stroke. So we can remove that same thing for stroke width. We can also remove the width, height and the angle like this and instead we're gonna add font size and we're gonna add font family and now I want to create the default values of those. So the default font family will go here. Let's add it.
Export const font family. And it's going to be Arial. And then we're going to have the default font size, which I want to be 32. Like this. Now we can go back inside of the text options and we can now add the font size here and the font family here.
There we go. We now have the default text options. Let's head back inside of the use editor and now what we can do is we can spread text options like this. Make sure you've added the import from features editor types alongside all these other options. Great!
Now that we have the object let's take a look at what we do. So we just call add to canvas, right? We've created that little helper for us. There we go. And this is what add to canvas does.
All right, I think this should work. We're of course going to have to modify this slightly. More specifically, we're going to make this be dynamic, right? So it can render whatever we want. Let's go ahead and let's now go inside of our sidebar just to confirm that we have the sidebar item text.
So the sidebar item text will call onChangeActiveTool.toText. So what we have to do now is we have to create the text sidebar. I'm gonna go ahead and copy the latest one we've created which is the opacity sidebar. I'm just gonna copy and paste it here and I'm gonna call this the text sidebar. Let's go ahead and first of all ensure that you're working in the text sidebar here and then let's rename every instance of opacity sidebar into text sidebar.
Like this. We are not going to need the initial value, the selected object, we are not going to need this, we are not going to need the use effect. So none of those things. And we can actually remove the onChange method as well. The only thing we want to leave is the onClose method.
Let's go ahead and also remove the imports here. Now down here, first of all, change the active tool to check for the text. The toolbar header inside of here will render the following. So the title will be the text and the description will be add text to your canvas. And let's go ahead and remove the slider in here.
So just a very very basic sidebar. Let's remove the unused slider. There we go. Now let's go inside of the editor so that we can copy and paste this and we can now import the text sidebar. You can of course leave the import like this or you can change it to Features Components text sidebar.
I prefer it this way. Let's try it out now. So if we've done this correctly, there we go, it's already opened, right? So I can close this, but when I click on text, there we go, the text sidebar is open. Add text to your canvas.
Perfect. So now I wanna add a little button, which is going to call our new methods which we've created just a moment ago. So inside of this I'm gonna add a button from components UI button. Ensure that you've added this import and I'm going to write add a text box. I'm going to go ahead and give this a class name of full width and on click here I'm going to call our editor add text.
Like this. Let's go ahead and check it out. So I'm just going to refresh for good luck, open the text and click add a text box. And there we go. We have our text with the default text hello.
So I can say, and I can change this to hi already so we don't need any additional functionality to change the text fabric handles that for us so we can go ahead and change the text perfect so what I want to do now is I want to extend this method add text so that it can accept more specific instructions. More specifically I want it to accept for example hello there so a specific text And I also want it to accept specific changes to its options like font size or font family perhaps. Right? So that we can do that programmatically from here. Let's start by going inside of our types and find the add text.
So the first argument will be, well, let's call it the value which will be the required string. And then we're gonna have options which will be optional and the type of iTextBoxOptions. This type comes from fabric slash fabric dash impl. Like that. And now that we have this, So just ensure the value is the first argument and it's required and options is the second optional argument.
Now inside of the use editor we also have to modify this method. So the first one will be the value which is a string and then we're gonna have options here. And we actually don't have to type these values I believe. Yes, so value is a string and options are fabric iTextOptions. Oh, that's because we've already typed them inside of here, right?
So if I change these to number, then the value becomes a number. Great! So all this time I've been adding specific types here but I didn't actually have to do that. But it's okay. Great.
We have the value in the options. In case you do have problems here, so this is the string and this will be iTextBoxOptions from Fabric.impl. Alright, we're going to replace this with the value and then what we're going to do is at the bottom here we're going to spread our custom options like this. So let's go ahead and try it out now. I'm gonna go back inside of the text sidebar here and all I'm gonna do here is write textbox like this.
Let's go ahead and try it out. I'm gonna refresh everything. Add a textbox and there we go. Our value of textbox has been changed. Perfect!
So what I want to do now is I want to copy and paste this button here and now I'm going to add a heading for example. So add a heading. Right now let's keep these two buttons exactly the same. Let's just change what they actually create. So this one will create a text which says heading.
And then we now have access to the options here. So font size can be 80 and font weight for example can be 700. Let's go ahead and try it out. I'm gonna click add heading and there we go you can see the difference. So let me refresh everything.
This is just the text box And this is a big heading. Perfect. And you can already see the creativity that it allows you to have. So if you want you can add the font family and add something specific here. Right?
So you can create as many styles as you want. And now let's style this button so it represents more accurately what will appear on the canvas once it's clicked. So this button will have a variant of secondary. And it's gonna have a size of large. I'm also gonna give it a class name.
Actually I'm gonna extend the existing class name to also have a higher height. And now inside of this button I'm going to render the text which it shows in a span so that I can style it. I'm going to give it a text of 3xl and font bold. This way it will represent more closely what will be added here. So let's go ahead and try this out.
I will refresh this and there we go. Now It's more representative of what will appear once it is clicked. Great. So we have that. Now, what I want to do is I want to, let me just see, is there a way, so height is 16.
I kind of want to lower this just a bit there we go I think this maybe looks a little bit more natural perhaps that old one was just a bit too big. Right now let's go ahead and copy and paste this button. And now we can create a subheading, for example. So this would be text Excel, add a subheading. The font size here can be 44 and the font weight can be 500 and this will be subheading.
Like this. There we go. And let me just see, can I change the? Instead of font bold, it's font medium. Like that.
And let's copy it one more time here. This will be a paragraph. Font size here will be 32. We won't change the font weight at all. And this will just render a paragraph.
And this inside can simply, it does not even need a span. Like this. And we can remove the height 16 from here. Or actually, let's leave it like this. There we go.
So just like in other text editors, you can see how now we have some proper subheadings here, paragraphs, all of those things. Perfect. You can, of course, tweak this to how you like it, right? So if you want your subheading to have a little more font weight, you can do that. So you can, for example, change this to 600.
Perhaps that will be a bit more representative of what a subheading is. There we go. So basically choose how you want to represent your values here. And let me just change this to semi bold for example. There we go.
I think this looks just a tiny bit better and I think that I do have to increase this to 3xl. All right, there we go. Now I think they very closely represent what will be added once clicked. Perfect. And you can decide what you want to do with this added text box.
You can remove it if you don't like it or you can leave it there. Perfect. So now we have the ability to add our text here. So what I want to do next is hide specific elements from the toolbar. For example, it makes no sense to have stroke width or stroke color when text is selected.
So how about we do that now so we prepare for what's going to come in the next chapter which is the custom toolbar options for text values. Let's head inside of the toolbar component and we can reuse a util that we've created which is inside of features editor. We have the is text type so let's go ahead and do the following. I want to hide the stroke color tool So let me find it. Here it is.
Stroke color. So I'm gonna go ahead and do the following. I'm going to call is text type from utils and now I just have to find a way to decide what I'm actually calling inside of here. Let me just go ahead and find do I have a selected object here. So I'm going to do the following const selected object will be editor selected objects first in the array, like this.
So I'm gonna go ahead and, or let's go ahead and call it selected object type. And then this.type, like that. Let's be specific. So, is text type and I will pass in the selected object type. And let's just reverse this like that and then let's wrap our the rest of the button inside.
Let's see if this is working now. And I think it is. So now when I add a shape, you can see how I have this stroke color. But when I add a text, you can see how text is not something that has that option but I just don't like this code solution so let me go ahead and do the following here so I'm gonna create one const isSelectedText create one const is selected text and I'm gonna call this is text type selected object type like this Or we can just do is text. Let's keep it simple.
So is text and then I don't have to do this whole thing every time. I can just call is text and then hide this. There we go. So let's copy this and let's see what else do we want. For example, stroke width is a good candidate, right?
I don't want that either if this is a text type. Like that. The bring forward and the send backwards can stay the same and same is true for the opacity. There we go. So you can see how this shape has much more options than the text.
That's because we only want these specific elements to work for the text. So let's just confirm that the layering works, perfect, and let's confirm that the opacity works. There we go. The rest will be controlled by this fill color. And we're now gonna be working in the next chapter on how to add some specific toolbar controls for text only.
So this will be the font size, the font family and some font styles. Great, great job.