Add XML Formatter component and update styles #282

[devvsakib]

• Implemented XmlFormatter component for formatting XML input.
• Updated index.css to enhance textarea and input styles.
• Registered XmlFormatter in DevTools and marked it as available in the DevArea.

Summary by CodeRabbit

• New Features
  • Added an XML Formatter tool in Dev Tools. Paste XML to validate structure and format with indentation/line breaks, view read-only formatted output, and clear/reset easily. Now accessible from the Dev Area tools list with error feedback for invalid input.
• Style
  • Updated global input and textarea styling: dark theme, full-width, padding, larger font, rounded corners, and subtle borders. Removed default focus outlines.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
devtoolsarena	Building	Preview	Comment	Oct 7, 2025 2:24pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a new XmlFormatter React component, integrates it into DevTools routing and DevArea availability, and updates global input/textarea styles. The tool validates XML with DOMParser, formats valid XML with indentation, supports clear/reset, and is now selectable in the DevArea UI.

Changes

Cohort / File(s)	Summary of Changes
XML Formatter Component src/components/DevAreaTools/XmlFormatter.jsx	New React component with input/output textareas, DOMParser-based validation, formatting function, Format and Clear handlers, and basic error handling.
DevArea Integration src/pages/DevArea/DevTools.jsx, src/pages/DevArea/index.jsx	Imported and routed the XmlFormatter tool ("xml-formatter" key) and set its availability flag to true for display and navigation in the DevArea grid.
Global Styles src/index.css	Added global styles for textarea and input: dark theme, full width, rounded borders, padding, larger font, white text, and removed default focus outlines.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant DevArea as DevArea (Pages)
  participant XmlFmt as XmlFormatter (Component)
  participant Parser as DOMParser
  participant Formatter as formatXml()

  User->>DevArea: Select "XML Formatter"
  DevArea->>XmlFmt: Render tool
  User->>XmlFmt: Enter XML and click "Format"
  XmlFmt->>Parser: parseFromString(xml, "application/xml")
  alt Valid XML
    Parser-->>XmlFmt: Parsed Document
    XmlFmt->>Formatter: formatXml(parsed)
    Formatter-->>XmlFmt: Indented XML string
    XmlFmt-->>User: Display formatted output
  else Invalid XML
    Parser-->>XmlFmt: parsererror
    XmlFmt-->>User: Show "❌ Invalid XML structure."
  end

  User->>XmlFmt: Click "Clear"
  XmlFmt-->>User: Reset input and output

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• Add XML Formatter Tool #282 — Implements the requested XML Formatter tool with validation and formatting UI.

Possibly related PRs

• devarea page added with two tools, issue #247 — Similar addition of a DevArea tool with updates to DevTools mapping and DevArea pages.

Poem

I nibble tags with tidy cheer,
Indent the lines from ear to ear.
If brackets stray, I gently squeak—
“Invalid!” with a tasteful tweak.
Click format—presto! neat and bright;
A happy hop through XML night. 🐇✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch development

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1e4ca0c and fd9171b.

📒 Files selected for processing (4)

• src/components/DevAreaTools/XmlFormatter.jsx (1 hunks)
• src/index.css (1 hunks)
• src/pages/DevArea/DevTools.jsx (2 hunks)
• src/pages/DevArea/index.jsx (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}