Merge pull request #23 from alexandrev/codex/add-xml-pretty-print-button

Add pretty print button

frontend/package-lock.json

@@ -11,7 +11,8 @@
         "@monaco-editor/react": "^4.7.0",
         "firebase": "^9.23.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "xml-formatter": "^3.6.6"
       },
       "devDependencies": {
         "@vitejs/plugin-react": "^4.1.0",
@@ -2671,6 +2672,27 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/xml-formatter": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/xml-formatter/-/xml-formatter-3.6.6.tgz",
+      "integrity": "sha512-yfofQht42x2sN1YThT6Er6GFXiQinfDAsMTNvMPi2uZw5/Vtc2PYHfvALR8U+b2oN2ekBxLd2tGWV06rAM8nQA==",
+      "license": "MIT",
+      "dependencies": {
+        "xml-parser-xo": "^4.1.4"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/xml-parser-xo": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/xml-parser-xo/-/xml-parser-xo-4.1.4.tgz",
+      "integrity": "sha512-wo+yWDNeMwd1ctzH4CsiGXaAappDsxuR+VnmPewOzHk/zvefksT2ZlcWpAePl11THOWgnIZM4GjvumevurNWZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

frontend/package.json

@@ -8,10 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "firebase": "^9.23.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@monaco-editor/react": "^4.7.0",
-    "firebase": "^9.23.0"
+    "xml-formatter": "^3.6.6"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.1.0",

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import Editor from "@monaco-editor/react";
+import formatXML from "xml-formatter";
 import { initializeApp } from "firebase/app";
 import {
   getAuth,
@@ -508,9 +509,12 @@ export default function App() {
         )}
         <button
           className="icon-button result-format-button"
-          onClick={() =>
-            resultEditorRef.current?.getAction("editor.action.formatDocument").run()
-          }
+          onClick={() => {
+            try {
+              const formatted = formatXML(result);
+              setResult(formatted);
+            } catch {}
+          }}
         >
           📝
         </button>