feat(wysiwyg): Add more block types

ts_web/elements/wysiwyg/wysiwyg.converters.ts

@@ -7,6 +7,14 @@ export class WysiwygConverters {
     return div.innerHTML;
   }
 
+  static formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  }
+
   static getHtmlOutput(blocks: IBlock[]): string {
     return blocks.map(block => {
       // Check if content already contains HTML formatting
@@ -44,6 +52,29 @@ export class WysiwygConverters {
             return `<img src="${imageUrl}" alt="${altText}" />`;
           }
           return '';
+        case 'youtube':
+          const videoId = block.metadata?.videoId;
+          if (videoId) {
+            return `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+          }
+          return '';
+        case 'markdown':
+          // Return the raw markdown content wrapped in a div
+          return `<div class="markdown-content">${this.escapeHtml(block.content)}</div>`;
+        case 'html':
+          // Return the raw HTML content (already HTML)
+          return block.content;
+        case 'attachment':
+          const files = block.metadata?.files || [];
+          if (files.length > 0) {
+            return `<div class="attachments">${files.map((file: any) => 
+              `<div class="attachment-item" data-file-id="${file.id}">
+                <a href="${file.data}" download="${file.name}">${this.escapeHtml(file.name)}</a>
+                <span class="file-size">(${this.formatFileSize(file.size)})</span>
+              </div>`
+            ).join('')}</div>`;
+          }
+          return '';
         default:
           return `<p>${content}</p>`;
       }
@@ -78,6 +109,22 @@ export class WysiwygConverters {
           const imageUrl = block.metadata?.url;
           const altText = block.content || 'Image';
           return imageUrl ? `![${altText}](${imageUrl})` : '';
+        case 'youtube':
+          const videoId = block.metadata?.videoId;
+          const url = block.metadata?.url || (videoId ? `https://youtube.com/watch?v=${videoId}` : '');
+          return url ? `[YouTube Video](${url})` : '';
+        case 'markdown':
+          // Return the raw markdown content
+          return block.content;
+        case 'html':
+          // Return as HTML comment in markdown
+          return `<!-- HTML Block\n${block.content}\n-->`;
+        case 'attachment':
+          const files = block.metadata?.files || [];
+          if (files.length > 0) {
+            return files.map((file: any) => `- [${file.name}](${file.data})`).join('\n');
+          }
+          return '';
         default:
           return block.content;
       }