Rich Text Editor Toolbar erweiterung
This commit is contained in:
parent
578ccb72d9
commit
a587208eaf
@ -154,66 +154,153 @@ export default function AdminPanel() {
|
||||
}
|
||||
};
|
||||
|
||||
const MarkdownToolbar = ({ contentIndex }) => (
|
||||
<div className="flex flex-wrap gap-2 mb-2 p-2 bg-gray-100 rounded">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '**{}**')}
|
||||
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50"
|
||||
title="Fett"
|
||||
>
|
||||
<strong>B</strong>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '*{}*')}
|
||||
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50"
|
||||
title="Kursiv"
|
||||
>
|
||||
<em>I</em>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '# {}')}
|
||||
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50"
|
||||
title="Überschrift 1"
|
||||
>
|
||||
H1
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '## {}')}
|
||||
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50"
|
||||
title="Überschrift 2"
|
||||
>
|
||||
H2
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '### {}')}
|
||||
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50"
|
||||
title="Überschrift 3"
|
||||
>
|
||||
H3
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '- {}')}
|
||||
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50"
|
||||
title="Liste"
|
||||
>
|
||||
•
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '[{}](URL)')}
|
||||
className="px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50"
|
||||
title="Link"
|
||||
>
|
||||
🔗
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
const MarkdownToolbar = ({ contentIndex }) => {
|
||||
const buttonClass = "px-2 py-1 text-xs bg-white border rounded hover:bg-gray-50 flex items-center justify-center min-w-[32px]";
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 mb-2 p-2 bg-gray-50 rounded-lg">
|
||||
{/* Text Formatierung */}
|
||||
<div className="flex gap-2 items-center border-r pr-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '**{}**')}
|
||||
className={buttonClass}
|
||||
title="Fett"
|
||||
>
|
||||
<strong>B</strong>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '*{}*')}
|
||||
className={buttonClass}
|
||||
title="Kursiv"
|
||||
>
|
||||
<em>I</em>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '~~{}~~')}
|
||||
className={buttonClass}
|
||||
title="Durchgestrichen"
|
||||
>
|
||||
<span className="line-through">S</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Überschriften */}
|
||||
<div className="flex gap-2 items-center border-r pr-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '# {}')}
|
||||
className={buttonClass}
|
||||
title="Überschrift 1"
|
||||
>
|
||||
H1
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '## {}')}
|
||||
className={buttonClass}
|
||||
title="Überschrift 2"
|
||||
>
|
||||
H2
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => insertMarkdown(contentIndex, '### {}')}
|
||||
className={buttonClass}
|
||||
title="Überschrift 3"
|
||||
>
|
||||
H3
|
||||
</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, '')}
|
||||
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 (
|
||||
<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}) => {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
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
|
||||
className={`${className} bg-gray-100 block`}
|
||||
className={`${className} block font-mono text-sm`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -334,7 +424,7 @@ export default function AdminPanel() {
|
||||
</pre>
|
||||
) : (
|
||||
<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}
|
||||
>
|
||||
{children}
|
||||
|
||||
@ -62,9 +62,12 @@ export default function BlogPost({ blog }) {
|
||||
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">
|
||||
<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
|
||||
className={`${className} bg-gray-100 block`}
|
||||
className={`${className} block font-mono text-sm`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -72,7 +75,7 @@ export default function BlogPost({ blog }) {
|
||||
</pre>
|
||||
) : (
|
||||
<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}
|
||||
>
|
||||
{children}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user