Moving multiple cursors

v6
1

I’m trying to add a feature to CodeMirror 6 where I can insert multiple tabs on multiple lines. I’ve been able to figure out how to insert the tabs on multiple lines, but I’m unable to figure out how to move the cursors forward. Four spaces are inserted, so I want to move all the cursors forward by four characters.

I’ve tried:

  1. View.dispatch({ selection: { anchor: … } }); // however, this returns to a single line cursor since we are only modifying “anchor”
  2. Attempting to modify EditorSelection start, goalColumn, etc, but these are all getters.
  3. Attempting to “moveVertically” but got runtime exceptions.

What is the correct way to move multiple cursors?

2

Map the existing selection through your changes (with assoc set to 1, so it moves forward), and include that as selection field in the same transaction that makes the changes.

3

Thanks. For anyone finding this in the future, here’s the solution described above in code form:

var mapIndex = 0;
const moveCursor = state.selection.map({
    mapPos: function(pos, assoc) {
        const newPos = pos + assoc + (mapIndex++ * assoc);
        return newPos;
    }
}, TAB.length);

And then dispatch into the view:

view.dispatch({
    changes: insertTabs,
    selection: moveCursor
});
4

It would be easier to create a ChangeSet for your changes and pass that to both EditorSelection.map and dispatch, rather than implementing your own mapPos.