Added a keyboard shortcut for adding files

[sdivyanshu90]

Fixes #1292

Changes:

• Added a new keyboard shortcut for creating a new file: Shift + N.
• Included the new shortcut key in the "Help/Keyboard Shortcuts" section.
• Integrated the shortcut into the Sketch.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #1292

[sdivyanshu90]

Hi @lindapaiste, could you review my pull request and provide feedback? Thanks!

[lindapaiste]

Thoughts:

• Shift-N alone will not work because it means that user cannot type a capital letter "N" anywhere in their code.
• We do override some built-in browser commands already. For example If you type Ctrl-H while focused on the editor it will open the find/replace modal. If you aren't focused on the editor then it does the browser default which is to open the browser history. So we potentially could override Ctrl-N? Unless there is something special about that command.
• You are missing the implementation of the handler. It would go here if it applies to the entire window or here if it applies only when the cursor is in the editor.

[sdivyanshu90]

• Yeah, I didn't think about that. Can I implement it with Ctrl-Shift-A?
• We can't override Ctrl-N because it's a system-wide shortcut for opening a new tab in Chrome, and this behavior has been in place since Chrome version 4 (shipped in 2010). You can refer to this Stack Overflow thread for more information: link to the Stack Overflow discussion
• I am implementing the handler here. I have completed everything and now I would like to discuss which key combinations we need..

[lindapaiste]

• We can't override Ctrl-N because it's a system-wide shortcut for opening a new tab in Chrome, and this behavior has been in place since Chrome version 4 (shipped in 2010). You can refer to this Stack Overflow thread for more information: link to the Stack Overflow discussion

Thanks for researching this!

• I am implementing the handler here. I have completed everything and now I would like to discuss which key combinations we need..

Your implementation looks good 👍 (with the exception of a console.log that you forgot to delete).

I agree that we need to come to a consensus on what the keys should be. My personal vote is for Ctrl-Shift-N. @raclim -- any thoughts?

[sdivyanshu90]

Of course, I understand your point. However, it's worth noting that Ctrl-Shift-N is already utilized in Chrome for opening a new incognito tab and can't be overridden. Ctrl-Shift-A sounds like a good choice. It can be overridden and doesn't conflict with existing shortcuts. Let's consider using it.

[raclim]

@lindapaiste @sdivyanshu90 Thanks for your work/thoughts on this so far!

For adding new files, I'm personally partial to using a command that involves the letter 'N' because there's already a pre-existing precedent with it on other softwares/platforms. I also could be wrong about this, but I think Ctrl-Shift-A is also utilized in Chrome to search through tabs?

I'm wondering if Control-Alt-N could be an option? If not, I'm open to exploring potentially using a command with the letter 'A'!

[sdivyanshu90]

Hey @raclim ,

You're right about Ctrl-Shift-A being used in Chrome, but we can potentially override it in our context. I've implemented Alt-N instead, which I believe is a better option than Ctrl-Alt-N. Not only does Alt-N avoid conflict with Chrome's shortcut, but it also has some other advantages. For example, it's a simpler and more intuitive combination for users to remember, making the experience smoother overall. Additionally, it's easier to press two buttons (Alt and N) instead of three (Ctrl, Alt, and N), which can improve the user experience.

If this works for you, let's proceed with this option.

[sdivyanshu90]

Hi @raclim and @lindapaiste,
I understand that your schedule may be quite busy; nevertheless, I would greatly appreciate your review of the PR.

[sdivyanshu90]

Hello @raclim and @lindapaiste,
Just a quick reminder about my PR that's been pending for 2 weeks. Your feedback is crucial, and I'd greatly appreciate your review whenever you have a moment.

[sdivyanshu90]

Hi @catarak , @raclim and @lindapaiste ,
Could you please take a moment to review my PR? Your feedback would be greatly appreciated.

[sdivyanshu90]

Hey @raclim and @lindapaiste, can you please review the pull request?

[sdivyanshu90]

Hey @raclim and @lindapaiste, can you please review the pull request?

[sdivyanshu90]

Hi @lindapaiste ,
Thank you for reviewing the PR. I've encountered a failing test (one snapshot failure) and would appreciate your insights on resolving it. Your assistance is highly valued.

[sdivyanshu90]

Dear @lindapaiste and @raclim ,

I hope you're well. I submitted a pull request #2395 on September 2nd for p5.js. I appreciate your time and expertise in maintaining the project.

I've addressed the feedback and am eager for your review. The process has been paused since September 9th. Could you kindly spare some time to review my PR? Your feedback is crucial for progress.

Thank you for your attention, and I look forward to your insights.

[sdivyanshu90]

Hey @raclim and @lindapaiste, can you please review the pull request?

[raclim]

Sorry for the delay in getting back to this and thanks so much for your patience! We have a small team and had quite a lot of PRs recently!

Looking over it at a glance, it looks good to me so far. Since we're currently on break for the holidays, I'll try to have a more in-depth review around early January. Thanks again for your patience!

[sdivyanshu90]

Hello,

Thank you so much for your prompt response! I completely understand about the delay, and I appreciate your transparency about your team's workload. I'm glad to hear that the initial review looks good to you.

No worries about the more in-depth review – take your time, especially during the holidays. I'm grateful for your efforts, and I'm looking forward to hearing more in early January.

Thanks again and happy holidays!

[raclim]

Thank you so much for your work and patience on this! I'm sorry that it took so long to finally get back to this!

Although Alt-N is a bit shorter than Ctrl-Alt-N, I ended up using the latter after doing some research, as it seemed like Ctrl-Alt-N is used more commonly to open "new" files or projects on other platforms/software over Alt-N.

Thank you so much and I'm really sorry again that it took so long!

[sdivyanshu90]

Thank you for getting back to me! No problem about the delay—I understand these things take time.

I appreciate your consideration and research on the shortcut. Using Ctrl-Alt-N makes sense if it aligns better with common conventions for opening new files or projects.

Thanks again, and no worries about the timing!

[lindapaiste]

I would stay away from e.code and prefer e.key. It only makes a difference if the user has a non-standard keyboard layout. e.code is basically "the key in the 'N' position" whereas e.key is "the key that types 'N'".
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

I guess I only built this hook to support ctrl- and ctrl-shift- and didn't do anything with alt. But we want it to support any ctrl-alt-LETTER and not just ctrl-alt-n. This should do it:

} else if (isCtrl && e.altKey) {
   handlers.current[`ctrl-alt-${e.key.toLowerCase()}`]?.(e);