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
33. Fetching and displaying markdown


Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
01. Introduction and demo
6m 59s
02. Getting set up
10m 36s
03. Modifying registration for usernames
7m 15s
04. Figuring out the forum layout
5m 57s
05. Creating and listing topics
9m 15s
06. Basic discussion listing
13m 33s
07. Pinning discussions
4m 1s
08. Tackling pagination in Inertia
8m 23s
09. Customising pagination text in Laravel
10. Showing a discussion
6m 4s
11. Setting up discussion posts
5m 53s
12. Listing through discussion posts
5m 28s
13. Adding more data to posts
8m 24s
14. Adding pagination to posts
1m 35s
15. Adding a post preview to discussions
4m 52s
16. Adding the last reply to discussions
5m 54s
17. Outputting discussion participants
8m 4s
18. Limiting participants in the UI
5m 56s
19. Ordering discussions by last post
4m 30s
20. Handling deleted users
2m 31s
21. Counting replies
8m 13s
22. Building our first filter
8m 31s
23. Highlighting current filters, and merging with pagination
5m 37s
24. Adding auth specific filters
6m 40s
25. Adding the topic filter
8m 18s
26. Scaffolding the new discussion form
13m 29s
27. Toggling the create discussion form
9m 2s
28. Keeping form state
4m 59s
29. Storing a new discussion
11m 29s
30. Discussion validation and authorization
5m 1s
31. Generating markdown for posts
8m 37s
32. Toggling the markdown preview
7m 43s
33. Fetching and displaying markdown
8m 6s
34. Adding a markdown shortcut toolbar
5m 53s
35. Dealing with SVG icons
7m 46s
36. Creating the reply form
7m 48s
37. Basic Inertia permission checking
6m 26s
38. Creating replies to discussions
5m 37s
39. Jumping to posts
11m 40s
40. Automatically scrolling to posts
6m 18s
41. Toggling post editing
7m 32s
42. Editing posts
3m 36s
43. Deleting posts
4m 21s
44. Deleting discussions
6m 7s
45. Setting up for best answers
7m 29s
46. Toggling the best discussion answer
12m 14s
47. Solved and unsolved filters
2m 23s
48. Indexing discussions for search
8m 6s
49. Searching discussions
12m 35s
50. Debouncing search
2m 47s
51. Adding mentionable functionality to forms
6m 32s
52. Indexing users for mentioning
9m 9s
53. Hooking up users for mentions
10m 10s
54. Detecting and storing mentioned users
9m 54s
55. Adding the mentioned filter
2m 26s
56. Adding mentions to the markdown toolbar
1m 1s
57. Adding mentions to the reply form
7m 21s
58. Fixing up some unauthenticated state
1m 1s
59. Fixing up post scrolling
1m 48s
60. Reviewing SSR (Server-side rendering)
8m 20s
61. Preventing parent posts from being deleted
2m 31s
62. Improving solution marking
4m 9s


