Released version 5.0.0

HISTORY.md

@@ -3,7 +3,7 @@
 https://github.com/josdejong/jsoneditor
 
 
-## not yet released, version 5.0.0
+## 2015-12-31, version 5.0.0
 
 - Implemented selection of multiple nodes, allowing to move/duplicate/remove
   multiple nodes at once (See #106).

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jsoneditor",
-  "version": "4.2.1",
+  "version": "5.0.0",
   "description": "A web-based tool to view, edit and format JSON",
   "tags": [
     "json",

dist/jsoneditor.css

@@ -140,7 +140,7 @@ div.jsoneditor-tree button.jsoneditor-contextmenu {
 
 div.jsoneditor-tree button.jsoneditor-contextmenu:hover,
 div.jsoneditor-tree button.jsoneditor-contextmenu:focus,
-div.jsoneditor-tree button.jsoneditor-contextmenu.selected,
+div.jsoneditor-tree button.jsoneditor-contextmenu.jsoneditor-selected,
 tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu {
   background-position: -48px -48px;
 }
@@ -171,7 +171,7 @@ div.jsoneditor {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
   position: relative;
   padding: 0;
   line-height: 100%;
@@ -192,7 +192,6 @@ div.jsoneditor-outer {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  overflow: hidden;
 }
 
 div.jsoneditor-tree {
@@ -267,6 +266,12 @@ div.jsoneditor textarea {
 }
 /* ContextMenu - main menu */
 
+div.jsoneditor-contextmenu-root {
+  position: relative;
+  width: 0;
+  height: 0;
+}
+
 div.jsoneditor-contextmenu {
   position: absolute;
   z-index: 99999;
@@ -501,7 +506,6 @@ div.jsoneditor-menu {
   height: 35px;
   padding: 2px;
   margin: 0;
-  overflow: hidden;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -510,7 +514,8 @@ div.jsoneditor-menu {
   border-bottom: 1px solid #3883fa;
 }
 
-div.jsoneditor-menu > button {
+div.jsoneditor-menu > button,
+div.jsoneditor-menu > div.jsoneditor-modes > button {
   width: 26px;
   height: 26px;
   margin: 2px;
@@ -525,17 +530,21 @@ div.jsoneditor-menu > button {
   float: left;
 }
 
-div.jsoneditor-menu > button:hover {
+div.jsoneditor-menu > button:hover,
+div.jsoneditor-menu > div.jsoneditor-modes > button:hover {
   background-color: rgba(255,255,255,0.2);
   border: 1px solid rgba(255,255,255,0.4);
 }
 
 div.jsoneditor-menu > button:focus,
-div.jsoneditor-menu > button:active {
+div.jsoneditor-menu > button:active,
+div.jsoneditor-menu > div.jsoneditor-modes > button:focus,
+div.jsoneditor-menu > div.jsoneditor-modes > button:active {
   background-color: rgba(255,255,255,0.3);
 }
 
-div.jsoneditor-menu > button:disabled {
+div.jsoneditor-menu > button:disabled,
+div.jsoneditor-menu > div.jsoneditor-modes > button:disabled {
   opacity: 0.5;
 }
 
@@ -571,14 +580,20 @@ div.jsoneditor-menu > button.jsoneditor-format {
   background-position: -72px -120px;
 }
 
-div.jsoneditor-menu > button.jsoneditor-modes {
+div.jsoneditor-menu > div.jsoneditor-modes {
+  display: inline-block;
+  float: left;
+}
+
+div.jsoneditor-menu > div.jsoneditor-modes > button {
   background-image: none;
   width: auto;
   padding-left: 6px;
   padding-right: 6px;
 }
 
-div.jsoneditor-menu > button.jsoneditor-separator {
+div.jsoneditor-menu > button.jsoneditor-separator,
+div.jsoneditor-menu > div.jsoneditor-modes > button.jsoneditor-separator {
   margin-left: 10px;
 }
 
@@ -601,8 +616,6 @@ div.jsoneditor-menu a.jsoneditor-poweredBy {
   top: 0;
   padding: 10px;
 }
-
-/* TODO: css for button:disabled is not supported by IE8 */
 table.jsoneditor-search input,
 table.jsoneditor-search div.jsoneditor-results {
   font-family: arial, sans-serif;

dist/jsoneditor.js

@@ -23,8 +23,8 @@
  * Copyright (c) 2011-2015 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <wjosdejong@gmail.com>
- * @version 4.2.1
+ * @version 5.0.0
- * @date    2015-12-30
+ * @date    2015-12-31
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -402,12 +402,12 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 1 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var Highlighter = __webpack_require__(4);
+	var Highlighter = __webpack_require__(5);
-	var History = __webpack_require__(5);
+	var History = __webpack_require__(6);
-	var SearchBox = __webpack_require__(6);
+	var SearchBox = __webpack_require__(7);
-	var ContextMenu = __webpack_require__(7);
+	var ContextMenu = __webpack_require__(8);
-	var Node = __webpack_require__(8);
+	var Node = __webpack_require__(9);
-	var modeswitcher = __webpack_require__(9);
+	var modeswitcher = __webpack_require__(4);
 	var util = __webpack_require__(3);
 
 	// create a mixin with the functions for tree mode
@@ -1057,7 +1057,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  if (node && node.selected) {
 	    if (event.type == 'click') {
 	      if (event.target == node.dom.menu) {
-	        this.showContextMenu(event.target);
+	        this.showContextMenu(event.target.parentNode);
 
 	        // stop propagation (else we will open the context menu of a single node)
 	        return;
@@ -1105,6 +1105,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	};
 
 	treemode._updateDragDistance = function (event) {
+	  if (!this.dragDistanceEvent) {
+	    this._startDragDistance(event);
+	  }
+
 	  var diffX = event.pageX - this.dragDistanceEvent.initialPageX;
 	  var diffY = event.pageY - this.dragDistanceEvent.initialPageY;
 
@@ -1126,6 +1130,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	treemode._onMultiSelectStart = function (event) {
 	  var node = Node.getNodeFromTarget(event.target);
 
+	  if (this.options.mode !== 'tree' || this.options.onEditable !== undefined) {
+	    // dragging not allowed in modes 'view' and 'form'
+	    // TODO: allow multiselection of items when option onEditable is specified
+	    return;
+	  }
+
 	  this.multiselection = {
 	    start: node || null,
 	    end: null,
@@ -1422,7 +1432,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  });
 
 	  var menu = new ContextMenu(items, {close: onClose});
-	  menu.show(anchor);
+	  menu.show(anchor, this.content);
 	};
 
 
@@ -1457,7 +1467,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  // failed to load ace, no problem, we will fall back to plain text
 	}
 
-	var modeswitcher = __webpack_require__(9);
+	var modeswitcher = __webpack_require__(4);
 	var util = __webpack_require__(3);
 
 	// create a mixin with the functions for text mode
@@ -2447,6 +2457,117 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ },
 /* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var ContextMenu = __webpack_require__(8);
+
+	/**
+	 * Create a select box to be used in the editor menu's, which allows to switch mode
+	 * @param {Object} editor
+	 * @param {String[]} modes  Available modes: 'code', 'form', 'text', 'tree', 'view'
+	 * @param {String} current  Available modes: 'code', 'form', 'text', 'tree', 'view'
+	 * @returns {HTMLElement} box
+	 */
+	function createModeSwitcher(editor, modes, current) {
+	  // TODO: decouple mode switcher from editor
+
+	  /**
+	   * Switch the mode of the editor
+	   * @param {String} mode
+	   */
+	  function switchMode(mode) {
+	    // switch mode
+	    editor.setMode(mode);
+
+	    // restore focus on mode box
+	    var modeBox = editor.dom && editor.dom.modeBox;
+	    if (modeBox) {
+	      modeBox.focus();
+	    }
+	  }
+
+	  // available modes
+	  var availableModes = {
+	    code: {
+	      'text': 'Code',
+	      'title': 'Switch to code highlighter',
+	      'click': function () {
+	        switchMode('code')
+	      }
+	    },
+	    form: {
+	      'text': 'Form',
+	      'title': 'Switch to form editor',
+	      'click': function () {
+	        switchMode('form');
+	      }
+	    },
+	    text: {
+	      'text': 'Text',
+	      'title': 'Switch to plain text editor',
+	      'click': function () {
+	        switchMode('text');
+	      }
+	    },
+	    tree: {
+	      'text': 'Tree',
+	      'title': 'Switch to tree editor',
+	      'click': function () {
+	        switchMode('tree');
+	      }
+	    },
+	    view: {
+	      'text': 'View',
+	      'title': 'Switch to tree view',
+	      'click': function () {
+	        switchMode('view');
+	      }
+	    }
+	  };
+
+	  // list the selected modes
+	  var items = [];
+	  for (var i = 0; i < modes.length; i++) {
+	    var mode = modes[i];
+	    var item = availableModes[mode];
+	    if (!item) {
+	      throw new Error('Unknown mode "' + mode + '"');
+	    }
+
+	    item.className = 'jsoneditor-type-modes' + ((current == mode) ? ' jsoneditor-selected' : '');
+	    items.push(item);
+	  }
+
+	  // retrieve the title of current mode
+	  var currentMode = availableModes[current];
+	  if (!currentMode) {
+	    throw new Error('Unknown mode "' + current + '"');
+	  }
+	  var currentTitle = currentMode.text;
+
+	  // create the html element
+	  var box = document.createElement('button');
+	  box.className = 'jsoneditor-modes jsoneditor-separator';
+	  box.innerHTML = currentTitle + ' &#x25BE;';
+	  box.title = 'Switch editor mode';
+	  box.onclick = function () {
+	    var menu = new ContextMenu(items);
+	    menu.show(box);
+	  };
+
+	  var div = document.createElement('div');
+	  div.className = 'jsoneditor-modes';
+	  div.style.position = 'relative';
+	  div.appendChild(box);
+
+	  return div;
+	}
+
+	exports.create = createModeSwitcher;
+
+
+/***/ },
+/* 5 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -2536,7 +2657,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 5 */
+/* 6 */
 /***/ function(module, exports, __webpack_require__) {
 
 	var util = __webpack_require__(3);
@@ -2794,7 +2915,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 6 */
+/* 7 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -3095,7 +3216,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 7 */
+/* 8 */
 /***/ function(module, exports, __webpack_require__) {
 
 	var util = __webpack_require__(3);
@@ -3118,13 +3239,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	  this.items = items;
 	  this.eventListeners = {};
 	  this.selection = undefined; // holds the selection before the menu was opened
-	  this.visibleSubmenu = undefined;
 	  this.onClose = options ? options.close : undefined;
 
+	  // create root element
+	  var root = document.createElement('div');
+	  root.className = 'jsoneditor-contextmenu-root';
+	  dom.root = root;
+
 	  // create a container element
 	  var menu = document.createElement('div');
 	  menu.className = 'jsoneditor-contextmenu';
 	  dom.menu = menu;
+	  root.appendChild(menu);
 
 	  // create a list to hold the menu items
 	  var list = document.createElement('ul');
@@ -3276,42 +3402,54 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	/**
 	 * Attach the menu to an anchor
-	 * @param {HTMLElement} anchor
+	 * @param {HTMLElement} anchor          Anchor where the menu will be attached
+	 *                                      as sibling.
+	 * @param {HTMLElement} [contentWindow] The DIV with with the (scrollable) contents
 	 */
-	ContextMenu.prototype.show = function (anchor) {
+	ContextMenu.prototype.show = function (anchor, contentWindow) {
 	  this.hide();
 
-	  // calculate whether the menu fits below the anchor
+	  // determine whether to display the menu below or above the anchor
-	  var windowHeight = window.innerHeight,
+	  var showBelow = true;
-	      windowScroll = (window.pageYOffset || document.scrollTop || 0),
+	  if (contentWindow) {
-	      windowBottom = windowHeight + windowScroll,
+	    var anchorRect = anchor.getBoundingClientRect();
-	      anchorHeight = anchor.offsetHeight,
+	    var contentRect = contentWindow.getBoundingClientRect();
-	      menuHeight = this.maxHeight;
+
+	    if (anchorRect.bottom + this.maxHeight < contentRect.bottom) {
+	      // fits below -> show below
+	    }
+	    else if (anchorRect.top - this.maxHeight > contentRect.top) {
+	      // fits above -> show above
+	      showBelow = false;
+	    }
+	    else {
+	      // doesn't fit above nor below -> show below
+	    }
+	  }
 
 	  // position the menu
-	  var left = util.getAbsoluteLeft(anchor);
+	  if (showBelow) {
-	  var top = util.getAbsoluteTop(anchor);
-	  if (top + anchorHeight + menuHeight < windowBottom) {
 	    // display the menu below the anchor
-	    this.dom.menu.style.left = left + 'px';
+	    var anchorHeight = anchor.offsetHeight;
-	    this.dom.menu.style.top = (top + anchorHeight) + 'px';
+	    this.dom.menu.style.left = '0px';
+	    this.dom.menu.style.top = anchorHeight + 'px';
 	    this.dom.menu.style.bottom = '';
 	  }
 	  else {
 	    // display the menu above the anchor
-	    this.dom.menu.style.left = left + 'px';
+	    this.dom.menu.style.left = '0px';
 	    this.dom.menu.style.top = '';
-	    this.dom.menu.style.bottom = (windowHeight - top) + 'px';
+	    this.dom.menu.style.bottom = '0px';
 	  }
 
-	  // attach the menu to the document
+	  // attach the menu to the parent of the anchor
-	  document.body.appendChild(this.dom.menu);
+	  var parent = anchor.parentNode;
+	  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.eventListeners.mousedown = util.addEventListener(window, 'mousedown', function (event) {
-	      document, 'mousedown', function (event) {
 	    // hide menu on click outside of the menu
 	    var target = event.target;
 	    if ((target != list) && !me._isChildOf(target, list)) {
@@ -3320,14 +3458,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      event.preventDefault();
 	    }
 	  });
-	  this.eventListeners.mousewheel = util.addEventListener(
+	  this.eventListeners.keydown = util.addEventListener(window, 'keydown', function (event) {
-	      document, 'mousewheel', function (event) {
-	        // block scrolling when context menu is visible
-	        event.stopPropagation();
-	        event.preventDefault();
-	      });
-	  this.eventListeners.keydown = util.addEventListener(
-	      document, 'keydown', function (event) {
 	    me._onKeyDown(event);
 	  });
 
@@ -3349,8 +3480,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 	ContextMenu.prototype.hide = function () {
 	  // remove the menu from the DOM
-	  if (this.dom.menu.parentNode) {
+	  if (this.dom.root.parentNode) {
-	    this.dom.menu.parentNode.removeChild(this.dom.menu);
+	    this.dom.root.parentNode.removeChild(this.dom.root);
 	    if (this.onClose) {
 	      this.onClose();
 	    }
@@ -3362,7 +3493,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    if (this.eventListeners.hasOwnProperty(name)) {
 	      var fn = this.eventListeners[name];
 	      if (fn) {
-	        util.removeEventListener(document, name, fn);
+	        util.removeEventListener(window, name, fn);
 	      }
 	      delete this.eventListeners[name];
 	    }
@@ -3544,10 +3675,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 8 */
+/* 9 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var ContextMenu = __webpack_require__(7);
+	var ContextMenu = __webpack_require__(8);
 	var appendNodeFactory = __webpack_require__(12);
 	var util = __webpack_require__(3);
 
@@ -5508,8 +5639,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  // focus
 	  // when clicked in whitespace left or right from the field or value, set focus
 	  var domTree = dom.tree;
-	  if (target == domTree.parentNode &&
+	  if (target == domTree.parentNode && type == 'click' && !event.hasMoved) {
-	      type == 'click' && !event.hasMoved) {
 	    var left = (event.offsetX != undefined) ?
 	        (event.offsetX < (this.getLevel() + 1) * 24) :
 	        (event.pageX < util.getAbsoluteLeft(dom.tdSeparator));// for FF
@@ -5527,9 +5657,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }
 	    }
 	  }
-	  if ((target == dom.tdExpand && !expandable) || target == dom.tdField ||
+	  if (((target == dom.tdExpand && !expandable) || target == dom.tdField || target == dom.tdSeparator) &&
-	      target == dom.tdSeparator &&
+	      (type == 'click' && !event.hasMoved)) {
-	      type == 'click' && !event.hasMoved) {
 	    if (domField) {
 	      util.setEndOfContentEditable(domField);
 	      domField.focus();
@@ -5693,7 +5822,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }
 	      handled = true;
 	    }
-	    else if (!altKey && shiftKey) { // Shift + Arrow Up
+	    else if (!altKey && shiftKey && editable) { // Shift + Arrow Up
 	      // select multiple nodes
 	      prevNode = this._previousNode();
 	      if (prevNode) {
@@ -5707,7 +5836,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }
 	      handled = true;
 	    }
-	    else if (altKey && shiftKey) { // Alt + Shift + Arrow Up
+	    else if (altKey && shiftKey && editable) { // Alt + Shift + Arrow Up
 	      // find the previous node
 	      prevNode = firstNode._previousNode();
 	      if (prevNode && prevNode.parent) {
@@ -5739,7 +5868,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }
 	      handled = true;
 	    }
-	    else if (altKey && shiftKey) { // Alt + Shift + Arrow Right
+	    else if (altKey && shiftKey && editable) { // Alt + Shift + Arrow Right
 	      dom = firstNode.getDom();
 	      var prevDom = dom.previousSibling;
 	      if (prevDom) {
@@ -5776,7 +5905,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }
 	      handled = true;
 	    }
-	    else if (!altKey && shiftKey) { // Shift + Arrow Down
+	    else if (!altKey && shiftKey && editable) { // Shift + Arrow Down
 	      // select multiple nodes
 	      nextNode = this._nextNode();
 	      if (nextNode) {
@@ -6337,7 +6466,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	/**
 	 * Show a contextmenu for this node
-	 * @param {HTMLElement} anchor   Anchor element to attache the context menu to.
+	 * @param {HTMLElement} anchor   Anchor element to attach the context menu to
+	 *                               as sibling.
 	 * @param {function} [onClose]   Callback method called when the context menu
 	 *                               is being closed.
 	 */
@@ -6547,7 +6677,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 
 	  var menu = new ContextMenu(items, {close: onClose});
-	  menu.show(anchor);
+	  menu.show(anchor, this.editor.content);
 	};
 
 	/**
@@ -6693,112 +6823,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	module.exports = Node;
 
 
-/***/ },
-/* 9 */
-/***/ function(module, exports, __webpack_require__) {
-
-	var ContextMenu = __webpack_require__(7);
-
-	/**
-	 * Create a select box to be used in the editor menu's, which allows to switch mode
-	 * @param {Object} editor
-	 * @param {String[]} modes  Available modes: 'code', 'form', 'text', 'tree', 'view'
-	 * @param {String} current  Available modes: 'code', 'form', 'text', 'tree', 'view'
-	 * @returns {HTMLElement} box
-	 */
-	function createModeSwitcher(editor, modes, current) {
-	  // TODO: decouple mode switcher from editor
-
-	  /**
-	   * Switch the mode of the editor
-	   * @param {String} mode
-	   */
-	  function switchMode(mode) {
-	    // switch mode
-	    editor.setMode(mode);
-
-	    // restore focus on mode box
-	    var modeBox = editor.dom && editor.dom.modeBox;
-	    if (modeBox) {
-	      modeBox.focus();
-	    }
-	  }
-
-	  // available modes
-	  var availableModes = {
-	    code: {
-	      'text': 'Code',
-	      'title': 'Switch to code highlighter',
-	      'click': function () {
-	        switchMode('code')
-	      }
-	    },
-	    form: {
-	      'text': 'Form',
-	      'title': 'Switch to form editor',
-	      'click': function () {
-	        switchMode('form');
-	      }
-	    },
-	    text: {
-	      'text': 'Text',
-	      'title': 'Switch to plain text editor',
-	      'click': function () {
-	        switchMode('text');
-	      }
-	    },
-	    tree: {
-	      'text': 'Tree',
-	      'title': 'Switch to tree editor',
-	      'click': function () {
-	        switchMode('tree');
-	      }
-	    },
-	    view: {
-	      'text': 'View',
-	      'title': 'Switch to tree view',
-	      'click': function () {
-	        switchMode('view');
-	      }
-	    }
-	  };
-
-	  // list the selected modes
-	  var items = [];
-	  for (var i = 0; i < modes.length; i++) {
-	    var mode = modes[i];
-	    var item = availableModes[mode];
-	    if (!item) {
-	      throw new Error('Unknown mode "' + mode + '"');
-	    }
-
-	    item.className = 'jsoneditor-type-modes' + ((current == mode) ? ' jsoneditor-selected' : '');
-	    items.push(item);
-	  }
-
-	  // retrieve the title of current mode
-	  var currentMode = availableModes[current];
-	  if (!currentMode) {
-	    throw new Error('Unknown mode "' + current + '"');
-	  }
-	  var currentTitle = currentMode.text;
-
-	  // create the html element
-	  var box = document.createElement('button');
-	  box.className = 'jsoneditor-modes jsoneditor-separator';
-	  box.innerHTML = currentTitle + ' &#x25BE;';
-	  box.title = 'Switch editor mode';
-	  box.onclick = function () {
-	    var menu = new ContextMenu(items);
-	    menu.show(box);
-	  };
-
-	  return box;
-	}
-
-	exports.create = createModeSwitcher;
-
-
 /***/ },
 /* 10 */
 /***/ function(module, exports, __webpack_require__) {
@@ -7242,7 +7266,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /***/ function(module, exports, __webpack_require__) {
 
 	var util = __webpack_require__(3);
-	var ContextMenu = __webpack_require__(7);
+	var ContextMenu = __webpack_require__(8);
 
 	/**
 	 * A factory function to create an AppendNode, which depends on a Node
@@ -7422,7 +7446,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    ];
 
 	    var menu = new ContextMenu(items, {close: onClose});
-	    menu.show(anchor);
+	    menu.show(anchor, this.editor.content);
 	  };
 
 	  /**

package.json

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