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
- hold enter until at the end of the document
- on the last line, type a word
- press enter
- cursor goes out of view
- start typing
- 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 can take a look but am not experience with blocknote|tiptap's code
Sponsor
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
BlockNote version
No response
Environment
Firefox, LaSuite docs
Additional context
I have the following workaround, but this should really be done in blocknote itself
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 can take a look but am not experience with blocknote|tiptap's code
Sponsor