Automattic / Automattic/simplenote-electron

Keyboard controls

Open
#2,599 1 comment 0 reactions 0 assignees View on GitHub
[feature] shortcuts
Dominant language
TypeScript
Stars
5.3k
Forks
588
Avg merge
9h 45m
Merged PRs (30d)
4

Description

Internal project link: p2XJRt-2DE-p2

## Keyboard Control

- [ ] Panel navigation using arrow keys

The arrow keys can be used to navigate between the visible panels of the app (Tags, Notes List, Editor). While the editor is focused, Cmd/Ctrl + Enter can be used to move focus back to the notes list.

- [ ] Tab to cycle between visible panels

n.b. This note is for the Mac app but this does not work here either.

The tab key should be used to select the next responder in the Mac app which currently does not work. Tab or Shift + Tab should cycle between the search field and all visible panels. Search > Tags List > Notes List > Editor which is quite typical for a Mac app.

(With the caveat that we do expect the editor to capture tabs and arrows within the editing context)

- [ ] Develop a better idea of what is currently focused, as mentioned [here](https://github.com/Automattic/simplenote-electron/pull/2531#pullrequestreview-564646084).

> we should maybe formalize the rules for changing focus and then see if a more elegant solution drops out. maybe there's some global (Redux) state value tracking what context we're in that changes when we enter or blur the search field…

- [ ] Make sure it's possible to navigate to the editor with a screenreader, see #2365

## Keyboard shortcuts

- [ ] Shortcut updates

Remove "Toggle focus mode" shortcut Ctrl+Shift+F. Change search shortcut to Ctrl+Shift+F. Merge “Toggle Focus Mode” and “Toggle Notes List” into one shortcut.

- [ ] Support browser-conflicting shortcuts in Electron build where possible.

I'd like to go through and check which of the shortcuts we can use on Electron despite them having another use in browser, and add them as "shadow" shortcuts that match the app shortcuts, though they won't be the primary shortcut on Electron/web.

One example is `Ctrl+N` which creates a new browser window, but I believe we should be able to map it to create a new note when in the Electron app.

- [ ] Add tracks events to all keyboard shortcuts

Add a tracks event named `spweb_shortcut_used` with a `shortcut` property corresponding to the shortcut:

`focus_mode`, `focus_search`, `search_next`, `search_previous`, `tag_list`, `open_previous_note`, `open_next_note`, `toggle_note_tag_editing`, `note_list`, `create_note`, `markdown`, `toggle_checklist`, `cycle_visible_panels`, `information_sheet`, `history_sheet`, `share_sheet`

- [ ] Fix existing bugs with keyboard shortcuts #2040 , #2577

## Keyboard Optimisation

- [ ] Saving cursor position

Already implemented, but seems to be bugged on long notes: scroll position is restored but editor seems to lose focus.

We should also save cursor positions across sessions.

- [ ] Let's consider syncing the scroll position between editor and preview modes (#2656).

- [ ] Type to search

If the notes list is in focus then typing will automatically start a search.

Contributor guide

Open the contributing guide

Research direction

No file, test, or entry point is named, and the issue combines many keyboard-navigation, shortcut, analytics, focus, and cursor-position tasks. Start by selecting and separately scoping one checklist item, then locate the existing keyboard handling for that area. Done means that one item is implemented and its stated behavior is verified without changing the remaining work.

Written by the indexing model from the issue text.

Assessment

Tech stack
electron, typescript
Domain
accessibility, desktop-dev, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.