How to handle multi cursor TextEdit-s?

[predragnikolic]

Hello :)

Given we have a css file like this,
with the cursor being |:

div {
    mar|gin: 0;  // <- primary cursor is on this line 
}

div {
    mar|gin: 0;
}

Imagine that all completion items have a TextEdit.
My main question is:
What is the best way to apply a TextEdit of the selected completion item
correctly on both places?

How do I handle multi-cursor TextEdit-s?

• Do I need to fire multiple requests for each cursor position?
• or do I make only one request, and based on some algorithm calculate an offset
  and for each cursor apply the TextEdit with the offset for each cursor?

[mickaelistria]

For this case, you can send a TextEdit that contains the whole file change, or at least the subpart of the file that was modified.

[rcjsuen]

@predragnikolic You are trying to implement an LSP client and not an LSP server, correct?

[predragnikolic]

Thanks for the quick reply.
I am trying to implement it on the client.

I just don't know what is the best way to insert a completion item that has a Text edit on multiple places.

[predragnikolic]

Here are more details.

Given the previous example:

div {
    mar|gin: 0;  // <- PRIMARY cursor is on this line 
}

div {
    mar|gin: 0;
}

If there are multiple cursors,
The client send only one completion request
with the position sent to the server being the PRIMARY cursor position.

interface TextDocumentPositionParams {
    /**
     * The position inside the text document.
     */
    position: Position;
}

Server returns the completion items.
Let's say a completion item with newText: "margin-bottom" is choosen.

The textEdit is for the completion item is:

{
    "textEdit": {
        "range": {
            "start": {"character": 4, "line": 1}, 
            "end":   {"character": 10, "line": 1}}, 
        "newText": "margin-bottom"
    }
}

I will visual represent of the textEdit.range of the recieved completion item:

div {
    margin: 0;  // <- line 1, the `|` cursor is placed after "mar"
   4^     ^10   // <- character start 4 and character end 10
}

When that completion item is choosen, the following will happen:
The characters between 4 and 10 will be deleted
and newText will be inserted on position 4.
Giving a final result like this:

div {
    margin-bottom|: 0; // <- PRIMARY cursor is on this line 
}

div {
    mar|: 0;  // Not updated. 
}

The client applied the text edit, but only on the PRIMARY cursor position. (because the TextEdit is only valid for the requested position)
But the other cursor didn't get updated.

I assume that it is the client responsibility to find a way to apply the textEdit to the other cursors. Can somebody confirm this? :)

For example, right now my solution to this problem is by calculation an offset and the client uses that offset (won't discuss the implementation details, if you need this info, I can provide the details :)) to make the TextEdit valid for all cursors. (but the solution I found doesn't yet work well for all possible cases)

I managed to make this work in cases
where the PRIMARY cursor is on a word that is the same length as the word where the SECOND cursor is.

div {
    margin-bottom|: 0; // <- PRIMARY cursor is on this line 
}

div {
    margin-bottom|: 0;  // Updated. 
}

My solution works ok(ish) with cases
where the PRIMARY cursor is on a word that is shoreter that the word where the SECOND cursor is.

div {
    m|argin: 0;  <- PRIMARY cursor is on this line 
}

div {
    m|argin-inline-start: 0;
}

div {
    margin-bottom|: 0;
}

div {
    margin-bottom|-inline-start: 0;    // note `-inline-start` wasn't deleted
}

But fails in cases
where the PRIMARY cursor is on a word that is longer that the word where the SECOND cursor is.

div {
    m|argin-inline-start: 0;
}

div {
    m|argin: 0;
}

div {
    margin-bottom: 0;
}

div {
    margin-bottom  // note that `: 0 }` got deleted 

Summary:
I assume that it is the client responsibility to find a way to apply the textEdit to the other cursors. Can somebody confirm this? :)
And can somebody maybe tell me some ways on how would someone approach solving this?
Am I going in the right/wrong direction?

[dbaeumer]

@predragnikolic here is what we do in VS Code. If multiple cursors are active there is still a primary cursor. When code complete is requested it is requested at the primary cursor position. The reason for this is that if you would ask at every cursor position all completion requests could return different results since there context is different.

