Scroll to make the cursor at the first line

v6
1

I have code like this to scroll into selected line:

const { from: position } = doc.line(line);
view.dispatch({
  selection: { anchor: position, head: position },
  scrollIntoView: true
});
view.focus();

But when the content inside the editor is long, the cursor is at the bottom of the editor, and when the line is visible it don’t scroll at all.

How can I make it scroll to the selected line or one line before.

2

See the scrollIntoView effect. Generally, searching the reference guide for the thing you’re trying to do can be quicker than asking on the forum.

3

Documentation don’t have any search. I know that reference manual is a single page, but still it would be nice to have a search on main page. I recommend adding Algolia search. They offer free Open Source tier.

4

I just checked the docs, and it’s really hard to understand how to use this API: scrollIntoView is static method that return stateEffect. What should I do with this state effect?

5

Ok, found it. For future reference:

const { from: position } = doc.line(line);
view.focus();
view.dispatch({
  selection: { anchor: position, head: position },
  effects: [EditorView.scrollIntoView(position - 1, { y: 'start' })]
});

It’s not very clear from docs that this is how the API look like.

6

The reference guide does, though. Look below the table of content, left side of the page.

7

So it’s inaccessible if it’s only on one page. I can use CTRL+F on that page to find what I want. I don’t see the point of it in current form.