Journal Entry Editor

[00:00:00]
>> Now, let's turn this into an editor, cuz right now, it's not, it's just a div. There are a million ways to make an editor. We're gonna pick the easy way. So what I'm gonna do is I'm just gonna make another div in here, and I'm gonna give this a className of, Let me see, how do I wanna do this?

[00:00:24]
Actually, I'm gonna give the root div a className of w-full. All right, full, which probably, I don't know if this does anything because I don't remember if this thing, yeah, we don't do anything here, we'll get to it. So we'll do that, and then inside of here, I'm just gonna make a textarea.

[00:00:46]
I know the original text editor. [LAUGH] I'm gonna give it a value, the value is just going to be something that we need to keep track of. So let's make some state. So we'll just say, value and then setValue = useState, and we'll make sure that the default state for this is gonna be entry.content.

[00:01:20]
So when it loads up, the value of the textarea will be whatever the entry value was. So then we just pass value here, like so. And then onChange. Yep, just to setValue, so we could just say, set that value to e.target.value. There we go, cool. And then just make this thing bigger, so I'll give it a className, w-full h-full, give it some padding of 8, and text-xl.

[00:02:16]
And then in this page, I just wanna make sure this is also full. I'll go back to the editors, you wanna see that. So nothing crazy here, just a standard input. Just binding the value in the onChange to a hook. The only thing different that you probably aren't used to is just setting that hook.

[00:02:40]
Usually, you'd probably use something like that, right, or null, or something like that. Remember, this is the initial value. Once you change it, it's not gonna be this anymore. It's the initial value, and it doesn't reset back to this, so it's not the starting value. It's literally the first time it renders, this will be the value, and never again until it re-renders again.

[00:03:04]
But by the time it re-renders again, if we do it right with the save logic, that will also be different, but we'll get into that as well. Okay, let's see what we got. Didn't break, so there we go. Looks good, looks good here, so we can type some stuff.

[00:03:29]
But it's not gonna do anything, right? If I refresh this, it's just gonna go back.
>> Yeah, it doesn't save yet.
>> Right, so it's the best text editor you can get. Yeah, so we got a nice clean text editor here. Honestly, the outline is bother me, I can't take it.

[00:03:44]
I really need to do something about that. Please get rid of that, thank you.