Thanks
The source is available on GitHub, linked in the addon description, granted the link in the addon description doesn’t say “GitHub” so I’ll update that later.
Regarding the badge - the whole insertion is rather “hacky” (there is also some significant “hackyness” to the focus handling as well). The current placement “inside the rich text badge” is the result of trying to get the shading to sort of work while at the mean time keeping alignment to the right (I can’t remember the exact details, I just remember I mucked about a bit). It seems to work fine on my Windows machine so I am guessing it’s a setup or possibly OS thing (which is interesting since it’s all JS so there shouldn’t be that much of a difference):
Current version on my machine:
Moving the badge into focus-field, no other changes
The same goes for the badge alignment, the first add window screenshot above is with the badge inside .rich-text-badge, the second with the badge inside .focus-field, no changes made to the shipped alignment.
Preferably I would understand hot to properly interface with the Svelte code, I see you suggested lifecycle.onMount below, I’ll look into that when I have some time.
In the mean time if you are knowledgeable in Svelte I am very open to hints on how to “correctly” interface with the Svelte code (mainly in editor.ts) as the current hacks are less than ideal for both elegance and maintainability.