Share a toolbar across multiple editor instances?

1

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).

1 Like
2

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.)

3

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.

4

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.

1 Like