Skip to content

fix: Formatting toolbar opening when inserting file block with trailingBlock: false (BLO-860)#2704

Open
matthewlipski wants to merge 1 commit intomainfrom
trailing-block-file-insert
Open

fix: Formatting toolbar opening when inserting file block with trailingBlock: false (BLO-860)#2704
matthewlipski wants to merge 1 commit intomainfrom
trailing-block-file-insert

Conversation

@matthewlipski
Copy link
Copy Markdown
Collaborator

@matthewlipski matthewlipski commented May 4, 2026

Summary

This PR fixes a minor issue that can occur when a file block is inserted via the slash menu when the trailingBlock editor option is set to false.

Normally, after inserting the block, the slash menu command will then move the selection to the next block with inline content. When trailingBlock is set to true, we can guarantee that there will be such a block at the end of the document.

When trailingBlock is set to false, however, this is not the case. So when the inserted file block is at the end of the document, the selection is set to it instead, so the formatting toolbar opens under the file panel.

Closes #884

Rationale

While minor, this is an issue that harms UX.

Changes

  • Made formatting toolbar close immediately for each slash menu item that inserts a file block.

Impact

N/A

Testing

Added e2e test and an example for it.

Screenshots/Video

N/A

Checklist

  • Code follows the project's coding standards.
  • Unit tests covering the new feature have been added.
  • All existing tests pass.
  • The documentation has been updated to reflect the new feature

Additional Notes

N/A

Summary by CodeRabbit

  • New Features
    • Added a new example demonstrating how to disable automatic trailing blocks in the editor
    • Formatting toolbar now hides when inserting media (images, videos, audio, files) through slash menu commands

@vercel
Copy link
Copy Markdown

vercel Bot commented May 4, 2026

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

Project Deployment Actions Updated (UTC)
blocknote Ready Ready Preview May 4, 2026 4:21pm
blocknote-website Ready Ready Preview May 4, 2026 4:21pm

Request Review

@matthewlipski matthewlipski requested a review from nperez0111 May 4, 2026 16:21
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 4, 2026

📝 Walkthrough

Walkthrough

This PR adds a new example demonstrating the trailingBlock: false editor option to disable automatic trailing block creation. It includes a complete example project and fixes a bug where the formatting toolbar remained open after inserting media blocks via slash menu when trailing block is disabled.

Changes

No Trailing Block Example and Toolbar Fix

Layer / File(s) Summary
Example Configuration
examples/01-basic/17-no-trailing-block/.bnexample.json, examples/01-basic/17-no-trailing-block/package.json, examples/01-basic/17-no-trailing-block/tsconfig.json, examples/01-basic/17-no-trailing-block/vite.config.ts
Boilerplate configuration for a new example project with auto-generated metadata, package dependencies pinning BlockNote to latest and React/Mantine to specific versions, TypeScript settings with local dev references, and Vite build configuration.
Example Application
examples/01-basic/17-no-trailing-block/index.html, examples/01-basic/17-no-trailing-block/main.tsx, examples/01-basic/17-no-trailing-block/src/App.tsx, examples/01-basic/17-no-trailing-block/README.md
Entry point, React bootstrap, and App component that instantiates BlockNote editor with trailingBlock: false to demonstrate disabling automatic trailing blocks; README documents the feature.
Toolbar Hiding Logic
packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
After inserting media blocks (image, video, audio, file) via slash menu, formatting toolbar is now explicitly hidden by calling FormattingToolbarExtension?.store.setState(false).
Playground Integration
playground/src/examples.gen.tsx
New "No Trailing Block" example entry added to the exported examples constant under the basic category with slug, path, and configuration metadata.
Tests and Test Constants
tests/src/utils/const.ts, tests/src/end-to-end/images/images.test.ts
Added NO_TRAILING_BLOCK_URL constant for the new example URL; refactored image tests from shared beforeEach navigation to per-test page.goto() calls; added new test verifying file panel opens and formatting toolbar remains hidden when inserting image with trailingBlock: false.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • nperez0111

Poem

A trailing block no more shall be,
When set to false, the editor's free! 🐰
The toolbar hides when media flows,
Through slash commands the image goes.
Hop on in—new example shows! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title clearly and specifically describes the bug being fixed: formatting toolbar opening incorrectly when inserting file blocks with trailingBlock disabled.
Linked Issues check ✅ Passed The PR successfully addresses issue #884 by fixing the formatting toolbar behavior when inserting file blocks with trailingBlock disabled, matching the linked issue's objective.
Out of Scope Changes check ✅ Passed All changes directly support the fix: toolbar closing logic [getDefaultSlashMenuItems], new example demonstrating the feature, e2e test validating behavior, and supporting configuration files.
Description check ✅ Passed The pull request description follows the required template with all major sections properly completed including Summary, Rationale, Changes, Impact, Testing, and Checklist.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch trailing-block-file-insert

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 4, 2026

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 46f6550

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@examples/01-basic/17-no-trailing-block/index.html`:
- Line 1: Add the HTML5 doctype declaration before the existing <html> tag:
insert <!doctype html> as the very first line so the document doesn’t trigger
quirks mode and is parsed in standards mode; ensure it precedes the existing
<html lang="en"> line.

In `@examples/01-basic/17-no-trailing-block/main.tsx`:
- Line 4: The import in main.tsx references a non-existent ./src/App.jsx; update
the import statement (the top-level import that brings in App) to point to the
existing ./src/App.tsx (e.g., import App from "./src/App.tsx" or simply
"./src/App") so the TypeScript build (allowJs: false) resolves the correct file
and the App symbol is imported from the actual file.

In `@examples/01-basic/17-no-trailing-block/vite.config.ts`:
- Around line 16-29: The package alias paths and the existence check are one
directory too shallow: update the fs.existsSync path.resolve call that checks
for "packages/core/src" (used with conf.command) and the alias targets for
"@blocknote/core" and "@blocknote/react" so they use "../../../packages/..."
instead of "../../packages/..."; locate the conditional that uses conf.command,
fs.existsSync(path.resolve(__dirname, "...")) and the alias object with keys
"@blocknote/core" and "@blocknote/react" and change the "../../packages/..."
occurrences to "../../../packages/...".
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 82c9e44d-3169-49b5-adf6-886bfdb36a68

📥 Commits

Reviewing files that changed from the base of the PR and between d8c6b78 and 46f6550.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (12)
  • examples/01-basic/17-no-trailing-block/.bnexample.json
  • examples/01-basic/17-no-trailing-block/README.md
  • examples/01-basic/17-no-trailing-block/index.html
  • examples/01-basic/17-no-trailing-block/main.tsx
  • examples/01-basic/17-no-trailing-block/package.json
  • examples/01-basic/17-no-trailing-block/src/App.tsx
  • examples/01-basic/17-no-trailing-block/tsconfig.json
  • examples/01-basic/17-no-trailing-block/vite.config.ts
  • packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
  • playground/src/examples.gen.tsx
  • tests/src/end-to-end/images/images.test.ts
  • tests/src/utils/const.ts

Comment thread examples/01-basic/17-no-trailing-block/index.html
Comment thread examples/01-basic/17-no-trailing-block/main.tsx
Comment thread examples/01-basic/17-no-trailing-block/vite.config.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Inserting Image block will fail when used with trailingBlock: false

1 participant