Back over to our fixed form wrapper, let's come down here and create another ref out. This is going to be the HTML that gets returned to us when we actually send a request to our back end.
What we now want to do is watch whether this is being enabled and then send a request to the back end and set this HTML. And that's what we can show within that div that we've styled like a text area. So the first thing that we're going to do is pull in watch from view, and then we can just go ahead and watch on this markdown preview enabled value to detect whether it's true or not.
So we'll actually get the toggled value in here. And if it's not being toggled, we can just return false. So if we have this set to false, we just want to go ahead and return and not do anything. If we have it set to true outside of this condition, we can then go ahead and send a request to the back end.
Now, we're going to build out that controller first, and then we're going to look at the best way that we can actually send this request, whether that is through inertia itself by the router or another method. So let's build out this controller. Let's go ahead and make our controller here called Markdown Preview Controller,
or we could just call this Markdown Controller, whatever we want to say. So over in our web routes, let's go ahead and register this. This, of course, can be outside or inside of auth. It doesn't really matter too much.
Let's just call this Markdown. And we're actually going to make this a post request as well, because we're kind of like posting a form. And let's create the Markdown Controller here. And let's give this a name of just Markdown.
We can always change that over later. So the Markdown Preview Controller, the Markdown Controller, is just going to take in a single piece of data, which is, in this case, going to be the body. And it's going to return to us the Markdown that we would see if we were using this directly within a post.
So we're pretty much going to use exactly the same thing that we did over in the post resource, because we want this to be exactly the same. So let's go ahead and just grab the line that we've got here. And we can go ahead and return a response in here.
So just a standard JSON response. We don't really need to use an API resource for this. And let's return an HTML key in here with exactly what we've just seen. Of course, this time it's going to be request body or whatever we want to say.
And if there is no request body, let's just go ahead and output an empty string, just in case no data is getting sent down at all. So that's really all we need to do here. Again, you can protect this under the auth middleware if you want to.
But let's just leave it like that just for now. So how are we going to send a request through to this controller when really there's no need to use Inertia's router? This isn't something that we are passing down directly from our controller to this view.
So it's going to get a little bit more complicated if we are doing that. And in these cases, it's perfectly reasonable just to lean on making a standard request to your backend. So for this, we're actually going to use Axios. Now, Axios already comes with Laravel Breeze.
If we open up the app.js file, you'll notice that we've got this bootstrap file which lives next to this. This goes ahead and imports Axios and sets it on our window object. So we can just use this right out of installing Breeze. So we're going to go ahead and use Axios to post through.
We can still use Ziggy routes here, so we can still reference the markdown route by name. And we're going to go ahead and pass in a payload here, which is going to be the body. So where is this body coming from? Because at the moment we are inside a fixed form wrapper, which doesn't have access to our form.
Now, what we did earlier over in the create discussion form. Remember, we attached the form for our create discussion to this composable. So we had that state kept. What we don't want to do is use create discussion over in our fixed form wrapper, because this could be also used to create replies.
So ideally, what we want to do is over in the create discussion form, pass this form as a prop down to our fixed form wrapper. So let's go ahead and do that now. So it's sort of just sharing data back and forth between these two components just to make our lives a lot easier when it comes to building out another form. So we're passing that form down as a prop.
If we come over to the fixed form wrapper, we can go ahead and define this out as a prop just here. So let's create our form prop with object. We'll go ahead and set this to prop so we can reference it. And now all we need to do for the body is access the form and the body from that.
So basically from the create discussion form, we're allowing the fixed form wrapper access to our form via the props. And we're just passing the body down in there instead. So let's just send a request and just make sure that this works. So let's go ahead and open up our developer tools, open up our network tab.
And I'm just going to type something in here and click turn on Markdown preview. So we're sending a request through to Markdown, which at the moment we're getting through a 500. That's probably just because we haven't pulled our Markdown renderer in. Let's just try this one more time.
And let's go ahead and add some text in. And there we go. So we're making a request now, and you can see we're actually getting the correct response back within that HTML property. And of course, this is toggling, but we're not actually seeing the data in there just yet.
So back over to our fixed form wrapper after we get this successful response back. And let's go ahead and actually pull this in here as a response. We're going to go ahead and do something with that data. And that is going to be setting the Markdown preview HTML.
So let's go ahead and set the value to this response data. And remember, we're returning it within that HTML property. So now that we've got that, we can actually use the Markdown preview HTML to fill in the fake text area that we have just up here. So we can go ahead and say vHTML and set that in there and get rid of all of this.
And we should be good. So let's just try this out. So let's say hey, and then just make that bold. Click turn on Markdown preview.
And there we go. We can toggle that on and off now. Now, for larger blocks of code and things that are going to take a little bit more processing time, let's just grab all of this code here and put that into our text area over in our browser. And if we just put that in there, make that into a code block, just say HTML for now.
What you'll notice is we get a slight delay from when it comes on. This can be a little bit confusing, particularly if you're changing any data around here. So if I put something up the top here and then click turn on Markdown preview, we get a kind of flash of this just looking like it was the previous data that we had. So what you could also do, and we're not going to make this look great, but you can do this as well and add in maybe a loading spinner.
You could go ahead and say Markdown preview loading. You could set that to false by default, and then down here you could set Markdown preview loading to true. And then once the request has finished, you could set that back to false. So now what we can do is use Markdown preview loading to do something with the text area here, whether that is adding in a loading spinner.
In my case, what I'm going to do is just add some opacity. So it kind of looks like it's a bit grayed out before we do anything. So let's go ahead and have a look at this. So if I click on that, we can't really see at the moment because we've got a little bit, well, we've got all of the same code in here.
Let's just grab some other code and just add that to that just to see what we can do. And if you look at it now, we get a slight delay and then the new stuff rolls in. So it's really up to you what you want to do. But adding a really quick loading indicator is very simple just via these refs.
62 episodes6 hrs 54 mins


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!


No comments, yet. Be the first to leave a comment.