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

Rich Text Editor Toolbar erweiterung

Browse Source
This commit is contained in:
michi 2025-09-10 23:04:49 +02:00
parent 578ccb72d9
commit a587208eaf
2 changed files with 159 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
pages/admin/index.js
View File

@ -154,66 +154,153 @@ export default function AdminPanel() {
} }
}; };
const MarkdownToolbar = ({ contentIndex }) => ( const MarkdownToolbar = ({ contentIndex }) => {
<div className="flex flex-wrap gap-2 mb-2 p-2 bg-gray-100 rounded"> const buttonClass = "px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50 flex items-center justify-center min-w-[32px]";
<button
type="button" return (
onClick={() => insertMarkdown(contentIndex, '**{}**')} <div className="flex flex-wrap gap-2 mb-2 p-2 bg-gray-50 rounded-lg">
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50" {/* Text Formatierung */}
title="Fett" <div className="flex gap-2 items-center border-r pr-2">
> <button
<strong>B</strong> type="button"
</button> onClick={() => insertMarkdown(contentIndex, '**{}**')}
<button className={buttonClass}
type="button" title="Fett"
onClick={() => insertMarkdown(contentIndex, '*{}*')} >
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50" <strong>B</strong>
title="Kursiv" </button>
> <button
<em>I</em> type="button"
</button> onClick={() => insertMarkdown(contentIndex, '*{}*')}
<button className={buttonClass}
type="button" title="Kursiv"
onClick={() => insertMarkdown(contentIndex, '# {}')} >
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50" <em>I</em>
title="Überschrift 1" </button>
> <button
H1 type="button"
</button> onClick={() => insertMarkdown(contentIndex, '~~{}~~')}
<button className={buttonClass}
type="button" title="Durchgestrichen"
onClick={() => insertMarkdown(contentIndex, '## {}')} >
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50" <span className="line-through">S</span>
title="Überschrift 2" </button>
> </div>
H2
</button> {/* Überschriften */}
<button <div className="flex gap-2 items-center border-r pr-2">
type="button" <button
onClick={() => insertMarkdown(contentIndex, '### {}')} type="button"
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50" onClick={() => insertMarkdown(contentIndex, '# {}')}
title="Überschrift 3" className={buttonClass}
> title="Überschrift 1"
H3 >
</button> H1
<button </button>
type="button" <button
onClick={() => insertMarkdown(contentIndex, '- {}')} type="button"
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50" onClick={() => insertMarkdown(contentIndex, '## {}')}
title="Liste" className={buttonClass}
> title="Überschrift 2"
• >
</button> H2
<button </button>
type="button" <button
onClick={() => insertMarkdown(contentIndex, '[{}](URL)')} type="button"
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50" onClick={() => insertMarkdown(contentIndex, '### {}')}
title="Link" className={buttonClass}
> title="Überschrift 3"
🔗 >
</button> H3
</div> </button>
); </div>
{/* Listen */}
<div className="flex gap-2 items-center border-r pr-2">
<button
type="button"
onClick={() => insertMarkdown(contentIndex, '- {}')}
className={buttonClass}
title="Aufzählungsliste"
>
•
</button>
<button
type="button"
onClick={() => insertMarkdown(contentIndex, '1. {}')}
className={buttonClass}
title="Nummerierte Liste"
>
1.
</button>
<button
type="button"
onClick={() => insertMarkdown(contentIndex, '- [ ] {}')}
className={buttonClass}
title="Aufgabenliste"
>
☐
</button>
</div>
{/* Code */}
<div className="flex gap-2 items-center border-r pr-2">
<button
type="button"
onClick={() => insertMarkdown(contentIndex, '`{}`')}
className={buttonClass}
title="Inline Code"
>
{'<>'}
</button>
<button
type="button"
onClick={() => insertMarkdown(contentIndex, '```\n{}\n```')}
className={buttonClass}
title="Code Block"
>
{'</>'}
</button>
</div>
{/* Sonstiges */}
<div className="flex gap-2 items-center">
<button
type="button"
onClick={() => insertMarkdown(contentIndex, '[{}](URL)')}
className={buttonClass}
title="Link"
>
🔗
</button>
<button
type="button"
onClick={() => insertMarkdown(contentIndex, '![{}](URL)')}
className={buttonClass}
title="Bild"
>
🖼️
</button>
<button
type="button"
onClick={() => insertMarkdown(contentIndex, '> {}')}
className={buttonClass}
title="Zitat"
>
"
</button>
<button
type="button"
onClick={() => insertMarkdown(contentIndex, '---\n')}
className={buttonClass}
title="Horizontale Linie"
>
―
</button>
</div>
</div>
);
};
return ( return (
<div className="space-y-4 bg-white p-6 rounded-lg shadow"> <div className="space-y-4 bg-white p-6 rounded-lg shadow">
@ -324,9 +411,12 @@ export default function AdminPanel() {
code: ({node, inline, className, children, ...props}) => { code: ({node, inline, className, children, ...props}) => {
const match = /language-(\w+)/.exec(className || ''); const match = /language-(\w+)/.exec(className || '');
return !inline ? ( return !inline ? (
<pre className="bg-gray-100 p-4 rounded overflow-x-auto mb-4"> <pre className="relative bg-[#1e1e1e] p-4 rounded-lg overflow-x-auto mb-4 text-white">
<div className="absolute top-0 right-0 px-4 py-1 rounded-bl bg-gray-700 text-xs text-gray-300">
{match ? match[1] : 'code'}
</div>
<code <code
className={`${className} bg-gray-100 block`} className={`${className} block font-mono text-sm`}
{...props} {...props}
> >
{children} {children}
@ -334,7 +424,7 @@ export default function AdminPanel() {
</pre> </pre>
) : ( ) : (
<code <code
className="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800" className="bg-[#1e1e1e] text-white px-2 py-1 rounded text-sm font-mono"
{...props} {...props}
> >
{children} {children}

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

@ -62,9 +62,12 @@ export default function BlogPost({ blog }) {
code: ({node, inline, className, children, ...props}) => { code: ({node, inline, className, children, ...props}) => {
const match = /language-(\w+)/.exec(className || ''); const match = /language-(\w+)/.exec(className || '');
return !inline ? ( return !inline ? (
<pre className="bg-gray-100 p-4 rounded overflow-x-auto mb-4"> <pre className="relative bg-[#1e1e1e] p-4 rounded-lg overflow-x-auto mb-4 text-white">
<div className="absolute top-0 right-0 px-4 py-1 rounded-bl bg-gray-700 text-xs text-gray-300">
{match ? match[1] : 'code'}
</div>
<code <code
className={`${className} bg-gray-100 block`} className={`${className} block font-mono text-sm`}
{...props} {...props}
> >
{children} {children}
@ -72,7 +75,7 @@ export default function BlogPost({ blog }) {
</pre> </pre>
) : ( ) : (
<code <code
className="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800" className="bg-[#1e1e1e] text-white px-2 py-1 rounded text-sm font-mono"
{...props} {...props}
> >
{children} {children}