Merge pull request #442 from Sushanth012/fix/xml-beautifier-attributes

fix(xml): preserve attributes when beautifying XML

Author: Chesterkxng

public/locales/en/xml.json

@@ -6,6 +6,11 @@
     "resultTitle": "Beautified XML",
     "shortDescription": "Format and beautify XML code",
     "title": "XML Beautifier",
+    "options": {
+      "title": "Options",
+      "preserveAttributesTitle": "Preserve Attributes",
+      "preserveAttributesDesc": "Preserve the original XML attribute formatting and order."
+    },
     "toolInfo": {
       "description": "This tool allows you to format XML data with proper indentation and spacing, making it more readable and easier to work with.",
       "title": "XML Beautifier"

src/pages/tools/xml/xml-beautifier/index.tsx

@@ -4,34 +4,53 @@ import { ToolComponentProps } from '@tools/defineTool';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { CardExampleType } from '@components/examples/ToolExamples';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import { beautifyXml } from './service';
 import { InitialValuesType } from './types';
 import { useTranslation } from 'react-i18next';
 
-const initialValues: InitialValuesType = {};
+const initialValues: InitialValuesType = {
+  preserveAttributes: true
+};
 
 const exampleCards: CardExampleType<InitialValuesType>[] = [
   {
     title: 'Beautify XML',
     description: 'Beautify a compact XML string for readability.',
     sampleText: '<root><item>1</item><item>2</item></root>',
     sampleResult: `<root>\n  <item>1</item>\n  <item>2</item>\n</root>`,
-    sampleOptions: {}
+    sampleOptions: { preserveAttributes: true }
   }
 ];
 
-export default function XmlBeautifier({
-  title,
-  longDescription
-}: ToolComponentProps) {
+export default function XmlBeautifier({ title }: ToolComponentProps) {
   const { t } = useTranslation('xml');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
-  const compute = (_values: InitialValuesType, input: string) => {
-    setResult(beautifyXml(input, {}));
+  const compute = (values: InitialValuesType, input: string) => {
+    if (!input || input.trim() == '') return;
+    setResult(beautifyXml(input, values));
   };
 
+  const getGroups: GetGroupsType<InitialValuesType> | null = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: t('xmlBeautifier.options.title'),
+      component: (
+        <CheckboxWithDesc
+          checked={values.preserveAttributes}
+          onChange={(value) => updateField('preserveAttributes', value)}
+          title={t('xmlBeautifier.options.preserveAttributesTitle')}
+          description={t('xmlBeautifier.options.preserveAttributesDesc')}
+        />
+      )
+    }
+  ];
+
   return (
     <ToolContent
       title={title}
@@ -52,12 +71,12 @@ export default function XmlBeautifier({
       }
       initialValues={initialValues}
       exampleCards={exampleCards}
-      getGroups={null}
+      getGroups={getGroups}
       setInput={setInput}
       compute={compute}
       toolInfo={{
-        title: t('xmlBeautifier.toolInfo.title', { title }),
-        description: longDescription
+        title: t('xmlBeautifier.toolInfo.title'),
+        description: t('xmlBeautifier.toolInfo.description')
       }}
     />
   );

src/pages/tools/xml/xml-beautifier/service.ts

@@ -1,21 +1,24 @@
 import { InitialValuesType } from './types';
 import { XMLParser, XMLBuilder, XMLValidator } from 'fast-xml-parser';
 
-export function beautifyXml(
-  input: string,
-  _options: InitialValuesType
-): string {
+export function beautifyXml(input: string, options: InitialValuesType): string {
   const valid = XMLValidator.validate(input);
   if (valid !== true) {
     if (typeof valid === 'object' && valid.err) {
       return `Invalid XML: ${valid.err.msg} (line ${valid.err.line}, col ${valid.err.col})`;
     }
     return 'Invalid XML';
   }
+
+  const { preserveAttributes } = options;
   try {
-    const parser = new XMLParser();
+    const parser = new XMLParser({ ignoreAttributes: !preserveAttributes });
     const obj = parser.parse(input);
-    const builder = new XMLBuilder({ format: true, indentBy: '  ' });
+    const builder = new XMLBuilder({
+      format: true,
+      indentBy: '  ',
+      ignoreAttributes: !preserveAttributes
+    });
     return builder.build(obj);
   } catch (e: any) {
     return `Invalid XML: ${e.message}`;

src/pages/tools/xml/xml-beautifier/types.ts

@@ -1,3 +1,3 @@
 export type InitialValuesType = {
-  // splitSeparator: string;
+  preserveAttributes: boolean;
 };

src/pages/tools/xml/xml-beautifier/xml-beautifier.service.test.ts

@@ -4,15 +4,22 @@ import { beautifyXml } from './service';
 describe('xml-beautifier', () => {
   it('beautifies valid XML', () => {
     const input = '<root><a>1</a><b>2</b></root>';
-    const result = beautifyXml(input, {});
+    const result = beautifyXml(input, { preserveAttributes: true });
     expect(result).toContain('<root>');
     expect(result).toContain('  <a>1</a>');
     expect(result).toContain('  <b>2</b>');
   });
 
+  it('preserves attributes while beautifying XML', () => {
+    const input = '<root><user id="42" role="admin">Alice</user></root>';
+    const result = beautifyXml(input, { preserveAttributes: true });
+
+    expect(result).toContain('<user id="42" role="admin">Alice</user>');
+  });
+
   it('returns error for invalid XML', () => {
     const input = '<root><a>1</b></root>';
-    const result = beautifyXml(input, {});
+    const result = beautifyXml(input, { preserveAttributes: true });
     expect(result).toMatch(/Invalid XML/i);
   });
 });