fix(pte): improve text selection in fullscreen inputs

[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:

1. Remove padding in fullscreen mode (not terribly noticeable, but this also ensures that we don't have a slight 'dead zone' around text where the cursor switches from text to default)
2. Slightly tweaks spacing of change highlight bars to look a little better on constrained viewports:

Before:

After:

What to review

• General text selection and focusing of collapsed / default PTE inputs in the Studio should be unaffected
• When in 'fullscreen' mode, it should be possible to focus and select text directly in the margins

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

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 19, 2024 8:53pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 19, 2024 8:53pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 19, 2024 8:53pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		May 19, 2024 8:53pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated May 19, 2024 8:59 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	34s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	6s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	31s	11	7	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	14s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	36s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 15s	20	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 3s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	7s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	20s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	14s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	29s	12	0	0

[skogsmaskin]

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?

[robinpyon]

@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

[robinpyon]

@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:

• Space is allocated for legacy block actions (example)
• Change review buttons / overlays appear and work as intended on non-block action fields (in fullscreen mode) (example)
• Object fields should correctly render full-width on non-block action fields
• As above in the original comment, selection + focus should work from block margins

[skogsmaskin]

Thanks for giving the extra dilligence @robinpyon !