Why is content update not working correctly in the collaboration extension?

[afuno]

Hello.

For the past few days, I have been trying to figure out one problem.

I have several editors from Tiptap on the page. One editor for the short description of the article, another for the content, and so on. Editors are not in a single Vue component, but are divided into their own. For example, a component for a short description, content, and so on.

Below is an example of a component code for description:

<template>
  <client-only> <!--This wrapper does not actually affect anything-->
    <EditorContent :editor="editor"/>
  </client-only>
</template>

<script lang="ts">
import Vue from 'vue'

import { Editor, EditorContent } from '@tiptap/vue-2'

import { Document } from '@tiptap/extension-document'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Text } from '@tiptap/extension-text'
import { HardBreak } from '@tiptap/extension-hard-break'
import { Bold } from '@tiptap/extension-bold'
import { Italic } from '@tiptap/extension-italic'
import { Strike } from '@tiptap/extension-strike'
import { Underline } from '@tiptap/extension-underline'
import { Link } from '@tiptap/extension-link'
import { Placeholder } from '@tiptap/extension-placeholder'
import { Collaboration } from '@tiptap/extension-collaboration'

import * as Y from 'yjs'
import { WebrtcProvider } from 'y-webrtc'

import PreventEnter from './plugins/prevent-enter'

export default Vue.extend({
  name: 'TiptapEditorDescription',

  props: {
    content: {
      type: Object,
      default: () => ({}),
    },
  },

  data (): Record<string, any> {
    return {
      editor: null,
      provider: null,
    }
  },

  mounted (): void {
    const roomName = '6197784d2f44a7e08bb8894d-hb3jb6hbk234jb645hb6j2-description'
    const ydoc = new Y.Doc()

    this.provider = new WebrtcProvider(roomName, ydoc)

    this.editor = new Editor({
      editorProps: {
        attributes: {
          class: 'text-lg focus:outline-none',
        },
      },
      // content: this.content,
      // OR
      content: { // It is the same if this object came from the parent
        'type': 'doc',
        'content': [
          {
            'type': 'paragraph',
            'content': [
              {
                'type': 'text',
                'text': 'test',
              },
            ],
          },
        ],
      },
      extensions: [
        Document,
        Paragraph,
        Text,
        HardBreak,
        Bold,
        Italic,
        Strike,
        Underline,
        Link,
        Placeholder.configure({
          placeholder: 'Type some text...',
        }),
        Collaboration.configure({
          document: ydoc,
          field: roomName,
        }),
        PreventEnter,
      ],
      onUpdate: (): void => { // For tracking
        console.log(
          'getHTML()',
          this.editor.getHTML(),
        )

        console.log(
          'getJSON()',
          this.editor.getJSON(),
        )
      },
    })
  },

  beforeDestroy (): void {
    this.editor.destroy()
    this.provider.destroy()
  },

  components: {
    EditorContent,
  },
})
</script>

Now I will describe the situation. After deployment, three clients (browsers) visit the page. As you can see in the code above, the default is one line with the text "test". As soon as clients visit the page, after a couple of seconds, the content in the editor automatically turns into this:

test
test
test

<div contenteditable="true" translate="no" class="ProseMirror text-lg focus:outline-none" tabindex="0"><p>test</p><p>test</p><p>test</p></div>

All three clients have it.

Then one of the clients refreshes the page and together they see this:

test
test
test
test

Plus one line.

Then another client refreshes the page and...

test
test
test
test
test

Another plus one line.

It is important to point out here that this problem occurs only when the client loads or refreshes the page. If clients start editing content without reloading the page, then everything is fine.

Also, if initially there is no content in the editor, that is, if the editor is initially empty (there is no "content" field in the code above), then everything is fine.

It turns out that the problem is in the presence of the "content" field.

---

I tried to describe the problem in as much detail as possible. I hope for your help in solving this problem.

[hanspagel]

Technically, that’s correct, because the Y.js binding replaces the whole content multiple times.

The real question here is: What actual problem are you trying to solve? Chances are there is a better way to achieve whatever you try to do.

Generally speaking, once you switch to Y.js you should work with the Y.js document and basically ignore the content, onUpdate and so on.

[afuno]

@hanspagel

Generally speaking, once you switch to Y.js you should work with the Y.js document and basically ignore the content, onUpdate and so on.

Thanks for the answer.

As you might guess, I need to collect this data from the editors and send it to the server to be saved in the database. Could you please tell me how it is better to implement it with Y.js? I understand that it is better to use websockets instead of WebRTC. But still what is the best way to solve this with my current code? I have a reason for this.