BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

Scroll Jump when adding new Block

Open tyouwei opened this issue 10 months ago • 2 comments

Describe the bug When adding a new block directly before a large one, Blocknote's view will jump to the next available text cursor position instead of staying at its current scroll position. This can be slightly annoying for users adding consecutive files or images.

Somehow, this issue does not exist if we use the slash menu, it happens only when we use the '+' button

To Reproduce

  1. Add a very large image, or 2 large images consecutively
  2. Attempt to insert a new block right before the image blocks (must be a non-text based block)
  3. You will observe that the view automatically jumps to the end of the images (my observation is it always jumps to the next available text cursor

Misc

  • Node version: (whatever that blocknote's documentation is using)
  • Package manager: (whatever that blocknote's documentation is using)
  • Browser: Bug exists on Chrome and Edge
  • [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

https://github.com/user-attachments/assets/0096b5d8-9c19-47ae-8710-95e16f324c08

tyouwei avatar Mar 25 '25 07:03 tyouwei

Did some research and found out the issue seems to be in the insertOrUpdateBlock function defined in here: https://github.com/TypeCellOS/BlockNote/blob/main/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

if (
    Array.isArray(currentBlock.content) &&
    ((currentBlock.content.length === 1 &&
      isStyledTextInlineContent(currentBlock.content[0]) &&
      currentBlock.content[0].type === "text" &&
      currentBlock.content[0].text === "/") ||
      currentBlock.content.length === 0)
  ) {
    newBlock = editor.updateBlock(currentBlock, block);
    // We make sure to reset the cursor position to the new block as calling
    // `updateBlock` may move it out. This generally happens when the content
    // changes, or the update makes the block multi-column.
    editor.setTextCursorPosition(newBlock);
  } else {
    newBlock = editor.insertBlocks([block], currentBlock, "after")[0];
    editor.setTextCursorPosition(editor.getTextCursorPosition().nextBlock!);
  }

BlockNote really is setting the selection to the next content editable block rather than the newly created one

tyouwei avatar Mar 26 '25 03:03 tyouwei

Having the same issue here

lawrencenika avatar Mar 26 '25 04:03 lawrencenika