Improve Richtext Editor

frontend/src/lib/sanitization.ts

@@ -94,18 +94,22 @@ function createDOMPurifyConfig(config: SanitizationConfig) {
     });
   }
 
-  return {
+  // Create a proper DOMPurify configuration
+  // DOMPurify expects ALLOWED_ATTR to be an array of allowed attributes
+  // We need to flatten the tag-specific attributes into a global list
+  const flattenedAttributes = Object.values(allowedAttributes).flat();
+  const uniqueAttributes = Array.from(new Set(flattenedAttributes));
+  
+  const domPurifyConfig: DOMPurify.Config = {
     ALLOWED_TAGS: allowedTags,
-    ALLOWED_ATTR: Object.keys(allowedAttributes).reduce((acc: string[], tag) => {
-      return [...acc, ...allowedAttributes[tag]];
-    }, []),
-    // Allow style attribute but sanitize CSS properties
+    ALLOWED_ATTR: uniqueAttributes,
     ALLOW_UNKNOWN_PROTOCOLS: false,
     SANITIZE_DOM: true,
     KEEP_CONTENT: true,
-    // Custom hook to sanitize style attributes
     ALLOW_DATA_ATTR: false,
-  } as DOMPurify.Config;
+  };
+
+  return domPurifyConfig;
 }
 
 /**
@@ -133,21 +137,51 @@ export async function sanitizeHtml(html: string): Promise<string> {
 
 /**
  * Synchronous sanitization using cached config (for cases where async is not possible)
- * Falls back to basic DOMPurify if no config is cached
+ * Falls back to a safe configuration if no config is cached
  */
 export function sanitizeHtmlSync(html: string): string {
   if (!html || html.trim() === '') {
     return '';
   }
 
+  // If we have cached config, use it
   if (cachedConfig) {
     const domPurifyConfig = createDOMPurifyConfig(cachedConfig);
     return DOMPurify.sanitize(html, domPurifyConfig as any).toString();
   }
 
-  // Fallback to basic DOMPurify
-  console.warn('No cached sanitization config available, using DOMPurify defaults');
-  return DOMPurify.sanitize(html).toString();
+  // If we don't have cached config but there's an ongoing request, wait for it
+  if (configPromise) {
+    console.log('Sanitization config loading in progress, using fallback for now');
+  } else {
+    // No config and no ongoing request - try to load it for next time
+    console.warn('No cached sanitization config available, triggering load for future use');
+    fetchSanitizationConfig().catch(error => {
+      console.error('Failed to load sanitization config:', error);
+    });
+  }
+
+  // Use comprehensive fallback configuration that preserves formatting
+  console.log('Using fallback sanitization configuration with formatting support');
+  const fallbackConfig: DOMPurify.Config = {
+    ALLOWED_TAGS: [
+      'p', 'br', 'div', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+      'b', 'strong', 'i', 'em', 'u', 's', 'strike', 'del', 'ins',
+      'sup', 'sub', 'small', 'big', 'mark', 'pre', 'code', 'kbd', 'samp', 'var',
+      'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'a',
+      'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'caption', 'colgroup', 'col',
+      'blockquote', 'cite', 'q', 'hr', 'details', 'summary'
+    ],
+    ALLOWED_ATTR: [
+      'class', 'style', 'colspan', 'rowspan'
+    ],
+    ALLOW_UNKNOWN_PROTOCOLS: false,
+    SANITIZE_DOM: true,
+    KEEP_CONTENT: true,
+    ALLOW_DATA_ATTR: false,
+  };
+  
+  return DOMPurify.sanitize(html, fallbackConfig as any).toString();
 }
 
 /**