Some quirks on REPL ui

[jangxyz]

Describe the bug

I've been noticing some edge cases in the REPL since the site update, but to my surprise it hasn't been resolved yet.

Several points:

• a) editor adding additional spaces on some occasions
• b) a11y warnings has bright text, unable to read in light mode.
• c) buttons on find mode(Cmd+F) displays dark background, unable to read in light mode.

Here's a screen recording capturing all three:


...and a link to the repl, though it could be seen in any other places too.

Concerning #496, issue a) seems like it has something to do with the neocodemirror package by @PuruVJ (really appreciate you work, by the way ;) It doesn't always happen, but I see it frequently when the text cursor moves around the element a lot.

I found that b) is actually resolved in the svelte-5 preview site, so it may be easily solved by merging it with the svelte 4 repl? (svelte-5 playground)

However c) still resides on both repl sites.

Reproduction

https://svelte.dev/repl/2427ce73a39b4c509590549ba34aff5f?version=4.2.8

How to reproduce:

a) try to move a lot around the element, and start adding an element.

b) add a on:click attribute to a div element.

c) open find menu (cmd+f) in light mode

Logs

No response

System Info

svelte4 playground, in Chrome

Severity

annoyance

[PuruVJ]

Thanks for reporting! Will try to fix it soon!