64 lines
2 KiB
JavaScript
64 lines
2 KiB
JavaScript
import * as Y from 'yjs'
|
|
import { yCollab } from 'y-codemirror.next'
|
|
import { EditorView, basicSetup } from "codemirror";
|
|
import { EditorState } from "@codemirror/state";
|
|
import { javascript } from '@codemirror/lang-javascript'
|
|
import {syntaxHighlighting, defaultHighlightStyle} from "@codemirror/language"
|
|
import * as random from 'lib0/random'
|
|
import {WebrtcProvider} from "y-webrtc";
|
|
|
|
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 doc = new Y.Doc()
|
|
const ytext = doc.getText('codemirror')
|
|
|
|
const provider = new WebrtcProvider('sample', doc, { signaling: ['ws://localhost:8000/signaling'] })
|
|
|
|
const undoManager = new Y.UndoManager(ytext)
|
|
|
|
provider.awareness.setLocalStateField('user', {
|
|
name: 'Anonymous ' + Math.floor(Math.random() * 100),
|
|
color: userColor.color,
|
|
colorLight: userColor.light
|
|
})
|
|
|
|
|
|
|
|
const state = EditorState.create({
|
|
doc: ytext.toString(),
|
|
extensions: [
|
|
javascript(),
|
|
syntaxHighlighting(defaultHighlightStyle),
|
|
yCollab(ytext, provider.awareness, { undoManager })
|
|
]
|
|
})
|
|
|
|
const view = new EditorView({ state, parent: document.querySelector('#editor') })
|
|
|
|
// toggle connection by clicking on connect-btn
|
|
const toggleButton = document.getElementById('y-connect-btn')
|
|
let connected = true
|
|
|
|
toggleButton.addEventListener('click', () => {
|
|
if (connected) {
|
|
provider.disconnect()
|
|
connected = false
|
|
toggleButton.innerText = 'Reconnect'
|
|
} else {
|
|
provider.connect()
|
|
connected = true
|
|
toggleButton.innerText = 'Disconnect'
|
|
}
|
|
})
|