michi/pixelbrew-webseite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rich Text Editor Fixes

Browse Source
This commit is contained in:
michi 2025-09-10 22:18:29 +02:00
parent 5e66f4bdda
commit 578ccb72d9
2 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
pages/admin/index.js
View File

@ -306,7 +306,7 @@ export default function AdminPanel() {
id={`content-${index}`}
value={content.value}
onChange={(e) => handleContentChange(index, e.target.value)}
className="w-full p-3 border rounded-lg font-mono text-sm"
className="w-full p-3 border rounded-lg font-mono text-sm whitespace-pre-wrap"
rows={content.type === 'text' ? "8" : "3"}
placeholder={content.type === 'text' ? 'Hier können Sie **Markdown** verwenden...' : 'Bild-URL eingeben...'}
/>
@ -316,7 +316,33 @@ export default function AdminPanel() {
<div className="border rounded-lg p-3 bg-gray-50">
<div className="text-xs font-medium text-gray-600 mb-2">Vorschau:</div>
<div className="prose prose-sm max-w-none">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
className="whitespace-pre-wrap"
components={{
p: ({children}) => <p className="mb-4 whitespace-pre-wrap">{children}</p>,
code: ({node, inline, className, children, ...props}) => {
const match = /language-(\w+)/.exec(className || '');
return !inline ? (
<pre className="bg-gray-100 p-4 rounded overflow-x-auto mb-4">
<code
className={`${className} bg-gray-100 block`}
{...props}
>
{children}
</code>
</pre>
) : (
<code
className="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800"
{...props}
>
{children}
</code>
);
}
}}
>
{content.value || '*Keine Inhalte zum Anzeigen*'}
</ReactMarkdown>
</div>

26
pages/blog/[slug].js
View File

@ -51,7 +51,7 @@ export default function BlogPost({ blog }) {
h1: ({children}) => <h1 className="text-3xl font-bold mb-4 text-gray-900">{children}</h1>,
h2: ({children}) => <h2 className="text-2xl font-bold mb-3 text-gray-900">{children}</h2>,
h3: ({children}) => <h3 className="text-xl font-bold mb-2 text-gray-900">{children}</h3>,
p: ({children}) => <p className="mb-4 sm:mb-6">{children}</p>,
p: ({children}) => <p className="mb-4 sm:mb-6 whitespace-pre-wrap">{children}</p>,
strong: ({children}) => <strong className="font-bold text-gray-900">{children}</strong>,
em: ({children}) => <em className="italic">{children}</em>,
ul: ({children}) => <ul className="list-disc list-inside mb-4 space-y-2">{children}</ul>,
@ -59,8 +59,26 @@ export default function BlogPost({ blog }) {
li: ({children}) => <li className="ml-4">{children}</li>,
a: ({href, children}) => <a href={href} className="text-pb-turquoise hover:underline">{children}</a>,
blockquote: ({children}) => <blockquote className="border-l-4 border-pb-turquoise pl-4 italic my-4">{children}</blockquote>,
code: ({children}) => <code className="bg-gray-100 px-2 py-1 rounded text-sm font-mono">{children}</code>,
pre: ({children}) => <pre className="bg-gray-100 p-4 rounded overflow-x-auto mb-4">{children}</pre>
code: ({node, inline, className, children, ...props}) => {
const match = /language-(\w+)/.exec(className || '');
return !inline ? (
<pre className="bg-gray-100 p-4 rounded overflow-x-auto mb-4">
<code
className={`${className} bg-gray-100 block`}
{...props}
>
{children}
</code>
</pre>
) : (
<code
className="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800"
{...props}
>
{children}
</code>
);
}
}}
>
{item}
@ -73,7 +91,7 @@ export default function BlogPost({ blog }) {
<div key={index} className="prose prose-lg max-w-none">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
className="text-gray-700 text-base sm:text-lg leading-relaxed px-2 sm:px-0"
className="text-gray-700 text-base sm:text-lg leading-relaxed px-2 sm:px-0 whitespace-pre-wrap"
components={{
h1: ({children}) => <h1 className="text-3xl font-bold mb-4 text-gray-900">{children}</h1>,
h2: ({children}) => <h2 className="text-2xl font-bold mb-3 text-gray-900">{children}</h2>,