Improve Richtext Editor
This commit is contained in:
Stefan Hardegger
@@ -114,26 +114,84 @@ export default function RichTextEditor({
|
||||
|
||||
const formatText = (tag: string) => {
|
||||
if (viewMode === 'visual') {
|
||||
// For visual mode, we'll just show formatting helpers
|
||||
// In a real implementation, you'd want a proper WYSIWYG editor
|
||||
return;
|
||||
}
|
||||
// For visual mode, we'll insert formatted HTML directly
|
||||
const textarea = visualTextareaRef.current;
|
||||
if (!textarea) return;
|
||||
|
||||
const textarea = document.querySelector('textarea') as HTMLTextAreaElement;
|
||||
if (!textarea) return;
|
||||
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const selectedText = htmlValue.substring(start, end);
|
||||
|
||||
if (selectedText) {
|
||||
const beforeText = htmlValue.substring(0, start);
|
||||
const afterText = htmlValue.substring(end);
|
||||
const formattedText = `<${tag}>${selectedText}</${tag}>`;
|
||||
const newValue = beforeText + formattedText + afterText;
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const selectedText = getPlainText(value).substring(start, end);
|
||||
|
||||
setHtmlValue(newValue);
|
||||
onChange(newValue);
|
||||
if (selectedText) {
|
||||
// Create formatted HTML
|
||||
const formattedHtml = `<${tag}>${selectedText}</${tag}>`;
|
||||
|
||||
// Get current plain text
|
||||
const currentPlainText = getPlainText(value);
|
||||
const beforeText = currentPlainText.substring(0, start);
|
||||
const afterText = currentPlainText.substring(end);
|
||||
|
||||
// Convert back to HTML while preserving existing formatting
|
||||
// This is a simplified approach - in practice you'd want more sophisticated HTML merging
|
||||
const beforeHtml = beforeText ? `<p>${beforeText.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>')}</p>` : '';
|
||||
const afterHtml = afterText ? `<p>${afterText.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>')}</p>` : '';
|
||||
|
||||
const newHtmlValue = beforeHtml + formattedHtml + afterHtml;
|
||||
setHtmlValue(newHtmlValue);
|
||||
onChange(newHtmlValue);
|
||||
} else {
|
||||
// No selection - insert template
|
||||
const template = tag === 'h1' ? '<h1>Heading 1</h1>' :
|
||||
tag === 'h2' ? '<h2>Heading 2</h2>' :
|
||||
tag === 'h3' ? '<h3>Heading 3</h3>' :
|
||||
`<${tag}>Formatted text</${tag}>`;
|
||||
|
||||
const newHtmlValue = value + template;
|
||||
setHtmlValue(newHtmlValue);
|
||||
onChange(newHtmlValue);
|
||||
}
|
||||
} else {
|
||||
// HTML mode - existing logic with improvements
|
||||
const textarea = document.querySelector('textarea') as HTMLTextAreaElement;
|
||||
if (!textarea) return;
|
||||
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const selectedText = htmlValue.substring(start, end);
|
||||
|
||||
if (selectedText) {
|
||||
const beforeText = htmlValue.substring(0, start);
|
||||
const afterText = htmlValue.substring(end);
|
||||
const formattedText = `<${tag}>${selectedText}</${tag}>`;
|
||||
const newValue = beforeText + formattedText + afterText;
|
||||
|
||||
setHtmlValue(newValue);
|
||||
onChange(newValue);
|
||||
|
||||
// Restore cursor position
|
||||
setTimeout(() => {
|
||||
textarea.focus();
|
||||
textarea.setSelectionRange(start, start + formattedText.length);
|
||||
}, 0);
|
||||
} else {
|
||||
// No selection - insert template at cursor
|
||||
const template = tag === 'h1' ? '<h1>Heading 1</h1>' :
|
||||
tag === 'h2' ? '<h2>Heading 2</h2>' :
|
||||
tag === 'h3' ? '<h3>Heading 3</h3>' :
|
||||
`<${tag}>Formatted text</${tag}>`;
|
||||
|
||||
const newValue = htmlValue.substring(0, start) + template + htmlValue.substring(start);
|
||||
setHtmlValue(newValue);
|
||||
onChange(newValue);
|
||||
|
||||
// Position cursor inside the new tag
|
||||
setTimeout(() => {
|
||||
const tagLength = `<${tag}>`.length;
|
||||
const newPosition = start + tagLength;
|
||||
textarea.focus();
|
||||
textarea.setSelectionRange(newPosition, newPosition + (tag === 'p' ? 0 : template.includes('Heading') ? template.split('>')[1].split('<')[0].length : 'Formatted text'.length));
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -162,37 +220,69 @@ export default function RichTextEditor({
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{viewMode === 'html' && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => formatText('strong')}
|
||||
title="Bold"
|
||||
>
|
||||
<strong>B</strong>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => formatText('em')}
|
||||
title="Italic"
|
||||
>
|
||||
<em>I</em>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => formatText('p')}
|
||||
title="Paragraph"
|
||||
>
|
||||
P
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => formatText('strong')}
|
||||
title="Bold"
|
||||
className="font-bold"
|
||||
>
|
||||
B
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => formatText('em')}
|
||||
title="Italic"
|
||||
className="italic"
|
||||
>
|
||||
I
|
||||
</Button>
|
||||
<div className="w-px h-4 bg-gray-300 mx-1" />
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => formatText('h1')}
|
||||
title="Heading 1"
|
||||
className="text-lg font-bold"
|
||||
>
|
||||
H1
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => formatText('h2')}
|
||||
title="Heading 2"
|
||||
className="text-base font-bold"
|
||||
>
|
||||
H2
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => formatText('h3')}
|
||||
title="Heading 3"
|
||||
className="text-sm font-bold"
|
||||
>
|
||||
H3
|
||||
</Button>
|
||||
<div className="w-px h-4 bg-gray-300 mx-1" />
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => formatText('p')}
|
||||
title="Paragraph"
|
||||
>
|
||||
P
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editor */}
|
||||
|
||||
Reference in New Issue
Block a user