prosemirror-menu 1.2.4 → 1.2.5

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.2.5 (2025-04-22)
+
+### Bug fixes
+
+Make sure the menu is re-rendered when the editor's root changes, so that it doesn't reference icons whose SVG lives in another root.
+
 ## 1.2.4 (2023-08-20)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1,54 +1,37 @@
 'use strict';
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var crel = require('crelt');
-
 var prosemirrorCommands = require('prosemirror-commands');
-
 var prosemirrorHistory = require('prosemirror-history');
-
 var prosemirrorState = require('prosemirror-state');
-
 var SVG = "http://www.w3.org/2000/svg";
 var XLINK = "http://www.w3.org/1999/xlink";
 var prefix$2 = "ProseMirror-icon";
-
 function hashPath(path) {
   var hash = 0;
-
-  for (var i = 0; i < path.length; i++) {
-    hash = (hash << 5) - hash + path.charCodeAt(i) | 0;
-  }
-
+  for (var i = 0; i < path.length; i++) hash = (hash << 5) - hash + path.charCodeAt(i) | 0;
   return hash;
 }
-
 function getIcon(root, icon) {
   var doc = (root.nodeType == 9 ? root : root.ownerDocument) || document;
   var node = doc.createElement("div");
   node.className = prefix$2;
-
   if (icon.path) {
     var path = icon.path,
-        width = icon.width,
-        height = icon.height;
+      width = icon.width,
+      height = icon.height;
     var name = "pm-icon-" + hashPath(path).toString(16);
     if (!doc.getElementById(name)) buildSVG(root, name, icon);
     var svg = node.appendChild(doc.createElementNS(SVG, "svg"));
@@ -59,29 +42,24 @@ function getIcon(root, icon) {
     node.appendChild(icon.dom.cloneNode(true));
   } else {
     var text = icon.text,
-        css = icon.css;
+      css = icon.css;
     node.appendChild(doc.createElement("span")).textContent = text || '';
     if (css) node.firstChild.style.cssText = css;
   }
-
   return node;
 }
-
 function buildSVG(root, name, data) {
   var _ref = root.nodeType == 9 ? [root, root.body] : [root.ownerDocument || document, root],
-      _ref2 = _slicedToArray(_ref, 2),
-      doc = _ref2[0],
-      top = _ref2[1];
-
+    _ref2 = _slicedToArray(_ref, 2),
+    doc = _ref2[0],
+    top = _ref2[1];
   var collection = doc.getElementById(prefix$2 + "-collection");
-
   if (!collection) {
     collection = doc.createElementNS(SVG, "svg");
     collection.id = prefix$2 + "-collection";
     collection.style.display = "none";
     top.insertBefore(collection, top.firstChild);
   }
-
   var sym = doc.createElementNS(SVG, "symbol");
   sym.id = name;
   sym.setAttribute("viewBox", "0 0 " + data.width + " " + data.height);
@@ -89,101 +67,79 @@ function buildSVG(root, name, data) {
   path.setAttribute("d", data.path);
   collection.appendChild(sym);
 }
-
 var prefix$1 = "ProseMirror-menu";
-
 var MenuItem = function () {
   function MenuItem(spec) {
     _classCallCheck(this, MenuItem);
-
     this.spec = spec;
   }
-
   _createClass(MenuItem, [{
     key: "render",
     value: function render(view) {
       var spec = this.spec;
       var dom = spec.render ? spec.render(view) : spec.icon ? getIcon(view.root, spec.icon) : spec.label ? crel("div", null, translate(view, spec.label)) : null;
       if (!dom) throw new RangeError("MenuItem without icon or label property");
-
       if (spec.title) {
         var title = typeof spec.title === "function" ? spec.title(view.state) : spec.title;
         dom.setAttribute("title", translate(view, title));
       }
-
       if (spec["class"]) dom.classList.add(spec["class"]);
       if (spec.css) dom.style.cssText += spec.css;
       dom.addEventListener("mousedown", function (e) {
         e.preventDefault();
         if (!dom.classList.contains(prefix$1 + "-disabled")) spec.run(view.state, view.dispatch, view, e);
       });
-
       function update(state) {
         if (spec.select) {
           var selected = spec.select(state);
           dom.style.display = selected ? "" : "none";
           if (!selected) return false;
         }
-
         var enabled = true;
-
         if (spec.enable) {
           enabled = spec.enable(state) || false;
           setClass(dom, prefix$1 + "-disabled", !enabled);
         }
-
         if (spec.active) {
           var active = enabled && spec.active(state) || false;
           setClass(dom, prefix$1 + "-active", active);
         }
-
         return true;
       }
-
       return {
         dom: dom,
         update: update
       };
     }
   }]);
-
   return MenuItem;
 }();
-
 function translate(view, text) {
   return view._props.translate ? view._props.translate(text) : text;
 }
-
 var lastMenuEvent = {
   time: 0,
   node: null
 };
-
 function markMenuEvent(e) {
   lastMenuEvent.time = Date.now();
   lastMenuEvent.node = e.target;
 }
-
 function isMenuEvent(wrapper) {
   return Date.now() - 100 < lastMenuEvent.time && lastMenuEvent.node && wrapper.contains(lastMenuEvent.node);
 }
-
 var Dropdown = function () {
   function Dropdown(content) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
     _classCallCheck(this, Dropdown);
-
     this.options = options;
     this.options = options || {};
     this.content = Array.isArray(content) ? content : [content];
   }
-
   _createClass(Dropdown, [{
     key: "render",
     value: function render(view) {
       var _this = this;
-
       var content = renderDropdownItems(this.content, view);
       var win = view.dom.ownerDocument.defaultView || window;
       var label = crel("div", {
@@ -196,18 +152,15 @@ var Dropdown = function () {
       }, label);
       var open = null;
       var listeningOnClose = null;
-
       var close = function close() {
         if (open && open.close()) {
           open = null;
           win.removeEventListener("mousedown", listeningOnClose);
         }
       };
-
       label.addEventListener("mousedown", function (e) {
         e.preventDefault();
         markMenuEvent(e);
-
         if (open) {
           close();
         } else {
@@ -217,13 +170,11 @@ var Dropdown = function () {
           });
         }
       });
-
       function update(state) {
         var inner = content.update(state);
         wrap.style.display = inner ? "" : "none";
         return inner;
       }
-
       return {
         dom: wrap,
         update: update
@@ -236,14 +187,12 @@ var Dropdown = function () {
         "class": prefix$1 + "-dropdown-menu " + (this.options["class"] || "")
       }, items);
       var done = false;
-
       function close() {
         if (done) return false;
         done = true;
         dom.removeChild(menuDOM);
         return true;
       }
-
       dom.appendChild(menuDOM);
       return {
         close: close,
@@ -251,55 +200,43 @@ var Dropdown = function () {
       };
     }
   }]);
-
   return Dropdown;
 }();
-
 function renderDropdownItems(items, view) {
   var rendered = [],
-      updates = [];
-
+    updates = [];
   for (var i = 0; i < items.length; i++) {
     var _items$i$render = items[i].render(view),
-        dom = _items$i$render.dom,
-        update = _items$i$render.update;
-
+      dom = _items$i$render.dom,
+      update = _items$i$render.update;
     rendered.push(crel("div", {
       "class": prefix$1 + "-dropdown-item"
     }, dom));
     updates.push(update);
   }
-
   return {
     dom: rendered,
     update: combineUpdates(updates, rendered)
   };
 }
-
 function combineUpdates(updates, nodes) {
   return function (state) {
     var something = false;
-
     for (var i = 0; i < updates.length; i++) {
       var up = updates[i](state);
       nodes[i].style.display = up ? "" : "none";
       if (up) something = true;
     }
-
     return something;
   };
 }
-
 var DropdownSubmenu = function () {
   function DropdownSubmenu(content) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
     _classCallCheck(this, DropdownSubmenu);
-
     this.options = options;
     this.content = Array.isArray(content) ? content : [content];
   }
-
   _createClass(DropdownSubmenu, [{
     key: "render",
     value: function render(view) {
@@ -326,38 +263,31 @@ var DropdownSubmenu = function () {
           }
         });
       });
-
       function update(state) {
         var inner = items.update(state);
         wrap.style.display = inner ? "" : "none";
         return inner;
       }
-
       return {
         dom: wrap,
         update: update
       };
     }
   }]);
