-
Notifications
You must be signed in to change notification settings - Fork 413
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
fix(pte): improve text selection in fullscreen inputs #6642
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
No changes to documentation |
Component Testing Report Updated May 19, 2024 8:59 PM (UTC)
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a great UX improvement! Thanks.
I was thinking if this might disrupt any of our old supported stuff, like the legacy block markers, but I think not?
@skogsmaskin Great shout – I just had another quick look in the test studio and they could use a bit of alignment tweaks, which I'll add shortly |
…selection at input periphery
…to change highlight positioning
@skogsmaskin 🙇 I've just pushed a few minor changes which tidy this up and standardize how both object and text blocks render legacy actions. This could certainly be made DRY in future, as there's a lot of overlap between text and object components. What to review:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for giving the extra dilligence @robinpyon !
Description
This PR sets
max-width
on PTE blocks, rather than the editable container.This enables block margins to be clickable and improve ergonomics of focusing and selecting text, especially in fullscreen mode.
This is useful for Create as there effectively all PTE inputs are in fullscreen by default and this was especially noticeable, as often these margins occupy much of the screen!
This change especially improves text selection in this context, as you can now start selections directly in the margins – fairly standard behaviour across various editors.
Before:
Screenflick.Movie.186.mp4
After:
Screenflick.Movie.187.mp4
Other minor changes:
text
todefault
)Before:
![image](https://private-user-images.githubusercontent.com/209129/330185590-cf6ffc14-809a-43f0-83a1-fa84d0752c69.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MzgwMTksIm5iZiI6MTcyNDYzNzcxOSwicGF0aCI6Ii8yMDkxMjkvMzMwMTg1NTkwLWNmNmZmYzE0LTgwOWEtNDNmMC04M2ExLWZhODRkMDc1MmM2OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNlQwMjAxNTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03ZTRjNTRiNGIyNmY1ZDIyNThjYzBhYzFiYmVjNTZiYTc2MzgzOTdiZmM5Y2Y5NjIyYjZkMTExMTVkYWYyYWU3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.GyK8k_mViME2x60e265Wv263dLHGjO5j3h86tYPjZeU)
After:
![image](https://private-user-images.githubusercontent.com/209129/330185482-8f988859-8297-4dca-8f63-8e076a9f3dfc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MzgwMTksIm5iZiI6MTcyNDYzNzcxOSwicGF0aCI6Ii8yMDkxMjkvMzMwMTg1NDgyLThmOTg4ODU5LTgyOTctNGRjYS04ZjYzLThlMDc2YTlmM2RmYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNlQwMjAxNTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01ODk2ZmYzMjk4OTg4NTdmZjJiOTg3Nzg4NTIwMWViOTRmNDQxZjA2YzkzYWQ5YjA1Y2RmYjcxYWFhNTQ2YThmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.KCA81YPTriwCuUXepEr2imTIy3onhg3agaClRy5hkkA)
What to review
Testing
No new tests. This would be a fantastic candidate to test in playwright-ct (clicking block margins and double checking PTE selections), though unfortunately don't have the bandwidth to add right now 😓
Notes for release
Improves text selection of full screen Portable Text inputs