Selections and Life Cycle

v6
1

I have noticed that when working on or changing something in the editor that has been user selected, that it becomes unselected afterward (or the selection may move).

For example, the code within the Code Changes sample where an underline character is prefixed and suffixed onto a user selection will actually change the selection not just from the selected word, but to some other mysterious area.

If you select the word “six” in a line that says “Line SIX” and run:

view.dispatch(
    view.state.changeByRange((range) => ({
      changes: [
        { from: range.from, insert: "_" },
        { from: range.to, insert: "_" }
      ],
      range: EditorSelection.range(range.from + 2, range.to + 2)
    }))
  );

You will get the expected Line _SIX_, but now the selection highlight includes the entire line but running that code a second time gives Line _S_IX__ even though now the entire line is highlighted.
After that you get Line _S_I_X___ and then eventually something like Line _S_I_X_________

Perhaps I’m confused about the code from the example. Especially this line: range: EditorSelection.range(range.from + 2, range.to + 2) as I don’t understand where the number 2 comes in. But I’ve notice similar behavior in some of your other examples. Is there a way to maintain the original selection area even after changes?

Thank you.

2

The new selection is determined by the range you provide there. +2 indeed seems to make little sense, and will move the selection range forward.

3

I figured out why the selection in your changeByRange example is moving toward the back of the line every time it runs. The range.from + 2 simply needs to be changed to range.from + 1.

I sent you a pull request to fix the example on the website, or you can just edit it. It is just a one character change but it makes all the difference in the world. Select SIX from Line SIX and run the code a few times and you now get the correct Line _____SIX_____ But I still don’t understand why the highlighted area moves from the user selection and then highlights the entire line. Obviously, the selection hasn’t moved, so why has the highlight moved from the selection to the entire line? It makes it appear as though the entire line is selected (it isn’t) after the code is run.

Thanks again.

4

Thanks for the fix. I don’t understand what you mean by the entire line being highlighted—I’m not seeing that.

5

I did some more experimentation and noticed that the selection highlight only moves to the entire line if the last character on a line is also included within the selection. One can double-click other words or even drag over several characters to make a selection and those will all work fine, but if the last character in the line is also selected, the selection highlight will encompass the entire line after the change even though the actual selection hasn’t changed.

Why is that happening? Is there a way to correct for it?

I have included a code sandbox if you want to look at the simple example.

Thank you

6

Ahh, I see what you mean now. The editor was losing focus (when you click a button that gets focus) and the document change was causing the DOM selection to get mangled. But because the editor didn’t consider the DOM selection to be under its control when it isn’t focused, it didn’t repair that. Attached patch adjusts the logic for when to manage the DOM selection to avoid situations like this.