Distinguish cursor or action of 2 people

1

Hi Yjs team,

I want 2 people to be in the same room and distinguish the pointer or action of the 2 people. (Same thing like a demo at yjs.dev or something like that). I choose Monaco for editor bindings.

Can you guys please show how or document it is to handle it??

2

Hi @moneymaker11081999,

This is described in the documentation: https://docs.yjs.dev/getting-started/adding-awareness

1 Like
3

Thank you, I didn’t expect to receive such a quick response from you, really appreciate that :pray:

4

Hi, have you managed to have cursor for all users with monaco?

Even adding this:

awareness.setLocalStateField('user', {
    // Define a print name that should be displayed
    name: username.value,
    // Define a color that should be associated to the user:
    color: '#ff9900', // should be a hex color
 )

I don’t have any cursor for the other users.

5

Hi @laruiss,

Each user needs to set their own color and user-name.

7

Hi there, I am having the same issue with monaco editor. The cursors are being shown but without username or the specified color. Though this problem didn’t occur with codemirror.
Can you specify the solution for monaco?

const awareness = provider.awareness;
    // Define a shared text type on the document
    const yText = ydoc.getText(`monaco`);
    var person = prompt(
      "Please enter your name",
      Math.floor(Math.random() * 10) + "User"
    );

    if (person === " ") {
      person = Math.floor(Math.random() * 10) + "User";
    }

    awareness.setLocalStateField("user", {
      name: person,
      color: randomcolor(),
    });

    let status;

    provider.on("status", (event) => {
      console.log(event.status); // logs "connected" or "disconnected"
      status = event.status;
      if (event.status === "connected") {
        const binding = new MonacoBinding(
          yText,
          editor.getModel(),
          new Set([editor]),
          awareness
        );
      }
    });