Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

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

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

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

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.

Episode summary

In this episode, we dive into building the toggle feature for the markdown preview in our discussion form. First, we set up the section in our UI where the markdown toolbar and preview toggle button will eventually live. We create a flexible layout so that the upcoming toolbar and the toggle button sit opposite each other in the interface.

Next, we install a toggle button that, when clicked, switches the state between showing the normal text area and the markdown preview. We use Vue's ref system for this state management, initializing the preview as off by default. The button's text also automatically toggles between "Turn on markdown preview" and "Turn off markdown preview" depending on the state, so users know exactly what action they're taking.

We also make sure the toggle state passes down correctly by using props, which lets us hide the text area and show the preview (or vice versa) in the right places. We take a bit of time to style the button so it fits in nicely with the rest of the form, and we set up two identical-looking boxes: the text area and the markdown preview box, ensuring things look consistent.

By the end of this episode, we've got a nicely styled and fully functioning toggle switch for the markdown preview, but we haven't yet hooked it up to the backend or made it actually render the markdown content. That's what's coming up next!

Episode discussion

No comments, yet. Be the first!