Now, we can see, since the last episode, we have a little bit of work to do. We have 14 issues and 14 requests. So in this episode, no real game plan, we're just going to work through and try to knock some of these out. Generally, I try to address the pull requests before the issues. Anyways, how about this one, let's do some low-hanging fruit. Move laravel-debugbar package to require-dev. So we're going to take a look, and yes, it's going from require to require-dev, that's fine. We're just going to go ahead, squash, and merge that in.

fine. We're just going to go ahead, squash, and merge that in. Alright, what else we got? Simplify Travis CI config. So let's see what the deal is here. Since phpunit runs as a default script, yeah, on this note, as somebody filing an issue, whenever you make an assumption, not really an assumption, but if you say something like this, it's very useful for the maintainer to give them a quick link to prove what you are suggesting. So in this case, we can see Travis CI looks for phpunit in the same order as Composer

So yeah, this is a good one to go through together. Let's see what's going on. So we're pulling in HighlightJS. It's a really good syntax highlighting package. There's another one from Leah Vrow. That one works quite well as well. I usually reach for HighlightJS, but only because that's what I'm personally familiar with. So let's see. On BootstrapJS, we're adding a highlight method to the view prototype.

So it looks like when the reply is mounted, we're going to highlight and then pass through the DOM node for that reply body. And then we're going to watch the editing property, and if they're not editing, set a timeout for 50 mil. So I need to figure out the reasoning for that. Why are we setting a timeout to run a highlight? I assume it's just they want to make sure it gets updated properly. I don't know. We'll take a look at that. It looks like the exact same thing is happening on threads.

Okay, so here's what we're going to do. We're going to try this out locally. So rather than squashing and merging, which honestly is fine, but still, I'm going to do it from the command line and just do a quick run through to make sure it works. And we'll check out a branch here. So to start, let's pull in any PRs that I've merged. There we go. Anyways, let's check out a new branch and pull in those changes. All right. And within code, yeah, now we can see, for example, if we go to our Reply component,

All right. And within code, yeah, now we can see, for example, if we go to our Reply component, yeah, we're adding a ref there. And then when the reply is mounted, we call highlight. Okay, so let's give this a shot. Like maybe right here, testing, and within code, we'll say name equals John, and echo $name. That's enough for highlighting. Now I run it. I'm not seeing anything there.

Now I run it. I'm not seeing anything there. Oh, but you know what? We probably need to compile down some of those view file changes. So let's compile that so it is reflected in the browser. Give that a refresh. Hmm. Still not seeing it. Oh, whoops. Never mind.

Oh, whoops. Never mind. It looks like I just had to do a hard refresh for that JavaScript to take effect. So that does seem to be working. Now if I go back to code, at this point, I do want to make sure I understand everything that's happening. So for example, we're watching editing. I want to do a quick run through to make sure I understand why we're setting a timeout there. And then highlighting unmounted, yeah, we probably wouldn't want to do that uncreated. So let's see.

And then highlighting unmounted, yeah, we probably wouldn't want to do that uncreated. So let's see. Like if I were to take all of that and just paste it in here, update, okay, yeah, that is all being applied correctly. Now though, right here. So like I said, there's some formatting changes I would want to make or request, but we're only focused on functionality right now. So let's figure out, once again, editing determines whether or not the user has clicked on the edit button. So when they click on that, we change editing to true.

edit button. So when they click on that, we change editing to true. So we should be able to see right here, yeah. So if you click on the edit button, we change the value of editing to true. So now we're in this mode where we can change any of the code. So the way this works, if you're not familiar with views, a watch object, this is going to basically watch the editing data property for changes. So if it changes from false to true, we're going to trigger this method here. So here we're saying, if we're not editing, then set a timeout. Okay, so what he's saying is, if I were to change all of this, testingName equals foo.

So here we're saying, if we're not editing, then set a timeout. Okay, so what he's saying is, if I were to change all of this, testingName equals foo. So when we click update and that will change editing, so right here you'll see, we set editing back to false because we're no longer editing after we click on this button. So if that's the case, we set a timeout and then we call highlight again so that it picks up on the changes that you made. Now again though, I'm assuming there's a timeout just to handle that little flash of content maybe? Let's see. So I'm going to set up, let's just do npm run dev one more time.

Let's see. So I'm going to set up, let's just do npm run dev one more time. So actually, npm run watch. Okay, so now if I were just to remove that, I'm pretty sure it's there for a reason, but I just want to see if I do that, I'm sorry, if not editing, then we call that, that should compile down. Let's come back, give that a refresh, change it, update, yeah, it's not working. Do we just need to wait for the next tick? So what is it, this .$nextTick? Will that do the trick?

So what is it, this .nextTick? Will that do the trick? That compiles, give that a hard refresh, name equals John Doe, update, yeah. So I think that's it. Maybe the person who submitted the PR just didn't realize there was a nextTick method that we could use. Nonetheless, I'm going to bring it back to how they had it before, because I'm going to merge this in and then make a couple commits on my own to fix a few things. Now on thread.vue, I think they've done the exact same thing. Yeah.

Now on thread.vue, I think they've done the exact same thing. Yeah. Okay. So here's what I'm going to do. It's good enough for me to merge in as it is, and then I can make some changes. So we'll say git merge, this person's package, I'm sorry, git checkout master, and then merge it in. There we go. So now I can just move in and tweak a few things, like if we come back here, once again, this onNextTick, we will highlight, like so.

