Initial state conflict between slate and YJS

[gaberogan]

Slate's initial state must not be empty, but a YDoc's initial state must be empty. The reason the slate-yjs-example works with an empty [] initial state is because we sync to a custom websocket server that provides our initial value immediately after loading the page.

If we want to consider offline editing (major selling point for a CRDT), you must give Slate an initial state by performing an initial insert operation on the YDoc.

const DEFAULT_VALUE = [{
  type: 'paragraph',
  children: [{ text: '' }],
}]

toSyncDoc(yjsEditor.syncDoc, DEFAULT_VALUE)

// ...also pass DEFAULT_VALUE to the editor

Say you initialize slate like above. As soon as we sync with the websocket, the YDocs will merge and you'll have an extra line at the beginning of the document.

Instead, we can hide/disable editing until the document is populated (via websocket or indexeddb etc.) and then provide an initial value if the data provider sends an empty array. We probably want to control this initial value via the frontend so the data provider is agnostic to the document type (unlike the example), which allows you to better plug-and-play data providers (ie this lets you use y-websocket's server as-is).

yjsEditor.websocketProvider.on('sync', () => {
  // if your data provider gives you [], add an initial value
  if (!yjsEditor.syncDoc._length) {
    toSyncDoc(yjsEditor.syncDoc, DEFAULT_VALUE)
  }

  setEditable(true)
})

I suppose my reason for opening this discussion is to help others understand how Slate and YJS work together and to provide a more robust way to use slate-yjs.

[dpnova]

Wish I'd found this a few days ago :D

Thanks for the insights, and especially the workaround.