custom hinting function - how to understand the ranges?

I’m having a hard time wrapping my head around the custom hinting/autocomplete functionality.

Background: After the autocomplete option is picked, I want to shift the cursor a bit. For example, if autocompleting from <b to a full html tag <b> </b> I want to move the cursor inside of the tag.

Problem: This seems to require a custom hint function, that would replace the default functionality - but if I’m supposed to implement the cm.replaceRange myself, what’s the significance of the from and to attributes that I return from my hinting function?

CodeMirror.registerHelper('hint', 'supercool', function(cm, options) {
  var a = { text: [...], hint: function() { cm.replaceRange(...); cm.setCursor(...) } };
  return { list: [a], from: [...], to: [...] };

It doesn’t work if I omit those from/to, but I don’t fully understand how they are supposed to work with the custom hint function. Should my replaceRange be responsible for the from/to?

Sorry about the formatting, I don’t understand why it doesn’t indent.


from and to are used before a completion is even picked (for example to align the completion widget), and count for the whole list of completions, not a specific one. So yes, you have to always provide them.