Skip to content

Feature idea: Scroll to the Field in Panel Preview? #46

@jenswittmann

Description

@jenswittmann

When clicking on elements in the Preview Panel, the corresponding field should be visible in the viewport and selected. For example: https://statamic.com/addons/mariohamann/statamic-visual-editor

I try a quick test and it should be possible:

Bildschirmaufnahme.2026-04-02.um.21.50.23.mov

Inside every ContentBlocks field (maybe as a global Shortcode?):

<div {if $.get.show_preview}@click="window.top.postMessage('{$field}:{$field_type_idx}', '*')"{/if} …        

And inside the Resource Form:

<script>
    window.addEventListener("message", function(e) {
        let [field, idx] = e.data.split(":"),
            el = document.querySelectorAll("[data-field=\"" + field + "\"]")[idx];
        el?.scrollIntoView({ behavior: "smooth", block: "center" });
        el?.setAttribute("tabindex", "0");
        el?.focus();
    });
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions