Reading from the Clipboard

[00:00:00]
>> With that, what we'd love to do now is define some methods for writing data to the clipboard and reading data from the clipboard. Now, the browser also does have some browser-based clipboard stuff, but it is bound by all the same constraints that it has in the browser as well, right?

[00:00:26]
Especially you can turn web security off in the browser window too, I'm just not gonna show you how to do that. We're gonna pretend that doesn't exist. So the easiest way, in the same way we've seen for a lot of things, there is a clipboard module in there as well.

[00:00:47]
And I'll kinda show you, we can hopefully see in here. It's got available format, so what's on the clipboard? Whether or not it's got a given format, you can read from it. You could also just seek to only read, get me the text, the html, the image, the rich text, for whatever you're looking for.

[00:01:06]
I'm just gonna pretend that the only thing exists is text right now. But if you were making an image resizing application, the ability to paste in an image on your clipboard would be super cool, right? The ability to write an image to the clipboard. Any of those things.

[00:01:19]
You can do it programmatically as well, right? You can do it with buffers. You can do anything that you want. You can look at all of these on your own time. We're mostly just gonna kind of look at the very base case of just the text at this point.

[00:01:33]
And so we are gonna say ipcMain. Do I want handle? We could do handle. What are we thinking? Are we thinking handle or are we thinking on? I'm thinking on is the right choice. I don't feel strongly about this, .on, at least for the writing to the clipboard cuz I don't need a response.

[00:01:53]
We're gonna say write-to-clipboard, and we'll have that in place. Really, I just care about the value. The only other things on the clipping type, as you can see before is I store an ID cuz React gets very angry with me if I don't have a unique ID when iterating over list.

[00:02:13]
I don't actually use the type. It was just in case I wanted to get fancy later, if I wanted to wing it at a later date, which I'm not feeling super strong about after I could remember two dashes before. We're just gonna go with the content in this case, at which point we can just say write it to the clipboard.

[00:02:35]
We'll do the other one. We could do a handle on that one. We'll say, so we've got the ability to write to the clipboard, and we'll say read-from-clipboard. And as you can imagine, what these two things do is pretty straightforward. Again, there's a whole bunch of different ways you can modify this and kinda.

[00:03:07]
One of my hopes is that there are a whole bunch of ideas that you have, but like we can kinda get that in place. We've got to read-from-clipboard, write-to-clipboard. We're gonna have to change these a little bit as we go along, but we've got some of the core kinda pieces in here.

[00:03:24]
We could turn this into a handle, we could turn into a event.reply, trying to think, want to do handle this time? Handle feels good. All right, so we've got that in place. Yeah, let's try that out and let's add that into our preload script. So now, what we do is we simply say, write to clipboard.

[00:03:56]
We just decided to take the content, right? And we'll say, that's not how that works. ipcRenderer. We'll send that, and then, read-from-clipboard is the other one that we decided before I named it. Read-from-clipboard, that's a good name. read-from-clipboard, it should be an async function. And what that's gonna do is, we'll do ipcRenderer.invoke, read from clipboard, and we'll return that.

[00:04:43]
It doesn't actually need to be async, cuz we're just gonna return the promise directly. So ideally, this will go ahead and, it will send a message, right? That will then go back to index.ts. It will read, we do need to make sure we return something here. It will return that back which then we have access to, awesome.

[00:05:05]
If we wanted to break this up, you could do event.reply and have a from clipboard, something along those lines. Those are also options but this is what we decided now. And so that's what we're gonna go with. The cool thing is if you look at api now, it is like these functions by default.

[00:05:23]
And then if we go into, Here you can see that they are now on the window object automatically, right? And that's kind of what I did before to set up that kinda dynamic typing. The other thing that we need to do is contextBridge. And do the same thing, under the API key, we take that object, we had that all in the same thing before, now it's separated out.

[00:05:52]
We can do the typing dynamically, we will get all those things on the window.API thing, automagically, everything will be good. So now, right now, this button here doesn't do anything, right? Well, if I want to write something and save it to this app, right, cool, cool, cool. I can do that.

[00:06:14]
But this button to copy what's currently on the clipboard and added to the app/ That doesn't do anything, right? And so what I wanna do is I want to make it do something. So it's pretty easy to do. We simply say, onClick. And we'll just say, it wants to do the one from the browser, but we'll do actually the electron one at this point, so await.

[00:06:55]
So we'll get that. Is it read from clipboard? Yep, love me some TypeScript. And then, what we'll do is we'll do, I've got that hook, that is just, it's dispatched to a useReducer to make our life a little bit easier as well. The IPC stuff is not like super well-typed.

[00:07:18]
So, if I went in here, and actually pro tip, we go into this read-from-clipboard and, That should actually get me a slightly better typing. You are somewhat on the hook on your own in this case. If I go into application now, that should now be the right type.

[00:07:43]
It's not perfect in that sense and I'm sure you can get real fancy with the typing if you wanted to. If I was in full I'm teaching TypeScript mode, I would, but I'm not. So now we've got that copy from clipboard where we should be able to read from the clipboard and have it work.

[00:08:02]
I don't know if I've restarted this thing since I added those IPC hooks, so I'm gonna do that so I don't lose my mind. And what I'm gonna do is go here, I'm gonna say like Hello World. I'm gonna select that, I'm gonna cut it. Ad now read-from-the clipboard through the main process.