Now let's implement a very simple toggle for bold or non-bold when a text element is selected. Let's start with the UI this time. So let's go inside of the toolbar element And in here, for example, let's just copy this arrow up element. And let's put it just after the font family element. Like this.
And just like the font family, it will only be available for text elements. Like this. There we go. So instead of bring forward, let's call this bold like this. And the icon that will be F a bold from F a six.
So react dash icons F a six. I believe there is also the same icon from FA, so you can try it from there as well. All right. So now let's just take a look. There we go.
So we have this and let's see, how does the one from FA look like? I think this might look better actually. Basically just choose the one you like. All right. So now what I want to do is I want to add a rule for when this will be bold or not.
So let's go inside of use editor here. And just as we've added get active font family we're now gonna add get active font weight. So I don't want to be you know very specific as to... I don't want to create a method called get active is bold. I just want to get the font weight and then I can define which value is bold and which is not bold.
So this is fine. And here we're going to look for a font weight right here. And instead of here, let's use the default font weight. Do we have the default font weight? Let me go inside of my types here, all the way here.
We don't have default font weight. Okay, let's go ahead and add font weight here to be, I think this would be a number, I think 500 is okay. Let me quickly check. You don't have to do this. So I just want to add font normal here.
Okay, so normal font weight is 400. Let's go ahead and write that. So default font weight can be 400. And we're only going to use that if we can't find the current selected object, so we have something to fall back to. So there we go, font-weight from features, editor types.
And in this case, it's going to be font-weight. And this is the default font-weight. So we're not going to have any use state for the font weight because I don't want to preserve that, right? I think that's independent for every single, you know, text element, not something that I want to preserve when the next one is added. So now let's just go ahead and see.
Okay, so this says any and we're going to resolve that now by going inside of the types here. Go inside of the, not the build editor, but get interface here and it's going to return a number. So get active font weight. And there we go. So the get active font weight returns a number.
Now. We already know that this will be a full TTS library, right? So font-weight apparently does not exist, but it does exist here. So now we can go inside of the toolbar here and we can add the font-weight. So editor, get active font-weight here, like this, and let's try and do the following.
So let me just find where is it? There we go right here bold. So what we're gonna do is the following. We're gonna add a class name here CN and if the current font weight is above 500, we're going to mark this as selected. Like this.
So font-weight is possibly undefined. How is that? All right, so can I just do, oh, I know what we can do? Let's simply add the font-weight from our types. So the reason this can be undefined is because editor can be undefined.
So let's import font weight from features editor types and now we got rid of that. So let's see if this works now. I'm going to refresh everything here. I'm going to add a normal paragraph and as you can see this is not selected. I'm now going to add a heading and there we go.
You can see how heading is selected as a bold element. But paragraph is not selected as a bold element. We now have to add the functionality that when we click here it will toggle between bold or not bold. So I want to go ahead and go instead of use editor here and just as we've added the functionality to change opacity, I think opacity is a good example because opacity is not preserved. So I want to find the change opacity.
Where is my change opacity? It's right here. Let's Copy change opacity and let's paste it above itself. And let's call this change font weight. The value number can stay the same and inside of here I'm just gonna do if isTextType.
This will be object.type here. This will be object.type here so only then change the property of the object and the property will be the font weight And we can now copy the same TS ignore here. There we go. So this is a faulty TS font weight exists. Perfect.
Change font weight is here. Now let's go inside of the types here and add changeFontWeight which accepts the value which is a number and it returns a void. There we go. No more errors. Now in the toolbar here I want to create a method toggleBold.
So I'm going to instead of calling this we're gonna call toggleBold. I'm gonna go ahead to the top here and I'm gonna define const toggleBold to be a method inside of here, which will do the following. So const selected object will be editor, selected objects and find the first one in the array. If there is no selected object, just break the method. Otherwise, let's define what the new value will be.
So if the current font weight is above 500, then the new value will be 500. Otherwise, it will be 700. And then let's do editor, change font weight, new value. And I think that should be it. Let's go ahead and try it out now.
So I'm going to refresh everything here. And I'm going to add a paragraph and if I click I'm going to resize it just a bit. And if I click on bold there we go. Look how it switches to bold here. Perfect.
And let's try it with the heading which is bold by default. If I click here there we go. Look how it changes to not bold. The only problem we seem to be having here is that it does not update. So that seems to be an issue.
So we're going to go ahead and explore how we can resolve that. So I have a slight idea on how this can work. So how about we do this. Let's go ahead and let's introduce useState here. So import useState from React.
And then what we're gonna do here is add our properties, set properties, useState, and we don't need to do the fill color, the stroke color and the font family because they seem to be, you know, reactive. But font weight, for example, isn't. So let's call this initial font weight here. And then what we're gonna do here is font-weight will be initial font-weight like this. And then when we do toggle bold, we're gonna work with this.
So we're gonna work with properties.font-weight first of all, and then in here we'll do set properties and let me see how I can change this properly so first of all we have the current so go ahead and open an immediate object like this Spread the current and then pass in the font weight to be the new value. And then we're only going to be looking for font weight through these properties. Let's see if we can work with that. So find the font-weight comparison and now just add a properties.font-weight prefix here. And we don't need the useState to update it because I don't know if you remember but in the editor here when we render the toolbar we added the key so that every time the active object changes it will re-render so it will get the new initial font weight.
So I think this actually might be the final solution. So let's try it out. If I go ahead and add a heading here it's bold, if I change it it's not, if I click again it stays bold. Absolutely perfect. Exactly what we wanted and I can change between these two elements and they it reflects the new thing in the navbar here.
Perfect. And I can now switch between those. What bothers me a bit now is that some things are inside of the properties and some things are not. I want to go ahead and make a decision to put everything inside. So let's do that.
I'm going to add the fill color here And let's name them properly. So this will be the initial fill color. This will be the fill color. Then we're gonna have the stroke color, which will be the initial stroke color. And let's rename the stroke color to initial stroke color.
Same thing for font family here. Initial font family. So I think it's better to be consistent this way. There we go. Now we have to fix the bugs.
So Let's scroll down a bit. In here, in our first element, I believe, the color label, the button, it uses background color fill color. Simply change it to properties.fillcolor. Let's scroll a bit more down. Now we have the stroke color.
Let's change that to properties stroke color. And same thing here. Instead of font family, properties dot font family. There we go. Now I think it's very safe that all of our properties here will have a default value.
And let's go ahead and check that out, actually. So let's just confirm that the colors are still working. There we go. The colors are working just fine. No issues whatsoever regarding the colors.
Let's see if I change between these two elements. There we go. No problems with the colors whatsoever. But what's more important, I believe that our texts are now working perfectly as well. Great.
So that is now working. What I want to do next is I want to add a couple of similar elements like toggle bold, but for other font styles, such as strike through underline and italic. And we can now do them much faster because we have, you know, the logic on how to do that. And since I already know that we're going to be doing this some number of times, I want to extract this right here outside this method so that I can easily create other toggle italic, toggle underline and toggle strike through. Now let's go inside of the use editor here so that we can prepare a couple of other methods.
So just like change font weight, we're going to have change font style. So the font style itself is going to be a string. And then we're gonna do the same logic here and we're specifically going to change the font style. And let's just change this comment to font style. And right here let's go ahead and just add the...
Where is our Get Active Font Weight? So I'm going to keep them together. I don't know why I'm separating them this much. So let's keep them one next to each other here. So where did I add change font style?
So just below that I'm gonna add get active font style. And in here I'm simply gonna do the font style. Like this. And now we have to fix the default values for this. And the default font style can just be normal.
Because the alternative is italic. And this will check for font style. Just make sure you don't misspell this because the TS ignore won't correct you if you have typos here. So we have the get active font style and we have the change font style methods here. Perfect.
Now let's go inside of the types here and add those two. So I'm just gonna copy the last two. So this is change font style and this one is get active font style and both of these number values should be changed to string and once you save that, there we go, change font style accepts the value string and get active font style returns the value string. Now we can go back inside of the toolbar component here and let's prepare this. So const initialFontStyle will be editor.
GetActiveFontStyle and then in the properties active font style and then in the properties let's add font style the initial font style. There we go. And now let's just go ahead and copy and paste our bold button. There we go. It's right here.
So I'm just going to copy and paste this entire thing. So this will be italic. And inside of here, instead of FA bold, we're going to be using FA italic. And I recommend that you just continue using from one source. So I'm going to change to FA.
I think I like those icons more. There we go. FA bold and FA italic. And in here, we're going to look for something else. So properties.fontStyle.
If properties.fontStyle is italic, then we're going to mark it as selected. And the method here for the italic will be toggleItalic. So let's go ahead and create this method. So let me just find the toggle bold method. I'm going to copy and paste this method here and I'm going to rename this to toggle italic.
So the new value here will check if is italic first. So const is italic will be properties font style italic. If it is italic, the new value will be normal. Otherwise, we will switch to italic. So this will call change font style.
To the new value and set properties on style to the new value. Let's go ahead and try it out now. I think we've done everything correct. I'm going to go ahead and add a heading and a subheading just so we have more examples. By default, both of these options have their italic style off.
If I click, there we go, it becomes italic and the italic option is selected. If I turn it off, it gets off. Amazing! So our italic function is now working. We can now copy and paste all of this to create the underline and the strike through methods.
Let's go back inside of the use editor and let's try and create two at once. So I'm gonna go ahead and copy change font style and I'm going to rename this to change font line through. And inside of here the value will simply be a Boolean. This can stay the same. And what we're going to focus on is the line through.
So just don't misspell this, right? Because we turned off TypeScript for this line. So make sure you don't misspell line through. It needs to be a Boolean inside of here and it's the line through key that we are looking for here. So change font line through and let's go ahead and immediately create the Get active font line through below it.
So get active font line through. Copy the line through from here and very simply look for it inside of here. And by default is going to be false. Perfect. And now let's go ahead and copy these two elements.
So the setter and the getter, let's call it like that. So these new ones which are now copied will be instead of line through let's call this underline, right? So change font underline, which will also be a Boolean. So it's looking for underline. Again, don't misspell this.
And inside of here, we're gonna be looking for get active font underline by default is gonna be false and we are looking for underline here and just ensure that you fix this comments here. So I have to fix this forget active font line through here. Just so the comments make sense, you know. Great. Now let's go inside of the types And I'm just going to copy these two.
So this will be change font line through and get active font line through. The difference is that the value should be a boolean. So let's change this to boolean as well. And then let's copy and paste these two and instead of line through this now here will be underline and this will be underline. There we go, No more errors.
We can now go back inside of the toolbar here. And we have toggle italic. So let's just go ahead and copy this. Toggle line through. So we can...
Oh yeah, I forgot to first add the initial value. My apologies. So initial font line through will be editor, get active font line through like this. Font line through will be initial font line through. Now that we have it inside of the toggle line through, we can simply check like using this.
So properties, font line through. If it's already true, the next value will be false. Otherwise it's gonna be true. So we are now calling change font line through here and we are changing the font line through here as well. Perfect.
And we can copy and paste this method. And we can call this one font Toggle underline. I now also have to create the initial underline here. So initial font underline. There we go.
Initial font underline, get active font underline. I'm gonna copy and paste this here as well. Underline. And I'm just noticing that I've named this Through with a capital T. I don't like that.
I'm just going to keep it line through like this. Font line through. And then I just have to fix that in the toggle line through here. So properties.fontlineThrough with a lowercase T. It doesn't matter, but I just want to be consistent here.
And now, instead of the toggle underline, which I've copied, so it looks exactly like the toggle line through, in here we're going to check for font underline. Make sure you call the change font underline value here and set properties font underline here. There we go. And now let's go ahead and actually use these values. So let's find our last method.
There we go. It's right here, FA italic. So let's copy and paste this. The second method here will be underline on click it's going to call toggle underline and it's simply going to check if properties.font underline because it's a boolean and it's going to use faUnderline from react-icons-fa and we can immediately copy and paste this again and let's call this one strike. Toggle line through properties.font line through and FA perhaps it is a strike through.
Yes. So the icon name is FA strike through. Make sure you've added the FA bold, FAE italic, FAE strike through and FAE underline here and make sure you have no errors in your projects. So you should have all of these methods here. Let's try it out now.
I'm going to refresh everything and I'm going to add a heading here and there we go. We have a bunch of new options here. I can make it italic, I can make it underline and I can make it strike through. Looks like we have an issue. So strike is not active and I think I know exactly why.
I just copied and pasted the last element. So let's find the strike through, toggle underline and there we go, line through. All right, so I thought that I forgot to change this but looks like I'm not. So let's see why this is not working. Perhaps you had some similar issues so it will be helpful to see how we debug this.
So it looks like it's... So The functionality is definitely working, right? Or looks like the functionality is not working also. Let's go ahead and explore this a bit. So let's focus on the toggle line through here.
If the properties.fontLineThrough is true, we change it to false. Okay, so that should work just fine and we change the proper set properties. Oh, I see the issue. The issue is that we are calling line through here with a capital T. So that was the issue in the beginning that I've had.
There we go. So just ensure that it's exactly the same here, here, here, here. All of them should have the exact same thing because this is a different variable from this. I think that was our issue. Also ensure that you're checking the same here, right?
So don't do this. Let's try it out again. I'm gonna refresh everything. I'm gonna add a text here. Let's see, italic, perfect.
On, off, it works. Underline on, off, it works. Strike, there we go. All of our options are now working. And I can add another one and I can see the clear differences which they have once I select them.
Amazing. There is one more thing that I want to do and that is the text align. I want to do it in this chapter because it's very similar to our existing methods so We don't have to, you know, change our logic too much. So let's just go ahead and wrap that up. So the text align will be three more buttons which are all going to call the same method and they are simply going to change the way text is aligned.
So by default you can see that text is aligned on the left side. So we're gonna add the align center or align right. Let's head back inside of the use editor here and we can copy and paste the last two elements. Which ones are they? Change font underline and get active font underline.
So you can change these two and paste them. We're now going to rename this to change font align and the value inside of here will be iTextOptions or let's be specific, textboxOptions and we're gonna use the text align. So let's just go ahead and see where this comes from. I text box options from fabric, fabric dash IMPL. I just want to move that here.
There we go. So specifically the text align values here. Oh, it looks like that is just string. So honestly, we can also write string. There's nothing stopping us from doing that.
Looks like the types are not exactly perfect here. Okay. So inside of here, we are simply going to focus on the text align value. And it's the same issue here. You can see that it says that it doesn't exist, but we know that text align exists.
So this will be change font align, or perhaps let's call it change text align. I think that makes more sense since it's not exactly font specific. And now we've also copied this. If you haven't, make sure you do. You can see that I have two of them.
So I have errors here. So this will be get active text align. And again, text align here. And let's just see what should be my option for the text align. So I think the default should be left, right?
Because that's what we just deducted. All right, now let's go ahead and let's add these types. So I'm going to go inside of the types here. I'm going to copy the last two. So change text align, the value will be a string here.
And we have get active text align and the value will return a string as well. There we go. So change text align and get active text align. Perfect. Let's go ahead inside of the toolbar now.
And let's go ahead and create the actual initial value and everything else we need here. So I'm going to go ahead and write const initial text align will be editor, get active text align. And then we can go inside the properties here, text align, make sure you don't do any misspellings, initial text align. Looks like I again, messed with the capitalization. There we go.
And now let's go ahead and add const on change text align. We'll accept the value which is a string. If there is no selected object we can break the method and let's go ahead and call change text align and pass in the value. And then let's call set properties here, get the current, return an immediate object here, spread and preserve the existing values and only change the text align to the new value. There we go.
And now that we have on change text align, let's go ahead and find our last element which we've added, which I believe is the line through. Let's go ahead and copy and paste this. So this one will have an arrow function which calls on change oops on change text align and it will align by left. So this one will do the following. It will check if properties text align is left like this and the icon can be align left.
And I think we have this from lucid react. So you can go ahead and call align left from lucid react. And you can also import align center and align right. There we go. So just make sure you have these icons from Lucid React.
There we go. So we now have align left here. And let's just see if we've rendered this correctly. There we go. So I'm going to go ahead and add a random heading here.
And there we go. So by default, these are aligned left and we have to fix the hint here. The hint will say align left. And now we can copy and paste this element. This will be align center.
So check for center. Make sure you change the center on click. And use the align center icon which we've added a moment ago. And then copy and paste this. Alright, it's here.
So this will be align right. Change the right. And text align will be right. And the icon will be align right. There we go.
So just make sure you have three of these elements right here. I copy and paste them and I just hope you can detect when I copy and paste these things. Oh looks like I have a little bug in my copy and paste here? Or is it just a bug in the TypeScript interpreter? I think it's that.
Yes, it's that. So sometimes TypeScript gets confused. So you can do Command Shift B or Control Shift B and type in reload window. And then this will simulate a shutdown of VS Code and all of your linters will restart. Let's go ahead and try this out now.
So I'm gonna refresh everything and I'm gonna add a heading. Go ahead and expand it like this. So by default it's aligned left but if I click on the center, there we go, it's aligned center. If I click right, it's aligned right. Perfect.
And you can see how it stays preserved. Amazing. So you just learned how to add a bunch of different styles to the font. In the next chapter, we're going to wrap it up by a shorter chapter where we are simply going to change the font size. And for that, we're going to need to implement a custom component for the toolbar.
Great, great job. Up.