Charles
Charles

Reputation: 685

Yjs y-webrtc simple peer issue (Yjs + codemirror 6, sync content among editors)

I am using Yjs with codemirrow 6 in my project. I followed codemirror 6 examples and Yjs codemirror.next example (https://github.com/yjs/y-codemirror.next) in github.

And when I ran it, I got this error.

enter image description here

Here is the source.

enter image description here

Please help.

Any idea is appreciated. Thanks.

================

Update 1

Here is my demo.ts

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

import {EditorState, EditorView, basicSetup} from "@codemirror/next/basic-setup"
import {html} from "@codemirror/next/lang-html"

//import {esLint} from "@codemirror/next/lang-javascript"
// @ts-ignore
//import Linter from "eslint4b-prebuilt"
//import {linter} from "@codemirror/next/lint"

//import {StreamLanguage} from "@codemirror/next/stream-parser"
//import {javascript} from "@codemirror/next/legacy-modes/mode/javascript"

import * as random from 'lib0/random'

export 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' }
]

// select a random color for this user
export const userColor = usercolors[random.uint32() % usercolors.length]

const ydoc = new Y.Doc()
const provider = new WebrtcProvider('codemirror.doc', ydoc)
const ytext = ydoc.getText('codemirror')

const undoManager = new Y.UndoManager(ytext)

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

let state = EditorState.create({doc: ytext.toString(), extensions: [
  basicSetup,
  html(),
  yCollab(ytext, provider.awareness, { undoManager })
//  linter(esLint(new Linter)),
//  StreamLanguage.define(javascript),
]})

;(window as any).view = new EditorView({state, parent: document.querySelector("#editor")!})

Upvotes: 1

Views: 470

Answers (0)

Related Questions