[FEAT] Hotkeys v0

[Kitenite]

Describe the feature

We need to support hotkeys in our system these hotkeys will include various functionalities such as:

1. Undo / redo
2. Copy / paste
3. Zoom

For Electron, there is a choice between using React component-level hotkeys vs using global Electron hotkeys. Seems like the choice should be based on context. Certain hotkeys such as zoom, copy/paste may be component-specific while other more global ones such as save may want to be electron-specific. Needs more exploration.

Note: There will be some existing hot keys implemented such as the zoom keys for this PR. Once the unified hotkeys system is in place, this should be moved into that system.
883f3ba

[drfarrell]

Editing Hotkeys

• Undo (CMD / CTRL + Z)
• Redo (CMD / CTRL + Y)
• Copy (CMD / CTRL + C)
• Paste (CMD / CTRL + V)
• Cut (CMD / CTRL + X)
• Duplicate layer (CMD / CTRL + D)
• Multiple-element selection (SHIFT + Click) – this may require a good amount of engineering because it also will imply that multiple styles and actions can be applied across elements, and if multiple elements are selected to be re-ordered, then that can be challenging to handle. Likely deserving of its own issue.
• Send element backward (CMD / CTRL + [)
• Bring element forward (CMD / CTRL + ])
• Send element to back ([)
• Bring element to front (])
• Create a new Div containing the selected elements (CMD / CTRL + G)
• Turn the selected group into a Component (CMD / CTRL + K) – may require some intense engineering as it'd be great to have this auto-create a component file with the right headers and such.
• Add Flexbox Stack to the selected group (CMD / CTRL + A) – equivalent to Autolayout, it should match the direction of elements in either a row or column based on how everything is arranged. Ideally it also can detect when it would be appropriate to add a Grid, but that can be for a later stage.

Create and edit elements

• Create a new Div (R or D) – R for rectangle or D for div
• Create a new Textbox (T)
• Delete element (Backspace / Delete) – Perhaps this should just comment-out or "hide" the element, or present a warning confirming to the user that what they are doing is destructive

Navigation

• Temporary Pan-Mode (SPACE) – Hold down Space to activate Pan mode.
• Temporary Interaction-Mode (CMD + OPTION / CTRL + ALT) – Hold down to active Interaction Mode [FEAT] Need an easy way to toggle interact mode #129
• Zoom in and out in increments (CMD + "+" / CMD + "-")
• Pan (H) – H for Hand.
• Select tool (V) – Default mouse click / select setting

Editing text

Ideally style edits can be made within long strings of text on selected shorter sections of text

• Bold the selected text (CMD / CTRL + B)
• Italicize the selected text (CMD / CTRL + I)
• Underline the selected text (CMD / CTRL + U)
• Strikethrough the selected text (CMD / CTRL + SHIFT + X)
• Hyperlink text (CMD / CTRL + K) – Applies standard hyperlink styling (although we may need a smart way to do this while keeping things on-brand)

Non-style edits to text

• Create a new unordered list (* + SPACE ) – Starts a bulleted list. Figma does a great job of handling this.
• Create a new ordered (numbered) list (1 + . + SPACE) – Starts a new numbered list. Again, Figma is a great example

[Kitenite]

Exploring a few options we can use. I don't think we need to use global keys from Electron. We should use React-based hotkeys setup. A few options:

1. https://github.com/JohannesKlauss/react-hotkeys-hook
2. https://github.com/ccampbell/mousetrap
3. https://github.com/jaywcjlove/react-hotkeys
4. https://github.com/jaywcjlove/hotkeys-js

react-hotkeys-hook and mousetrap seem like the best apis with react-hotkeys-hook seeming better for react and has scope support.

[Kitenite]

Keeping this open for the rest of the hotkeys as functionalities are added. We added everything that is currently supported in #193

[drfarrell]

Adding another hotkey...

• When you're in either "pan", "text", or "rectangle" mode, if you hit "ESC" you can go back to design mode (V).

[drfarrell]

Seems like we're waiting on #91 for some of the smaller styling hotkeys like Bold, Italic, etc. FYI @Eejya