Customized SlashMenuItems are not selected correctly when selected with the keyboard

[hyuckkim]

Describe the bug
My team made two custom blocks and insert to slash menu.

slashMenuItems: [
      ...getDefaultReactSlashMenuItems(),
      insertCheckBoxBlock,
      insertChartBlock,
    ],

insertCheckBoxBlock's group is "Work", and insertChartBlock's group is "Media".
like that:

As long as I selected everything with the mouse, there was no problems, but with keyboard, it insert incorrect thing.

I can work around this temporarily by matching the values in your code to the visible values.
like this:

slashMenuItems: [
      ...getDefaultReactSlashMenuItems(),
      insertChartBlock,
      insertCheckBoxBlock,
    ],

However, I am reporting this because it seems clear that this was not intended.

To Reproduce

1. Make some SlashMenuItem. Group must be "Headings".
   like that:

export const testBlock: ReactSlashMenuItem<
  BlockSchemaWithBlock<"test", typeof CheckBoxBlockSpec.config>
> = {
  name: "test",
  execute: () => {},
  group: "Headings",
  icon: <div />,
}

2. Insert the Item to slashMenutems.
   like that:

    slashMenuItems: [
      ...getDefaultReactSlashMenuItems(),
      testBlock,
    ],

3. Move to browser editor and add some 'basic blocks' by slash menu with 'keyboard'.
   

Misc

• Node version: v21.5.0
• Package manager: npm 10.2.4
• Browser: edge 121.0.2277.83, but I seems it is not important.
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[matthewlipski]

Yep, the slash menu item ordering is indeed a bit wonky atm. We're going through a major overhaul of how the slash menu works to make it easier to add your own suggestion menus like mentions, so we're planning to fix issues like this there (#534 ).