Skip to content

Cursor goes out of view when pressing enter on the last line of a document #2801

@Wqrld

Description

@Wqrld

What’s broken?

when pressing enter on the last line of a document, i expect the view to scroll with it. Instead the cursor goes out of frame until you start typing characters.

Reproducible on https://www.blocknotejs.org/examples/basic/minimal and LaSuite Docs

Interestingly, i can not reproduce on Tiptap's demo pages.

What did you expect to happen?

The page autoscrolls to keep up, ideally with a configurable margin.

Steps to reproduce

  1. hold enter until at the end of the document
  2. on the last line, type a word
  3. press enter
  4. cursor goes out of view
  5. start typing
  6. cursor returns to correct position

BlockNote version

No response

Environment

Firefox, LaSuite docs

Additional context

I have the following workaround, but this should really be done in blocknote itself

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
index 3f5dbef9..992578e4 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -225,6 +225,25 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       },
       uploadFile,
       schema: blockNoteSchema,
+      _tiptapOptions: {
+        editorProps: {
+          scrollMargin: { top: 0, right: 0, bottom: 72, left: 0 },
+        },
+        // BlockNote's splitBlock command (Enter on non-empty blocks) never calls
+        // tr.scrollIntoView(), so ProseMirror's scrollMargin doesn't fire for it.
+        // This ensures every transaction that moves the cursor triggers a scroll,
+        // letting ProseMirror's own scrollRectIntoView handle the margin uniformly.
+        onTransaction: ({ editor: tiptapEditor, transaction }) => {
+          if (
+            (transaction.docChanged || transaction.selectionSet) &&
+            !transaction.scrolledIntoView
+          ) {
+            tiptapEditor.view.dispatch(
+              tiptapEditor.view.state.tr.scrollIntoView(),
+            );
+          }
+        },
+      },
     },
     [
       aiExtension,

Videos

workaround:
https://github.com/user-attachments/assets/522c5b9a-167a-4176-9694-158b58fced21

original:
https://github.com/user-attachments/assets/095d6021-951f-4b8d-a004-d0f56ba339ad

Contribution

  • I'd be interested in contributing a fix for this issue

I can take a look but am not experience with blocknote|tiptap's code

Sponsor

  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs-triageIssue has not yet been reviewed or classified by maintainers.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions