diplodoc-platform / diplodoc-platform/client

Feature Request: Add Keyboard Shortcuts

Open
#77 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
3
Forks
7
Avg merge
21h 21m
Merged PRs (30d)
17

Description

### Description
Users often benefit from the added convenience and efficiency of keyboard shortcuts. By implementing shortcuts for common actions within our application, we can improve user experience and productivity.

[Design](https://www.figma.com/design/WzFqWJr9kUq9MPwpLtEVwa/Diplodoc-(open-source)?node-id=5-32852&t=jcyUIhhYAQekZckz-1)

### Proposed Shortcuts

- Ctrl + K:
- Navigate to the search bar.
![image](https://github.com/user-attachments/assets/7f71be66-b2c1-498f-bd17-5f00be599944)

- Ctrl + →:
- Move to the next page.
![image](https://github.com/user-attachments/assets/15d32f45-8c90-4103-be0d-8c531610b92f)

- Ctrl + ←:
- Navigate to the previous page.
![image](https://github.com/user-attachments/assets/b343c24d-db13-4cb1-a0e4-b5668b8ac4c8)

- Ctrl + F:
- Expand all cut elements on the page to facilitate in-page search using the browser’s native search. Also initiates the browser search.

- Settings Menu:
- Open the settings menu and activate the first item.
- Press Esc to cancel.
![image](https://github.com/user-attachments/assets/d63df47c-f815-4876-93cf-bef443ff812a)

- Language Selection Menu:
- Open the language selection menu and activate the first item.
- Press Esc to cancel.
![image](https://github.com/user-attachments/assets/91cbc53e-f7b3-4292-a8ae-8e7a32daa3e2)

- CTRL+ALT+F:
- Switch to reading mode.
![image](https://github.com/user-attachments/assets/f4ce86cd-6124-4187-8aa2-514d5cfca69c)

- Editing Mode:
- Initiate edit mode.
![image](https://github.com/user-attachments/assets/ffb36e54-715a-436d-8f32-affb06dd29b7)

- Article Feedback:
- Helpful Article:
![image](https://github.com/user-attachments/assets/f46c867f-ee58-45c6-916e-8c6f9c3a2966)

- Unhelpful Article:
![image](https://github.com/user-attachments/assets/db260e4d-4fb9-4851-acb1-1d135c087215)

- Quick Focus Transfer:
- Shift focus quickly to the current topic.
- Quick focus transfer to the mini-topic.

*Please feel free to provide any additional suggestions or modifications to the proposed shortcuts.*

### Recommended Library

For implementing keyboard shortcuts, it is recommended to use the [react-hotkeys-hook library](https://www.npmjs.com/package/react-hotkeys-hook). This library is simple and easy to use, and it covers a wide range of use cases. For more information, please refer to the [documentation](https://react-hotkeys-hook.vercel.app/docs/intro).

Add a [tooltip](https://storybook.ui.yandex-team.ru/?path=/story/gravity-uikit_components-overlays-actiontooltip--default) with hotkeys where there are none yet.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.