Improve Richtext Editor

frontend/src/components/stories/RichTextEditor.tsx

@@ -114,26 +114,84 @@ export default function RichTextEditor({
 
   const formatText = (tag: string) => {
     if (viewMode === 'visual') {
-      // For visual mode, we'll just show formatting helpers
+      // For visual mode, we'll insert formatted HTML directly
-      // In a real implementation, you'd want a proper WYSIWYG editor
+      const textarea = visualTextareaRef.current;
-      return;
+      if (!textarea) return;
-    }
 
-    const textarea = document.querySelector('textarea') as HTMLTextAreaElement;
+      const start = textarea.selectionStart;
-    if (!textarea) return;
+      const end = textarea.selectionEnd;
-
+      const selectedText = getPlainText(value).substring(start, end);
-    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);
+      if (selectedText) {
-      onChange(newValue);
+        // 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">
-          <div className="flex items-center gap-1">
+          <Button
-            <Button
+            type="button"
-              type="button"
+            size="sm"
-              size="sm"
+            variant="ghost"
-              variant="ghost"
+            onClick={() => formatText('strong')}
-              onClick={() => formatText('strong')}
+            title="Bold"
-              title="Bold"
+            className="font-bold"
-            >
+          >
-              <strong>B</strong>
+            B
-            </Button>
+          </Button>
-            <Button
+          <Button
-              type="button"
+            type="button"
-              size="sm"
+            size="sm"
-              variant="ghost"
+            variant="ghost"
-              onClick={() => formatText('em')}
+            onClick={() => formatText('em')}
-              title="Italic"
+            title="Italic"
-            >
+            className="italic"
-              <em>I</em>
+          >
-            </Button>
+            I
-            <Button
+          </Button>
-              type="button"
+          <div className="w-px h-4 bg-gray-300 mx-1" />
-              size="sm"
+          <Button
-              variant="ghost"
+            type="button"
-              onClick={() => formatText('p')}
+            size="sm"
-              title="Paragraph"
+            variant="ghost"
-            >
+            onClick={() => formatText('h1')}
-              P
+            title="Heading 1"
-            </Button>
+            className="text-lg font-bold"
-          </div>
+          >
-        )}
+            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 */}

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) => {
+    ALLOWED_ATTR: uniqueAttributes,
-      return [...acc, ...allowedAttributes[tag]];
-    }, []),
-    // Allow style attribute but sanitize CSS properties
     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
+  // If we don't have cached config but there's an ongoing request, wait for it
-  console.warn('No cached sanitization config available, using DOMPurify defaults');
+  if (configPromise) {
-  return DOMPurify.sanitize(html).toString();
+    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();
 }
 
 /**