Skip to content

docs: Slash menu item grouping & ordering (BLO-1009)#2700

Open
matthewlipski wants to merge 3 commits intomainfrom
docs-slash-menu-grouping-ordering
Open

docs: Slash menu item grouping & ordering (BLO-1009)#2700
matthewlipski wants to merge 3 commits intomainfrom
docs-slash-menu-grouping-ordering

Conversation

@matthewlipski
Copy link
Copy Markdown
Collaborator

@matthewlipski matthewlipski commented May 1, 2026

Summary

This PR adds docs for how to group & order slash menu items, as well as an example which includes only the "Basic blocks" & "Headings" groups, which are swapped around from the default ordering.

Closes #2432

Rationale

This functionality is supported, but it's not immediately clear to developers how to actually do it.

Changes

  • Added docs & example.

Impact

N/A

Testing

N/A

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

  • Documentation
    • Clarified Slash Menu behavior: display order follows returned array and adjacent items with the same group form labeled runs; added concrete examples showing filtering, insertion, and reordering techniques.
  • New Features
    • Added an interactive example/demo that filters and reorders Slash Menu groups (showing only Basic blocks and Headings) and updated the examples index and playground to surface it.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 1, 2026

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

Project Deployment Actions Updated (UTC)
blocknote Ready Ready Preview May 1, 2026 10:45am
blocknote-website Ready Ready Preview May 1, 2026 10:45am

Request Review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 1, 2026

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1e2ead7e-854a-4aae-a364-9cdda42b4d95

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds a docs clarification for Slash Menu item ordering and grouping, plus a new interactive example that filters and reorders default Slash Menu groups (shows “Basic blocks” and “Headings” with ordering control).

Changes

Cohort / File(s) Summary
Docs
docs/content/docs/react/components/suggestion-menus.mdx
Adds explicit explanation that displayed slash-menu order follows the returned getItems array and that group labels are formed only from adjacent items sharing the same group. Adds concrete getItems examples (filter/splice/reorder).
New example — metadata & entry
examples/03-ui-components/19-suggestion-menus-grouping-ordering/.bnexample.json, examples/03-ui-components/19-suggestion-menus-grouping-ordering/README.md, examples/03-ui-components/19-suggestion-menus-grouping-ordering/index.html, examples/03-ui-components/19-suggestion-menus-grouping-ordering/main.tsx
Introduces example metadata, README, HTML mount, and React entrypoint for the grouping/ordering demo.
New example — app & config
examples/03-ui-components/19-suggestion-menus-grouping-ordering/src/App.tsx, .../tsconfig.json, .../vite.config.ts, .../package.json
Adds demo app implementing BlockNote view with a custom getItems-based filter/reorder (showing “Basic blocks” and “Headings”), plus TypeScript, Vite config, and package manifest.
Playground index update
playground/src/examples.gen.tsx
Replaces the prior drag-n-drop example entry with the new suggestion-menus-grouping-ordering example and its readme/metadata in the examples index.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

Poem

🐇 I hopped through arrays with joyful cheer,

Groups snug together when they draw near,
I filtered, spliced, then swapped their tune,
Slash menus now dance beneath the moon 🌙,
Hooray — new examples make devs croon!

🚥 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
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 and specifically summarizes the main change: adding documentation and an example for slash menu item grouping and ordering functionality.
Description check ✅ Passed The PR description follows the template with all major sections completed (Summary, Rationale, Changes, Impact, Testing, Checklist, Additional Notes), providing clear context for documentation and example additions.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs-slash-menu-grouping-ordering

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.

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: 1

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

Inline comments:
In `@docs/content/docs/react/components/suggestion-menus.mdx`:
- Around line 106-109: The snippet assumes Heading 1 exists but findIndex can
return -1; update the logic around headingIndex (result of
getDefaultReactSlashMenuItems(...)) so you only call items.splice(headingIndex +
1, 0, insertHelloWorldItem(editor)) when headingIndex !== -1, and otherwise
append or insert the new item in a safe fallback location (e.g.,
items.push(insertHelloWorldItem(editor))) to avoid inserting at index 0
unexpectedly; reference getDefaultReactSlashMenuItems, headingIndex,
insertHelloWorldItem, and items.splice when making the change.
🪄 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: e92bdd3f-96bb-4b90-a0a7-36038e3c43d1

📥 Commits

Reviewing files that changed from the base of the PR and between c48abc8 and 30212d8.

📒 Files selected for processing (1)
  • docs/content/docs/react/components/suggestion-menus.mdx

Comment thread docs/content/docs/react/components/suggestion-menus.mdx
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 1, 2026

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 5fc0e97

@matthewlipski matthewlipski changed the title docs: Slash menu item grouping & ordering docs: Slash menu item grouping & ordering (BLO-1009) May 1, 2026
@matthewlipski matthewlipski requested a review from nperez0111 May 1, 2026 10:38
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: 1

🤖 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/03-ui-components/19-suggestion-menus-grouping-ordering/index.html`:
- Line 1: Add the HTML5 doctype declaration before the root <html> element to
prevent quirks mode; update the top of the file so the very first line is the
doctype declaration (<!DOCTYPE html>) placed immediately before the existing
<html lang="en"> tag.
🪄 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: db57bdae-3f9b-49fe-8ace-fd4c19e5094f

📥 Commits

Reviewing files that changed from the base of the PR and between 30212d8 and 6d6185a.

📒 Files selected for processing (10)
  • docs/content/docs/react/components/suggestion-menus.mdx
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/.bnexample.json
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/README.md
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/index.html
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/main.tsx
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/package.json
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/src/App.tsx
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/tsconfig.json
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/vite.config.ts
  • playground/src/examples.gen.tsx
✅ Files skipped from review due to trivial changes (6)
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/README.md
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/.bnexample.json
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/vite.config.ts
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/main.tsx
  • docs/content/docs/react/components/suggestion-menus.mdx
  • examples/03-ui-components/19-suggestion-menus-grouping-ordering/tsconfig.json

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.

Documentation does not explain how to group and reorder items in the slash menu

2 participants