feat: add text difference checker

components/utils/text-difference.utils.test.ts

@@ -0,0 +1,71 @@
+import { calculateDiff } from "./text-difference.utils";
+
+describe("diff.utils", () => {
+  it("should detect line additions, deletions, and unchanged lines", () => {
+    const oldText = "Line one\nLine to be removed\nLine three";
+    const newText = "Line one\nLine three\nLine four";
+    const result = calculateDiff(oldText, newText);
+    expect(result).toEqual([
+      { text: "Line one", type: "unchanged" },
+      { text: "Line to be removed", type: "removed" },
+      { text: "Line three", type: "removed" },
+      { text: "Line three", type: "added" },
+      { text: "Line four", type: "added" },
+    ]);
+  });
+
+  it("should detect completely new lines", () => {
+    const oldText = "";
+    const newText = "New line one\nNew line two";
+    const result = calculateDiff(oldText, newText);
+    expect(result).toEqual([
+      { text: "New line one", type: "added" },
+      { text: "New line two", type: "added" },
+    ]);
+  });
+
+  it("should detect completely removed lines", () => {
+    const oldText = "Old line one\nOld line two";
+    const newText = "";
+    const result = calculateDiff(oldText, newText);
+    expect(result).toEqual([
+      { text: "Old line one", type: "removed" },
+      { text: "Old line two", type: "removed" },
+    ]);
+  });
+
+  it("should handle identical texts", () => {
+    const oldText = "Same line one\nSame line two";
+    const newText = "Same line one\nSame line two";
+    const result = calculateDiff(oldText, newText);
+    expect(result).toEqual([
+      { text: "Same line one", type: "unchanged" },
+      { text: "Same line two", type: "unchanged" },
+    ]);
+  });
+
+  it("should handle mixed changes", () => {
+    const oldText = "Line one\nLine two\nLine three\nLine four";
+    const newText = "Line one\nLine 2\nLine three\nLine four\nLine five";
+    const result = calculateDiff(oldText, newText);
+    expect(result).toEqual([
+      { text: "Line one", type: "unchanged" },
+      { text: "Line two", type: "removed" },
+      { text: "Line 2", type: "added" },
+      { text: "Line three", type: "unchanged" },
+      { text: "Line four", type: "removed" },
+      { text: "Line four", type: "added" },
+      { text: "Line five", type: "added" },
+    ]);
+  });
+
+  it("should detect line changes as removals and additions", () => {
+    const oldText = "Hello world";
+    const newText = "Hello brave new world";
+    const result = calculateDiff(oldText, newText);
+    expect(result).toEqual([
+      { text: "Hello world", type: "removed" },
+      { text: "Hello brave new world", type: "added" },
+    ]);
+  });
+});

components/utils/text-difference.utils.ts

@@ -0,0 +1,23 @@
+import { diffLines } from "diff";
+
+export function calculateDiff(oldText: string, newText: string) {
+  const diff = diffLines(oldText, newText);
+  return diff
+    .map((part) => {
+      const lineType = part.added
+        ? "added"
+        : part.removed
+          ? "removed"
+          : "unchanged";
+      const lines = part.value.split("\n").map((line) => ({
+        text: line,
+        type: lineType,
+      }));
+      // Remove the last empty line if present
+      if (lines[lines.length - 1]?.text === "") {
+        lines.pop();
+      }
+      return lines;
+    })
+    .flat();
+}

components/utils/tools-list.ts

@@ -107,6 +107,12 @@ export const tools = [
       "Resize images while maintaining aspect ratio and choose between PNG and JPEG formats with our free tool.",
     link: "/utilities/image-resizer",
   },
+  {
+    title: "Text Difference Checker",
+    description:
+      "Compare two text files or strings and quickly identify differences between them.",
+    link: "/utilities/text-difference",
+  },
   {
     title: "JWT Parser",
     description:

package.json

@@ -23,6 +23,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "curlconverter": "^4.10.1",
+    "diff": "^7.0.0",
     "js-yaml": "^4.1.0",
     "lucide-react": "^0.414.0",
     "next": "14.2.4",
@@ -37,6 +38,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
+    "@types/diff": "^5.2.2",
     "@types/jest": "^29.5.12",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20",

pages/utilities/text-difference.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import { Textarea } from "@/components/ds/TextareaComponent";
+import PageHeader from "@/components/PageHeader";
+import { Card } from "@/components/ds/CardComponent";
+import { Label } from "@/components/ds/LabelComponent";
+import Header from "@/components/Header";
+import { CMDK } from "@/components/CMDK";
+import CallToActionGrid from "@/components/CallToActionGrid";
+import Meta from "@/components/Meta";
+import GitHubContribution from "@/components/GitHubContribution";
+import { calculateDiff } from "@/components/utils/text-difference.utils";
+
+type DiffResult = {
+  text: string;
+  type: string;
+};
+
+export default function TextDifference() {
+  const [input1, setInput1] = useState("");
+  const [input2, setInput2] = useState("");
+  const [diffResults, setDiffResults] = useState<DiffResult[]>([]);
+
+  useEffect(() => {
+    if (input1.trim() === "" && input2.trim() === "") {
+      setDiffResults([]);
+      return;
+    }
+    try {
+      const results = calculateDiff(input1, input2);
+      setDiffResults(results);
+    } catch (errorMessage: unknown) {
+      setDiffResults([]);
+    }
+  }, [input1, input2]);
+
+  return (
+    <main>
+      <Meta
+        title="Text Difference Checker | Free, Open Source & Ad-free"
+        description="Compare two pieces of text and see the differences."
+      />
+      <Header />
+      <CMDK />
+
+      <section className="container max-w-2xl mb-12">
+        <PageHeader
+          title="Text Difference Checker"
+          description="Fast, free, open source, ad-free tools."
+        />
+      </section>
+
+      <section className="container max-w-2xl mb-6">
+        <Card className="flex flex-col p-6 hover:shadow-none shadow-none rounded-xl">
+          <div>
+            <Label>Text 1</Label>
+            <Textarea
+              rows={6}
+              placeholder="Paste first text here"
+              onChange={(e) => setInput1(e.currentTarget.value)}
+              className="mb-6"
+              value={input1}
+            />
+
+            <Label>Text 2</Label>
+            <Textarea
+              rows={6}
+              placeholder="Paste second text here"
+              onChange={(e) => setInput2(e.currentTarget.value)}
+              className="mb-6"
+              value={input2}
+            />
+
+            <div className="flex justify-between items-center mb-2">
+              <Label className="mb-0">Differences</Label>
+            </div>
+
+            <div className="output-diff mb-4">
+              <pre className="p-4 overflow-auto font-mono text-sm">
+                {diffResults.map((line, index) => (
+                  <div
+                    key={index}
+                    className={`flex items-start ${
+                      line.type === "added"
+                        ? "bg-primary text-primary-foreground"
+                        : line.type === "removed"
+                          ? "bg-destructive text-destructive-foreground"
+                          : "bg-accent text-accent-foreground"
+                    }`}
+                  >
+                    <span className="w-8 text-muted-foreground select-none text-right pr-2">
+                      {index + 1}
+                    </span>
+                    <span className="whitespace-pre-wrap flex-1">
+                      {line.text}
+                    </span>
+                  </div>
+                ))}
+              </pre>
+            </div>
+          </div>
+        </Card>
+      </section>
+
+      <GitHubContribution username="ayshrj" />
+      <CallToActionGrid />
+    </main>
+  );
+}