Make content updates on the backend

[drewag]

I have slate-yjs setup using react on the frontend and hocuspocus on the backend and it's working great. I'd now like to be able to have my backend also make changes as if it another client. What is the best way to go about this?

So far I've put together this code that works directly with yjs:

  const connection = await Server.openDirectConnection(req.params.docId, {});
  await connection.transact((doc: Document) => {
    const shareRoot = doc.get("content", Y.XmlText) as Y.XmlText;
    const delta = shareRoot.toDelta();
    const last = delta.slice(-1)[0].insert as Y.Text;
    last.insert(last.length, req.body);
  });
  connection.disconnect();

This successfully appends text to the last element in the doc. I have not yet figured out how to get awareness to work although I can probably figure it out with some more experimentation (although I would definitely appreciate pointers). However, it feels brittle to me to be implementing my updates with duplicated logic to understand how slate-yjs manages the doc. I'd prefer to be able to update the doc the same way the frontend does using slate and leaving yjs as just the syncing/persistence abstraction.

This is my attempt to write code that would do that, but it's not working:

  const connection = await Server.openDirectConnection(req.params.docId, {});
  await connection.transact((doc: Document) => {
    const sharedType = doc.get("content", Y.XmlText) as Y.XmlText;
    const awareness = new awarenessProtocol.Awareness(doc);
    const editor = withYHistory(
      withCursors(
        withYjs(createEditor(), sharedType, { autoConnect: false }),
        awareness,
        { data: { color: "blue", name: "name" } }
      )
    );
    editor.insertNode({ type: "paragraph", children: [{ text: req.body}] });
  });
  connection.disconnect();

I don't receive any errors but I also don't see the changes reflected.

One option seem to be to take the children of editor, put it through slateNodesToInsertDelta, remove all existing content, and then insert the new version of content. However, this seems very inefficient and likely to mess with cursor positions in the clients.

Is there a way I can setup the editor to automatically apply the changes to the real doc?

I also have a stretch goal of setting up an HTTP API to let another service open a connection, establishing a cursor somewhere in the doc, and then write to it from separate requests inserting text at the cursor, and then having another separate endpoint to close the connection to hide the cursor.

[BitPhinix]

You should be able to modify the yjs document content using a slate editor they way you showed above. The reason those changes are properly applied is likely because you didn’t flush them. Due to how the slate internally works slate-yjs only flushes the changes on a slate onChange which is only executed in the next js tick. One way to get around this is to manually call editor.onChange() or YjsEditor.flushLocalChanges(editor) at the end of transact