<template>
  <div ref="editorEl" id="test" style="height: 300px; text-align: left"></div>
</template>

<script>
import { onMounted, ref } from 'vue'
import * as monaco from 'monaco-editor'
import { WebsocketProvider } from 'y-websocket'
import { Doc } from 'yjs'
import { MonacoBinding } from 'y-monaco'

export default {
  name: 'Editor',

  setup () {
    const editorEl = ref(null)
    const monacoBinding = ref(null)

    onMounted(() => {
      const ydoc = new Doc()
      const provider = new WebsocketProvider('ws://localhost:8000/ws/editor/test/lol.js', location.hash, ydoc)
      const ytext = ydoc.getText('monaco')

      const editor = monaco.editor.create(document.getElementById('test'), {
        value: '',
        language: 'javascript',
        theme: 'vs-dark'
      })

      monacoBinding.value = new MonacoBinding(ytext, editor.getModel(), new Set([editor]), provider.awareness)
    })

    return { editorEl, monacoBinding }
  }
}
</script>

<style scoped>

</style>
