Undo after loading an editor causes whole document to clear (TipTap with collaboration & HocusPocus)

[EricHasegawa]

Running into quite a serious editor in which after a document loads, a user can click undo and clear the whole document. I’m not sure what’s causing it, but here’s how we’re using TipTap: 
We have a NextJS app with a page that creates a new HocusPocusProvider with a new Y.doc(), then passes that provider and doc into a dynamically rendered RichTextEditor component.
In RichTextEditor we useEditor(…) and set up Collaboration, configured with the passed in doc (also we set history: false. In a separate useEffect (triggered when the editor is set) we fetch the data for the doc from our DB and run editor.comands.setContent(…).
Now the bug doesn’t happen all the time, but when it does, basically what happens is immediately after load the undo button is displayed (it’s normally greyed out at first since there’s nothing to undo), and if you click it, the whole page clears. This feels similar to the issue here #1786, but the solution doesn’t help since we’re never doing Y.applyUpdate or anything (we initialize with setContent). 
Are we doing something wrong here? Been trying to debug this for quite some time.

Simplified version of code:

Outer page file

const RichTextEditor = dynamic(
    () => import('../../../components/Editor/RichTextEditor'),
    {
        ssr: false,
    },
)

const EditorPage = () => {
    const [provider, setProvider] = useState<HocuspocusProvider | undefined>()
    const router = useRouter()
    const grantDraftId = router.query.grantDraftId as string
    const doc = useMemo(() => new Y.Doc(), [])

    useEffect(() => {
        try {
            const hpProvider = new HocuspocusProvider({
                url: 'wss://blahblahblah',
                name: grantDraftId,
                document: doc,
            })
            setProvider(hpProvider)
        } catch (error) {
           ...
        }
    }, [grantDraftId, doc])

    return (
                <RichTextEditor
                    grantDraftId={grantDraftId}
                    provider={provider}
                    doc={doc}
                    websocketError={websocketError}
                />
    )
}

Inner component

const RichTextEditor = ({
    websocketError,
    grantDraftId,
    provider,
    doc,
}: RichTextEditorProps) => {
    const {
        editor: ctxEditor,
        setEditor: setCtxEditor,
        editorStateJSON,
        setEditorStateJSON,
        setGrantDraftId,
        setIsEditorContentLoading,
        setSAList,
        setSAMap,
        setActiveAIBlock,
        isLocked,
    } = useEditorContext()

    const { setGrantDraft } = useGrantDraftContext()
    const editorRef = useRef<HTMLDivElement>(null)

    const [isFirstUpdate, setIsFirstUpdate] = useState(true)
    const contentLoaded = useRef<boolean>(false)

    const user = useUser()

    const extensions: any[] = [
        StarterKit.configure({
            codeBlock: false,
            blockquote: false,
            code: false,
            history: false,
        }),
        Collaboration.configure({
            document: doc,
        }),
        Underline,
        AIMark,
        AIParagraph,
        AIBlock,
        BubbleMenu,
    ]

    if (provider) {
        extensions.push(
            CollaborationCursor.configure({
                provider: provider,
                user: {
                    name: user?.user_metadata?.name ?? user?.email,
                    color: '#6EE7B7',
                },
            }),
        )
    }

    const editor = useEditor({
        extensions: extensions,
        onSelectionUpdate({ editor }) {
            if (isFirstUpdate) {
                // Bring editor selection to beginning of document on first update.
                // Fetching and loading document happens after editor is created so can't
                // use the "onCreate" event here.
                editor.chain().focus('start').run()
                setIsFirstUpdate(false)
            }
            updateActiveAIBlockIfNeeded(editor, setActiveAIBlock)
        },
        onUpdate({ editor, transaction }) {
            const editorJSON = editor.getJSON()

            // Prevent empty doc coming through on first load.
            if (editorJSON.content?.length === 1 && !contentLoaded.current) {
                return
            }
            setEditorStateJSON(editorJSON)
            if (!transaction.docChanged) {
                return
            }

            debouncedSave(
                grantDraftId! as string,
                editorJSON as ProseMirrorNode,
            )
        },
    })

    const fetchAndLoadDocumentJSON = async (editor: TipTapEditor) => {
        const res = await defaultAPIWrapper(fetchGrantDraft)(grantDraftId)
        editor.commands.setContent(res.data.grant_draft.pm_schema_json, true)

    }

    useEffect(() => {
        if (editor && !ctxEditor) {
            setCtxEditor(editor)
        }
    }, [editor])

    useEffect(() => {
        editor && grantDraftId && fetchAndLoadDocumentJSON(editor)
    }, [editor, grantDraftId])

    if (!editor) {
        return null
    }

    return (...)

export default RichTextEditor

[Faliszek]

Not sure if this will be helpful as I do not use collaboration mode yet, however I experienced the same problem when initialising editor.
The problem exist for me when I use useEditor like this:

const editor = useEditor(
    {
      immediatelyRender: true,
      shouldRerenderOnTransaction: false,
      //My guess is that setContent could be problematic here as it may introduce some middle state?
      onCreate: (ctx) => {
        ctx.editor.commands.setContent(initialContent);
        ctx.editor.commands.focus("start", { scrollIntoView: true });
      },
    },
    []
  );

but when I changed onCreate to content it works as expected

const editor = useEditor(
  {
    immediatelyRender: true,
    shouldRerenderOnTransaction: false,
    content: initialContent,
  },
  []
);

Maybe that might be useful to make some workaround :) so in your case you can just pass content once its fetched instead of setContent.