Let's wrap up our text element by adding one more tool to this toolbar here. Let's start with the UI first. So inside of your toolbar, go ahead and copy and paste your last tool here. And this one will be called... Well it's actually not gonna be a hint like this so let's just go ahead and do this.
So add a normal div and then add font-size-input. My apologies this is what I wanted to do. Yes. And leave it like this for now. So just an empty font size input component.
And then we're going to create this component in Features Editor Components. So font size input PSX. Let's go ahead and let's import the minus and plus from Lucid React and let's import the button from components UI button and I believe that we don't have the input so what we have to do is we have to go inside of the terminal and we have to do bannex chat CNUI latest add input. Wait a second for it to add and then run your app again. Make sure to refresh your website if you shut down the app like I did.
Import the new input from components UI input right here and let's create an interface font-size-input-props. It will accept the value which is a number and onChange, which sends back a new value. And let's export.cont.fontSize.input. Now let's go ahead and simply assign the types here. We can then destructure those types.
So value and onChange. And then inside of here let's return a div element which has the following class name, flex and item center, because we're gonna have multiple elements inside. The first element will be a button and this button will have the minus icon. And then we're going to have an input. And after that, another button, which will have the plus icon.
So this is the main skeleton. Now that we have this, let's go back to the toolbar and let's import the font size input from ./.font-size-input I'm gonna change this to Features Editor Components You can do the Same if you want to and same thing for this utils. I just like to know where my things are coming from. So I'm just going to add this here. Let me collapse these so just it's a bit more readable.
All right. Ensure that you have the font size input and you can ignore the errors for now. So let's just try it out. Add a text element and there we go. So we now have this huge input and some plus and minus icons.
Now let's go ahead and let's style it so it looks better. So first things first let's focus on this one. This button will have a variant of outline. It will have a class name of padding 2 rounded r none and border r 0. It will also have a size of icon.
And let's go ahead and give the minus itself a class name of size 4. For the input, let's go ahead and give it a class name of width 50 pixels, like this. Height of 8. Focus visible ring offset 0. Focus visible ring 0.
And rounded none. And then in here we're gonna have a pretty similar setting so we can copy these three attributes and paste it here but let's just change instead of border R it's gonna be rounded L. So my apologies I wanted to say instead of a rounded L. So in here also replace R with L and also copy the class name from the minus icon and give it to the new plus icon here. Now, let's take a look at our input and it looks like it's still not exactly perfect and I think I know why.
So one thing that I want to do is I want to change my height for the button component. So I want you to go inside of your source folder directly inside of components, UI button right here. And inside of here I want you to find the size variance. And for the icon, we're gonna change the height from 10 and width from 10. And change both of them to 8.
So I want all of my icons to be a little bit smaller. There we go. Look how nice my font size input looks now. Perfect. And now we have to add the functionality to it.
So let's go ahead and also add some methods here before we continue to our user editor hook. So in the font size input I'm gonna add const increment to be a very simple on change value plus one and const decrement which will be a very simple on change value minus one and then we're gonna have const handle change which will accept event which will be a react change event HTML input element like this we're gonna get the value and we are going to have to parse the event target value because we want to turn it into an integer. So parse integer, event.target.value and add a default radix of 10 and then call the onChange() and pass in the value. For this button go ahead and call the onClick decrement and for the latter one call the increment method. For the input go ahead and give it onChange to be handleChange and value will be the value.
Let's also give it a type of number. Actually let's go ahead and leave it as string for now. Great. So we now have this And now we have to find a way to fill these values and to actually create the onChange method. So let's go ahead and do that.
Let's head inside of our use editor and it's going to be pretty similar to our existing methods. So let's copy the last one which is change text align and get active text align. So I want to copy these two methods. I'm going to paste them here. I'm going to change this one to change font size.
The value of the new font size will be a number. We are only going to allow this for text types and simply change the font size. And again, you can see that the TypeScript tells us that it doesn't exist, but we know it does exist here. Great, and then this will be get active font size and the same thing will appear. So I'm just gonna make this one the default font size if we can't find anything, right?
Like this. This will pretty much never happen, but I just want to satisfy TypeScript. So I'm using the font size, which we have defined in our types here. All right, get active font size is looking for font size. And let's fix the comment here.
Now that we have these two elements, we have to go inside of the types here and let me copy the last two. So, change font size and get active font size. Let's not misspell this. And these two strings will be numbers. There we go.
No errors inside of the Use Editor. Now let's go ahead and define the initial values here. Const initial font-size will be editor, getActiveFontSize. And then inside of here we're going to add font-size, initial font-size. There we go.
So now we have to create a method onChangeFontSize const onChangeFontSize will accept the value which is a number. If there is no selected object, we can break the method. And then let's call editor. Change font size. Pass in the new value.
And then set properties. First, let's get the current and then return an immediate object here. Spread the current and pass in the new font size to be the new value. There we go. And now we have both.
So we can go ahead and find our font size right here. We can pass in the value properties font-size and onChange can now be our oops, let's... OnChange can be our onChange font-size like this And it looks like I am missing so font size... Yes, let's just go ahead and add the alternative font size in editor, from editor types just so we satisfy TypeScript here because it can be undefined because editor is undefined. There we go.
So we now have the proper values for this. Perfect. So now if I go ahead and play around here and change my font size, there we go. You can see how it's increasing and I can also manually enter 5, for example, or 50 or 500. Perfect!
Great, great job!