Switch xml libraries

app/app.json

@@ -22,7 +22,8 @@
     "request": "^2.71.0",
     "tough-cookie": "^2.3.1",
     "traverse": "^0.6.6",
-    "xml2js": "^0.4.17",
-    "xml2js-xpath": "^0.7.0"
+    "vkbeautify": "^0.99.1",
+    "xpath": "^0.0.23",
+    "xmldom": "^0.1.22"
   }
 }

app/components/base/Editor.js

@@ -3,8 +3,9 @@ import {getDOMNode} from 'react-dom';
 import CodeMirror from 'codemirror';
 import classnames from 'classnames';
 import JSONPath from 'jsonpath-plus';
-import xml2js from 'xml2js';
-import xpath from 'xml2js-xpath';
+import vkbeautify from 'vkbeautify';
+import {DOMParser} from 'xmldom';
+import xpath from 'xpath';
 import {DEBOUNCE_MILLIS} from '../../lib/constants';
 import 'codemirror/mode/css/css';
 import 'codemirror/mode/htmlmixed/htmlmixed';
@@ -189,28 +190,19 @@ class Editor extends Component {
   }
 
   _formatXML (code) {
-    return new Promise(resolve => {
-      xml2js.parseString(code, (err, obj) => {
-        if (err) {
-          resolve(code);
-          return;
-        }
+    if (this.props.updateFilter && this.state.filter) {
+      try {
+        const dom = new DOMParser().parseFromString(code);
+        const nodes = xpath.select(this.state.filter, dom);
+        const inner = nodes.map(n => n.toString()).join('\n');
+        code = `<result>${inner}</result>`
+      } catch (e) {
+        // Failed to parse filter (that's ok)
+        code = `<result></result>`
+      }
+    }
 
-        if (this.props.updateFilter && this.state.filter) {
-          obj = xpath.find(obj, this.state.filter);
-        }
-
-        const builder = new xml2js.Builder({
-          renderOpts: {
-            pretty: true,
-            indent: '\t'
-          }
-        });
-        const xml = builder.buildObject(obj);
-
-        resolve(xml);
-      });
-    })
+    return Promise.resolve(vkbeautify.xml(code, '\t'));
   }
 
   /**
@@ -286,7 +278,7 @@ class Editor extends Component {
       if (this.props.updateFilter) {
         this.props.updateFilter(filter);
       }
-    }, DEBOUNCE_MILLIS);
+    }, DEBOUNCE_MILLIS * 3);
   }
 
   _canPrettify () {

app/css/components/editor.less

@@ -25,6 +25,7 @@
     height: @line-height-xs;
 
     input {
+      font-family: @font-monospace;
       margin-right: 0;
       width: 100%;
       margin-left: @padding-md;

app/css/components/sidebar.less

@@ -20,7 +20,8 @@
   }
 
   &.sidebar--hidden {
-    display: none;
+    // Can't be display: none because it screws up the grid
+    opacity: 0;
   }
 
   &:focus {

app/css/components/wrapper.less

@@ -23,6 +23,7 @@
     position: relative;
 
     & > * {
+      //background-color: rgba(255, 0, 0, 0.2);
       cursor: ew-resize;
       position: absolute;
       height: 100%;

package.json

@@ -66,6 +66,7 @@
     "mousetrap": "^1.6.0",
     "nedb": "^1.8.0",
     "node-localstorage": "^1.3.0",
+    "node-uuid": "latest",
     "nunjucks": "git@github.com:gschier/nunjucks.git#80485468cd577f1a1a8067bedf6c5bfa878712ea",
     "raven": "^0.12.1",
     "react": "^15.3.1",
@@ -80,9 +81,9 @@
     "request": "^2.74.0",
     "tough-cookie": "^2.3.1",
     "traverse": "^0.6.6",
-    "xml2js": "^0.4.17",
-    "xml2js-xpath": "^0.7.0",
-    "node-uuid": "latest"
+    "vkbeautify": "^0.99.1",
+    "xpath": "^0.0.23",
+    "xmldom": "^0.1.22"
   },
   "devDependencies": {
     "babel-cli": "^6.11.4",