Want this course?
Adding Copy buttons to the editor
Hello. My name is Eric Norman, and we are building a markdown editor. We've already got things running pretty smoothly right here. We can reload our code, uh, just by hitting save. We've got a live preview of our HTML, uh, rendered from markdown. Uh, life is pretty good here in, in, uh, closure script land. This was so easy.
[00:00:30] This was so easy. I don't know how hard this would be in react using regular Java script, but to me this was, this was super awesome, super easy. And, uh, we don't appreciate how nice we have it sometimes. Okay. So in this lesson, we're going to add a couple of buttons. You know, once you. Once you, uh, type this stuff, you want to get it out right?
[00:00:58] It's an editor. You want to type it and make it look right and then hit a button and then you get it out and put it somewhere else. Uh, we're not gonna like save the file or anything like that. We're just going to copy it to the clipboard. It's going to be one button for markdown and one button for the HTML preview.
[00:01:18] Now here's the thing, I've never written code to. Copy to the clipboard. When I click a button and I know it exists, you know, I've seen it on lots of sites, so I'm going to search for it. I'm just going to reuse this tab. Maybe make it bigger, a HTML copy to clipboard. Let's see if that gives us something.
[00:01:42] How to copy to clipboard. How to copy the, Oh, look at this. This one looks good. Let's see. Okay, so all right. I'll just admit I have read this article. I looked for it myself, so I'm going to do this and I know that this is the one, this is the good one. Um, well this one is good too. Let's do this one. No.
[00:02:13] Look, it's a lot of Java script code. I'm just going to copy it. Hard to read in there. I want to see it in my editor. All right, so I'm just going to do it right in here. This file is not that big. A 51 lines of code. I feel like it's, it's still reasonable to navigate around, so I'm just going to put it down here, so I'm going to paste this right here and we'll just work through it.
[00:03:06] Make it read only to be tamper-proof move it so you don't see it. So I guess if you were to put it into the Dom, you would see it for a moment, like it would blink in and then blink right out as you know, if he had a slower browser or something. Uh, and so this is going to put it like way off to the left, uh, off the screen, so it won't change.
[00:03:29] It won't affect anything. Um. All right. So now we're saving the range because when you do a copy, it's going to, you know, you could have already had some texts selected. Okay? So that's important. It's going to save it and then restore it. So this is where we're saving that and restoring it. Uh, then we're gonna select the whole contents of the text area.
[00:03:55] We're going to execute the copy command. Then we're going to. Clean up, we're going to remove that thing, that text area from the body. And then if we had a selection, we're going to, uh, restore that selection. Okay? So we're just going to do this one thing at a time. I'm going to call this copy to clipboard, and it's going to take a string.
[00:04:20] Let's just call it ass. All right? So first thing we need to do is create an element. Call it L. So it's a create element method on the document, and it needs the name of the element to create. And then there's a bunch of things where we're setting the values, setting the attributes. So let's do those down here.
[00:04:47] A set value of L two S. A recalling dots set attribute on L read only. Boom, empty
[00:05:11] set again.
[00:05:15] Uh, so we're going to need a couple of things. So we'll do that. We'll just do this. A nice threading macro. Position. So we're setting the position to absolute
[00:05:31] set L style left two negative four nines. Okay. Okay. I'm going to delete these so that we can continue. All right, so now we need to append child a append. Look, I'm going to do it this way. J S document. We need the body. So just in case you don't know this, if you're not calling it as a function, notice there's no Perrins.
[00:06:10] You need to put a hyphen. Right? So I put it here. I put it here because I'm not calling it as a function. If I'm calling it as a function, I don't put the hyphen like right here. Okay. So append cha. Oh, I need a dot. Penn child L. so I'm adding L to the body. Okay? Okay. Now I need to save the selection. Uh. I wonder if I can do that, uh, above, so I don't have to have another let, I'm going to do it up here.
[00:06:49] so selected, they call it. Okay. So this is saying if the range counts, otherwise false. So we don't use false, uh, for no slash we'll just use Neal. It's good enough, right? So then we can, instead of this, um, thing, we can just do a win. So let's see if something is greater than zero. So that means pause and we'll do another thing.
[00:07:22] JS document, another threading that gets selection. Notice it has Perrins so I'm not putting a hyphen, but then the range count doesn't have a Prince. I need the hyphen range count. Okay. So if the range count is positive, then we do JS document that get selection that get range at zero. Okay. Let me get rid of this so we can see some more.
[00:08:00] Okay, so now we can call. Okay. Dot. Select on L.
[00:08:10] okay. And that exact command exec command on document, I'm gonna call a copy. Then boom again, JS document. Oops, get the body out of it and then we'll call removed child L. all right. Now we have a win selected. Okay, let me delete some of this stuff so I can see down there when it's selected. we're going to do.
[00:08:58] Again, another one of these JS, another threading JS document that gets selection that remove all ranges. JS document that gets selection
[00:09:19] ad range selected. Whew. Okay. Uh, that, that looks good. Um, one last thing I'm going to do just just for my own sanity, uh, for later, I'm going to put a link in as a comment so I know where I got it from if I'm like, what is this stuff? Why did you do that? Way? Like, go read that article again. Do you need to know.
[00:09:51] All right, so we have this function, uh, just want to make sure it compiled. Looks good. Uh, let's make this small again.
[00:10:03] Okay. So we have this copy to clipboard function. We pass it a string and it magically puts that string, oops, puts that string into the clipboard. So let's make a button. This text area here. Now I'm going to make a button. Copy Mark now. Okay, there's a button right there. Okay. Now we want to make it do something, so we'll do on click.
[00:10:39] What do we want it to do? We want to copy to clipboard and what do we want to copy. At markdown, whatever's in this, uh, Adam at the moment. Okay. Um, well, how do I test this thing? Okay. I'm gonna I don't need to select anything. I can just hit copy markdown. That should, it should be in the clipboard now. Now I'm gonna change this.
[00:11:15] Oh, it's a nothing. Okay. And then I'm going to paste. Ah, it worked. I'm going to do that again. Uh, put some stuff in there and copy marked down and then delete it and then paste, uh, look at that. So the copy Mark down button works. Uh, let's see. Can it do that thing where it will save the selection? So, yes, like that little bit
[00:11:43] didn't work. Mmm Hmm.
[00:11:50] Maybe it only works on something like this. Boom. Ah, okay. Maybe it doesn't work in a text area selection, but it works in this kind of selection. Let's see if I commented this out. I'm just curious now, just playing with it. Say I select that and I hit copy Mark, then. Ah, I see it did do that.
[00:12:23] Alright. Uh, so let's uncomment that it did ruin the document selection, but Oh, well, it doesn't work in a text area, but it works in this. Hmm. We'll experiment there. I wonder if there's any way to do that,
[00:12:42] but we're not going to do it. This is good enough. Uh, right. So we have a co copy Mark down button. Can we do a copy HTML button? And yes, we can. So let's put it after this div here. So it says, I'll be marked down, but we want to say copy HTML. And we don't want a copy of the markdown. We want to do an MD to HTML.
[00:13:11] There we go. So I should be able to do this. And then if I paste it in here, yes, it's the HTML that I just hit copy on. Awesome. Okay, so now we have these nice little copy buttons. Why don't we change the style a little bit on these buttons. Uh, so back ground. Oops. Color green. What if they, yeah. Okay.
[00:13:45] Padding to em. little Oh, big. What if we did one M
[00:14:44] We can easily just line by line, converted into closure script. It's not pretty, but here it is. I mean, and you can probably find some way of making this a little bit nicer to look at. Um, but I find that it's not worth it. This is just, it is what it is and well, we'll just leave it the way it is. Awesome.
[00:15:07] In the next lesson, we're going to add one major feature, so right now we can preview what the HTML looks like, but we can't edit the HTML here. We can edit the markdown. We can add some stuff and it previews just fine. Uh, but we can't edit it in HTML mode and have it generate the markdown. So that's what we're going to do in the next lesson.
[00:15:40] See you there.