diff --git a/app/app.json b/app/app.json
index 4e50e4d720..f6c10dca7b 100644
--- a/app/app.json
+++ b/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"
}
}
diff --git a/app/components/base/Editor.js b/app/components/base/Editor.js
index a3fd937eea..5c321780e4 100644
--- a/app/components/base/Editor.js
+++ b/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 = `${inner}`
+ } catch (e) {
+ // Failed to parse filter (that's ok)
+ code = ``
+ }
+ }
- 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 () {
diff --git a/app/css/components/editor.less b/app/css/components/editor.less
index b0fce2666d..ada459d360 100644
--- a/app/css/components/editor.less
+++ b/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;
diff --git a/app/css/components/sidebar.less b/app/css/components/sidebar.less
index b312ef5861..6dd1f96c49 100644
--- a/app/css/components/sidebar.less
+++ b/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 {
diff --git a/app/css/components/wrapper.less b/app/css/components/wrapper.less
index 9ab4a53466..52793ce310 100644
--- a/app/css/components/wrapper.less
+++ b/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%;
diff --git a/package.json b/package.json
index b6a0f21f80..262ebb6050 100644
--- a/package.json
+++ b/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",