prosemirror-menu 1.2.2 → 1.2.3

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.2.3 (2023-08-16)
+
+### Bug fixes
+
+Don't directly use the global `window`/`document`, to fix use in a different frame or shadow root.
+
 ## 1.2.2 (2023-05-17)
 
 ### Bug fixes

package/dist/index.cjs

@@ -6,6 +6,18 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 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 _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, '__esModule', {
@@ -42,8 +54,9 @@ function hashPath(path) {
   return hash;
 }
 
-function getIcon(icon) {
-  var node = document.createElement("div");
+function getIcon(root, icon) {
+  var doc = root.ownerDocument;
+  var node = doc.createElement("div");
   node.className = prefix$2;
 
   if (icon.path) {
@@ -51,37 +64,42 @@ function getIcon(icon) {
         width = icon.width,
         height = icon.height;
     var name = "pm-icon-" + hashPath(path).toString(16);
-    if (!document.getElementById(name)) buildSVG(name, icon);
-    var svg = node.appendChild(document.createElementNS(SVG, "svg"));
+    if (!doc.getElementById(name)) buildSVG(root, name, icon);
+    var svg = node.appendChild(doc.createElementNS(SVG, "svg"));
     svg.style.width = width / height + "em";
-    var use = svg.appendChild(document.createElementNS(SVG, "use"));
-    use.setAttributeNS(XLINK, "href", /([^#]*)/.exec(document.location.toString())[1] + "#" + name);
+    var use = svg.appendChild(doc.createElementNS(SVG, "use"));
+    use.setAttributeNS(XLINK, "href", /([^#]*)/.exec(doc.location.toString())[1] + "#" + name);
   } else if (icon.dom) {
     node.appendChild(icon.dom.cloneNode(true));
   } else {
     var text = icon.text,
         css = icon.css;
-    node.appendChild(document.createElement("span")).textContent = text || '';
+    node.appendChild(doc.createElement("span")).textContent = text || '';
     if (css) node.firstChild.style.cssText = css;
   }
 
   return node;
 }
 
-function buildSVG(name, data) {
-  var collection = document.getElementById(prefix$2 + "-collection");
+function buildSVG(root, name, data) {
+  var _ref = root.nodeType == 9 ? [root, root.body] : [root.ownerDocument, root],
+      _ref2 = _slicedToArray(_ref, 2),
+      doc = _ref2[0],
+      top = _ref2[1];
+
+  var collection = doc.getElementById(prefix$2 + "-collection");
 
   if (!collection) {
-    collection = document.createElementNS(SVG, "svg");
+    collection = doc.createElementNS(SVG, "svg");
     collection.id = prefix$2 + "-collection";
     collection.style.display = "none";
-    document.body.insertBefore(collection, document.body.firstChild);
+    top.insertBefore(collection, top.firstChild);
   }
 
-  var sym = document.createElementNS(SVG, "symbol");
+  var sym = doc.createElementNS(SVG, "symbol");
   sym.id = name;
   sym.setAttribute("viewBox", "0 0 " + data.width + " " + data.height);
-  var path = sym.appendChild(document.createElementNS(SVG, "path"));
+  var path = sym.appendChild(doc.createElementNS(SVG, "path"));
   path.setAttribute("d", data.path);
   collection.appendChild(sym);
 }
@@ -99,7 +117,7 @@ var MenuItem = function () {
     key: "render",
     value: function render(view) {
       var spec = this.spec;
-      var dom = spec.render ? spec.render(view) : spec.icon ? getIcon(spec.icon) : spec.label ? crel__default["default"]("div", null, translate(view, spec.label)) : null;
+      var dom = spec.render ? spec.render(view) : spec.icon ? getIcon(view.root, spec.icon) : spec.label ? crel__default["default"]("div", null, translate(view, spec.label)) : null;
       if (!dom) throw new RangeError("MenuItem without icon or label property");
 
       if (spec.title) {
@@ -181,6 +199,7 @@ var Dropdown = function () {
       var _this = this;
 
       var content = renderDropdownItems(this.content, view);
+      var win = view.dom.ownerDocument.defaultView || window;
       var label = crel__default["default"]("div", {
         "class": prefix$1 + "-dropdown " + (this.options["class"] || ""),
         style: this.options.css
@@ -195,7 +214,7 @@ var Dropdown = function () {
       var close = function close() {
         if (open && open.close()) {
           open = null;
-          window.removeEventListener("mousedown", listeningOnClose);
+          win.removeEventListener("mousedown", listeningOnClose);
         }
       };
 
@@ -207,7 +226,7 @@ var Dropdown = function () {
           close();
         } else {
           open = _this.expand(wrap, content.dom);
-          window.addEventListener("mousedown", listeningOnClose = function listeningOnClose() {
+          win.addEventListener("mousedown", listeningOnClose = function listeningOnClose() {
             if (!isMenuEvent(wrap)) close();
           });
         }
@@ -299,6 +318,7 @@ var DropdownSubmenu = function () {
     key: "render",
     value: function render(view) {
       var items = renderDropdownItems(this.content, view);
+      var win = view.dom.ownerDocument.defaultView || window;
       var label = crel__default["default"]("div", {
         "class": prefix$1 + "-submenu-label"
       }, translate(view, this.options.label || ""));
@@ -312,10 +332,10 @@ var DropdownSubmenu = function () {
         e.preventDefault();
         markMenuEvent(e);
         setClass(wrap, prefix$1 + "-submenu-wrap-active", false);
-        if (!_listeningOnClose) window.addEventListener("mousedown", _listeningOnClose = function listeningOnClose() {
+        if (!_listeningOnClose) win.addEventListener("mousedown", _listeningOnClose = function listeningOnClose() {
           if (!isMenuEvent(wrap)) {
             wrap.classList.remove(prefix$1 + "-submenu-wrap-active");
-            window.removeEventListener("mousedown", _listeningOnClose);
+            win.removeEventListener("mousedown", _listeningOnClose);
             _listeningOnClose = null;
           }
         });
@@ -370,10 +390,10 @@ function renderGrouped(view, content) {
     var something = false,
         needSep = false;
 
-    for (var _i = 0; _i < updates.length; _i++) {
-      var hasContent = updates[_i](state);
+    for (var _i2 = 0; _i2 < updates.length; _i2++) {
+      var hasContent = updates[_i2](state);
 
-      if (_i) separators[_i - 1].style.display = needSep && hasContent ? "" : "none";
+      if (_i2) separators[_i2 - 1].style.display = needSep && hasContent ? "" : "none";
       needSep = hasContent;
       if (hasContent) something = true;
     }
@@ -655,7 +675,7 @@ var MenuBarView = function () {
         } else {
           var border = (parent.offsetWidth - parent.clientWidth) / 2;
           this.menu.style.left = editorRect.left + border + "px";
-          this.menu.style.display = editorRect.top > window.innerHeight ? "none" : "";
+          this.menu.style.display = editorRect.top > (this.editorView.dom.ownerDocument.defaultView || window).innerHeight ? "none" : "";
           if (scrollAncestor) this.menu.style.top = top + "px";
         }
       } else {
@@ -696,7 +716,7 @@ function findWrappingScrollable(node) {
 }
 
 function getAllWrapping(node) {
-  var res = [window];
+  var res = [node.ownerDocument.defaultView || window];
 
   for (var cur = node.parentNode; cur; cur = cur.parentNode) {
     res.push(cur);

package/dist/index.js

@@ -12,42 +12,44 @@ function hashPath(path) {
         hash = (((hash << 5) - hash) + path.charCodeAt(i)) | 0;
     return hash;
 }
-function getIcon(icon) {
-    let node = document.createElement("div");
+function getIcon(root, icon) {
+    let doc = root.ownerDocument;
+    let node = doc.createElement("div");
     node.className = prefix$2;
     if (icon.path) {
         let { path, width, height } = icon;
         let name = "pm-icon-" + hashPath(path).toString(16);
-        if (!document.getElementById(name))
-            buildSVG(name, icon);
-        let svg = node.appendChild(document.createElementNS(SVG, "svg"));
+        if (!doc.getElementById(name))
+            buildSVG(root, name, icon);
+        let svg = node.appendChild(doc.createElementNS(SVG, "svg"));
         svg.style.width = (width / height) + "em";
-        let use = svg.appendChild(document.createElementNS(SVG, "use"));
-        use.setAttributeNS(XLINK, "href", /([^#]*)/.exec(document.location.toString())[1] + "#" + name);
+        let use = svg.appendChild(doc.createElementNS(SVG, "use"));
+        use.setAttributeNS(XLINK, "href", /([^#]*)/.exec(doc.location.toString())[1] + "#" + name);
     }
     else if (icon.dom) {
         node.appendChild(icon.dom.cloneNode(true));
     }
     else {
         let { text, css } = icon;
-        node.appendChild(document.createElement("span")).textContent = text || '';
+        node.appendChild(doc.createElement("span")).textContent = text || '';
         if (css)
             node.firstChild.style.cssText = css;
     }
     return node;
 }
-function buildSVG(name, data) {
-    let collection = document.getElementById(prefix$2 + "-collection");
+function buildSVG(root, name, data) {
+    let [doc, top] = root.nodeType == 9 ? [root, root.body] : [root.ownerDocument, root];
+    let collection = doc.getElementById(prefix$2 + "-collection");
     if (!collection) {
-        collection = document.createElementNS(SVG, "svg");
+        collection = doc.createElementNS(SVG, "svg");
         collection.id = prefix$2 + "-collection";
         collection.style.display = "none";
-        document.body.insertBefore(collection, document.body.firstChild);
+        top.insertBefore(collection, top.firstChild);
     }
-    let sym = document.createElementNS(SVG, "symbol");
+    let sym = doc.createElementNS(SVG, "symbol");
     sym.id = name;
     sym.setAttribute("viewBox", "0 0 " + data.width + " " + data.height);
-    let path = sym.appendChild(document.createElementNS(SVG, "path"));
+    let path = sym.appendChild(doc.createElementNS(SVG, "path"));
     path.setAttribute("d", data.path);
     collection.appendChild(sym);
 }
@@ -75,7 +77,7 @@ class MenuItem {
     render(view) {
         let spec = this.spec;
         let dom = spec.render ? spec.render(view)
-            : spec.icon ? getIcon(spec.icon)
+            : spec.icon ? getIcon(view.root, spec.icon)
                 : spec.label ? crel("div", null, translate(view, spec.label))
                     : null;
         if (!dom)
@@ -148,6 +150,7 @@ class Dropdown {
     */
     render(view) {
         let content = renderDropdownItems(this.content, view);
+        let win = view.dom.ownerDocument.defaultView || window;
         let label = crel("div", { class: prefix$1 + "-dropdown " + (this.options.class || ""),
             style: this.options.css }, translate(view, this.options.label || ""));
         if (this.options.title)
@@ -158,7 +161,7 @@ class Dropdown {
         let close = () => {
             if (open && open.close()) {
                 open = null;
-                window.removeEventListener("mousedown", listeningOnClose);
+                win.removeEventListener("mousedown", listeningOnClose);
             }
         };
         label.addEventListener("mousedown", e => {
@@ -169,7 +172,7 @@ class Dropdown {
             }
             else {
                 open = this.expand(wrap, content.dom);
-                window.addEventListener("mousedown", listeningOnClose = () => {
+                win.addEventListener("mousedown", listeningOnClose = () => {
                     if (!isMenuEvent(wrap))
                         close();
                 });
@@ -242,6 +245,7 @@ class DropdownSubmenu {
     */
     render(view) {
         let items = renderDropdownItems(this.content, view);
+        let win = view.dom.ownerDocument.defaultView || window;
         let label = crel("div", { class: prefix$1 + "-submenu-label" }, translate(view, this.options.label || ""));
         let wrap = crel("div", { class: prefix$1 + "-submenu-wrap" }, label, crel("div", { class: prefix$1 + "-submenu" }, items.dom));
         let listeningOnClose = null;
@@ -250,10 +254,10 @@ class DropdownSubmenu {
             markMenuEvent(e);
             setClass(wrap, prefix$1 + "-submenu-wrap-active", false);
             if (!listeningOnClose)
-                window.addEventListener("mousedown", listeningOnClose = () => {
+                win.addEventListener("mousedown", listeningOnClose = () => {
                     if (!isMenuEvent(wrap)) {
                         wrap.classList.remove(prefix$1 + "-submenu-wrap-active");
-                        window.removeEventListener("mousedown", listeningOnClose);
+                        win.removeEventListener("mousedown", listeningOnClose);
                         listeningOnClose = null;
                     }
                 });
@@ -547,7 +551,8 @@ class MenuBarView {
             else {
                 let border = (parent.offsetWidth - parent.clientWidth) / 2;
                 this.menu.style.left = (editorRect.left + border) + "px";
-                this.menu.style.display = (editorRect.top > window.innerHeight ? "none" : "");
+                this.menu.style.display = editorRect.top > (this.editorView.dom.ownerDocument.defaultView || window).innerHeight
+                    ? "none" : "";
                 if (scrollAncestor)
                     this.menu.style.top = top + "px";
             }
@@ -583,7 +588,7 @@ function findWrappingScrollable(node) {
             return cur;
 }
 function getAllWrapping(node) {
-    let res = [window];
+    let res = [node.ownerDocument.defaultView || window];
     for (let cur = node.parentNode; cur; cur = cur.parentNode)
         res.push(cur);
     return res;

package/package.json

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

package/src/icons.ts

@@ -11,40 +11,43 @@ function hashPath(path: string) {
 }
 
 export function getIcon(
+  root: Document | ShadowRoot,
   icon: {path: string, width: number, height: number} | {text: string, css?: string} | {dom: Node}
 ): HTMLElement {
-  let node = document.createElement("div")
+  let doc = root.ownerDocument!
+  let node = doc.createElement("div")
   node.className = prefix
   if ((icon as any).path) {
     let {path, width, height} = icon as {path: string, width: number, height: number}
     let name = "pm-icon-" + hashPath(path).toString(16)
-    if (!document.getElementById(name)) buildSVG(name, icon as {path: string, width: number, height: number})
-    let svg = node.appendChild(document.createElementNS(SVG, "svg"))
+    if (!doc.getElementById(name)) buildSVG(root, name, icon as {path: string, width: number, height: number})
+    let svg = node.appendChild(doc.createElementNS(SVG, "svg"))
     svg.style.width = (width / height) + "em"
-    let use = svg.appendChild(document.createElementNS(SVG, "use"))
-    use.setAttributeNS(XLINK, "href", /([^#]*)/.exec(document.location.toString())![1] + "#" + name)
+    let use = svg.appendChild(doc.createElementNS(SVG, "use"))
+    use.setAttributeNS(XLINK, "href", /([^#]*)/.exec(doc.location.toString())![1] + "#" + name)
   } else if ((icon as any).dom) {
     node.appendChild((icon as any).dom.cloneNode(true))
   } else {
     let {text, css} = icon as {text: string, css?: string}
-    node.appendChild(document.createElement("span")).textContent = text || ''
+    node.appendChild(doc.createElement("span")).textContent = text || ''
     if (css) (node.firstChild as HTMLElement).style.cssText = css
   }
   return node
 }
 
-function buildSVG(name: string, data: {width: number, height: number, path: string}) {
-  let collection = document.getElementById(prefix + "-collection") as Element
+function buildSVG(root: Document | ShadowRoot, name: string, data: {width: number, height: number, path: string}) {
+  let [doc, top] = root.nodeType == 9 ? [root as Document, (root as Document).body] : [root.ownerDocument!, root]
+  let collection = doc.getElementById(prefix + "-collection") as Element
   if (!collection) {
-    collection = document.createElementNS(SVG, "svg")
+    collection = doc.createElementNS(SVG, "svg")
     collection.id = prefix + "-collection"
     ;(collection as HTMLElement).style.display = "none"
-    document.body.insertBefore(collection, document.body.firstChild)
+    top.insertBefore(collection, top.firstChild)
   }
-  let sym = document.createElementNS(SVG, "symbol")
+  let sym = doc.createElementNS(SVG, "symbol")
   sym.id = name
   sym.setAttribute("viewBox", "0 0 " + data.width + " " + data.height)
-  let path = sym.appendChild(document.createElementNS(SVG, "path"))
+  let path = sym.appendChild(doc.createElementNS(SVG, "path"))
   path.setAttribute("d", data.path)
   collection.appendChild(sym)
 }

package/src/menu.ts

@@ -34,7 +34,7 @@ export class MenuItem implements MenuElement {
   render(view: EditorView) {
     let spec = this.spec
     let dom = spec.render ? spec.render(view)
-        : spec.icon ? getIcon(spec.icon)
+        : 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")
@@ -171,6 +171,7 @@ export class Dropdown implements MenuElement {
   /// Render the dropdown menu and sub-items.
   render(view: EditorView) {
     let content = renderDropdownItems(this.content, view)
+    let win = view.dom.ownerDocument.defaultView || window
 
     let label = crel("div", {class: prefix + "-dropdown " + (this.options.class || ""),
                              style: this.options.css},
@@ -182,7 +183,7 @@ export class Dropdown implements MenuElement {
     let close = () => {
       if (open && open.close()) {
         open = null
-        window.removeEventListener("mousedown", listeningOnClose!)
+        win.removeEventListener("mousedown", listeningOnClose!)
       }
     }
     label.addEventListener("mousedown", e => {
@@ -192,7 +193,7 @@ export class Dropdown implements MenuElement {
         close()
       } else {
         open = this.expand(wrap, content.dom)
-        window.addEventListener("mousedown", listeningOnClose = () => {
+        win.addEventListener("mousedown", listeningOnClose = () => {
           if (!isMenuEvent(wrap)) close()
         })
       }
@@ -270,6 +271,7 @@ export class DropdownSubmenu implements MenuElement {
   /// Renders the submenu.
   render(view: EditorView) {
     let items = renderDropdownItems(this.content, view)
+    let win = view.dom.ownerDocument.defaultView || window
 
     let label = crel("div", {class: prefix + "-submenu-label"}, translate(view, this.options.label || ""))
     let wrap = crel("div", {class: prefix + "-submenu-wrap"}, label,
@@ -280,10 +282,10 @@ export class DropdownSubmenu implements MenuElement {
       markMenuEvent(e)
       setClass(wrap, prefix + "-submenu-wrap-active", false)
       if (!listeningOnClose)
-        window.addEventListener("mousedown", listeningOnClose = () => {
+        win.addEventListener("mousedown", listeningOnClose = () => {
           if (!isMenuEvent(wrap)) {
             wrap.classList.remove(prefix + "-submenu-wrap-active")
-            window.removeEventListener("mousedown", listeningOnClose!)
+            win.removeEventListener("mousedown", listeningOnClose!)
             listeningOnClose = null
           }
         })

package/src/menubar.ts

@@ -114,7 +114,8 @@ class MenuBarView {
       } else {
         let border = (parent.offsetWidth - parent.clientWidth) / 2
         this.menu.style.left = (editorRect.left + border) + "px"
-        this.menu.style.display = (editorRect.top > window.innerHeight ? "none" : "")
+        this.menu.style.display = editorRect.top > (this.editorView.dom.ownerDocument.defaultView || window).innerHeight
+          ? "none" : ""
         if (scrollAncestor) this.menu.style.top = top + "px"
       }
     } else {
@@ -149,7 +150,7 @@ function findWrappingScrollable(node: Node) {
 }
 
 function getAllWrapping(node: Node) {
-  let res: (Node | Window)[] = [window]
+  let res: (Node | Window)[] = [node.ownerDocument!.defaultView || window]
   for (let cur = node.parentNode; cur; cur = cur.parentNode)
     res.push(cur)
   return res