drfarrell
commented
4 weeks ago 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
- [x] Create a new Div (R or D) – R for rectangle or D for div
- [x] 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
- [X] Temporary Pan-Mode (SPACE) – Hold down Space to activate Pan mode.
- [x] Temporary Interaction-Mode (CMD + OPTION / CTRL + ALT) – Hold down to active Interaction Mode #129
- [X] Zoom in and out in increments (CMD + "+" / CMD + "-")
- [x] Pan (H) – H for Hand.
- [x] 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
Describe the feature
We need to support hotkeys in our system these hotkeys will include various functionalities such as:
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. https://github.com/onlook-dev/studio/commit/883f3ba543c993739bdc6eec481bd55aeecd9386