-
   return DropdownSubmenu;
 }();
-
 function renderGrouped(view, content) {
   var result = document.createDocumentFragment();
   var updates = [],
-      separators = [];
-
+    separators = [];
   for (var i = 0; i < content.length; i++) {
     var items = content[i],
-        localUpdates = [],
-        localNodes = [];
-
+      localUpdates = [],
+      localNodes = [];
     for (var j = 0; j < items.length; j++) {
       var _items$j$render = items[j].render(view),
-          dom = _items$j$render.dom,
-          _update = _items$j$render.update;
-
+        dom = _items$j$render.dom,
+        _update = _items$j$render.update;
       var span = crel("span", {
         "class": prefix$1 + "item"
       }, dom);
@@ -365,40 +295,32 @@ function renderGrouped(view, content) {
       localNodes.push(span);
       localUpdates.push(_update);
     }
-
     if (localUpdates.length) {
       updates.push(combineUpdates(localUpdates, localNodes));
       if (i < content.length - 1) separators.push(result.appendChild(separator()));
     }
   }
-
   function update(state) {
     var something = false,
-        needSep = false;
-
-    for (var _i2 = 0; _i2 < updates.length; _i2++) {
-      var hasContent = updates[_i2](state);
-
-      if (_i2) separators[_i2 - 1].style.display = needSep && hasContent ? "" : "none";
+      needSep = false;
+    for (var _i = 0; _i < updates.length; _i++) {
+      var hasContent = updates[_i](state);
+      if (_i) separators[_i - 1].style.display = needSep && hasContent ? "" : "none";
       needSep = hasContent;
       if (hasContent) something = true;
     }
-
     return something;
   }
-
   return {
     dom: result,
     update: update
   };
 }
-
 function separator() {
   return crel("span", {
     "class": prefix$1 + "separator"
   });
 }
-
 var icons = {
   join: {
     width: 800,
@@ -500,7 +422,6 @@ var redoItem = new MenuItem({
   },
   icon: icons.redo
 });
-
 function wrapItem(nodeType, options) {
   var passedOptions = {
     run: function run(state, dispatch) {
@@ -510,14 +431,9 @@ function wrapItem(nodeType, options) {
       return prosemirrorCommands.wrapIn(nodeType, options.attrs)(state);
     }
   };
-
-  for (var prop in options) {
-    passedOptions[prop] = options[prop];
-  }
-
+  for (var prop in options) passedOptions[prop] = options[prop];
   return new MenuItem(passedOptions);
 }
-
 function blockTypeItem(nodeType, options) {
   var command = prosemirrorCommands.setBlockType(nodeType, options.attrs);
   var passedOptions = {
@@ -527,33 +443,25 @@ function blockTypeItem(nodeType, options) {
     },
     active: function active(state) {
       var _state$selection = state.selection,
-          $from = _state$selection.$from,
-          to = _state$selection.to,
-          node = _state$selection.node;
+        $from = _state$selection.$from,
+        to = _state$selection.to,
+        node = _state$selection.node;
       if (node) return node.hasMarkup(nodeType, options.attrs);
       return to <= $from.end() && $from.parent.hasMarkup(nodeType, options.attrs);
     }
   };
-
-  for (var prop in options) {
-    passedOptions[prop] = options[prop];
-  }
-
+  for (var prop in options) passedOptions[prop] = options[prop];
   return new MenuItem(passedOptions);
 }
-
 function setClass(dom, cls, on) {
   if (on) dom.classList.add(cls);else dom.classList.remove(cls);
 }
-
 var prefix = "ProseMirror-menubar";
-
 function isIOS() {
   if (typeof navigator == "undefined") return false;
   var agent = navigator.userAgent;
   return !/Edge\/\d/.test(agent) && /AppleWebKit/.test(agent) && /Mobile\/\w+/.test(agent);
 }
-
 function menuBar(options) {
   return new prosemirrorState.Plugin({
     view: function view(editorView) {
@@ -561,13 +469,10 @@ function menuBar(options) {
     }
   });
 }
-
 var MenuBarView = function () {
   function MenuBarView(editorView, options) {
     var _this2 = this;
-
     _classCallCheck(this, MenuBarView);
-
     this.editorView = editorView;
     this.options = options;
     this.spacer = null;
@@ -575,6 +480,7 @@ var MenuBarView = function () {
     this.widthForMaxHeight = 0;
     this.floating = false;
     this.scrollHandler = null;
+    this.root = editorView.root;
     this.wrapper = crel("div", {
       "class": prefix + "-wrapper"
     });
@@ -584,37 +490,38 @@ var MenuBarView = function () {
     this.menu.className = prefix;
     if (editorView.dom.parentNode) editorView.dom.parentNode.replaceChild(this.wrapper, editorView.dom);
     this.wrapper.appendChild(editorView.dom);
-
     var _renderGrouped = renderGrouped(this.editorView, this.options.content),
-        dom = _renderGrouped.dom,
-        update = _renderGrouped.update;
-
+      dom = _renderGrouped.dom,
+      update = _renderGrouped.update;
     this.contentUpdate = update;
     this.menu.appendChild(dom);
     this.update();
-
     if (options.floating && !isIOS()) {
       this.updateFloat();
       var potentialScrollers = getAllWrapping(this.wrapper);
-
       this.scrollHandler = function (e) {
         var root = _this2.editorView.root;
         if (!(root.body || root).contains(_this2.wrapper)) potentialScrollers.forEach(function (el) {
           return el.removeEventListener("scroll", _this2.scrollHandler);
         });else _this2.updateFloat(e.target.getBoundingClientRect ? e.target : undefined);
       };
-
       potentialScrollers.forEach(function (el) {
         return el.addEventListener('scroll', _this2.scrollHandler);
       });
     }
   }
-
   _createClass(MenuBarView, [{
     key: "update",
     value: function update() {
+      if (this.editorView.root != this.root) {
+        var _renderGrouped2 = renderGrouped(this.editorView, this.options.content),
+          dom = _renderGrouped2.dom,
+          update = _renderGrouped2.update;
+        this.contentUpdate = update;
+        this.menu.replaceChild(dom, this.menu.firstChild);
+        this.root = this.editorView.root;
+      }
       this.contentUpdate(this.editorView.state);
-
       if (this.floating) {
         this.updateScrollCursor();
       } else {
@@ -622,7 +529,6 @@ var MenuBarView = function () {
           this.widthForMaxHeight = this.menu.offsetWidth;
           this.maxHeight = 0;
         }
-
         if (this.menu.offsetHeight > this.maxHeight) {
           this.maxHeight = this.menu.offsetHeight;
           this.menu.style.minHeight = this.maxHeight + "px";
@@ -638,7 +544,6 @@ var MenuBarView = function () {
       var selRect = rects[selectionIsInverted(selection) ? 0 : rects.length - 1];
       if (!selRect) return;
       var menuRect = this.menu.getBoundingClientRect();
-
       if (selRect.top < menuRect.bottom && selRect.bottom > menuRect.top) {
         var scrollable = findWrappingScrollable(this.wrapper);
         if (scrollable) scrollable.scrollTop -= menuRect.bottom - selRect.top;
@@ -648,9 +553,8 @@ var MenuBarView = function () {
     key: "updateFloat",
     value: function updateFloat(scrollAncestor) {
       var parent = this.wrapper,
-          editorRect = parent.getBoundingClientRect(),
-          top = scrollAncestor ? Math.max(0, scrollAncestor.getBoundingClientRect().top) : 0;
-
+        editorRect = parent.getBoundingClientRect(),
+        top = scrollAncestor ? Math.max(0, scrollAncestor.getBoundingClientRect().top) : 0;
       if (this.floating) {
         if (editorRect.top >= top || editorRect.bottom < this.menu.offsetHeight + 10) {
           this.floating = false;
@@ -686,31 +590,20 @@ var MenuBarView = function () {
       if (this.wrapper.parentNode) this.wrapper.parentNode.replaceChild(this.editorView.dom, this.wrapper);
     }
   }]);
-
   return MenuBarView;
 }();
-
 function selectionIsInverted(selection) {
   if (selection.anchorNode == selection.focusNode) return selection.anchorOffset > selection.focusOffset;
   return selection.anchorNode.compareDocumentPosition(selection.focusNode) == Node.DOCUMENT_POSITION_FOLLOWING;
 }
-
 function findWrappingScrollable(node) {
-  for (var cur = node.parentNode; cur; cur = cur.parentNode) {
-    if (cur.scrollHeight > cur.clientHeight) return cur;
-  }
+  for (var cur = node.parentNode; cur; cur = cur.parentNode) if (cur.scrollHeight > cur.clientHeight) return cur;
 }
-
 function getAllWrapping(node) {
   var res = [node.ownerDocument.defaultView || window];
-
-  for (var cur = node.parentNode; cur; cur = cur.parentNode) {
-    res.push(cur);
-  }
-
+  for (var cur = node.parentNode; cur; cur = cur.parentNode) res.push(cur);
   return res;
 }
-
 exports.Dropdown = Dropdown;
 exports.DropdownSubmenu = DropdownSubmenu;
 exports.MenuItem = MenuItem;

package/dist/index.d.cts

@@ -263,4 +263,4 @@ declare function menuBar(options: {
     floating?: boolean;
 }): Plugin;
 
-export { Dropdown, DropdownSubmenu, IconSpec, MenuElement, MenuItem, MenuItemSpec, blockTypeItem, icons, joinUpItem, liftItem, menuBar, redoItem, renderGrouped, selectParentNodeItem, undoItem, wrapItem };
+export { Dropdown, DropdownSubmenu, type IconSpec, type MenuElement, MenuItem, type MenuItemSpec, blockTypeItem, icons, joinUpItem, liftItem, menuBar, redoItem, renderGrouped, selectParentNodeItem, undoItem, wrapItem };

package/dist/index.d.ts

@@ -263,4 +263,4 @@ declare function menuBar(options: {
     floating?: boolean;
 }): Plugin;
 
-export { Dropdown, DropdownSubmenu, IconSpec, MenuElement, MenuItem, MenuItemSpec, blockTypeItem, icons, joinUpItem, liftItem, menuBar, redoItem, renderGrouped, selectParentNodeItem, undoItem, wrapItem };
+export { Dropdown, DropdownSubmenu, type IconSpec, type MenuElement, MenuItem, type MenuItemSpec, blockTypeItem, icons, joinUpItem, liftItem, menuBar, redoItem, renderGrouped, selectParentNodeItem, undoItem, wrapItem };

package/dist/index.js

@@ -484,6 +484,7 @@ class MenuBarView {
         this.widthForMaxHeight = 0;
         this.floating = false;
         this.scrollHandler = null;
+        this.root = editorView.root;
         this.wrapper = crel("div", { class: prefix + "-wrapper" });
         this.menu = this.wrapper.appendChild(crel("div", { class: prefix }));
         this.menu.className = prefix;
@@ -508,6 +509,12 @@ class MenuBarView {
         }
     }
     update() {
+        if (this.editorView.root != this.root) {
+            let { dom, update } = renderGrouped(this.editorView, this.options.content);
+            this.contentUpdate = update;
+            this.menu.replaceChild(dom, this.menu.firstChild);
+            this.root = this.editorView.root;
+        }
         this.contentUpdate(this.editorView.state);
         if (this.floating) {
             this.updateScrollCursor();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-menu",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Simple menu elements for ProseMirror",
   "type": "module",
   "main": "dist/index.cjs",

package/src/menubar.ts

@@ -38,11 +38,13 @@ class MenuBarView {
   floating = false
   contentUpdate: (state: EditorState) => boolean
   scrollHandler: ((event: Event) => void) | null = null
+  root: Document | ShadowRoot
 
   constructor(
     readonly editorView: EditorView,
     readonly options: Parameters<typeof menuBar>[0]
   ) {
+    this.root = editorView.root
     this.wrapper = crel("div", {class: prefix + "-wrapper"})
     this.menu = this.wrapper.appendChild(crel("div", {class: prefix}))
     this.menu.className = prefix
@@ -71,6 +73,12 @@ class MenuBarView {
   }
 
   update() {
+    if (this.editorView.root != this.root) {
+      let {dom, update} = renderGrouped(this.editorView, this.options.content)
+      this.contentUpdate = update
+      this.menu.replaceChild(dom, this.menu.firstChild!)
+      this.root = this.editorView.root
+    }
     this.contentUpdate(this.editorView.state)
 
     if (this.floating) {