Customizing menubar


Could anyone point to a correct direction to customize the menubar?

I figured out that maybe one can

  • Create ProseMirror instance pm
  • Call commandGroups(pm) from menu module to extract the default commands
  • Filter out commands from this list which you don’t want to display
  • Call pm.setOption() to reset menuBar

Did not test this theory yet - just want to confirm if I am heading to right direction.

1 Like

That should work, yes. (It might have been less work to test that than to post here.)

This is still quite awkward, and I’m going to add an easier way hide individual menu items at some point.

1 Like

Yep I was suspecting it’s not officially there yet. I am also working on something beta, so I am using this just to demostrate the functionality of the editor.


With the latest update setting menu items using setOption is no longer possible… hope we could figure out a good API for that.

With the latest commits, you can go about it in two ways. If you just want to make a minor change from the default menu, you can add your own commands using defineCommand, and giving them a menuGroup property. To remove default menu items, you can use the commands option, something like this:

commands: {
  "schema:bullet_list:wrap": {menuGroup: null}

To completely replace the content of the menu, you can either switch it over to a new set of menu groups, using the groups: ["mygroup"] config option, or directly give a set of command names using items: ["command1", "command2"].


Is this still valid ?

Not in the current git code. See

Could you please write a little snippet showing how to make a custom menubar with some built-in and custom commands ?

Have a look at this