How to sync changes from CodeMirror over TogetherJS in Svelte?

Question

I am trying to sync the text that I am typing in my editor from CodeMirror over TogetherJS. However, whenever I type something when TogetherJS is enabled, the text glitches or sometimes only the text that the host types is visible on screens.

To see the problem I'm facing, please visit the Gyazo link below

Issue: https://gyazo.com/801e8d11b81a8c286704357fbc80d7c5

<script>
    import { onMount } from "svelte";
    import {basicSetup} from "codemirror"
    import {EditorView} from "@codemirror/view"
    import {htmlLanguage, html} from "@codemirror/lang-html"
    import {EditorState, Compartment} from "@codemirror/state"
    import {language} from "@codemirror/language"
    import {javascript} from "@codemirror/lang-javascript"
    import { ViewUpdate } from "@codemirror/view";

    let value = "";

    $: text = value;

    onMount(() => {
        const together = window.TogetherJS;
        
        const textarea = document.querySelector('#code-editor');
        
        let tabSize = new Compartment
        let languageConf = new Compartment

        /* Auto detect language snippet from CodeMirror */
        const autoLanguage = EditorState.transactionExtender.of(tr => {
            if (!tr.docChanged) return null
            let docIsHTML = /^\s*</.test(tr.newDoc.sliceString(0, 100))
            let stateIsHTML = tr.startState.facet(language) == htmlLanguage
            if (docIsHTML == stateIsHTML) return null
            return {
                effects: languageConf.reconfigure(docIsHTML ? html() : javascript())
            }
        })
        /* End of snippet */


        let updateListenerExtension = EditorView.updateListener.of((update) => {
            if (update.docChanged) {
                text = update.state.doc.toString();
                if (together.running) {
                    TogetherJS.send({ type: 'editor-update', message: text});
                }
                
                console.log(text);
            }
        });

        let view = new EditorView({
            state: EditorState.create({
                extensions: [
                    basicSetup,
                    tabSize.of(EditorState.tabSize.of(8)),
                    languageConf.of(html()),
                    autoLanguage,
                    updateListenerExtension
                       
                ]
            }),

            parent: textarea
        })

        if(together.running) {
            together.hub.on("editor-update", function (msg) {
                
                view.dispatch({
                    changes: {
                        from: 0,
                        to: view.state.doc.length,
                        insert: msg.message
                    }
                });
            });
        };
    });
</script>
<div id="code-editor"></div>