Frontend/assets/scripts/tools/highlight.js

@@ -1,72 +1,54 @@
-function formatAndValidateJson(errorElement) {
-  const input = document.querySelector('#jsonBlock');
-  const processInfo = document.getElementById(errorElement);
+/**
+ * This file contains scripts needed for syntax highlight to work.
+ */
 
-  const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting"
+function highlightSyntax(elementId) {
+    const element = document.getElementById(elementId);
+    element.innerHTML = hljs.highlightAuto(element.innerText).value
+}
 
-  fetch(address, {
-    method: 'POST',
-    body: input.textContent
-  })
-  .then(async (response) => {
-    const promise = response.json();
-    if (!response.ok) {
-      throw Error(await promise);
-    }
+/**
+ * Converts pasted data to plain text
+ * 
+ * @function
+ * @name configurePastingInElement
+ * @kind function
+ * @param {any} elementId
+ * @returns {void}
+ */
+function configurePastingInElement(elementId) {
+  const editorEle = document.getElementById(elementId);
 
-    return promise;
-  })
-  .then((data) => {
-    input.innerText = data.data;
-    processInfo.innerText = "";
-    hljs.highlightElement(input);
+  // Handle the `paste` event
+  editorEle.addEventListener('paste', function (e) {
+      // Prevent the default action
+      e.preventDefault();
 
-    processInfo.innerHTML = "<b style='color: green'>Computed in </b> <span style='color: green'>" + data.time + "ms</span>";
-  })
-  .catch((error) => {
-    processInfo.innerHTML = "<b style='color: red'>" + error.data + "</b>";
-    console.error('Error:', error);
+      // Get the copied text from the clipboard
+      const text = e.clipboardData
+          ? (e.originalEvent || e).clipboardData.getData('text/plain')
+          : // For IE
+          window.clipboardData
+              ? window.clipboardData.getData('Text')
+              : '';
+
+      if (document.queryCommandSupported('insertText')) {
+          document.execCommand('insertText', false, text);
+      } else {
+          // Insert text at the current position of caret
+          const range = document.getSelection().getRangeAt(0);
+          range.deleteContents();
+
+          const textNode = document.createTextNode(text);
+          range.insertNode(textNode);
+          range.selectNodeContents(textNode);
+          range.collapse(false);
+
+          const selection = window.getSelection();
+          selection.removeAllRanges();
+          selection.addRange(range);
+      }
+      highlightSyntax(editorEle.id);
+      
   });
-}
-
-function minimizeJson(errorElement) {
-  const input = document.querySelector('#jsonBlock');
-  const processInfo = document.getElementById(errorElement);
-
-  const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/minimize"
-
-  fetch(address, {
-    method: 'POST',
-    body: input.textContent
-  })
-  .then(async (response) => {
-    const promise = response.json();
-    if (!response.ok) {
-      throw Error(await promise);
-    }
-
-    return promise;
-  })
-  .then((data) => {
-    input.innerText = data.data;
-    processInfo.innerText = "";
-    hljs.highlightElement(input);
-
-    processInfo.innerHTML = "<b style='color: green'>Computed in </b> <span style='color: green'>" + data.time + "ms</span>";
-  })
-  .catch((error) => {
-    processInfo.innerHTML = "<b style='color: red'>" + error.data + "</b>";
-    console.error('Error:', error);
-  });
-}
-
-function clearJsonData() {
-  const input = document.querySelector('#jsonBlock');
-  input.textContent = "";
-}
-
-function insertDefaultJson() {
-  const input = document.querySelector('#jsonBlock');
-  input.textContent = "{\"enter\": \"your\", \"json\": \"here\"}";
-  hljs.highlightElement(input);
 }

Frontend/assets/scripts/tools/json.js

@@ -0,0 +1,72 @@
+function formatAndValidateJson(errorElement) {
+  const input = document.querySelector('#jsonBlock');
+  const processInfo = document.getElementById(errorElement);
+
+  const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting"
+
+  fetch(address, {
+    method: 'POST',
+    body: input.textContent
+  })
+  .then(async (response) => {
+    const promise = response.json();
+    if (!response.ok) {
+      throw Error(await promise);
+    }
+
+    return promise;
+  })
+  .then((data) => {
+    input.innerText = data.data;
+    processInfo.innerText = "";
+    hljs.highlightElement(input);
+
+    processInfo.innerHTML = "<b style='color: green'>Computed in </b> <span style='color: green'>" + data.time + "ms</span>";
+  })
+  .catch((error) => {
+    processInfo.innerHTML = "<b style='color: red'>" + error.data + "</b>";
+    console.error('Error:', error);
+  });
+}
+
+function minimizeJson(errorElement) {
+  const input = document.querySelector('#jsonBlock');
+  const processInfo = document.getElementById(errorElement);
+
+  const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/minimize"
+
+  fetch(address, {
+    method: 'POST',
+    body: input.textContent
+  })
+  .then(async (response) => {
+    const promise = response.json();
+    if (!response.ok) {
+      throw Error(await promise);
+    }
+
+    return promise;
+  })
+  .then((data) => {
+    input.innerText = data.data;
+    processInfo.innerText = "";
+    hljs.highlightElement(input);
+
+    processInfo.innerHTML = "<b style='color: green'>Computed in </b> <span style='color: green'>" + data.time + "ms</span>";
+  })
+  .catch((error) => {
+    processInfo.innerHTML = "<b style='color: red'>" + error.data + "</b>";
+    console.error('Error:', error);
+  });
+}
+
+function clearJsonData() {
+  const input = document.querySelector('#jsonBlock');
+  input.textContent = "";
+}
+
+function insertDefaultJson() {
+  const input = document.querySelector('#jsonBlock');
+  input.textContent = "{\"enter\": \"your\", \"json\": \"here\"}";
+  hljs.highlightElement(input);
+}

Frontend/assets/scripts/tools/scripts.js

@@ -85,10 +85,7 @@ function escapeHTML(elementID) {
         .replace(/'/g, "'");
 }
 
-function highlightSyntax(elementId) {
-    const element = document.getElementById(elementId);
-    element.innerHTML = hljs.highlightAuto(element.innerText).value
-}
+
 
 /**
 * It fills the XML area with a sample XML.
@@ -410,42 +407,4 @@ async function restRequest(port, endpoint, xmlData, transformData) {
         
     });
     return result;
-}
-
-
-function configurePastingInElement(elementId) {
-    const editorEle = document.getElementById(elementId);
-
-    // Handle the `paste` event
-    editorEle.addEventListener('paste', function (e) {
-        // Prevent the default action
-        e.preventDefault();
-
-        // Get the copied text from the clipboard
-        const text = e.clipboardData
-            ? (e.originalEvent || e).clipboardData.getData('text/plain')
-            : // For IE
-            window.clipboardData
-                ? window.clipboardData.getData('Text')
-                : '';
-
-        if (document.queryCommandSupported('insertText')) {
-            document.execCommand('insertText', false, text);
-        } else {
-            // Insert text at the current position of caret
-            const range = document.getSelection().getRangeAt(0);
-            range.deleteContents();
-
-            const textNode = document.createTextNode(text);
-            range.insertNode(textNode);
-            range.selectNodeContents(textNode);
-            range.collapse(false);
-
-            const selection = window.getSelection();
-            selection.removeAllRanges();
-            selection.addRange(range);
-        }
-        highlightSyntax(editorEle.id);
-        
-    });
 }

Frontend/tools/jsonFormatter.html

@@ -10,6 +10,7 @@
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <script src="../assets/scripts/tools/scripts.js"></script>
     <script src="../assets/scripts/tools/highlight.js"></script>
+    <script src="../assets/scripts/tools/json.js"></script>
     <script>hljs.highlightAll();</script>
   </head>