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	✅ Ready (Inspect)	Visit Preview	May 23, 2025 7:31pm
blocknote-website	❌ Failed (Inspect)		May 23, 2025 7:31pm

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/server-util

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

@blocknote/react

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

@blocknote/shadcn

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 0d4af93

[nperez0111]

Let's also explicitly set the overflow to show. There are many CSS resets out there so if you rely on a default behavior it may not work in some projects.