content is not updated in ydoc when i convert an initial content

[sald19]

What’s the bug you are facing?

Hello, thank you very much for the amazing package you have created

I am trying to start the collaborative editor with initial content.

I was having the problem that the content is duplicated when starting the editor with content. :(

I found that it is possible to start Ydoc with preloaded content, but it is not working

const schema = getSchema(this.extensions);
const ydoc = prosemirrorJSONToYDoc(schema, this.value);

this.proseMirrorJson = yDocToProsemirrorJSON(ydoc);

this.provider = new WebrtcProvider(
  "tiptap-collaboration-extension-test",
  ydoc
);

this.editor = new Editor({
  // content: this.value,
  editorProps: {
    attributes: {
      class:
        "prose prose-sm sm:prose lg:prose-lg xl:prose-2xl m-5 sfocus:outline-none",
    },
  },
  extensions: [
    Collaboration.configure({
      document: ydoc,
    }),
    CollaborationCursor.configure({
      provider: this.provider,
      user: {
        name: "@sald19",
        color: "#f783ac",
      },
    }),
    ...this.extensions,
  ],
});

How can we reproduce the bug on our side?

https://codesandbox.io/s/charming-haze-3d80e?file=/src/components/TiptapEditor.vue

Can you provide a CodeSandbox?

https://codesandbox.io/s/charming-haze-3d80e?file=/src/components/TiptapEditor.vue

What did you expect to happen?

that when loading the collaborative editor, load the initial content

Anything to add? (optional)

No response

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [X] Yes, I’m a sponsor. 💖

[nitzanmo]

We're having the same issue on our project 🙏🏼

[sald19]

Hi @nitzanmo i have solved this, loading the document in the onLoad Document event in hocuspocus server side, apparently there is no way to do it on the client side (provider)

[nitzanmo]

@sald19 Ty for letting me know! What do you show on the client side while the connection is being made? I have the almost-newest content on the client side so I wanted to show it while the "freshest" content was being fetched, but it looked clanky because when the connection is being made and it duplicates the content.

[sald19]

I don't have anything implemented yet, but in my personal case I wanted to put a loading indicator while loading the content of the backend (hocuspocus).

when starting the editor it usually takes less than 1 second to display the content that is obtained from the backend.

I had this duplication error for a long time, do not start the tiptap editor with content from the client (as you can see the line where the content starts is commented out)

If it is still not clear, it is open to help you

👋🏽

[nitzanmo]

Ty, ended up implementing a skeleton loading indicator as well, but clearly this isn't optimal :)

[jonassiewertsen]

I can reproduce the issue, that the content will be duplicated on initial load.

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[cam-narzt]

Bad bot, this is still an issue.

[bdbch]

I think we'll first need to investigate into this ticket a bit if there is actually a way to get client and server to sync nicely without duplicating any content.

For now, we'd suggest to not load content on the client side and deliver the content via Hocuspocus to the editor. Not the nicest way if you already have the editor content loaded locally but we'll have to reinvestigate what the best solution for this issue would be.

[dkgitcode]

I can reproduce this bug very easily, and if there was a solution for client side, that would help dramatically. Serving with Hocuspocus does not seem to be as viable because of the Tiptap transformer. I do think that a client-side fix would be very helpful.

[janthurau]

The issue here is that the history of the ydoc does not match.

The only way to get this to work is by passing the actual ydoc to the Provider (if you have access to the raw content, probably you can also get the ydoc?)

How you can do this:

import toUint8Array from 'js-base64';

const doc = new Y.Doc();
Y.applyUpdate(doc, toUint8Array(base64EncodedYDocStateFromDatabase));

// now pass the doc to the provider

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[bdbch]

bump

[JimboXie]

I don't have anything implemented yet, but in my personal case I wanted to put a loading indicator while loading the content of the backend (hocuspocus).

when starting the editor it usually takes less than 1 second to display the content that is obtained from the backend.

I had this duplication error for a long time, do not start the tiptap editor with content from the client (as you can see the line where the content starts is commented out)

If it is still not clear, it is open to help you

👋🏽

How to convert content to Uint8Array？

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[bdbch]

Is this still an issue? Afaik you can't set the content from the client-side which is (I think wanted?) since you want the live content from the server and not your local content which could be stale?

If this is still an issue please let me know and I'll reopen this issue. Please add information on why this is still an issue and what you'd expect to be fixed.