CodeMirror - Is it possible to scroll to a line so that it is in the middle of window?

Question

I'm highlighting lines of HTML code in CodeMirror and I want to add an anchor that scroll CodeMirror editor to a given line.

I can scroll to a line X via setCursor method. But I would like to have the line X in the middle of CodeMirror window. Can I do that? I studied the API and demos but with no luck.

Thanks!

Answer 1

You want https://codemirror.net/doc/manual.html#scrollIntoView

Notice the optional margin parameter which should do what you want:

cm.scrollIntoView(what: {line, ch}|{left, top, right, bottom}|{from, to}|null, ?margin: number)

Your code would be something like:

cm.scrollIntoView({line:50, char:5}, 200)

Answer 2

This one should work:

var editor = CodeMirror.fromTextArea(...);

function jumpToLine(i) { 
    var t = editor.charCoords({line: i, ch: 0}, "local").top; 
    var middleHeight = editor.getScrollerElement().offsetHeight / 2; 
    editor.scrollTo(null, t - middleHeight - 5); 
} 

Answer 3

It is very simple.

Init:

var editor = CodeMirror.fromTextArea(...);

If you want current position to set it later, you can use

editor.getScrollInfo();

It returns an JavaScript object:

{
  "left": 0,
  "top": 0,
  "height": 500,
  "width": 500,
  "clientHeight": 300,
  "clientWidth": 200
} 

now you can set set editor scroll position using:

editor.scrollTo(left,top);