How to set the caret at the end of the replacement

I am replacing text and would like to set the caret at the end of replacement

For example …

cm.replaceRange(text, {line: 5, ch: 0}, {line: 5);

// tried
cm.setCursor(5);
cm.setCursor(5, 0);
cm.setCursor(5, text.length);
cm.setCursor({line: 5});
cm.setCursor({line: 5, ch: 0});
cm.setCursor({line: 5, ch: text.length});

How can I set the caret at the end of the line/replacement?

The first line in your code sample is incomplete. But the third and sixth call to setCursor both conform to the signature in the docs and will work.

The problem is that it doesn’t go to the end and stays at the same place that it would without using setCursor

  console.log(cm.getLine(line).length);         // 40
  console.log(text.length);                     // 46
  cm.replaceRange(text, {line, ch: 0}, {line});
  console.log(cm.getLine(line).length);         // 46
  cm.setCursor(line, text.length);  // cursor stays at position after 42 characters

In fact the setCursor does not seem to work even when setting it to the start of the line.
Nothing happens.

cm.setCursor(line, 0);

… or …

cm.setCursor(1, 0);

Not sure what you’re doing, but I can say with quite a bit of confidence that setCursor works (it’s used all over the test suite and in probably almost every CodeMirror integration ever).

… I can say with quite a bit of confidence that setCursor works …

I know and understand. :wink:

It must be something particular to what I am doing. Please check if the following progress helps you to find out what is going on…

Why does it go through function setSelection again?
Should I cancel mouse action e.g. event.stopPropagation()? :thinking:
Update: I tried it but didn’t make any difference.

// progress
cm.on('mousedown', (cm, e) => func(cm, node););

func(cm, node) {
  console.log('func called'); // func called
  cm.setCursor(1, 0);
}

// codemirror.js
setCursor: docMethodOp(function(line, ch, options) {console.log(line, ch, options);
// 1 0 undefined

function setSimpleSelection(doc, anchor, head, options) {console.log(doc, anchor, head, options); 
// object object { line: 1, ch: 0, sticky: null } null undefiend

function setSelection(doc, sel, options) {console.log(doc, sel, options); 
// object object undefiend

function setSelectionNoUndo(doc, sel, options) {console.log(doc, sel, options); 
// object object undefiend

function addSelectionToHistory(doc, sel, opId, options) {console.log(doc, sel, opId, options); 
// object object 4 undefiend

function setSelection(doc, sel, options) {console.log(doc, sel, options); 
// object object Object { origin: "*mouse" }

function setSelectionNoUndo(doc, sel, options) {console.log(doc, sel, options); 
// object object Object { origin: "*mouse" }

function addSelectionToHistory(doc, sel, opId, options) {console.log(doc, sel, opId, options); 
// object object 4 Object { origin: "*mouse" }

// last one
Object {
  cantEdit: false
  children: Array [ {…} ]
  cleanGeneration: 1
  cm: Object { options: {…}, doc: {…}, display: {…}, … }
  direction: "ltr"
  extend: false
  first: 0
  height: 180
  highlightFrontier: 12
  history: Object { undoDepth: 200, lastSelTime: 1608567729426, lastModTime: 0, … }
  id: 1
  lineSep: null
  mode: Object { blockCommentStart: "/*", blockCommentEnd: "*/", blockCommentContinue: " * ", … }
  modeFrontier: 12
  modeOption: "javascript"
  parent: null
  scrollLeft: 0
  scrollTop: 0
  sel: Object { ranges: (1) […], primIndex: 0 }
  size: 12
}
​
Object {
  primIndex: 0
  ranges:  [
    anchor: Object { line: 4, ch: 39, sticky: "before", … }
    head: Object { line: 4, ch: 39, sticky: "before", … }
    length: 1
  ]
}

Did the above information help out tin finding the cause? :thinking:

From what I understand, …

  • Initially, the mousedown fires
  • setCursor is set
  • another mouse event changes the cursor position back to its original location which was under the mousedown

That is the reason setCursor appears to have no effect.

The question is how to overcome it?