Why doesn't Typewriter use Svelte to render the text content?

[jacwright]

Question from Gitter, answered here where we want future discussions.

[jacwright]

I wanted to use Svelte. I thought it would be perfect. However, I couldn't get around certain problems in a cross-browser compatible way that didn't hurt text composition and auto-complete with mobile devices.

The Details

An empty paragraph needs to have a <br> tag in it to keep it from collapsing to 0px-height. Typewriter needs to add this <br> in, and can do so with Svelte. However, in contenteditable, if you place the cursor in the paragraph and type a letter, the <br> is removed from the DOM and a text node is created. Listening to a mutation observer or input event you can read the change from the DOM and update the data model of the editor, then Svelte will update the paragraph to match the data. It tries to remove the <br> and throws an error because the Svelte code to do that is br.parentNode.removeChild(br) and the parentNode is null. In addition, Svelte will add a new text node to represent the letter typed, making the letter appear twice. Svelte just doesn't work well with DOM that changes out from under it. Many VDOM libraries don't either, so I had to repurpose one to do so.

I tried several workarounds. Using the beforeinput event to stop the input so the DOM doesn't change, then updating the model and allowing Svelte to render it, works. It works until you need text composition, such as Korean or Japanese, or to type é. It also doesn't work with autocomplete and swype keyboards on the default Android keyboard and some iOS issues too. Android is also quite buggy with beforeinput with the GBoard keyboard which is Google's default.

Using a MutationObserver to capture the changes, then reversing everything that happened in the mutation observer (putting nodes back into the DOM and removing those that were added), allowed Svelte to work, technically. It allowed the autocomplete, but it still didn't work with text composition.

I love Svelte and really wanted to make Typewriter a fully Svelte-rendered library. Most people don't need to worry about rendering too much and want Svelte mostly for their UI, so I resolved to stick with the VDOM approach for the text content and Svelte as the recommended UI (though you could use anything).

All this being said, the rendering is actually implemented as a module, so if we figure out a nice way to allow Svelte to do that, we can create a Svelte renderer module to replace the existing one and still remain backwards compatible for others.