How to recognize the changes from user in another computer in monaco editor

Viewed 13

I'm having an issue understanding exactly Monaco's editor.

My use case is the following:

Whenever user A changes something in document X, user B should see the changes in real-time in document X. User A and B can work in parallel in this document

I have picked up the work from previous developers and the editor chosen for this task was monaco. Now, I'm trying to use monaco-collab-ext to accomplish the use case above.

I have created RemoteCursorManager, RemoteSelectionManager and EditorContentManager:

const sourceUser = {
  id: "source",
  label: "Source User",
  color: "orange"
};

const staticUser = {
  id: "static",
  label: "Static User",
  color: "blue"
};

const remoteCursorManager = new (window.MonacoCollabExt).RemoteCursorManager({
  editor: editorMonaco,
  tooltips: true,
  tooltipDuration: 2
});
const sourceUserCursor = remoteCursorManager.addCursor(sourceUser.id, sourceUser.color, sourceUser.label);
const staticUserCursor = remoteCursorManager.addCursor(staticUser.id, staticUser.color, staticUser.label);

const remoteSelectionManager = new (window.MonacoCollabExt).RemoteSelectionManager({editor: editorMonaco});
remoteSelectionManager.addSelection(sourceUser.id, sourceUser.color, sourceUser.label);
remoteSelectionManager.addSelection(staticUser.id, staticUser.color, staticUser.label);

const targetContentManager = new (window.MonacoCollabExt).EditorContentManager({
  editor: editorMonaco
});

In my example, I have created two static users just for testing (I was able to add cursors and selections) but what I'm looking for is the possibility to have User A type in his own computer into document X and User B see the changes in real-time in his own computer.

Do we need to include a WebSocket solution such as socket.io in this mix?

I understand that this question goes against the rules in SO but what I'm looking for is a direction to follow.

0 Answers
Related