Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Keyboard navigation #109

Merged
merged 13 commits into from
Aug 18, 2022
Merged

Keyboard navigation #109

merged 13 commits into from
Aug 18, 2022

Conversation

rlisahuang
Copy link
Contributor

No description provided.

@rlisahuang rlisahuang mentioned this pull request Aug 16, 2022
Closed
@rlisahuang
Copy link
Contributor Author

Interaction flow:

  • Tab to focus on the editor
  • Press Enter to start editing (and you will have an extra \n at the beginning`)
  • When done, hit Escape to continue tab/ shift+tab to other elements
  • Next time when your focus is back on the editor again, you can directly start editing; you no longer need to press Enter.

@rlisahuang
Copy link
Contributor Author

rlisahuang commented Aug 17, 2022 •
edited
Loading

On the other hand, we sacrifice part of the functionality of undo: you can still reset/undo the reset, but you will be able to edit the code during the three second interval, and the change will be recorded (for you to further reset/undo).

The way React handles states is a mess...

@rlisahuang rlisahuang marked this pull request as ready for review August 17, 2022 00:58
@rlisahuang rlisahuang requested a review from pelikhan August 17, 2022 00:58
@rlisahuang
Copy link
Contributor Author

If you are curious about why you need an unintuitive Enter after first tabbing on the editor to start editing, that is due to an internal bug with use-editable:

@rlisahuang
Copy link
Contributor Author

With this PR #47 can be closed.

@rlisahuang
Copy link
Contributor Author

New interaction flow with the requested changes:

  • Tab to focus on the editor
  • Press Enter to start editing
    • You will see an extra \n at the beginning
    • However, once you start typing, the extra \n is gone
  • When done, hit Escape to continue tab/ shift+tab to other elements
  • Next time when your focus is back on the editor again, you can directly start editing; you no longer need to press Enter.

@rlisahuang
Copy link
Contributor Author

Cursor position TODO in #113

pelikhan
pelikhan reviewed Aug 17, 2022
View reviewed changes
website/src/components/TutorialComponents/CodeBlock.tsx Outdated
return () => {
document.removeEventListener('keydown', handleKeydown);
};
}, []);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

handleKeyDown will depend on "disabled",

  • wrap handleKeyDown using useCallback and put disabled in the dependency list
  • put handleKeyDown in the dependency list of useEffect

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

42853c2 this?

@rlisahuang
Copy link
Contributor Author

@pelikhan Can I merge this in? It also fixes a rather critical bug (non-playground editors no longer editable)

@rlisahuang rlisahuang merged commit 2fca323 into main Aug 18, 2022
@rlisahuang rlisahuang deleted the keyboard-navigation branch August 18, 2022 14:30
@pelikhan
Copy link
Member

Always good to add a description to a PR once it is ready for review. (Future you will thank present you)

@github-actions
Copy link
Contributor

🎉 This PR is included in version 1.0.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pelikhan pelikhan pelikhan approved these changes

Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@rlisahuang @pelikhan