Release `v5.24.1`

HISTORY.md

@@ -3,7 +3,7 @@
 https://github.com/josdejong/jsoneditor
 
 
-## not yet released, version 5.24.1
+## 2018-08-26, version 5.24.1
 
 - Context menu and color picker are now absolutely positioned, and
   can overflow the borders of the editor.

dist/jsoneditor-minimalist.js

@@ -24,8 +24,8 @@
  * Copyright (c) 2011-2017 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <wjosdejong@gmail.com>
- * @version 5.24.0
+ * @version 5.24.1
- * @date    2018-08-22
+ * @date    2018-08-26
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -97,8 +97,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	var VanillaPicker = __webpack_require__(5); // may be undefined in case of minimalist bundle
 
 	var treemode = __webpack_require__(6);
-	var textmode = __webpack_require__(27);
+	var textmode = __webpack_require__(28);
-	var util = __webpack_require__(11);
+	var util = __webpack_require__(12);
 
 	/**
 	 * @constructor JSONEditor
@@ -1446,16 +1446,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	var History = __webpack_require__(8);
 	var SearchBox = __webpack_require__(9);
 	var ContextMenu = __webpack_require__(10);
-	var TreePath = __webpack_require__(15);
+	var TreePath = __webpack_require__(16);
-	var Node = __webpack_require__(16);
+	var Node = __webpack_require__(17);
-	var ModeSwitcher = __webpack_require__(25);
+	var ModeSwitcher = __webpack_require__(26);
-	var util = __webpack_require__(11);
+	var util = __webpack_require__(12);
-	var autocomplete = __webpack_require__(26);
+	var autocomplete = __webpack_require__(27);
-	var showSortModal = __webpack_require__(21);
+	var showSortModal = __webpack_require__(22);
-	var showTransformModal = __webpack_require__(23);
+	var showTransformModal = __webpack_require__(24);
-	var translate = __webpack_require__(14).translate;
+	var translate = __webpack_require__(15).translate;
-	var setLanguages = __webpack_require__(14).setLanguages;
+	var setLanguages = __webpack_require__(15).setLanguages;
-	var setLanguage = __webpack_require__(14).setLanguage;
+	var setLanguage = __webpack_require__(15).setLanguage;
 
 	var DEFAULT_MODAL_ANCHOR = document.body; // TODO: this constant is defined twice
 
@@ -1585,15 +1585,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	    colorPicker: true,
 	    onColorPicker: function (parent, color, onChange) {
 	      if (VanillaPicker) {
-	        var contentRect = editor.content.getBoundingClientRect();
-	        var parentRect = parent.getBoundingClientRect();
-	        var pickerWidth = 250;
-	        var pickerRight = parentRect.right + pickerWidth;
-
 	        new VanillaPicker({
 	          parent: parent,
 	          color: color,
-	          popup: (pickerRight < contentRect.right) ? 'bottom' : 'left',
+	          popup: 'bottom',
 	          onDone: function (color) {
 	            var alpha = color.rgba[3]
 	            var hex = (alpha === 1)
@@ -2484,8 +2479,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	  if (this.options && this.options.modes && this.options.modes.length) {
 	    var me = this;
 	    this.modeSwitcher = new ModeSwitcher(this.menu, this.options.modes, this.options.mode, function onSwitch(mode) {
-	      me.modeSwitcher.destroy();
-
 	      // switch mode and restore focus
 	      me.setMode(mode);
 	      me.modeSwitcher.focus();
@@ -3096,7 +3089,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  });
 
 	  var menu = new ContextMenu(items, {close: onClose});
-	  menu.show(anchor, this.content);
+	  menu.show(anchor, editor.frame);
 	};
 
 	/**
@@ -4033,17 +4026,9 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	'use strict';
 
-	var util = __webpack_require__(11);
+	var createAbsoluteAnchor = __webpack_require__(11).createAbsoluteAnchor;
-	var translate = __webpack_require__(14).translate;
+	var util = __webpack_require__(12);
-
+	var translate = __webpack_require__(15).translate;
-	/**
-	 * Node.getRootNode shim
-	 * @param  {Node} node node to check
-	 * @return {Node}      node's rootNode or `window` if there is ShadowDOM is not supported.
-	 */
-	function getRootNode(node){
-	    return node.getRootNode && node.getRootNode() || window;
-	}
 
 	/**
 	 * A context menu
@@ -4236,74 +4221,55 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	/**
 	 * Attach the menu to an anchor
-	 * @param {HTMLElement} anchor          Anchor where the menu will be attached
+	 * @param {HTMLElement} anchor  Anchor where the menu will be attached as sibling.
-	 *                                      as sibling.
+	 * @param {HTMLElement} frame   The root of the JSONEditor window
-	 * @param {HTMLElement} [contentWindow] The DIV with with the (scrollable) contents
 	 */
