[PRO]: Bug: Data Loss on Page Reload with Schema Enforcing Heading as First Block on Reload in Collaborative Setup

[hemant-altum]

Which packages did you experience the bug in?

@tiptap/extension-collaboration

What Tiptap version are you using?

2.2.2

What’s the bug you are facing?

We've encountered a critical issue with Tiptap when using a custom extension that extends @tiptap/extension-document with a schema defined to ensure the first block is a title ('title block*'). This setup causes data loss upon page reload in a collaborative editing environment powered by Hocus-Pocus and Yjs for backend data management.

Detailed Explanation:
Our schema is designed to mandate a title block as the first block, followed by an indefinite number of blocks (block*). This configuration is critical for our document structure. However, we've observed that upon page reload, before the editor has a chance to fully load and synchronize the document from the server, the schema enforcement leads to a document state update that erroneously considers the existing content invalid and replaces it with an initial state adhering to the schema. This premature state enforcement and subsequent synchronization with the server result in data loss.

import { Document as TiptapDocument } from '@tiptap/extension-document'

export const Document = TiptapDocument.extend({
    content: 'title block*' // first block would be title which is heading 1, then followed by any number of blocks.
})

export default Document

Here is the title node:

import { mergeAttributes, Node } from '@tiptap/core'

export type Level = 1 | 2 | 3 | 4 | 5 | 6

export interface ITitleOptions {
    level: Level
    HTMLAttributes: Record<string, any>
}

export const Title = Node.create<ITitleOptions>({
    name: 'title',

    addOptions() {
        return {
            level: 1,
            HTMLAttributes: {
                'data-cy': 'test-title'
            }
        }
    },

    content: 'text*',

    marks: '',

    group: 'block',

    defining: true,

    renderHTML({ HTMLAttributes }) {
        const level = this.options.level

        return [
            `h${level}`,
            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
            0
        ]
    }
})

export default Title

Using Collaboration from '@tiptap/extension-collaboration'

            extensions: [
                ...extensions,
                Collaboration.configure({
                    document: ydoc
                })
            ],

The reload issue is resolved by changing Document content to block*

import { Document as TiptapDocument } from '@tiptap/extension-document'

export const Document = TiptapDocument.extend({
    content: 'block*' // first block would be title which is heading 1, then followed by any number of blocks.
})

export default Document

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

Reloading page mustn't delete the data when first block is enforced to title block while in collaboration environment.

Anything to add? (optional)

No response

Did you update your dependencies?

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

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[svenadlung]

Unfortunately, I wasn't able to replicate the problem. However, to ensure we're on the same page, I've set up a sandbox based on our collaboration demo. It uses a forced scheme (heading block*) to reflect your setup as accurately as possible.

You can check it out here: https://codesandbox.io/p/devbox/collaboration-with-forced-schema-test-xkj8hl?file=%2Fsrc%2FApp.js

Could you please give it a try and let me know if you experience the same issue there? This will help us narrow down the problem and find a solution together.

[LeongLRF]

I have the same issue

20240411_134055.mp4