Sign up to access "Build a Forum with Inertia and Laravel" right now.

So the first thing that we'll do is head over to the fixed form wrapper just where we have our main section. And down here, we're going to build out another section which will contain that markdown toolbar and of course, the button. So let's go and just create two little sections out in here. This is going to be the markdown toolbar, which we'll build a little bit later.

And this is going to be the button to toggle it. So let's go ahead and set a flex with item center in here and we'll set justify between. So they both sit opposite each other, basically. So for the button itself, let's just replace this out with a button and we're going to say markdown preview.

We will be able to toggle this to say on and off. So we'll just add that text in there and then we'll refine that in just a moment. So when we click this, then we want the text area to be replaced. The issue that we've got at the moment is the text area exists within the main slot within the actual create discussion form.

So what we're going to do is wherever we place this toggle, which is actually going to be inside of this fixed form wrapper, we need to get that into the slot somehow. So let's go down to or up to our script. We haven't even created a script section in here yet.

So let's create out a script set up here. Let's go ahead and import ref from view so we can create out a ref for this. And let's say markdown preview enabled. And let's set that to false by default.

What we're also going to do is just for the purpose of refreshing the page over in the use create discussion form. Let's set this to visible. So even if we refresh the page here, it always stays up. OK, so this is pretty straightforward to actually toggle this value.

So let's go and just dump this out up here somewhere. And when we click on this. We want to go ahead and toggle this. So we're going to set this to the opposite of what it already is.

So all that means is now is set to false by default. We can turn that on and off. Now, one thing you'll notice that this is actually submitted the form through. So any buttons within a form that you don't actually want to submit through, we're going to set them with a type of button rather than a type of submit.

So now you can see we can nicely toggle that markdown preview here. So what we want to do is over on the create discussion form, if we just look for our text area inside of our form itself, this is what we want to effectively get rid of if we have markdown toggling or preview enabled. So we're going to go ahead and grab this and we're going to pass this through to the main slot as a prop.

And this is going to allow us to access this. So we'll just call it the same thing, markdown preview enabled. And we'll just pass that down into that slot. What that means is over on the create discussion form where we actually use this slot.

So it's come all the way up to here. We can actually go ahead and extract this out from here and use it wherever we need to. So if we go over to the fixed form wrapper and get rid of the dumping out of that here and instead put that inside of here, preferably next to the text area, which is where we're actually going to be using this.

So let's dump this out here. What we should see is that value come through into that kind of template we've created for this. So you can see now that still works, which means we can keep all of the markdown preview functionality inside of the fixed form wrapper. And there's a good reason for that, because we're going to be using that between this create discussion form,

the reply form and any other forms we build. But we can still get access to this value outside of that component and we can use it to hide and show this text area. So let's start by just styling this button up for the actual markdown preview. And then we'll go ahead and look at the styles that we'll see for the actual markdown preview box itself.

So this button, let's just go ahead and add some styles to this really quickly. Let's say text small for this. And let's set the text to indigo 500 just so it matches the default breeze styles that we've already got. And there we go. We can easily toggle that now.

We can also change the text of this as well. So let's go and just add in a ternary here and say if the markdown preview is enabled, we're going to say turn off. Otherwise, we're going to say turn on. And of course, we could use turn outside of here and just toggle off and on.

But it's entirely up to you. And we'll just say markdown preview. So now when we first open this, we can click this to turn it on and then click this to turn it off. So it's a lot clearer now that we've done that.

So over on the create discussion form, that is now where we want to go ahead and show that markdown preview. In actual fact, I think it would probably be better to just put this in one place, because if we think about it, the markdown preview existing in the form wrapper itself means we don't have to duplicate this over here. So what we can actually do is we could put this just below the main slot.

You can change this up if you want to and pass the stuff down as a prop if you want to later, but let's just add in here for now. So let's start this out really quickly. Let's just see how this is going to look. We'll set a specific height to this and we'll set the background to a grey 100 so we can kind of differentiate it.

Set this to a rounded of large. Give some padding on the X and Y axis. We basically just want this to look like a form, but it's going to be a div or a form element. We'll set the overflow Y to scroll, because of course we're going to have quite a bit of content in here.

And we'll just go ahead and set a really simple grey border on this with a shadow. So pretty much replicating a text area, but it's going to look like that. So let's just verify that we're setting the correct height over on our create discussion form for our text area, which we're not doing at the moment. So we'll explicitly set the height and get rid of the rows.

And we should end up with two identical looking boxes, one with just a slightly greater background color. So now what we can do is we can only show this on the fixed form wrapper if the markdown preview is enabled. So if markdown preview enabled, show that box. And of course, at the moment, if we click turn on, it's just going to show it alongside of our text area, which could be fine if you wanted to keep it like that.

But what we're going to do is over on the create discussion form, we're going to say that we only want to show this if the markdown preview is not enabled. So what that's effectively going to do now is just toggle between the two things. Now, the one thing you'll see is we get a slight height change with these, and ideally we want these to be very, very similar. All we need to do with the text area here is just set a line to top.

It's just a browser styling issue. So we should now see that these are completely identical minus the background color, maybe the border radius as well. But we can fiddle around with that. So when we go ahead and on this main wrapper over on our fixed form wrapper, just set the space Y to three here.

And let's just check that. Yeah. So that's spaced out a little bit more. OK, I think that's good enough now. We're now at the point where we can effectively toggle this markdown preview.

But what we now want to do is listen for this. So when we do turn this on, we make a request to actually preview the markdown. We're going to do that via our backend. So let's cover that in the next episode.