Global & Keyboard Shortcuts

[00:00:00]
>> All right, so now we've got that in place. There are a few just other OS integration niceties and fun things to inspire you that I think are super useful in these kinds of applications. So we can write to the clipboard. We can copy from the clipboard. The other thing that we can do is we can register global shortcuts, right?

[00:00:25]
So you saw before when I made an application menu, I could have an accelerator like Command or Ctrl O, right, that would trigger that file menu, but that's obviously only while you're in the app, right? What would be cool if I wanted, let's say this is holding memes instead of deep thoughts that I wanted to copy and paste.

[00:00:45]
What if I wanted to be able to at a moment's notice, select something, hit a keystroke and have it saved in there, right, or something along those lines, from anywhere, right? And there are applications we probably have on our computers like that new CounterEvent, whatever keystroke thing pops up, or to-do list thing, or what have you.

[00:01:06]
We can do that. That's totally possible in an Electron app in a way that's not possible in a browser app, and to no one's surprise, also, shockingly, easy. So we've got this thing called the global shortcut module. It does what it says on the tin, right? It registers global shortcuts.

[00:01:25]
We do need to make sure that our application is ready, right now, that is just simply creating a window for the first time. So what we do need to do is to say, well, go. We still wanna create a window, but then also we want to register a global shortcut.

[00:01:41]
As you can see, GitHub Copilot knows that I have now built this app about five times in the last week, and knows what I'm gonna type next, which is super helpful. So yeah, in this case, and again, you can choose. You know your computer better than me, to know what keystrokes are not currently registered by something else that you have some weird conflict.

[00:02:05]
But in this case, you basically, can go ahead, register a global shortcut with the same kind of accelerator syntax that we saw before, right? And we could do something like, Content is, read whatever is on the clipboard. And then what we wanna do is send it, or let's even just do the simplest possible thing right now.

[00:02:43]
Again, you know how the IPC stuff works. You can send a message to, in this case, our one browser window, you can get the currently focused browser window, right? This application strikes me as one where I only ever want one browser window. So I might choose to move some of that logic and store it in a variable at the top scope.

[00:02:59]
And you can send a message to it and then, say, OS, this comes in, before we did, we registered the handler ON file open, in a react app, we might choose to, for instance, have a use effect hook, right? Component mounts, start listening for anything over the channel, saying, a new clipping has come in, and then add it into the store the same way we would in a react app.

[00:03:22]
Let's just do the simplest possible thing right now, cuz I think, how you wire up the different pieces is stuff we've covered over and over again so far. But I think do the idea of registering the global shortcut and seeing it in place, so this is why I was to say, we'll do, yeah, I mean, that's gonna be the main window.

[00:03:52]
Browser window, just go ahead and the return value of that create window. And we'll just say, browserWindow.show(). So browserWindow.focus(). So from anywhere, I just even want to pull the app up as the foremost thing. I'm trying to remember if I need to also, if I wanna be able to make, yeah, let's also focus the app as well.

[00:04:31]
So this should, theoretically, this is a live decision I've made at the moment, Cmd, Ctrl+Shift+C. Just cuz I don't know what I've got registered, I'm also gonna say all. So I've gotta hit Cmd, Ctrl+Shift+Option+C. I don't think that does anything else on my computer presently, so we'll find out.

[00:04:50]
The other thing that I will say that you do need to do is app dot, Onquit, or willquit, somewhere along those lines in the lifecycle, you probably wanna do globalShortcut unregisterAll, right. If you register them when the app is quitting, you should give them back to the OS cuz it's polite.

[00:05:13]
So we'll have those two pieces in place, and we'll just do npm, start again. Cool, and ideally, what I wanna do is go over here. Look at that, I'm somewhere else, I'm finding stuff, I have a thought, I'm gonna go back over the GitHub, I'm gonna hit Command, Option, Shift C, Clip Master, right?

[00:05:37]
And now it is ready to go and I can copy something from the clipboard, right? And so you can register these shortcuts and they kinda work almost anywhere, and they're ready to rock and roll for you as well.