This episode is for members only
Sign up to access "Build a Forum with Inertia and Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
34. Adding a markdown shortcut toolbar
Episodes
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%
Transcript
00:00
Let's go ahead and add in a Markdown toolbar. So as we saw from the introduction, we can just click on this to either make things into Markdown if we have them selected or insert Markdown.
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.
62 episodes•6 hrs 54 mins•1 year ago
Overview
Ready to build a forum with Inertia and Laravel?
Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.
So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.