fix: Selection clicking editor padding

[matthewlipski]

Problem

In Chrome, clicking the editor padding on the right side of a list item block moves the selection to the block's start instead of end. This is because the list item indicators are displayed using a :before pseudo-element, which Chrome seems to prioritize over the block content element, despite it being closer to the cursor.

This ProseMirror discussion has some more information on the issue.

Solution

This PR makes the :before elements for list item indicators have a height of 0, which fixes the issue in Chrome. The elements are positioned exactly as they were before as the element's overflow is visible, and some additional rules have been added to fix the alignment that was broken from the height change.

Before:

Screen.Recording.2025-05-23.at.21.22.08.mov

After:

Screen.Recording.2025-05-23.at.21.27.16.mov

Caveats

Feels slightly hacky, but don't think it should cause any issues.

Alternatives tried

Using display: inline instead of flexbox: Added a space to the server rendered editor that couldn't be removed without hacks. Also caused an issue when the block was empty on Firefox. See this comment for both of these.

Custom selection handling logic: Was overly complex and somewhat hacky.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	🛑 Canceled (Inspect)		Jun 12, 2025 0:08am
blocknote-website	✅ Ready (Inspect)	Visit Preview	Jun 12, 2025 0:08am

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1717

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1717

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1717

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1717

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1717

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1717

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1717

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@1717

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1717

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1717

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1717

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1717

commit: 570ae75