[CRITICAL] Fix: Infinite render loop when selecting all content (Ctrl+A / Cmd+A)

[Hector-Zhuang]

Reproduction Steps

Select all content manually, or use the shortcut Ctrl+A / Cmd+A.

The editor enters an infinite render loop and eventually crashes the page.

Root Cause

In the FormattingToolbarView update event handler, the logic attempts to check the selection boundary to determine whether the formatting toolbar is rendered.
If the toolbar isn’t rendered, it forces the view to update.

When all content is selected, posToDOMRect (from Tiptap) reports a selection width of 0.
This results in the handler continuously scheduling forced updates, creating an infinite render loop.

// Why width = 0?
| <- Start (left = 0, right = 0)
Content Content Content Content
| <- End (left = 0, right = 0)

const width = right - left; // width = 0

#965
#1908

[vercel]

@Hector-Zhuang is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[Hector-Zhuang]

@matthewlipski

I think the update handler is firing too frequently right now, which could become a performance bottleneck. Would there be a better approach to handle this? For example, could we leverage something like useEffect inside createReactBlockSpec or other custom element APIs to trigger the format bar update in a more controlled way?

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: bc18402

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
blocknote	Ready	Preview	Aug 25, 2025 8:16am

[nperez0111]

Thanks @Hector-Zhuang this does indeed resolve the issue.

@matthewlipski can you take @Hector-Zhuang's feedback & either track it in another issue or PR. There is definitely some valid stuff in there, but I want to make a release today, so I'll take the current change as is

[matthewlipski]

@matthewlipski

I think the update handler is firing too frequently right now, which could become a performance bottleneck. Would there be a better approach to handle this? For example, could we leverage something like useEffect inside createReactBlockSpec or other custom element APIs to trigger the format bar update in a more controlled way?

I think you're right in that update runs too often, as it gets called on each transaction made to the editor, whereas we are only looking for selection changes for the formatting toolbar. However, I don't think this has a meaningful impact on performance, as checking whether the selection has changed is relatively inexpensive. More expensive methods like shouldShow and getSelectionBoundingBox are only called when necessary.

We are planning to at some point (likely within the next few months) refactor how we handle UI element state, since the current system is pretty convoluted. For that, it's definitely a good suggestion to have better React integration, with hooks to manage the state things like the formatting toolbar. I'll reference this PR in the internal ticket we have for that👍