-	ContextMenu.prototype.show = function (anchor, contentWindow) {
+	ContextMenu.prototype.show = function (anchor, frame) {
 	  this.hide();
 
 	  // determine whether to display the menu below or above the anchor
 	  var showBelow = true;
 	  var parent = anchor.parentNode;
 	  var anchorRect = anchor.getBoundingClientRect();
-	  var parentRect = parent.getBoundingClientRect()
+	  var parentRect = parent.getBoundingClientRect();
+	  var frameRect = frame.getBoundingClientRect();
 
-	  if (contentWindow) {
+	  var me = this;
+	  this.dom.absoluteAnchor = createAbsoluteAnchor(anchor, frame, function () {
+	    me.hide()
+	  });
 
-	    var contentRect = contentWindow.getBoundingClientRect();
+	  if (anchorRect.bottom + this.maxHeight < frameRect.bottom) {
-
-	    if (anchorRect.bottom + this.maxHeight < contentRect.bottom) {
 	    // fits below -> show below
 	  }
-	    else if (anchorRect.top - this.maxHeight > contentRect.top) {
+	  else if (anchorRect.top - this.maxHeight > frameRect.top) {
 	    // fits above -> show above
 	    showBelow = false;
 	  }
 	  else {
 	    // doesn't fit above nor below -> show below
 	  }
-	  }
 
-	  var leftGap = anchorRect.left - parentRect.left;
 	  var topGap = anchorRect.top - parentRect.top;
 
 	  // position the menu
 	  if (showBelow) {
 	    // display the menu below the anchor
 	    var anchorHeight = anchor.offsetHeight;
-	    this.dom.menu.style.left = leftGap + 'px';
+	    this.dom.menu.style.left = '0';
 	    this.dom.menu.style.top = topGap + anchorHeight + 'px';
 	    this.dom.menu.style.bottom = '';
 	  }
 	  else {
 	    // display the menu above the anchor
-	    this.dom.menu.style.left = leftGap + 'px';
+	    this.dom.menu.style.left = '0';
-	    this.dom.menu.style.top = topGap + 'px';
+	    this.dom.menu.style.top = '';
 	    this.dom.menu.style.bottom = '0px';
 	  }
 
-	  // find the root node of the page (window, or a shadow dom root element)
+	  // attach the menu to the temporary, absolute anchor
-	  this.rootNode = getRootNode(anchor);
+	  // parent.insertBefore(this.dom.root, anchor);
-
+	  this.dom.absoluteAnchor.appendChild(this.dom.root);
-	  // attach the menu to the parent of the anchor
-	  parent.insertBefore(this.dom.root, parent.firstChild);
-
-	  // create and attach event listeners
-	  var me = this;
-	  var list = this.dom.list;
-	  this.eventListeners.mousedown = util.addEventListener(this.rootNode, 'mousedown', function (event) {
-	    // hide menu on click outside of the menu
-	    var target = event.target;
-	    if ((target != list) && !me._isChildOf(target, list)) {
-	      me.hide();
-	      event.stopPropagation();
-	      event.preventDefault();
-	    }
-	  });
-	  this.eventListeners.keydown = util.addEventListener(this.rootNode, 'keydown', function (event) {
-	    me._onKeyDown(event);
-	  });
 
 	  // move focus to the first button in the context menu
 	  this.selection = util.getSelection();
@@ -4322,6 +4288,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	 * Hide the context menu if visible
 	 */
 	ContextMenu.prototype.hide = function () {
+	  // remove temporary absolutely positioned anchor
+	  if (this.dom.absoluteAnchor) {
+	    this.dom.absoluteAnchor.destroy();
+	    delete this.dom.absoluteAnchor;
+	  }
+
 	  // remove the menu from the DOM
 	  if (this.dom.root.parentNode) {
 	    this.dom.root.parentNode.removeChild(this.dom.root);
@@ -4330,18 +4302,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 	  }
 
-	  // remove all event listeners
-	  // all event listeners are supposed to be attached to document.
-	  for (var name in this.eventListeners) {
-	    if (this.eventListeners.hasOwnProperty(name)) {
-	      var fn = this.eventListeners[name];
-	      if (fn) {
-	        util.removeEventListener(this.rootNode, name, fn);
-	      }
-	      delete this.eventListeners[name];
-	    }
-	  }
-
 	  if (ContextMenu.visibleMenu == this) {
 	    ContextMenu.visibleMenu = undefined;
 	  }
@@ -4500,35 +4460,102 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 	};
 
-	/**
-	 * Test if an element is a child of a parent element.
-	 * @param {Element} child
-	 * @param {Element} parent
-	 * @return {boolean} isChild
-	 */
-	ContextMenu.prototype._isChildOf = function (child, parent) {
-	  var e = child.parentNode;
-	  while (e) {
-	    if (e == parent) {
-	      return true;
-	    }
-	    e = e.parentNode;
-	  }
-
-	  return false;
-	};
-
 	module.exports = ContextMenu;
 
 
 /***/ },
 /* 11 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var util = __webpack_require__(12);
+
+	/**
+	 * Create an anchor element absolutely positioned in the `parent`
+	 * element.
+	 * @param {HTMLElement} anchor
+	 * @param {HTMLElement} parent
+	 * @param [onDestroy(function(anchor)]  Callback when the anchor is destroyed
+	 * @returns {HTMLElement}
+	 */
+	exports.createAbsoluteAnchor = function (anchor, parent, onDestroy) {
+	  var root = getRootNode(anchor);
+	  var eventListeners = {};
+
+	  var anchorRect = anchor.getBoundingClientRect();
+	  var frameRect = parent.getBoundingClientRect();
+
+	  var absoluteAnchor = document.createElement('div');
+	  absoluteAnchor.className = 'jsoneditor-anchor';
+	  absoluteAnchor.style.position = 'absolute';
+	  absoluteAnchor.style.left = (anchorRect.left - frameRect.left) + 'px';
+	  absoluteAnchor.style.top = (anchorRect.top - frameRect.top) + 'px';
+	  absoluteAnchor.style.width = (anchorRect.width - 2) + 'px';
+	  absoluteAnchor.style.height = (anchorRect.height - 2) + 'px';
+	  absoluteAnchor.style.boxSizing = 'border-box';
+	  parent.appendChild(absoluteAnchor);
+
+	  function destroy () {
+	    // remove temporary absolutely positioned anchor
+	    if (absoluteAnchor && absoluteAnchor.parentNode) {
+	      absoluteAnchor.parentNode.removeChild(absoluteAnchor);
+
+	      // remove all event listeners
+	      // all event listeners are supposed to be attached to document.
+	      for (var name in eventListeners) {
+	        if (eventListeners.hasOwnProperty(name)) {
+	          var fn = eventListeners[name];
+	          if (fn) {
+	            util.removeEventListener(root, name, fn);
+	          }
+	          delete eventListeners[name];
+	        }
+	      }
+
+	      if (typeof onDestroy === 'function') {
+	        onDestroy(anchor);
+	      }
+	    }
+	  }
+
+	  // create and attach event listeners
+	  var destroyIfOutside = function (event) {
+	    var target = event.target;
+	    if ((target !== absoluteAnchor) && !util.isChildOf(target, absoluteAnchor)) {
+	      destroy();
+	      event.stopPropagation();
+	      event.preventDefault();
+	    }
+	  }
+
+	  eventListeners.mousedown = util.addEventListener(root, 'mousedown', destroyIfOutside);
+	  eventListeners.mousewheel = util.addEventListener(root, 'mousewheel', destroyIfOutside);
+	  eventListeners.scroll = util.addEventListener(root, 'scroll', destroyIfOutside);
+
+	  absoluteAnchor.destroy = destroy;
+
+	  return absoluteAnchor
+	}
+
+	/**
+	 * Node.getRootNode shim
+	 * @param  {HTMLElement} node node to check
+	 * @return {HTMLElement}      node's rootNode or `window` if there is ShadowDOM is not supported.
+	 */
+	function getRootNode(node){
+	  return (typeof node.getRootNode === 'function')
+	      ? node.getRootNode()
+	      : window;
+	}
+
+
+/***/ },
+/* 12 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
-	var jsonlint = __webpack_require__(12);
+	var jsonlint = __webpack_require__(13);
-	var jsonMap = __webpack_require__(13);
+	var jsonMap = __webpack_require__(14);
 
 	/**
 	 * Parse JSON using the parser built-in in the browser.
@@ -5198,6 +5225,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 	};
 
+	/**
+	 * Test if an element is a child of a parent element.
+	 * @param {Element} elem
+	 * @param {Element} parent
+	 * @return {boolean} returns true if elem is a child of the parent
+	 */
+	exports.isChildOf = function (elem, parent) {
+	  var e = elem.parentNode;
+	  while (e) {
+	    if (e === parent) {
+	      return true;
+	    }
+	    e = e.parentNode;
+	  }
+
+	  return false;
+	};
+
 	/**
 	 * Parse a JSON path like '.items[3].name' into an array
 	 * @param {string} jsonPath
@@ -5572,7 +5617,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	}
 
 /***/ },
-/* 12 */
+/* 13 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/* Jison generated parser */
@@ -5995,7 +6040,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	}
 
 /***/ },
