fix(math-block): open math previews on the first click (BLO-1372)

[nperez0111]

This fixes the issue where it would take 2 clicks to open up the math block preview. We've added a regression test for this.

The same preview DOM preservation applies to inline math, with an active inline regression test. Selection changes no longer replace unchanged KaTeX elements between mouse-down and click.

Preview here

BLO-1372

Tests: vp test --run src/block/createReactMathBlockSpec.test.tsx src/inlineContent/createReactMathInlineContentSpec.test.tsx (23 passed, 10 skipped); vp check on the five changed files.

Summary by CodeRabbit

• Bug Fixes
  • Fixed an issue where selecting a math block or inline formula could interrupt a subsequent click. The formula preview now remains available, and clicking it opens the source popup as expected.

[vercel]

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

Project	Deployment	Actions	Updated
blocknote	Ready	Preview	Sep 25, 2026 12:08pm UTC
blocknote-website	Ready	Preview	Sep 25, 2026 12:08pm UTC

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: c62ab5e4-cb8d-4792-8626-949efd898cf0

📥 Commits

Reviewing files that changed from the base of the PR and between a79dd49 and 84ca973.

📒 Files selected for processing (5)

• packages/math-block/src/block/createReactMathBlockSpec.test.tsx
• packages/math-block/src/block/helpers/render/MathBlockPreviewWithPopup.tsx
• packages/math-block/src/helpers/render/MathPreview.tsx
• packages/math-block/src/inlineContent/createReactMathInlineContentSpec.test.tsx
• packages/math-block/src/inlineContent/helpers/render/MathInlinePreviewWithPopup.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

Block and inline math previews now render through a shared memoized component. Regression tests check that preview elements remain mounted during selection and that clicking opens the source popup.

Changes

Math preview rendering

Layer / File(s)	Summary
Shared MathML preview rendering packages/math-block/src/helpers/render/MathPreview.tsx, packages/math-block/src/block/helpers/render/MathBlockPreviewWithPopup.tsx, packages/math-block/src/inlineContent/helpers/render/MathInlinePreviewWithPopup.tsx	A memoized MathPreview component renders supplied HTML. Block and inline previews use it when their MathML strings are non-empty.
Selection and popup regression tests packages/math-block/src/block/createReactMathBlockSpec.test.tsx, packages/math-block/src/inlineContent/createReactMathInlineContentSpec.test.tsx	Tests check that preview elements remain mounted across selection and that a subsequent click opens the source popup.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 84ca9

No actionable issue is identified with the math-preview change; it is ready to merge after normal checks.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 5…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly identifies the fix: math previews now open on the first click.
Description check	✅ Passed	The description explains the defect, the inline-math scope, the regression tests, the preview deployment, and validation results. It does not reproduce the template headings or checklist, but it conta…

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit checks the math display,
The preview stays through clicks and play.
A formula holds its place just right,
The source popup opens into sight.
Then bunny hops away at night.}

_{Comment @coderabbitai help to get the list of available commands.}

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/diagram-block

npm i https://pkg.pr.new/@blocknote/diagram-block@3129

@blocknote/mantine

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

@blocknote/math-block

npm i https://pkg.pr.new/@blocknote/math-block@3129

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@3129

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@3129

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

@blocknote/xl-typst-exporter

npm i https://pkg.pr.new/@blocknote/xl-typst-exporter@3129

commit: 84ca973

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-09-28 11:41 UTC

[YousefED]

nice