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
32. Toggling the markdown preview

Episodes

0%
Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
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
In the next two episodes, we're going to focus on toggling the markdown preview that we saw from the introduction. So the first thing that we're going to do is build out the section here where we're eventually going to have our markdown toolbar. And we're going to have a link or a button over here that will toggle this, send a request through to the back end, fetch the markdown and then replace our text area.
00:21
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.
00:44
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.
01:03
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.
01:21
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.
01:35
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.
01:51
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.
02:07
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.
02:22
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.
02:38
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.
03:04
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.
03:16
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.
03:33
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,
03:52
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.
04:11
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.
04:27
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.
04:45
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.
04:56
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.
05:21
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.
05:39
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.
05:53
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.
06:13
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.
06:38
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.
06:59
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.
07:20
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.
07:30
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.
62 episodes6 hrs 54 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!