Collaborative editing is not working

[Two Key]

The documentation uses this snippet everywhere:

this.collaborativeEditingHandler = this.container.documentEditor.collaborativeEditingHandlerModule;

But when I try to use it, it says collaborativeEditingHandler ​is undefined

; even when I print out the documentEditor object in the console,

there is no collaborativeEditingHandlerModule function.

However, I tried an alternative method like this:

function onCreated() {

    setIsEditorReady(true);

    editorRef.current.documentEditor.enableCollaborativeEditing = true;

    collaborativeEditingHandler.current = new CollaborativeEditingHandler(

      editorRef.current.documentEditor

    );

    collaborativeEditingHandler.current.applyRemoteAction(

      "connectionId",

      fileId

    );

    console.log("through new method", collaborativeEditingHandler);

  }

It starts up properly, and I get this output in the console:

But when multiple people are using the same file, I'm receiving the changes but they don't get applied:

Code for receiving changes:

 useEffect(() => {

    if (socket && isEditorReady && collaborativeEditingHandler.current) {

      console.log("Socket connected:", collaborativeEditingHandler.current);

      socket.on("receive-changes", (delta) => {

        console.log("Received changes:", delta);

        console.log(

          "collaborativeEditingHandler",

          collaborativeEditingHandler.current

        );

        collaborativeEditingHandler.current.applyRemoteAction("action", {

          operations: delta,

          connectionId: fileId,

          userId: 23,

          version: 1,

        });

      });

    }

    return () => {

      if (socket) {

        socket.off("receive-changes");

      }

    };

  }, [fileId, isEditorReady, profileData.email, socket]);

Browser console when changes are received:

System and Version Info:

System: Windows 11

@syncfusion/ej2-react-documenteditor: "^26.2.9"

react: 18.2.0

[Dhanush Sekar]

Hi Team,

We believe this issue is caused by improper configuration of the collaborative editing feature. To resolve it, please initialize the `collaborativeEditingHandler` in the `onCreated` event and inject it, setting it to true in the `useEffect` event as shown below.

GitHub Sample: EJ2-Document-Editor-Collaborative-Editing/Client side with dotnet/React at master · SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing (github.com)

Regards,

Dhanush Sekar