feat(editor): Add wysiwyg editor

This commit is contained in:
Juergen Kunz
2025-06-23 21:15:04 +00:00
parent f2e6342a61
commit cdcd4f79c8
6 changed files with 526 additions and 13 deletions

View File

@ -9,17 +9,22 @@ export class WysiwygConverters {
static getHtmlOutput(blocks: IBlock[]): string {
return blocks.map(block => {
// Check if content already contains HTML formatting
const content = block.content.includes('<') && block.content.includes('>')
? block.content // Already contains HTML formatting
: this.escapeHtml(block.content);
switch (block.type) {
case 'paragraph':
return block.content ? `<p>${this.escapeHtml(block.content)}</p>` : '';
return block.content ? `<p>${content}</p>` : '';
case 'heading-1':
return `<h1>${this.escapeHtml(block.content)}</h1>`;
return `<h1>${content}</h1>`;
case 'heading-2':
return `<h2>${this.escapeHtml(block.content)}</h2>`;
return `<h2>${content}</h2>`;
case 'heading-3':
return `<h3>${this.escapeHtml(block.content)}</h3>`;
return `<h3>${content}</h3>`;
case 'quote':
return `<blockquote>${this.escapeHtml(block.content)}</blockquote>`;
return `<blockquote>${content}</blockquote>`;
case 'code':
return `<pre><code>${this.escapeHtml(block.content)}</code></pre>`;
case 'list':
@ -32,7 +37,7 @@ export class WysiwygConverters {
case 'divider':
return '<hr>';
default:
return `<p>${this.escapeHtml(block.content)}</p>`;
return `<p>${content}</p>`;
}
}).filter(html => html !== '').join('\n');
}
@ -88,35 +93,35 @@ export class WysiwygConverters {
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'paragraph',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'h1':
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'heading-1',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'h2':
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'heading-2',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'h3':
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'heading-3',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'blockquote':
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'quote',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'pre':