Working json formatter with xml tags support.

Frontend/assets/scripts/tools/json.js

@@ -1,21 +1,33 @@
 function formatAndValidateJson(errorElement) {
   const input = document.querySelector('#jsonBlock');
   const processInfo = document.getElementById(errorElement);
+  const start = new Date();
 
-  try {
-    const start = new Date();
+  const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting"
 
-    const obj = JSON.parse(input.textContent);
-    input.innerHTML = JSON.stringify(obj, null, 2);
+  fetch(address, {
+    method: 'POST',
+    body: input.textContent
+  })
+  .then(async (response) => {
+    if (!response.ok) {
+      throw Error(await response.text());
+    }
+
+    return response.text();
+  })
+  .then((data) => {
+    input.innerText = data;
     processInfo.innerText = "";
     hljs.highlightElement(input);
-
-    const end = new Date();
-    processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
-  } catch (error) {
+  })
+  .catch((error) => {
     processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
-    console.error("Error: ", error)
-  }
+    console.error('Error:', error);
+  });
+
+  const end = new Date();
+  processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
 }
 
 function minimizeJson(errorElement) {
@@ -31,7 +43,8 @@ function minimizeJson(errorElement) {
     hljs.highlightElement(input);
 
     const end = new Date();
-    processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
+    processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>"
+        + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
   } catch (error) {
     processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
     console.error("Error: ", error)

Frontend/tools/jsonFormatter.html

@@ -52,6 +52,167 @@
     </div>
 
     <script>
+      const mergeHTMLPlugin = (function () {
+        'use strict';
+
+        var originalStream;
+
+        /**
+         * @param {string} value
+         * @returns {string}
+         */
+        function escapeHTML(value) {
+          return value
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#x27;');
+        }
+
+        /* plugin itself */
+
+        /** @type {HLJSPlugin} */
+        const mergeHTMLPlugin = {
+          // preserve the original HTML token stream
+          "before:highlightElement": ({el}) => {
+            originalStream = nodeStream(el);
+          },
+          // merge it afterwards with the highlighted token stream
+          "after:highlightElement": ({el, result, text}) => {
+            if (!originalStream.length) {
+              return;
+            }
+
+            const resultNode = document.createElement('div');
+            resultNode.innerHTML = result.value;
+            result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
+            el.innerHTML = result.value;
+          }
+        };
+
+        /**
+         * @param {Node} node
+         */
+        function tag(node) {
+          return node.nodeName.toLowerCase();
+        }
+
+        /**
+         * @param {Node} node
+         */
+        function nodeStream(node) {
+          /** @type Event[] */
+          const result = [];
+          (function _nodeStream(node, offset) {
+            for (let child = node.firstChild; child; child = child.nextSibling) {
+              if (child.nodeType === 3) {
+                offset += child.nodeValue.length;
+              } else if (child.nodeType === 1) {
+                result.push({
+                  event: 'start',
+                  offset: offset,
+                  node: child
+                });
+                offset = _nodeStream(child, offset);
+
+                if (!tag(child).match(/br|hr|img|input/)) {
+                  result.push({
+                    event: 'stop',
+                    offset: offset,
+                    node: child
+                  });
+                }
+              }
+            }
+            return offset;
+          })(node, 0);
+          return result;
+        }
+
+        /**
+         * @param {any} original - the original stream
+         * @param {any} highlighted - stream of the highlighted source
+         * @param {string} value - the original source itself
+         */
+        function mergeStreams(original, highlighted, value) {
+          let processed = 0;
+          let result = '';
+          const nodeStack = [];
+
+          function selectStream() {
+            if (!original.length || !highlighted.length) {
+              return original.length ? original : highlighted;
+            }
+            if (original[0].offset !== highlighted[0].offset) {
+              return (original[0].offset < highlighted[0].offset) ? original : highlighted;
+            }
+
+            return highlighted[0].event === 'start' ? original : highlighted;
+          }
+
+          /**
+           * @param {Node} node
+           */
+          function open(node) {
+            /** @param {Attr} attr */
+            function attributeString(attr) {
+              return ' ' + attr.nodeName + '="' + escapeHTML(attr.value) + '"';
+            }
+
+            // @ts-ignore
+            result += '<' + tag(node) + [].map.call(node.attributes, attributeString).join('')
+                + '>';
+          }
+
+          /**
+           * @param {Node} node
+           */
+          function close(node) {
+            result += '</' + tag(node) + '>';
+          }
+
+          /**
+           * @param {Event} event
+           */
+          function render(event) {
+            (event.event === 'start' ? open : close)(event.node);
+          }
+
+          while (original.length || highlighted.length) {
+            let stream = selectStream();
+            result += escapeHTML(value.substring(processed, stream[0].offset));
+            processed = stream[0].offset;
+            if (stream === original) {
+              /*
+              On any opening or closing tag of the original markup we first close
+              the entire highlighted node stack, then render the original tag along
+              with all the following original tags at the same offset and then
+              reopen all the tags on the highlighted stack.
+              */
+              nodeStack.reverse().forEach(close);
+              do {
+                render(stream.splice(0, 1)[0]);
+                stream = selectStream();
+              } while (stream === original && stream.length && stream[0].offset === processed);
+              nodeStack.reverse().forEach(open);
+            } else {
+              if (stream[0].event === 'start') {
+                nodeStack.push(stream[0].node);
+              } else {
+                nodeStack.pop();
+              }
+              render(stream.splice(0, 1)[0]);
+            }
+          }
+          return result + escapeHTML(value.substr(processed));
+        }
+
+        return mergeHTMLPlugin;
+
+      }());
+
+      hljs.addPlugin(mergeHTMLPlugin);
 
       const editorEle = document.getElementById('jsonBlock');