Problems letting menubar stay at top

1

I have two related questions regarding menu bars.

First, what do you mean by union in case of JavaScript? I see it mentioned in the documentation and used in an example, where the syntax is

menuBar: {
  float: true,
  content: [[inlineGroup, insertMenu], [blockGroup,textblockMenu],alignGroup,[contentInsertMenu,questionInsertMenu],historyGroup]	 
}

but there’s no boolean value before the object.

However, when I use that syntax (or the setOption equivalent like it is used in the basic example), I can’t get the menu bar stay at the top of the window when scrolling it out of sight. I can see in menu/menubar.js that there is code to fixing the menu bar at the top, but one way or another, it isn’t triggered in my case.

My basic test case looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>ProseMirror test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      p {
        margin-top: 1em;
      }
      #editor {
        height: 200px;
        overflow-y: auto;
      }
      #dump {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="editor"></div>
    <button id="loghtml">Log</button><br />
    <textarea id="dump" rows="20"></textarea>
    <script src="main_bundle.js"></script>
  </body>
</html>

function _(id) {
  if (id) {
    return document.getElementById(id);
  }
}
var prosemirror = require('prosemirror');
require("prosemirror/dist/menu/menubar");
var editor = new prosemirror.ProseMirror({
  place: _('editor'),
  menuBar: {float: true}
});
_('loghtml').addEventListener('click', function () {
  var html = editor.getContent('html');
  html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  _('dump').innerHTML = html;
}, false);

Where’s the error?

2

I now see that the problem was with setting a height to #editor. This changes the second question to: is there a way to let the menu bar stay at the top of the div, no matter whether the div itself is scrolled out of sight? I’d like to have multiple instances of ProseMirror on a page containing multiple divs with a set height. I can have a look at the source code of menubar.js and try to achieve this myself (and file a pull request), but I’m still very new to ProseMirror.

The first question still stands: what do you mean by a union?

3

And I shouldn’t have tried this at night, because of course the solution to the second question is rather simple: instead of setting properties to the outside div, I should set them to

.ProseMirror-content {
  height: 200px;
  overflow-y: auto;
}

Now everything works as expected. Only the union question remains.

4

A “union type” is simply a type that contains all values of several different types. I.e. if a function accepts both numbers and strings, you could say that its argument type is the union of the number and string types.