How can I scroll the page to keep the input cursor in the middle of the screen?

[lumenwrites]

When the user writes a long document, TipTap editor grows taller until the text input cursor is at the very bottom of the screen, which is not very convenient. I'd like to scroll the page as the user types, to keep the cursor in the middle of the screen.

My guess is that I'd need to use something like document.getElementById('myID').scrollIntoView() to scroll the page, and I'd put this function into the onUpdate() function of tiptap, so that I could keep scrolling as the user types.

The problem is that I'd need to know the vertical position of the input cursor in order to scroll to it.

Can you help me to figure out how to find out this value?

[philippkuehn]

There is posAtCoords https://prosemirror.net/docs/ref/#view.EditorView.posAtCoords

Something like this can be a good starting point

const pos = editor.view.posAtCoords(editor.state.selection.from)

[spaceemotion]

I stumbled upon the same problem and attaching this event listener to the editor did the trick:

onUpdate(evt) {
  const { selection } = evt.editor.state;

  if (!selection.empty) {
    // Do not scroll into view when we're doing a mass update (e.g. underlining text)
    // We only want the scrolling to happen during actual user input
    return;
  }

  const viewportCoords = evt.editor.view.coordsAtPos(selection.from);
  const absoluteOffset = window.scrollY + viewportCoords.top;

  window.scrollTo(
    window.scrollX,
    absoluteOffset - (window.innerHeight / 2),
  );
},

[Philipinho]

While the solution above works, it makes the editor jump on initialization (at least with collaborative editing on) because of updates to the editor state.

Using the scrollThreshold and scrollMargin editorProps is the native Prosemirror way.

  const editor = useEditor(
    {
      extensions: [YOUR_TIPTAP_EXTENSIONS],
      editorProps: {
        scrollThreshold: 80,
        scrollMargin: 80,
      },
    },
  );

You can adjust the numbers as you please.

Refs:
https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold
https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin
https://discuss.prosemirror.net/t/how-to-keep-the-caret-at-a-distance-from-the-bottom-of-the-window/3281/3