-/* 13 */
+/* 14 */
 /***/ function(module, exports) {
 
 	'use strict';
@@ -6411,7 +6456,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 14 */
+/* 15 */
 /***/ function(module, exports) {
 
 	'use strict';
@@ -6645,13 +6690,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	};
 
 /***/ },
-/* 15 */
+/* 16 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 	var ContextMenu = __webpack_require__(10);
-	var translate = __webpack_require__(14).translate;
+	var translate = __webpack_require__(15).translate;
 
 	/**
 	 * Creates a component that visualize path selection in tree based editors
@@ -6760,20 +6805,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	module.exports = TreePath;
 
 /***/ },
-/* 16 */
+/* 17 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
-	var jmespath = __webpack_require__(17);
+	var jmespath = __webpack_require__(18);
-	var naturalSort = __webpack_require__(18);
+	var naturalSort = __webpack_require__(19);
+	var createAbsoluteAnchor = __webpack_require__(11).createAbsoluteAnchor;
 	var ContextMenu = __webpack_require__(10);
-	var appendNodeFactory = __webpack_require__(19);
+	var appendNodeFactory = __webpack_require__(20);
-	var showMoreNodeFactory = __webpack_require__(20);
+	var showMoreNodeFactory = __webpack_require__(21);
-	var showSortModal = __webpack_require__(21);
+	var showSortModal = __webpack_require__(22);
-	var showTransformModal = __webpack_require__(23);
+	var showTransformModal = __webpack_require__(24);
-	var util = __webpack_require__(11);
+	var util = __webpack_require__(12);
-	var translate = __webpack_require__(14).translate;
+	var translate = __webpack_require__(15).translate;
 
 	var DEFAULT_MODAL_ANCHOR = document.body; // TODO: this constant is defined twice
 
@@ -7380,17 +7426,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	 * Remove the DOM of this node and it's childs and recreate it again
 	 */
 	Node.prototype.recreateDom = function() {
-	  // only recreate dom if there is a dom already
+	  if (this.dom && this.dom.tr && this.dom.tr.parentNode) {
-	  if (!this.dom || ! this.dom.tr || !this.dom.tr.parentNode) {
-	    return;
-	  }
-
 	    var domAnchor = this._detachFromDom();
 
-	  // delete the DOM
 	    this.clearDom();
 
 	    this._attachToDom(domAnchor);
+	  }
+	  else {
+	    this.clearDom();
+	  }
 	};
 
 	/**
@@ -10121,7 +10166,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    node._deleteDomColor();
 	    node.updateDom();
 
-	    this.editor.options.onColorPicker(this.dom.color, this.value, function onChange(value) {
+	    var colorAnchor = createAbsoluteAnchor(this.dom.color, this.editor.frame);
+
+	    this.editor.options.onColorPicker(colorAnchor, this.value, function onChange(value) {
+	      colorAnchor.destroy();
+
 	      if (typeof value === 'string' && value !== node.value) {
 	        // force recreating the color block, to cleanup any attached color picker
 	        node._deleteDomColor();
@@ -11080,7 +11129,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 
 	  var menu = new ContextMenu(items, {close: onClose});
-	  menu.show(anchor, this.editor.content);
+	  menu.show(anchor, this.editor.frame);
 	};
 
 	/**
@@ -11239,7 +11288,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 17 */
+/* 18 */
 /***/ function(module, exports, __webpack_require__) {
 
 	(function(exports) {
@@ -12912,7 +12961,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 18 */
+/* 19 */
 /***/ function(module, exports) {
 
 	/*
@@ -12963,14 +13012,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 19 */
+/* 20 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
-	var util = __webpack_require__(11);
+	var util = __webpack_require__(12);
 	var ContextMenu = __webpack_require__(10);
-	var translate = __webpack_require__(14).translate;
+	var translate = __webpack_require__(15).translate;
 
 	/**
 	 * A factory function to create an AppendNode, which depends on a Node
@@ -13218,12 +13267,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 20 */
+/* 21 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
-	var translate = __webpack_require__(14).translate;
+	var translate = __webpack_require__(15).translate;
 
 	/**
 	 * A factory function to create an ShowMoreNode, which depends on a Node
@@ -13379,11 +13428,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 21 */
+/* 22 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var picoModal = __webpack_require__(22);
+	var picoModal = __webpack_require__(23);
-	var translate = __webpack_require__(14).translate;
+	var translate = __webpack_require__(15).translate;
 
 	/**
 	 * Show advanced sorting modal
@@ -13499,7 +13548,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 22 */
+/* 23 */
 /***/ function(module, exports, __webpack_require__) {
 
 	var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -14108,14 +14157,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 23 */
+/* 24 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var jmespath = __webpack_require__(17);
+	var jmespath = __webpack_require__(18);
-	var picoModal = __webpack_require__(22);
+	var picoModal = __webpack_require__(23);
-	var Selectr = __webpack_require__(24);
+	var Selectr = __webpack_require__(25);
-	var translate = __webpack_require__(14).translate;
+	var translate = __webpack_require__(15).translate;
-	var debounce = __webpack_require__(11).debounce;
+	var debounce = __webpack_require__(12).debounce;
 
 	var MAX_PREVIEW_LINES = 100;
 
@@ -14415,7 +14464,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 24 */
+/* 25 */
 /***/ function(module, exports) {
 
 	/*!
@@ -16594,7 +16643,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 25 */
+/* 26 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -16677,7 +16726,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  box.title = 'Switch editor mode';
 	  box.onclick = function () {
 	    var menu = new ContextMenu(items);
-	    menu.show(box);
+	    menu.show(box, container);
 	  };
 
 	  var frame = document.createElement('div');
@@ -16715,7 +16764,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 26 */
+/* 27 */
 /***/ function(module, exports) {
 
 	'use strict';
@@ -17102,14 +17151,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	module.exports = completely;
 
 /***/ },
-/* 27 */
+/* 28 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 	var ace = __webpack_require__(1);
-	var ModeSwitcher = __webpack_require__(25);
+	var ModeSwitcher = __webpack_require__(26);
-	var util = __webpack_require__(11);
+	var util = __webpack_require__(12);
 
 	// create a mixin with the functions for text mode
 	var textmode = {};
@@ -17180,7 +17229,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  this.theme = options.theme || DEFAULT_THEME;
 	  if (this.theme === DEFAULT_THEME && _ace) {
 	    try {
-	      __webpack_require__(28);
+	      __webpack_require__(29);
 	    }
 	    catch (err) {
 	      console.error(err);
@@ -18127,7 +18176,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 28 */
+/* 29 */
 /***/ function(module, exports) {
 
 	/* ***** BEGIN LICENSE BLOCK *****

dist/jsoneditor.js

@@ -24,8 +24,8 @@
  * Copyright (c) 2011-2017 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <wjosdejong@gmail.com>
- * @version 5.24.0
+ * @version 5.24.1
- * @date    2018-08-25
+ * @date    2018-08-26
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -33097,20 +33097,19 @@ return /******/ (function(modules) { // webpackBootstrap
 	    // doesn't fit above nor below -> show below
 	  }
 
-	  var leftGap = anchorRect.left - parentRect.left;
 	  var topGap = anchorRect.top - parentRect.top;
 
 	  // position the menu
 	  if (showBelow) {
 	    // display the menu below the anchor
 	    var anchorHeight = anchor.offsetHeight;
-	    this.dom.menu.style.left = leftGap + 'px';
+	    this.dom.menu.style.left = '0';
 	    this.dom.menu.style.top = topGap + anchorHeight + 'px';
 	    this.dom.menu.style.bottom = '';
 	  }
 	  else {
 	    // display the menu above the anchor
-	    this.dom.menu.style.left = leftGap + 'px';
+	    this.dom.menu.style.left = '0';
 	    this.dom.menu.style.top = '';
 	    this.dom.menu.style.bottom = '0px';
 	  }
@@ -33377,7 +33376,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	  eventListeners.mousedown = util.addEventListener(root, 'mousedown', destroyIfOutside);
 	  eventListeners.mousewheel = util.addEventListener(root, 'mousewheel', destroyIfOutside);
-	  // eventListeners.scroll = util.addEventListener(this.rootNode, 'scroll', destroyIfOutside);
+	  eventListeners.scroll = util.addEventListener(root, 'scroll', destroyIfOutside);
 
 	  absoluteAnchor.destroy = destroy;
 
@@ -36274,17 +36273,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	 * Remove the DOM of this node and it's childs and recreate it again
 	 */
 	Node.prototype.recreateDom = function() {
-	  // only recreate dom if there is a dom already
+	  if (this.dom && this.dom.tr && this.dom.tr.parentNode) {
-	  if (!this.dom || ! this.dom.tr || !this.dom.tr.parentNode) {
-	    return;
-	  }
-
 	    var domAnchor = this._detachFromDom();
 
-	  // delete the DOM
 	    this.clearDom();
 
 	    this._attachToDom(domAnchor);
+	  }
+	  else {
+	    this.clearDom();
+	  }
 	};
 
 	/**
@@ -45575,7 +45573,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  box.title = 'Switch editor mode';
 	  box.onclick = function () {
 	    var menu = new ContextMenu(items);
-	    menu.show(box);
+	    menu.show(box, container);
 	  };
 
 	  var frame = document.createElement('div');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsoneditor",
-  "version": "5.24.0",
+  "version": "5.24.1",
   "main": "./index",
   "description": "A web-based tool to view, edit, format, and validate JSON",
   "tags": [

src/js/ContextMenu.js

@@ -224,20 +224,19 @@ ContextMenu.prototype.show = function (anchor, frame) {
     // doesn't fit above nor below -> show below
   }
 
-  var leftGap = anchorRect.left - parentRect.left;
   var topGap = anchorRect.top - parentRect.top;
 
   // position the menu
   if (showBelow) {
     // display the menu below the anchor
     var anchorHeight = anchor.offsetHeight;
-    this.dom.menu.style.left = leftGap + 'px';
+    this.dom.menu.style.left = '0';
     this.dom.menu.style.top = topGap + anchorHeight + 'px';
     this.dom.menu.style.bottom = '';
   }
   else {
     // display the menu above the anchor
-    this.dom.menu.style.left = leftGap + 'px';
+    this.dom.menu.style.left = '0';
     this.dom.menu.style.top = '';
     this.dom.menu.style.bottom = '0px';
   }

src/js/ModeSwitcher.js

@@ -78,7 +78,7 @@ function ModeSwitcher(container, modes, current, onSwitch) {
   box.title = 'Switch editor mode';
   box.onclick = function () {
     var menu = new ContextMenu(items);
-    menu.show(box);
+    menu.show(box, container);
   };
 
   var frame = document.createElement('div');

src/js/createAbsoluteAnchor.js

@@ -60,7 +60,7 @@ exports.createAbsoluteAnchor = function (anchor, parent, onDestroy) {
 
   eventListeners.mousedown = util.addEventListener(root, 'mousedown', destroyIfOutside);
   eventListeners.mousewheel = util.addEventListener(root, 'mousewheel', destroyIfOutside);
-  // eventListeners.scroll = util.addEventListener(this.rootNode, 'scroll', destroyIfOutside);
+  // eventListeners.scroll = util.addEventListener(root, 'scroll', destroyIfOutside);
 
   absoluteAnchor.destroy = destroy;