News gefixt

src/admin/NewsManager.tsx

@@ -3,6 +3,9 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import DOMPurify from "dompurify";
 
 const apiBase = import.meta.env.VITE_API_URL;
 
@@ -54,7 +57,7 @@ const NewsManager = () => {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           title: newTitle,
-          description: newDescription,
+          description: DOMPurify.sanitize(newDescription),
           image_url: newImageUrl,
           team: newTeam,
         }),
@@ -166,10 +169,30 @@ const NewsManager = () => {
               value={newTitle}
               onChange={(e) => setNewTitle(e.target.value)}
             />
-            <Textarea
-              placeholder="Beschreibung"
+            <ReactQuill
+              theme="snow"
               value={newDescription}
-              onChange={(e) => setNewDescription(e.target.value)}
+              onChange={setNewDescription}
+              className="bg-white rounded-md"
+              modules={{
+                toolbar: [
+                  [{ header: [1, 2, false] }],
+                  ["bold", "italic", "underline", "strike"],
+                  [{ list: "ordered" }, { list: "bullet" }],
+                  ["link"],
+                  ["clean"],
+                ],
+              }}
+              formats={[
+                "header",
+                "bold",
+                "italic",
+                "underline",
+                "strike",
+                "list",
+                "bullet",
+                "link",
+              ]}
             />
 
             {/* Upload */}
@@ -235,14 +258,19 @@ const NewsManager = () => {
               <CardTitle>{item.title}</CardTitle>
             </CardHeader>
             <CardContent>
-              <p className="text-gray-600 mb-2">{item.description}</p>
               {item.image_url && (
                 <img
                   src={`${apiBase}${item.image_url}`}
                   alt={item.title}
-                  className="w-full rounded-md my-2 max-h-40 object-cover"
+                  className="w-full rounded-md mb-3 max-h-40 object-cover"
                 />
               )}
+              <div
+                className="text-gray-600 mb-2 line-clamp-3 prose max-w-none"
+                dangerouslySetInnerHTML={{
+                  __html: DOMPurify.sanitize(item.description),
+                }}
+              />
               <p className="text-xs text-gray-400">
                 Erstellt am{" "}
                 {new Date(item.created_at).toLocaleDateString("de-DE")}