Adding a markdown shortcut toolbar: Build a Forum with Inertia and Laravel

00:10

There are loads more options than we looked at in the introduction, more that we can implement if we want to. Once we get started with this, you'll be able to add more. And we're going to look at adding SVG icons really conveniently

00:22

in the next episode so you can easily add them in if you need to. So let's go ahead and just install this package. Let's take a look at what this looks like first of all. You can see here that we basically just use this Markdown toolbar component,

00:35

choose which text area is for, and then we just go ahead and implement any of these inner components that will just work for us. So this just works pretty flawlessly out of the box. There are a couple of other things that we're going to need to do

00:49

just to get around this working invite or working nicely invite, but I'll cover them as well for you. So let's start by installing this, and then we'll just start to use that and see how it looks.

01:00

So let's go ahead and pull this in with NPM. And the one thing that we do need to do is just globally import this somewhere. That could just be in our main app file. So let's open this up and just do this at the top.

01:11

So that should be it pulled in, and we can just start to use it down here where we have this Markdown toolbar. So if we come over to our FixFormWrapper and look for our Markdown toolbar, let's just start to add this into here.

01:24

We can even get rid of this div because it's going to separate it out nicely. So we need the Markdown toolbar outer element just inside of here and finish that off. This is going to be for the body. And then inside of here, as per the docs, we just need to add in the things that we need.

01:39

So I'm going to add in bold. I'm going to add in italic. So let's just replace these. And what can we also add in here?

01:49

Let's have a look. The code, which is a pretty important one. So let's switch this to code and let's also pull in the link, which again is pretty important with Markdown.

02:01

We always forget those ones. And we're going to go ahead and leave the mention one for later when we get to user mentioned. But feel free to pull in any of these. They're just going to work straight out of the box.

02:13

So let's change these text labels over. We're going to be, like I said, adding icons in there later. But let's just see how this works now. So let's go ahead and just click bold.

02:25

And at the moment, that's not working. So I've got a feeling that we didn't. Yeah, we didn't add an ID to this text area, which we should be doing anyway. And let's just try this out again.

02:36

There we go. Great. So that's now working. The cursor looks a bit weird, but this pretty much just works as we saw from the introduction.

02:44

There's nothing else we need to do to change the functionality about this. For example, Cocourse.com, we could turn into a link and we could put the URL in here as well. You know, it just works like you would expect. So let's just very quickly move this over to another component,

03:02

because we're going to want to potentially use this for other things as well. We're going to keep this inside of the fixed form wrapper, but we're going to allow the prop to be passed down to choose the actual item that we want this to be applied for. That's really important because this could change between the reply form and the create

03:21

discussion form. You might have different IDs for this and you might want to use this elsewhere. So let's cut this out of here and go ahead and create this out as a component since we're going to be reusing it.

03:31

So we're going to call this MarkdownToolbar.view. Very simple just to stick this in a component, put this into a template and then within our script section, allow a prop to be passed in and we're going to call this four. Now, we don't even really need to pass a propping because this will be inherited,

03:53

but let's go ahead and explicitly define this anyway. So let's say, I don't think that's actually going to work. Let's say string here. I think because four is a reserved keyword.

04:03

Yeah. In fact, let's get rid of this because we can just pass this down and it will be inherited. So let's try and keep things as simple as possible. So we can go ahead and pull in the MarkdownToolbar from here.

04:17

And we know that is for the body. And let's just make sure we import that MarkdownToolbar from that component. And that should just work in the same way. Now, we are getting an error.

04:30

So let's have a look. Yes. So I think that is just because there may be a naming collision here because we're calling both these components the same thing.

04:39

Let's rename this to MarkdownShortcutToolbar and let's go ahead and just rename this. And let's try this out now. OK. Yeah, that's working now.

04:51

So we can click it and it's just working in exactly the same way. OK. So we've got that in a component. Let's go ahead and just style this up really, really quickly.

04:58

So we're going to go ahead and add a class to this of FlexItemCenter and we will set a minus margin on the left to one because we're going to be dealing with icons later. And I think this just pulls it over a little bit. We could get rid of that for now.

05:14

And let's just comment that in there. It's just something I'm always aware of when I'm pulling in icons that we need this to sit nicely. And let's give each of these a class.

05:23

So we're going to set these to a cursor of pointer. So it just looks a little bit more like we can actually click on this. And let's go ahead and say padding on the Y axis of maybe we just pull that inside of class, let's say one point five and padding on the X of one.

05:38

And let's just duplicate this down to each of these sections. So things look and feel a little bit better. Great. So that's working a little bit nicely now and we can add our icons in there afterwards.

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

Episodes

Transcript

Episode summary

Episode discussion