Svelte 5 and Quill editor with value changed both from inside and outside

[frederikhors]

I have this code in the Editor.svelte Svelte 5 component:

<script lang="ts">
    import { onMount } from 'svelte';
    import Quill from 'quill';
    import 'quill/dist/quill.snow.css';

    type Props = {
        value?: string | null;
    };

    let {
        value = $bindable(),
    }: Props = $props();

    const toolbar = [
        ['bold', 'italic', 'underline'],
    ];

    let quill: Quill;

    function onTextChange() {
        value = quill.getSemanticHTML();
    }

    onMount(() => {
        quill = new Quill('#editor', {
            theme: 'snow',
            modules: { toolbar }
        });

        quill.clipboard.dangerouslyPasteHTML(value || '', 'user');

        quill.on('text-change', onTextChange);

        return () => {
            quill.off('text-change', onTextChange);
        };
    });
</script>

<div id="editor"></div>

It works if I use it like this:

<Editor bind:value={someString} />

But If I change the someString from outside the Editor doesn't update that text.

I tried with an effect, like this:

$effect(() => {
    if (quill && value) {
        quill.clipboard.dangerouslyPasteHTML(value || '', 'user');
    }
});

but as you can imagine this is called each time values changes, from the inside too.

REPL here: https://svelte.dev/playground/81409104a421489d89230aa5814c7c01?version=5.14.0 (but there is an issue loading Quill).

[qwuide]

Although not specifically for Svelte, I’ve encountered a similar case when integrating the Lexical editor. In our case, we solved it by syncing the value only when the editor did not have focus, as we did not want to update the value if the user was actively editing anyway. Another way to solve this could be to save the value from getSemanticHTML() to a local variable in onTextChange before the value is updated, and then, in the effect, compare this local value with the incoming one. You would then only run dangerouslyPasteHTML if they are not equal.

Something along these lines (though it hasn’t been tested due to the loading issue): Playground

Perhaps there are better ways, so if anyone knows, please share. 🙂

[frederikhors]

Yeah. Thanks. Very similar to the solution I used.

Thanks again!