feat(ui): Markdown in Beschreibung und Notizen
Bisher wurde alles als reiner Text ausgegeben. Jetzt werden Ueberschriften, Listen, Tabellen, Codebloecke, Zitate und Links dargestellt, und aus "- [ ] Aufgabe" werden echte Checklisten. Sicherheitsrelevant: der Inhalt stammt vom Benutzer. Ohne rehype-sanitize waere das ein XSS-Loch, sobald jemand rohes HTML in eine Notiz schreibt. Das Standardschema erlaubt nur harmlose Elemente; ergaenzt wird nur, was fuer Aufgabenlisten und Sprachklassen an Codebloecken noetig ist. Links bekommen zusaetzlich target=_blank mit noopener und nofollow. Die Formatierung steht in components.css: Tailwinds Preflight setzt alle Abstaende und Schriftgroessen zurueck, Ueberschriften und Listen brauchen also wieder Form. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -89,6 +89,131 @@
|
||||
0 28px 70px -24px rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/**
|
||||
* Markdown-Inhalte. Tailwind setzt in seinem Preflight alle Abstaende und
|
||||
* Schriftgroessen zurueck, also muessen Ueberschriften, Listen und
|
||||
* Codebloecke hier wieder Form bekommen.
|
||||
*/
|
||||
.md {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.65;
|
||||
color: #cbd5e1;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.md > *:first-child { margin-top: 0; }
|
||||
.md > *:last-child { margin-bottom: 0; }
|
||||
|
||||
.md h1, .md h2, .md h3, .md h4 {
|
||||
color: #f1f5f9;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin: 1.4em 0 0.5em;
|
||||
}
|
||||
.md h1 { font-size: 1.3rem; }
|
||||
.md h2 { font-size: 1.15rem; }
|
||||
.md h3 { font-size: 1rem; }
|
||||
.md h4 { font-size: 0.9rem; }
|
||||
|
||||
.md p { margin: 0.75em 0; }
|
||||
|
||||
.md a {
|
||||
color: #c4b5fd;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.md a:hover { color: #ddd6fe; }
|
||||
|
||||
.md strong { color: #f1f5f9; font-weight: 600; }
|
||||
|
||||
.md ul, .md ol { margin: 0.75em 0; padding-left: 1.35em; }
|
||||
.md ul { list-style: disc; }
|
||||
.md ol { list-style: decimal; }
|
||||
.md li { margin: 0.3em 0; }
|
||||
.md li::marker { color: #64748b; }
|
||||
|
||||
/* Aufgabenlisten aus "- [ ] …" */
|
||||
.md li:has(> input[type="checkbox"]) {
|
||||
list-style: none;
|
||||
margin-left: -1.35em;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.md input[type="checkbox"] {
|
||||
margin-top: 0.35em;
|
||||
accent-color: #8b5cf6;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.md code {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 0.35rem;
|
||||
padding: 0.1em 0.35em;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
color: #e9d5ff;
|
||||
}
|
||||
|
||||
.md pre {
|
||||
background: rgba(4, 6, 16, 0.75);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.85rem 1rem;
|
||||
margin: 0.9em 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.md pre code {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: #cbd5e1;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.md blockquote {
|
||||
border-left: 2px solid rgba(167, 139, 250, 0.5);
|
||||
padding-left: 0.9rem;
|
||||
margin: 0.9em 0;
|
||||
color: #94a3b8;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.md hr {
|
||||
border: 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.09);
|
||||
margin: 1.4em 0;
|
||||
}
|
||||
|
||||
.md table {
|
||||
width: 100%;
|
||||
margin: 0.9em 0;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8rem;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.md th, .md td {
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
padding: 0.4rem 0.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
.md th {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #e2e8f0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.md img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* ── Text & Akzente ───────────────────────────────────────── */
|
||||
|
||||
.text-gradient {
|
||||
|
||||
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import { FileText } from "lucide-react";
|
||||
import { GitPanel } from "@/components/GitPanel";
|
||||
import { Markdown } from "@/components/Markdown";
|
||||
import { NotesPanel } from "@/components/NotesPanel";
|
||||
import { ProjectHeader } from "@/components/ProjectHeader";
|
||||
import { requireUserPage } from "@/lib/auth/guard";
|
||||
@@ -66,9 +67,7 @@ export default async function ProjectPage({ params }: PageProps) {
|
||||
Beschreibung
|
||||
</h2>
|
||||
{detail.description ? (
|
||||
<p className="mt-3 whitespace-pre-wrap break-words text-sm leading-relaxed text-slate-300">
|
||||
{detail.description}
|
||||
</p>
|
||||
<Markdown className="mt-3">{detail.description}</Markdown>
|
||||
) : (
|
||||
<p className="mt-3 text-sm text-slate-500">
|
||||
Keine Beschreibung hinterlegt. Ueber „Bearbeiten“ kannst du die Idee ausformulieren.
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Markdown-Darstellung fuer Beschreibungen und Notizen.
|
||||
*
|
||||
* Der Inhalt stammt vom Benutzer, wird aber unveraendert gerendert – ohne
|
||||
* rehype-sanitize waere das ein XSS-Loch, sobald jemand rohes HTML in eine
|
||||
* Notiz schreibt. Das Standardschema erlaubt nur harmlose Elemente; ergaenzt
|
||||
* wird lediglich, was fuer Aufgabenlisten und Codebloecke noetig ist.
|
||||
*/
|
||||
const schema = {
|
||||
...defaultSchema,
|
||||
attributes: {
|
||||
...defaultSchema.attributes,
|
||||
// Checkboxen aus "- [ ] Aufgabe"
|
||||
input: [...(defaultSchema.attributes?.input ?? []), "checked", "disabled", "type"],
|
||||
// Sprachklassen wie "language-ts" fuer Codebloecke
|
||||
code: [...(defaultSchema.attributes?.code ?? []), ["className", /^language-./]],
|
||||
},
|
||||
};
|
||||
|
||||
export function Markdown({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: string | null | undefined;
|
||||
className?: string;
|
||||
}) {
|
||||
if (!children?.trim()) return null;
|
||||
|
||||
return (
|
||||
<div className={cn("md", className)}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
rehypePlugins={[[rehypeSanitize, schema]]}
|
||||
components={{
|
||||
// Links aus fremdem Inhalt immer in neuem Tab und ohne
|
||||
// Zugriff auf das oeffnende Fenster.
|
||||
a: ({ href, children: content }) => (
|
||||
<a href={href} target="_blank" rel="noreferrer noopener nofollow">
|
||||
{content}
|
||||
</a>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Loader2, NotebookPen, Pencil, Pin, PinOff, Plus, Trash2, X } from "lucide-react";
|
||||
import type { Note } from "@prisma/client";
|
||||
import { Markdown } from "@/components/Markdown";
|
||||
import { cn, formatDateTime, formatRelative } from "@/lib/utils";
|
||||
|
||||
/** Nur als "bearbeitet" zaehlen, wenn wirklich spaeter geaendert wurde. */
|
||||
@@ -118,7 +119,7 @@ export function NotesPanel({ projectId, notes }: { projectId: string; notes: Not
|
||||
/>
|
||||
<textarea
|
||||
className="field min-h-32 resize-y font-mono text-[13px] leading-relaxed"
|
||||
placeholder="Gedanken, Todos, Snippets… Zeilenumbrueche bleiben erhalten."
|
||||
placeholder={"Gedanken, Todos, Snippets…\n\nMarkdown wird dargestellt:\n- [ ] offene Aufgabe\n**fett**, `code`, [Link](https://…)"}
|
||||
value={content}
|
||||
onChange={(event) => setContent(event.target.value)}
|
||||
autoFocus
|
||||
@@ -161,9 +162,7 @@ export function NotesPanel({ projectId, notes }: { projectId: string; notes: Not
|
||||
{note.title}
|
||||
</h3>
|
||||
) : null}
|
||||
<p className="mt-1 whitespace-pre-wrap break-words text-sm leading-relaxed text-slate-300">
|
||||
{note.content}
|
||||
</p>
|
||||
<Markdown className="mt-1">{note.content}</Markdown>
|
||||
<p className="mt-2.5 text-[11px] text-slate-600" suppressHydrationWarning>
|
||||
{formatDateTime(note.createdAt)}
|
||||
{wasEdited(note) ? ` · bearbeitet ${formatRelative(note.updatedAt)}` : null}
|
||||
|
||||
Reference in New Issue
Block a user