Implemented function to extract a nested array/object

HISTORY.md

@@ -6,6 +6,7 @@ https://github.com/josdejong/jsoneditor
 ## not yet published, version 6.1.0
 
 - Implemented menu options `sort` and `transform` for modes `code` and `text`.
+- Implemented new context menu item `extract`.
 
 
 ## 2019-06-12, version 6.0.0

src/css/contextmenu.css

@@ -148,6 +148,10 @@ div.jsoneditor-contextmenu button.jsoneditor-transform > div.jsoneditor-icon {
   background-position: -216px 0;
 }
 
+div.jsoneditor-contextmenu button.jsoneditor-extract > div.jsoneditor-icon {
+  background-position: 0 -24px;
+}
+
 /* ContextMenu - sub menu */
 
 div.jsoneditor-contextmenu ul li button.jsoneditor-selected,

src/css/img/jsoneditor-icons.svg

@@ -43,8 +43,8 @@
      id="namedview4144"
      showgrid="true"
      inkscape:zoom="4"
-     inkscape:cx="101.95756"
-     inkscape:cy="63.092516"
+     inkscape:cx="13.229181"
+     inkscape:cy="119.82429"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
@@ -733,4 +733,17 @@
      id="path3546-2-2"
      inkscape:connector-curvature="0"
      sodipodi:nodetypes="cccccccc" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
+     id="svg_1-3"
+     height="16"
+     width="16"
+     y="28"
+     x="4" />
+  <path
+     sodipodi:nodetypes="ccccccccc"
+     inkscape:connector-curvature="0"
+     id="path4402-5-7"
+     d="m 15,41 0,-7 -4,0 0,3 -5,-4 5,-4 0,3 6,0 0,9"
+     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
 </svg>

src/js/Node.js

@@ -3840,9 +3840,9 @@ Node.prototype.transform = function (query) {
   this.hideChilds(); // sorting is faster when the childs are not attached to the dom
 
   try {
-    // apply the JMESPath query
     var oldInternalValue = this.getInternalValue();
 
+    // apply the JMESPath query
     var oldValue = this.getValue();
     var newValue = jmespath.search(oldValue, query);
     this.setValue(newValue);
@@ -3864,6 +3864,33 @@ Node.prototype.transform = function (query) {
   }
 };
 
+/**
+ * Make this object the root object of the ditor
+ */
+Node.prototype.extract = function () {
+  this.editor.node.hideChilds();
+  this.hideChilds();
+
+  try {
+    var oldInternalValue = this.editor.node.getInternalValue();
+    this.editor._setRoot(this);
+    var newInternalValue = this.editor.node.getInternalValue();
+
+    this.editor._onAction('transform', {
+      path: this.editor.node.getInternalPath(),
+      oldValue: oldInternalValue,
+      newValue: newInternalValue
+    });
+  }
+  catch (err) {
+    this.editor._onError(err);
+  }
+  finally {
+    this.updateDom({ recurse: true });
+    this.showChilds();
+  }
+}
+
 /**
  * Get a nested child given a path with properties
  * @param {String[]} path
@@ -4274,6 +4301,17 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
         }
       });
     }
+
+    if (this.parent) {
+      items.push({
+        text: translate('extract'),
+        title: translate('extractTitle', {type: this.type}),
+        className: 'jsoneditor-extract',
+        click: function () {
+          node.extract();
+        }
+      });
+    }
   }
 
   if (this.parent && this.parent._hasChilds()) {
@@ -4286,7 +4324,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
 
     // create append button (for last child node only)
     var childs = node.parent.childs;
-    if (node == childs[childs.length - 1]) {
+    if (node === childs[childs.length - 1]) {
         var appendSubmenu = [
             {
                 text: translate('auto'),
@@ -4334,8 +4372,6 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
         });
     }
 
-
-
     // create insert button
     var insertSubmenu = [
         {

src/js/i18n.js

@@ -56,6 +56,8 @@ var _defs = {
     transform: 'Transform',
     transformTitle: 'Filter, sort, or transform the childs of this ${type}',
     transformTitleShort: 'Filter, sort, or transform contents',
+    extract: 'Extract',
+    extractTitle: 'Extract this ${type}',
     transformQueryTitle: 'Enter a JMESPath query',
     transformWizardLabel: 'Wizard',
     transformWizardFilter: 'Filter',

src/js/treemode.js

@@ -402,6 +402,9 @@ treemode._setRoot = function (node) {
   this.clear();
 
   this.node = node;
+  node.setParent(null);
+  node.setField(undefined, false);
+  delete node.index;
 
   // append to the dom
   this.tbody.appendChild(node.getDom());