Yjs overside the previous schema doc

I have integrated the Yjs prosemirror in my react app and i have manage to integrate it, so basically i am having mutliple workspace in my prokect so i create a room using the workspace Id and i save the data in my table after every 5mint and fetch the data back to display back, but yjs override my data

In order to help you I need to know exactly what you are doing. Please provide code examples and which y-* modules exactly you are using. How do you connect to the server? Do you even have a server?

How do you write data in the Yjs document? Generally you want to use the Yjs document updates instead of the ProseMirror json encoded document. You can merge Yjs documents, but you can’t simply merge ProseMirror documents.

So here is my server file

const WebSocket = require('ws');
const http = require('http');
const StaticServer = require('node-static').Server;
const setupWSConnection = require('y-websocket/bin/utils.js').setupWSConnection;
const staticServer = new StaticServer('.', { cache: 3600, gzip: true });

let server = http.createServer((request, response) => {
    request.addListener('end', () => {
        staticServer.serve(request, response)
    }).resume()
})

const wss = new WebSocket.Server({ server })

wss.on('connection', setupWSConnection)

server.listen(8012);
if (server.listening)
    console.log(`Listening to ws://localhost:8012`)
else
    console.log(`Could able to Listen to ws://localhost:8012`)

Client Side code, here the this.props.scriptData is the data which i have saved into my table when user enter into
workspace then the API is called and is sets into this.props.scriptData

suppose I am getting this data in

this.props.scriptData ={
    "content": [
      {
        "attrs": {
          "ychange": null
        },
        "content": [
          {
            "text": "Hi there how are you ",
            "type": "text"
          }
        ],
        "type": "paragraph"
      },
      {
        "attrs": {
          "ychange": null
        },
        "type": "paragraph"
      },
      {
        "attrs": {
          "ychange": null
        },
        "content": [
          {
            "text": "great tool for collab ",
            "type": "text"
          }
        ],
        "type": "paragraph"
      },
      {
        "attrs": {
          "ychange": null
        },
        "type": "paragraph"
      },
      {
        "attrs": {
          "ychange": null
        },
        "content": [
          {
            "text": "thanks man",
            "type": "text"
          }
        ],
        "type": "paragraph"
      }
    ],
    "type": "doc"
  }

But i don’t know what i am making wrong because this data is not setting on initial state.

componentDidMount=()=> {
    if (Object.keys(this.props.scriptData).length !== 0 && typeof this.props.scriptData === 'object') {
        ydoc = new Y.Doc()
        if (ydoc) {
            /* this.props.showRoom is the workspace unique Id */
            provider = new WebsocketProvider("ws://localhost:8012/", this.props.showRoom, ydoc)
            type = ydoc.getXmlFragment(this.props.showRoom)
            provider.awareness.getStates().forEach((aw, clientId) => {
                if (clientId === ydoc.clientID) {
                    aw.user = {};
                    aw.user.name = this.props.username;
                }
            });

            prosemirrorView = new EditorView(document.querySelector('#editor'), {
                state: EditorState.create({
                    doc: Node.fromJSON(schema, this.props.scriptData),
                    plugins: [
                        ySyncPlugin(type),
                        yCursorPlugin(provider.awareness),
                        yUndoPlugin(),
                        keymap({
                            'Mod-z': undo,
                            'Mod-y': redo,
                            'Mod-Shift-z': redo
                        })
                    ].concat(exampleSetup({ schema }))
                }),
                dispatchTransaction: transaction => {
                    // console.log("Document size went from", transaction.before.content.size, "to", transaction.doc.content.size)
                    const { state, transactions } = prosemirrorView.state.applyTransaction(transaction)

                    prosemirrorView.updateState(state)
                    if (transactions.some(tr => tr.docChanged)) {
                        this.handleNewTextAppend(state.doc.toJSON())
                    }
                },
            })
        }
        prosemirrorView.dispatch(prosemirrorView.state.tr.delete(0, prosemirrorView.state.doc.content.size))
        window.example = { provider, ydoc, type, prosemirrorView }
    }
}

When you use Yjs for shared editing, Yjs will control the content of the editor. The initial content shouldn’t be set in the initial state in ProseMirror, because the initial state must be empty when you have a collaborative document that is opened by several users at once. One approach would be to set the initial content in the server. Another approach would be to set the initial document content after the editor instance is created and the websocket server is opened. Here is an example:

const prosemirrorView = new EditorView({ .. })
let setInitialContent = false
provider.on('sync', () => {
  // The "sync" event is fired every time the "provider.synced" state changes.
  // I.e. when y-websocket created a connection and synced with the server

  // Only set the initial state once. Only set it when the initial content if the document is empty.
  if (!setInitialContent && provider.synced && prosemirrorView.state.content.size < 3) {
    setInitialContent = true
    prosemirrorView.setState($yourInitialContent)
  }
})

But please not that this approach is not ideal if you also want to handle clients that are temporarily offline. It would be better to set the initial content in the server. Better yet, store e Yjs document updates instead of the ProseMirror state. This will allow you to always sync clients and you can still set the initial content on the client side.