Doesn't work as intended without being mounted in Vue3/Nuxt.

[bxff]

Checklist

• Are you reporting a bug? Use github issues for bug reports and feature requests. For general questions, please use https://discuss.yjs.dev/
• Try to report your issue in the correct repository. Yjs consists of many modules. When in doubt, report it to https://github.com/yjs/yjs/issues/

Describe the bug

When the CodeMirror 6 instance is not mounted in Vue3(Nuxt, in my case), there are problems with synchronisations. When an instance is running with some text and a new instance is created in another browser tab, there is no synchronisation and there are errors in the console. Errors in the console:

To Reproduce
Steps to reproduce the behavior:

1. Create a sample Nuxt3 project.
2. Replace the index.vue with the code bellow, and install libraries as needed:

<template>
    <div class="main" ref="main"></div>
</template>

<script lang="ts">
import Vue from 'vue'

import { EditorState } from '@codemirror/basic-setup'
import { EditorView } from '@codemirror/view'

import * as Y from 'yjs'
// @ts-ignore
import {
    yCollab,
    yUndoManagerKeymap,
} from '~/y-codemirror.next'
import { WebrtcProvider } from 'y-webrtc'
import * as random from 'lib0/random'

const usercolors = [
    { color: '#30bced', light: '#30bced33' },
    { color: '#6eeb83', light: '#6eeb8333' },
    { color: '#ffbc42', light: '#ffbc4233' },
    { color: '#ecd444', light: '#ecd44433' },
    { color: '#ee6352', light: '#ee635233' },
    { color: '#9ac2c9', light: '#9ac2c933' },
    { color: '#8acb88', light: '#8acb8833' },
    { color: '#1be7ff', light: '#1be7ff33' },
]

const userColor = usercolors[random.uint32() % usercolors.length]

const ydoc = new Y.Doc()

const provider = new WebrtcProvider('codemirror6-demo-room-2', ydoc)
const ytext = ydoc.getText('codemirror')

provider.awareness.setLocalStateField('user', {
    name: 'Anonymous ' + Math.floor(Math.random() * 100),
    color: userColor.color,
    colorLight: userColor.light,
})


// This doesn't work as intended:
let state = EditorState.create({
	doc: ytext.toString(),
	extensions: [
		EditorView.lineWrapping,
		yCollab(ytext, provider.awareness),
	],
})

export default Vue.extend({
    name: 'IndexPage',
    mounted() {
		
		// This Works as intended:
		// let state = EditorState.create({
		//     doc: ytext.toString(),
		//     extensions: [
		//         EditorView.lineWrapping,
		//         yCollab(ytext, provider.awareness),
		//     ],
		// })

        /* eslint-env browser */
        new EditorView({
            state,
            // parent: document.body,
            parent: this.$refs.main as Element,
        })
    },
})
</script>

Expected behavior
state should be able to be created without being inside mounted. I have never needed to create state inside mounted before, and there is nothing in the documentation that indicates this should be the case, therefore I believe this is an issue.

Screenshots
Given above.

Environment Information

• Chromium / Edge
• Yjs latest version.

[dmonad]

Usually, the state of CodeMirror plugins is stateless. That's why it doesn't matter, usually, whether you define a plugin state before or after mount. The Yjs plugins, however, are stateful and depend on the view to work. While your component is mounting, the Yjs document might receive some content from a remote peer. The plugin-state changes, but the plugin cannot update the view (force the view to transition to a new state that reflects the value of the Yjs document).

I'm not sure how to fix this at the moment. Since there is an easy solution to it - initialize the state with the view, it's not a high priority right now for me. But I'll leave the ticket open and will come back to it eventually.

[vadolasi]

I have basically the same problem