Svelte: Adding a new component in homepage REPL widgets causes scroll jump

[Rich-Harris]

Technically this issue probably belongs in the svelte-repl repo, but I'll forget about it if it's there

https://mobile.twitter.com/MohsenKhakbiz/status/1136676705110827008

[Riyeshp]

Hi Rich.. I hope this piece of information will be of any help to you to track down this bug.

//ComponentSelector.svelte

``function addNew() { const component = { name: uid++ ?Component${uid}` : 'Component1',
type: 'svelte',
source: ''
};

    editing = component;

    setTimeout(() => {
        // TODO we can do this without IDs
        document.getElementById(component.name).scrollIntoView(false);
    });

```

"document.getElementById(component.name).scrollIntoView(false);" this line seems to be creating that jump in the web page.

[mrkishi]

Related issue at sveltejs/svelte-repl#9 and PR at sveltejs/svelte-repl#10. I'm not sure what the right approach should be — what's the original intention for the scroll?

[Rich-Harris]

@Riyeshp thanks

@mrkishi Without it, if you switch to (or create) a new component, CodeMirror updates the editor content, but retains the old scroll position, which is a bit unsettling

[mrkishi]

@Rich-Harris Ah! Makes sense! Were there any blockers from using cm.swapDoc and CodeMirror's documents? If not, I can PR that in.

[Rich-Harris]

The blocker was me not knowing it existed

[Conduitry]

I didn't know about swapDoc either. Does that seem like it could also be used to take care of https://github.com/sveltejs/svelte-repl/issues/3 ?

[willamesoares]

Is this still something we're looking at? And if so, is the PR at sveltejs/svelte-repl#10 still valid for fixing it?