When an item is selected the client is responsible to insert the text at every cursor position. This can be done in different ways depending on what support the client has. In the easiest case the edits is like typing text and the editor automatically replicates the edit operations to the other custors (as the editor would if the users pastes text)

[predragnikolic]

@dbaeumer thank you for your reply.

In the easiest case the edits is like typing text and the editor automatically replicates the edit operations to the other cursors.

I found a solution.
I just looked at how VS code handles some cases that I wasn't sure how to handle, and mimic its behavior.

The tricky part for me was to understand how to apply TextEdit.Range to other cursors "correctly".

Because I found a solution I will close the issue.
For anyone interested,
you can read more about the problem I had
and the solution I found bellow.

---

Let say we have a css file.
I will use:

• [ will represent range.start
• ] will represent range.end

div {
    b|order: red;  // <-- primary cursor
}
div {
    b|order: red;
}

STEPS

When we trigger autocomplete,
and select a completion item background-color.

STEP 1
Is to select the completion item TextEdit.range on all cursor positions.

div {
    [b|order]: red;  // select the TextEdit.range
}
div {
    [b|order]: red;  // select the TextEdit.range
}

STEP 2
Than delete those ranges:

div {
    |: red;  // deleted
}
div {
    |: red;  // deleted
}

STEP 3
And finally insert TextEdit.newText: "background-color".

div {
    background-color|: red;  // inserted
}
div {
    background-color|: red;  // inserted
}

So far, so good. Here is a .gif for the previous STEPS:

But let me understand why this works.

After STEP 1 ,
we had these regions:

    [border]: red;
    ^      ^ region 1
}
div {
    [border]: red;
    ^      ^ region 2
}

If we focus on the text between the regions on each line,
The text is the same:

"border"               == "border" // true
^      ^ region 1         ^      ^ region 2

Because the text in the selection is the same,
we can apply the TextEdit.range to both places "correctly".

---

THE PROBLEM

But what happens if we have a situation like this:

div {
    b|order-bottom: red; // primary,
}
div {
    b|order: red;            // note, here is just bottom, not border-bottom
}

Now lets repeat the STEPS from before.

When we trigger autocomplete,
and select a completion item border-radius.

STEP 1
is to select the completion item TextEdit.range on all cursor positions.

div {
    [b|order-bottom]: red; // select the range
}

div {
    [b|order: red; ]       // I replicated the edit, note that I selected more than I should 
}

This was my mistake, I just assumed I could "automatically replicates the edit operations to the other cursors".

STEP 2
Than delete those ranges:

div {
    |: red;  // deleted
}
div {
    |}       // accidentally deleted `: red;` due to my **mistake** in **STEP 1**

STEP 3
And finally insert TextEdit.newText: "border-radius".

div {
    border-radius|: red;  // inserted
}
div {
    border-radius|}       // inserted, but note that `: red;` is gone

Here is a gif the demonstrates what happens when you replicates the edit operations to the other cursors.

---

Solution

I concluded that I shouldn't replicates the edit operations to the other cursors in all cases.

Only in cases where the text between the regions on each line is the same:

"border"               == "border" // true
^      ^ region 1         ^      ^ region 2

While in cases when the text is not the same,
to use the same strategy as VS Code.

"border-bottom"               != "border       " // true, they are not the same
^             ^ region 1         ^             ^ region 2

And that strategy is to modify the range.end value
to be the cursor | positions on that line.

So instead of this:

div {
    [b|order-bottom]: red; // select the range
}

div {
    [b|order: red; ]       // select the range
}

We end up with this in STEP 1:

div {
    [b|order-bottom]: red; // select the range
}

div {
    [b]|order: red;        // note that I only selected till the cursor position, only [b]
}

STEP 2
Than delete those ranges:

div {
    |: red;  // deleted
}
div {
    |order: red;  // deleted
}

STEP 3
And finally insert TextEdit.newText: "background-color".

div {
    border-radius|: red;  // inserted
}
div {
    border-radius|order: red;  // inserted
}

Here is a simple gif that shows what VS Code does:

So I just mimic the same behavior as VS Code:

[dbaeumer]

Thanks for the detailed description. For sure helpful for other client implementors.