Attempt at Remirror + Yjs

CollaborativeEditor.js

import React from 'react'
import useErrorBoundary from 'use-error-boundary'
import styled from 'styled-components'

import { Remirror, useRemirror, useRemirrorContext } from '@remirror/react'
import { YjsExtension } from '@remirror/extension-yjs'
import { IndexeddbPersistence } from 'y-indexeddb'
import { WebrtcProvider } from 'y-webrtc'
import { WebsocketProvider } from 'y-websocket'
import { Doc } from 'yjs'


const Container = styled.div`
  width: 500px;
  height: 500px;
`

const Editor = () => {
  const { getRootProps } = useRemirrorContext()

  return (
    <Container {...getRootProps()} />
  )
}

const webrtcProvider = (roomName, ydoc) => new WebrtcProvider(roomName, ydoc)
const websocketProvider = (roomName, ydoc) => new WebsocketProvider('wss://demos.yjs.dev', roomName, ydoc)
const indexeddbProvider = (roomName, ydoc) => new IndexeddbPersistence(roomName, ydoc)

const CollaborativeEditor = ({ roomName, editable }) => {
  const { ErrorBoundary, didCatch, error } = useErrorBoundary()

  const ydoc = new Doc()
  const extensions = () => [
    // Only one extension of a given type is supported and the highest priority 
    // will win (i.e. the first one). The rest will be deduped.
    new YjsExtension({ getProvider: () => websocketProvider(roomName, ydoc) }),
    new YjsExtension({ getProvider: () => webrtcProvider(roomName, ydoc) }),
    new YjsExtension({ getProvider: () => indexeddbProvider(roomName, ydoc) })
  ]

  const { manager } = useRemirror({ extensions })

  return (
    <>
      {
      didCatch
        ? (
          <p>An error has been caught: {error.message}</p>
          )
        : (
          <ErrorBoundary>
            <Remirror editable={editable} manager={manager}>
              <Editor />
            </Remirror>
          </ErrorBoundary>
          )
      }
    </>
  )
}

export default CollaborativeEditor