feat: visual editing (click-to-edit)

[fgnass]

Summary

This PR introduces a new visual editing mode that allows users to click directly on content in the preview pane to edit fields, like in Storyblok or TinaCMS. This works for preview widgets as well as for custom full-page preview templates.

The preview templates themselves don't need to do anything in order to support this feature. This is made possible by using @vercel/stega to invisibly encode information about the origin of the values directly in the rendered text.

visual-editing.mov

The new visual editing mode is offered as an alternative to scroll sync, providing a more direct way to interact with content. When enabled, scroll sync is automatically disabled to prevent interference.

Note: Currently, all strings get encoded. It would probably make sense to allow fields to opt-out of this behavior, so that things like dates or URLs which might get further processed don't break. I left this out as the change set is already quite big and the feature as a whole is already opt-in.

Technical Details

This PR builds on top of a major refactoring (60040b8) that simplified widget reference handling, which was already in place for validation purposes.

• Replacing the dual-prop pattern (controlRef/processControlRef) with class variables and a single prop (controlRef)
• Consolidating ref handling into a single clear responsibility
• Improving ref cleanup and validation state management
• Making the code more maintainable and easier to debug

These foundational changes were necessary to implement reliable field focusing and scrolling behavior.

Test plan

1. Enable visual editing for a collection in the config by adding:
   editor.visualEditing: true to your collection configuration

2. Create or edit a post with markdown content

3. Click on any text in the preview pane

4. Verify that:

   • The corresponding field is focused in the editor
   • The field scrolls into view if needed
   • The field is highlighted to indicate focus
   • Scroll sync is automatically disabled when visual editing is enabled

5. Test with custom widgets and preview templates:

   • Create a custom widget that renders the forId prop
   • Verify that click-to-edit works without additional changes
   • Create a custom preview template
   • Verify that click-to-edit works automatically

Checklist

Please add a x inside each checkbox:

• I have read the contribution guidelines.

A picture of a cute animal (not mandatory but encouraged)

🐨

[demshy]

First, thanks again for a very cool feature!

I've tried it and it works with objects and lists, but not with Variable type lists. These are a bit of a special case anyway and I only figured this out because I was reviewing #7296 right before this.

Since this will be a beta feature anyway (@martinjagodic correct me if I'm wrong) and until now, we didn't even have proper previews for these lists, I don't think this is really a blocker. Maybe just something to keep in mind. If you have time, you can have a quick peek at #7296 to see if you see any possible conflicts of interest (I don't think I do).

I'm looking to release both of these on Tuesday. @martinjagodic could you advise on how to approach the docs update for this?