Allow reordering blocks and proper grouping in the suggestion menu

[expiante]

It would be very useful to support reordering blocks within groups in the suggestion menu and improve how custom blocks are assigned to existing groups.

Current Limitations

1. Block Reordering Within Groups

• Blocks inside a group in the suggestion menu appear in a fixed order
• There is no way to rearrange blocks within the same/different groups
• As the number of blocks grows, this makes it harder to prioritize or organize commonly used blocks

2. Custom Block Grouping Behavior

• When creating a custom block and assigning it a group name (e.g. Headers):
  • A new group with the same name is created
  • The custom block is placed under this duplicate group
• It is currently not possible to:
  • Place a custom block under an existing built-in group
  • Reuse or extend predefined groups

Expected Behavior

• Allow blocks to be reordered within groups (either via configuration or API)
• When defining a custom block with a group name:
  • If a group with the same name already exists, reuse it
  • Do not create duplicate groups with identical names
• Provide a consistent and predictable grouping mechanism for both built-in and custom blocks

Why This Feature Is Useful

• Improves organization and discoverability as the block list grows
• Allows teams to prioritize frequently used blocks
• Prevents visual clutter caused by duplicate groups

This would greatly improve the scalability and maintainability of the suggestion menu for larger and more customized editor setups.

[nperez0111]

@expiante we do have support for this, we should have better documentation about it.

Here is an example of how to add additional elements to the slash menu:

BlockNote/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx

Lines 386 to 396 in ed2c337

	const getSlashMenuItems = useMemo(() => {
	return async (query: string) =>
	filterSuggestionItems(
	combineByGroup(
	getDefaultReactSlashMenuItems(editor),
	getPageBreakReactSlashMenuItems(editor),
	getMultiColumnSlashMenuItems(editor),
	),
	query,
	);
	}, [editor]);

The combineByGroup is what merges slash menu items by their group (fulfilling: "When defining a custom block with a group name" & the consistent grouping mechanism)
For re-ordering the items, the result of getDefaultReactSlashMenuItems is just an array, so you can choose to sort this in any way that you want, the key would be ideal for this.

[expiante]

Thank you very much @nperez0111
The combineByGroup function was really helpful in combining blocks with the same group name. Also, we could rearrange the blocks within the same/different groups with specific positioning. Thanks!

[woutervroege]

Closing this thread as the proposed enhancement is already available. Filed an issue specifically for the missing documentation here #2432.