import * as Y from 'yjs'
import { WebsocketProvider } from 'yjs/provider/websocket.js'
import { CodeMirrorBinding } from 'yjs/bindings/codemirror.js'

import * as conf from './exampleConfig.js'

import CodeMirror from 'codemirror'
import 'codemirror/mode/javascript/javascript.js'

const provider = new WebsocketProvider(conf.serverAddress)
const ydocument = provider.get('codemirror')
const ytext = ydocument.define('codemirror', Y.Text)

const editor = new CodeMirror(document.querySelector('#container'), {
    mode: 'javascript',
    lineNumbers: true
})

const binding = new CodeMirrorBinding(ytext, editor)

window.codemirrorExample = {
  binding, editor, ytext, ydocument
}
  

<style>
.remote-caret {
  position: absolute;
  border-left: black;
  border-left-style: solid;
  border-left-width: 2px;
  height: 1em;
}
.remote-caret > div {
  position: relative;
  top: -1.05em;
  font-size: 13px;
  background-color: rgb(250, 129, 0);
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  user-select: none;
  color: white;
  padding-left: 2px;
  padding-right: 2px;
}
</style>
<div id="container"></div>