[Bug]: In TiptapCollabProvider on name change, the content of the Editor doesn't change

[Tej-Sharma]

Affected Packages

collaboration

Version(s)

2.9.0

Bug Description

In my application, there are multiple documents a user can edit. Using the Collaboration plugin, however, when the document is changed, the contents of the editor do not change to that new document.

When I change the the name field provided to TiptapCollabProvider, I would expect that the content of the editor will change to match the new document's content

However, none of the content changes, and since Y.js now handles all the content updating automatically (which works great for a single document), I can't tell if this is a bug or there's no documentation on how to handle multiple documents in an app.

const doc = new Y.Doc(); // Initialize Y.Doc for shared editing

export interface TiptapEditorRef {
  focus: () => void;
}

const TiptapEditor = forwardRef<
  TiptapEditorRef,
  {
    ...
    dailyNoteDate?: string;
  }
>(
  (
    {
      ...
      dailyNoteDate = '',
    },
    ref,
  ) => {

    const editor = useEditor({
      extensions: [
        ...TipTapExtensions,
        Collaboration.configure({ document: doc }),
      ],
      enableContentCheck: false,
      onContentError: (error) => {
        console.error(error);
      },

    });

    // On daily note date change, create a new connection to the document
    useEffect(() => {
      if (!dailyNoteDate) return;
      getCurrentUserId().then(async (userId) => {
        let token = localStorage.getItem(
          LOCAL_STORAGE_KEYS.APP.DAILY_NOTES.SYNC_JWT_TOKEN,
        );

        if (!token) {
          try {
            const response = await axios.post(
              `${BACKEND_URL}.../get-jwt`,
              {
                user_id: userId,
              },
            );

            token = response.data.token;

            if (token && token.length > 0) {
              localStorage.setItem(
                LOCAL_STORAGE_KEYS.APP.DAILY_NOTES.SYNC_JWT_TOKEN,
                token,
              );
            }
          } catch (error) {
            console.error('Error getting JWT:', error);
            return;
          }
        }

       // Connect to the new document here with the NEW document name
        const provider = new TiptapCollabProvider({
          name: `${userId}/${dailyNoteDate}`,
          appId: '...',
          token: token,
          document: doc,
        });
      });
    }, [doc, dailyNoteDate]);

    return (
      <div className="flex flex-col h-full">
        {editor && <EditorBubbleMenu editor={editor} />}
        <EditorContent
          editor={editor}
          className="tiptap-wrapper relative"
          style={{
            fontSize: fontSize,
            letterSpacing: '0.01em',
          }}
        >
          {/* Placeholder text */}
          {!editor?.isFocused && editor?.isEmpty && (
            <p
              className="absolute top-0 pointer-events-none"
              contentEditable={false}
              style={{
                color: '#DFDFDF',
              }}
            >
              {placeholder}
            </p>
          )}
        </EditorContent>
      </div>
    );
  },
);

export default TiptapEditor;

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

On name changing (i.e. here when dailyNoteDate changes), the tiptap's content should automatically get updated to the new document's content.

In reality, it stays the same.

Additional Context (Optional)

No response

Dependency Updates

• [X] Yes, I've updated all my dependencies.