I am using TipTap collaboration extension and its working fine. What I want is to store the yDoc and retrieve it from mongoDB database. As nature of my application needs persistant data.

I have tried to store the data in mongoDB this way.

const state = Y.encodeStateAsUpdate(yDoc)

This state is being store in MongoDB.

On time of retrieval I am using this method to apply this state to newly created doc.

const newDoc = new Y.doc()
Y.applyUpdate(newDoc, state)

This does not give me any TypeScript error.

While I run my application and editor is being rendered, I am getting error

TypeError: doc.on() does not exist on .....

This way is not working out for me. Please help me how to persist yDoc in database, retrieve it and re-use it.

I am using Next.js 14, Above code is executed on Client Components.

I tried encoding yDoc to binary (UINT8ARRAY) using Y.encodeStateAsUpdate(yDoc) and it successfully stores it in database. While retrieving that binary file from database and applying that doc to new one is giving type error that doc.on() does not exist.

I was expecting a result where newDoc is populated with state stored in yDoc stored in database.