So you're seeing some flash there. It's only because of the internet. Anyways, if I give that an update, that should all still work. Refresh. Still rendering. Now, if we create a new Thread, we need to make sure that works as well. And yeah, now that has syntax highlighting as well. So that's great. So if I can confirm that, thread.view, okay, and yeah, it's doing the same thing there. All right, so that means here, we can say this.nextTick, like so.

So if I can confirm that, thread.view, okay, and yeah, it's doing the same thing there. All right, so that means here, we can say this.nextTick, like so. And then once again, say, if you're editing, then you can return, otherwise, we can remove this indentation, like so. Now you'll remember on a question, we have the same thing where you can edit it. So we're saying, all right, well, if you're in edit mode, then we don't need to apply it. Anyways, that looks fine to me. Next, there was the bootstrap. So we have to decide, right down here, do we really need the highlighter defined there?

Okay. So what I'm thinking is this feels a little wrong. Maybe highlight could be its own component. Let's see what that might look like. So let's go to reply.view. And yeah, right here. So we have this concept of highlighting, and it's being done. It's a little blurry right now. So we have a ref, and then somewhere in this component, we highlight, and then we watch other things, and we highlight.

So we have a ref, and then somewhere in this component, we highlight, and then we watch other things, and we highlight. But what if I did this instead? So we're kind of working on the fly here. What if we had a dedicated HighlightComponent like that? And then right up here, I would actually just wrap it. And that way, I sometimes think of view components as like PHP classes. Not quite the same thing. But if I create a dedicated component for highlighting, any of the logic related to how we highlight and what we highlight can now be stored within there rather than across.

Yeah. That might get us started. All right. So if I switch over to Chrome, we should get some errors here. Yeah. First one has no idea what highlight.view is. So let's create a new file, highlight.view. That will consist of a template. And then within here, maybe we'll echo out the content. So yeah, just to refresh your memory.

And then within here, maybe we'll echo out the content. So yeah, just to refresh your memory. Where's highlight? Yeah. So we have this component. It's going to accept a prop called content. So we're going to take that content and just spit it out there. So that means within here, we need to accept a prop called content. And let's come back. Give that a refresh.

And let's come back. Give that a refresh. Unknown custom element highlight. OK. So at this point, we have highlight.view. We're pulling that in, but we haven't declared it as a child component. All right. Let's come back. Give that a refresh. And yeah, now nothing's breaking.

Give that a refresh. And yeah, now nothing's breaking. But you'll see right here, body. Sounds like we're not using the binding properly. So if we scroll up, yeah. So we're just passing in the string body. I need to tell view, no, I want you to bind that to the value of body here. So now if we come back and give that a refresh, yeah. So we basically reproduced what we have before, but now I have this special place where I can add things like a dedicated highlight method.

Next within, so this is gone. We can, we might keep this here, but we can at least move this here. Next I'll update this to import highlighter from 'highlight.js'. And then here this would just become import. Okay. So now think about it. This has been cleaned up a good bit. Next reply.vue, let's see what else needs to be moved over. So we have this mounted section. So once the component has mounted, we're going to highlight.

So we have this mounted section. So once the component has mounted, we're going to highlight. All right. We can move that here now. So once it has mounted, we're going to call this.highlight. And let's see, before we were passing through the ref. So yeah, we need a reference to that DOM node. So let's say ref is, we can still call that content. Is that confusing having two? Hmm.

Is that confusing having two? Hmm. We'll keep, hmm, I don't know. Let's keep it like that, but then we'll change it if it starts getting weird. All right. Once the component has mounted, we're going to call highlight and pass through the DOMNode here. highlight will find the pre-tags and for each one call the highlighter on it to highlight that block. So now if we come back to reply, this section is done.

It's very easy to maintain. And then later, if you start thinking, all right, well, I have this here and that there. Maybe I could extract something like this and clean things up. That's when you perform that refactor. Anyways, highlight. And now where do we want to use the highlighter? So thread.view is actually using an inline template, isn't it? Yeah. So inline template. Where are we rendering the body?

So inline template. Where are we rendering the body? Oh, that's right. It's within the question. So let's click through there. We have our WYSIWYG. So this is all if we're in edit mode. If we're not in edit mode, we will echo out to the body there. So here, we're just going to wrap it within our highlighter. highlight content is body.

So here, we're just going to wrap it within our highlighter. Highlight content is body. And once again, we're going to bind to that. Clear that out. All right. So if we did everything correctly, if I give that a refresh, we did not do it correctly. What did we do wrong? Cannot find module highlight.view. Oh, you know what? It's because, hmm, so where is thread.view?

Oh, you know what? It's because, hmm, so where is thread.view? Where did we put that? It's in pages. Okay. So there, we have to go up into components and to highlight. Is that right? Refresh. There we go. Everything seems to be working great.

There we go. Everything seems to be working great. So will that work? Food. That's reflected. Change that back to foo. We're just making sure everything picks up on the change. And as we perform these, are we getting anything odd? Edit. No.

And that way thread doesn't have the additional responsibility of figuring out, okay, we're going to highlight this. Then we're going to watch this. Then we're going to call highlight again. We're just going to let this guy here, this highlight.view component be responsible for all of that. So I'm going to select all of this. We're actually not going to commit any of these public assets. And later we need to actually add that to our .gitignore. So we'll just stick with these and we'll say refactor syntax highlighting.