Headless Live Preview - Scroll to element that is currently being edited

[motion-work]

Editing a large page with many components and fields within the Live Preview is tedious since we always have to scroll to the actual element to see the changes we make in the editor sidebar. It would be a great user experience when the content within the iFrame automatically scrolls into view when the user has focused an editable element within the editor sidebar. Like in this example:

Currently we use our own solution with this package @teamnovu/statamic-live-preview-nuxt.

scroll.to.element.-.example.mp4

We listen for a focus event and extract the unique element identifier from the name attribute. This identifier is then sent to the iframe via postMessage(). In our Nuxt frontend we handle it like this.

Our solution does not cover all the editable fields in the editor sidebar. For example if you want to update an image our plugin does not scroll to that image, since the <img> element does not expose a unique identifier.

It would be great to have a more mature version of this feature in the core package. Like emitting a focus event from each editable field. Probably like this this.$events.$emit('focus', uniqueElementIdentifier). Then we could globally handle this focus event. In our case send it to the iFrame via postMessage().

This feature request is heavily inspired by the Visual Editor of the Storyblok Headless CMS.

What do you think?

[jasonvarga]

That's pretty awesome. Perhaps the target field could be included in the postMessage payload as part of statamic/cms#6067 (or an addition to that, later)

[buffalom]

We could probably do that but we would have to find the target field by comparing the new and old payload, right?

Also, those are actually two different events. One is emitted when changes happen and one is emitted when a field is focused. They could be combined which would result in the live preview scrolling to the given field on update, though this is not quite the best case in my opinion. I would rather post those messages separately.

[jasonvarga]

When you edit a field, we could store that somewhere, then when the payload is sent after that, it could use the stored field name. But I'm not suggesting you modify your PR. Leave it as-is for now.

[jonassiewertsen]

That's a great idea @motion-work !

Spiegel uses a custom implementation for a similar behaviour as well, which is really helpful on looooooooooong pages.

Besides an option that the live preview scrolls, there is that feature as well to click on elements in the livepreview, so the form on the left side does scroll as well.

That is really helpful for large content pages.