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.

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

Table selection keyboard controls #4689

Merged
merged 11 commits into from
Jun 29, 2023
Merged

Table selection keyboard controls #4689

merged 11 commits into from
Jun 29, 2023

Conversation

fantactuka
Copy link
Contributor

@fantactuka fantactuka commented Jun 22, 2023

This diff addresses some table selection around keyboard (arrow/tab) controls:

  • Allow shift+arrows to select content within cells (we used to select whole cell right away without possibility of simple text selection). This part might require more polishing as there's some range bounding rects calculations to predict whether cursor will move to the next cell, and for now it's intentionally simplified to see if we actually need anything more complicated
  • Allow escaping grid selection with arrows or escape key
  • hasTabHandler to enable tab key switching between cells. Although handle itself makes sense, when app tends to have more complex content within cells like lists, code, or inventible paragraphs tab override to jump through cells does not make much sense
  • Refactored/simplified drag-to-select event handlers
  • Moved table selection hijacking css into theme class instead of hardcoded class

@vercel
Copy link

vercel bot commented Jun 22, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
lexical ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 29, 2023 1:04am
lexical-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 29, 2023 1:04am

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 22, 2023
@github-actions
Copy link

github-actions bot commented Jun 22, 2023

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
packages/lexical/dist/Lexical.js 27.96 KB (0%) 560 ms (0%) 60 ms (+40.45% 🔺) 619 ms
packages/lexical-rich-text/dist/LexicalRichText.js 39.01 KB (0%) 781 ms (0%) 42 ms (-38.92% 🔽) 822 ms
packages/lexical-plain-text/dist/LexicalPlainText.js 38.98 KB (0%) 780 ms (0%) 96 ms (+257.09% 🔺) 876 ms

Copy link
Member

@zurfyx zurfyx left a comment

Choose a reason for hiding this comment

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

Wow, this looks great!

Some feedback:

  • Should the tab key select the entire content of the next cell?
  • Why doesn't the tab key work with a range selection inside a cell? Is this intended?
  • I believe shift+Arrow at a boundary should first select the entire cell instead of two?
  • I don't agree with the Escape key behavior, it should mimic a browser RangeSelection

I think the current approach is good even though (as discussed offline) we might want to change some bits to rely on computed position instead of boundaries but this one will certainly perform much better for now

@fantactuka
Copy link
Contributor Author

Some feedback:

Should the tab key select the entire content of the next cell?
Why doesn't the tab key work with a range selection inside a cell? Is this intended?

For both above: I didn't change tab key for now, I think it might need this changes plus some tweaks to work with tabIndent plugin

I believe shift+Arrow at a boundary should first select the entire cell instead of two?

Talked about it a bit offline, tldr: boundary calculation are intentionally simplified for this version to test a bit, can make it more precise if need (might cover some edge cases)

I don't agree with the Escape key behavior, it should mimic a browser RangeSelection

Yeah, it's probably a better approach. Might be a bit tricky to unhighlight cells on blur and re-highlight on focusing, will have it as a follow up

@fantactuka fantactuka merged commit 1ce51a8 into main Jun 29, 2023
@fantactuka fantactuka deleted the table-selection branch June 29, 2023 01:42
@fantactuka fantactuka mentioned this pull request Jun 29, 2023
@zurfyx zurfyx mentioned this pull request Jul 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants