Share a toolbar across multiple editor instances?


Is there any way to make a toolbar shared across multiple editor instances?

Our document structure is quite complicated and we probably won’t be able to implement this with a custom Schema. So, we will have to mix editable parts with our custom logic parts. When users wants to edit an editable block (handled by ProseMirror), we want to show a toolbar at the top of the page (like Google Docs or Word).


We need to do the same thing. We haven’t actually implemented it yet, but it looks like it could be done in css by hiding the unfocused instance’s menu:

.ProseMirror-menubar {
  /* your positioning */
  display: none;
.ProseMirror-focused .ProseMirror-menubar {
  display: block;

(Would also hide bar when all instances unfocused.)


Thanks! In this case toolbar will be shown in a focused editor instance but not in one place on the page. Probably it’s possible to position it somehow to pin it to one place but still not an ideal solution.


You can probably implement your own menu fixed wrapper (reusing all the code in menu/menu.js) in a handful of lines of code – copy menubar.js, and strip out all of the positioning-specific code, and you should be left with a very simple skeleton of a menu renderer.