chore: resolve all reviews

Author: Angekarara

json-tool/public/assets/js/core/dom.js

@@ -1,7 +1,22 @@
 /* ========== COPY FUNCTIONS ========== */
 function copyToClipboard(text, successMessage) {
-  navigator.clipboard
-    .writeText(text)
+  (navigator.clipboard?.writeText
+    ? navigator.clipboard.writeText(text)
+    : new Promise((res, rej) => {
+        try {
+          const ta = Object.assign(document.createElement("textarea"), {
+            value: text,
+            style: "position:fixed;top:-1000px",
+          });
+          document.body.appendChild(ta);
+          ta.select();
+          document.execCommand("copy") ? res() : rej();
+          ta.remove();
+        } catch (e) {
+          rej(e);
+        }
+      })
+  )
     .then(() => {
       Swal.fire({
         icon: "success",
@@ -200,4 +215,3 @@ function enableTabReordering(containerId) {
     });
   });
 }
-

json-tool/public/assets/js/features/codegen/codegen.js

@@ -125,7 +125,7 @@ function generateCode(tabId) {
   if (lang === "typescript") code = generateTypeScript(obj, "Root");
   else if (lang === "python") code = generatePython(obj, "Root");
   else if (lang === "go") code = generateGo(obj, "Root");
-  outputPre.innerHTML = code;
+  outputPre.textContent = code;
   saveGlobalState();
 }
 

json-tool/public/assets/js/features/compare/compare.js

@@ -130,12 +130,15 @@ function compareJSONs(tabId) {
   }
   const leftFormatted = JSON.stringify(leftObj, null, 2);
   const rightFormatted = JSON.stringify(rightObj, null, 2);
+  const diffPreview = diffJSONsPreview(leftFormatted, rightFormatted);
+  const sanitizedDiffPreview = DOMPurify.sanitize(diffPreview);
+
   resultDiv.innerHTML = `
                   <div style="margin-bottom: 10px;">
                       <button class="copy-button" onclick="copyCompareLeft('${tabId}')">Copy Left</button>
                       <button class="copy-button" onclick="copyCompareRight('${tabId}')">Copy Right</button>
                   </div>
-                  ${diffJSONsPreview(leftFormatted, rightFormatted)}
+                  ${sanitizedDiffPreview}
               `;
   leftTA.value = leftFormatted;
   rightTA.value = rightFormatted;
@@ -181,4 +184,4 @@ function copyCompareLeft(tabId) {
 function copyCompareRight(tabId) {
   const rightTA = document.querySelector(`#${tabId} .json-input-right`);
   copyToClipboard(rightTA.value, "Right JSON copied");
-}
+}

json-tool/public/assets/js/features/editor/editor.js

@@ -55,7 +55,7 @@ function addEditorTab(tabData = null) {
   const saved = localStorage.getItem(tabId);
   if (saved) editor.setMarkdown(saved);
 
-  enableEditorTabReordering();
+  enableTabReordering("editor-tabs-container");
   applyEditorTabDarkMode();
 }
 
@@ -73,18 +73,20 @@ function switchEditorTab(tabId) {
   updateEditorGlobalState();
 }
 
-function saveEditorContent(tabId) {
+function saveEditorContent(tabId, silent = false) {
   const content = editorInstances[tabId].getMarkdown();
   localStorage.setItem(tabId, content);
   updateEditorGlobalState();
-  Swal.fire({
-    toast: true,
-    position: "top-end",
-    icon: "success",
-    title: "Autosaved",
-    showConfirmButton: false,
-    timer: 1500,
-  });
+  if (!silent) {
+    Swal.fire({
+      toast: true,
+      position: "top-end",
+      icon: "success",
+      title: "Saved!", // Changed from Autosaved to Saved!
+      showConfirmButton: false,
+      timer: 1500,
+    });
+  }
 }
 
 async function deleteEditorTab(tabId, event) {
@@ -105,6 +107,7 @@ async function deleteEditorTab(tabId, event) {
   if (!result.isConfirmed) return;
 
   localStorage.removeItem(tabId);
+  editorInstances[tabId]?.destroy();
   delete editorInstances[tabId];
   document
     .querySelector(`#editor-tabs-container .tab-button[data-tab="${tabId}"]`)
@@ -158,38 +161,6 @@ function loadEditorGlobalState() {
   }
 }
 
-function enableEditorTabReordering() {
-  const container = document.getElementById("editor-tabs-container");
-  const buttons = container.querySelectorAll(".tab-button[data-tab]");
-  buttons.forEach((btn) => {
-    btn.draggable = true;
-    btn.addEventListener("dragstart", (e) => {
-      e.dataTransfer.setData("text/plain", btn.getAttribute("data-tab"));
-      btn.classList.add("dragging");
-    });
-    btn.addEventListener("dragend", () => {
-      btn.classList.remove("dragging");
-    });
-    btn.addEventListener("dragover", (e) => {
-      e.preventDefault();
-      btn.classList.add("drag-over");
-    });
-    btn.addEventListener("dragleave", () => {
-      btn.classList.remove("drag-over");
-    });
-    btn.addEventListener("drop", (e) => {
-      e.preventDefault();
-      const draggedId = e.dataTransfer.getData("text/plain");
-      const draggedBtn = container.querySelector(`[data-tab="${draggedId}"]`);
-      btn.classList.remove("drag-over");
-      if (draggedBtn && draggedBtn !== btn) {
-        container.insertBefore(draggedBtn, btn);
-        updateEditorGlobalState();
-      }
-    });
-  });
-}
-
 function applyEditorTabDarkMode() {
   const container = document.getElementById("editor-tabs-container");
   container.querySelectorAll(".tab-button").forEach((btn) => {

json-tool/public/assets/js/features/formatter/formatter.js

@@ -340,12 +340,16 @@ function createTreeView(data, parentElement) {
       parent.appendChild(node);
     } else {
       const valueSpan = document.createElement("span");
-      valueSpan.innerHTML = `
-                  <span class="tree-key">${key}: </span>
-                  <span class="${getValueTypeClass(value)}">${formatValue(
-        value
-      )}</span>
-              `;
+
+      const keyEl = document.createElement("span");
+      keyEl.className = "tree-key";
+      keyEl.textContent = `${key}: `;
+
+      const valEl = document.createElement("span");
+      valEl.className = getValueTypeClass(value);
+      valEl.textContent = formatValue(value);
+
+      valueSpan.append(keyEl, valEl);
 
       // Value context menu
       valueSpan.addEventListener("contextmenu", (e) => {

json-tool/public/index.html

@@ -31,6 +31,7 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
     />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.10/purify.min.js"></script>
   </head>
 
   <body>