fix: onerror when setting img placeholders

Author: hejsztynx

src/web/EnrichedText.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo, type CSSProperties } from 'react';
+import { memo, useMemo, useRef, type CSSProperties } from 'react';
 import type { EnrichedTextProps } from '../types';
 import './EnrichedText.css';
 import { enrichedTextStyleToCSSProperties } from './styleConversion/enrichedTextStyleToCSSProperties';
@@ -9,9 +9,12 @@ import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
 import { sanitizeHtml } from './sanitization/htmlSanitizer';
 import { prepareHtmlForWeb } from './normalization/prepareHtmlForWeb';
 import { INLINE_IMAGE_CSS_VARIABLES } from './styleConversion/inlineImageCSSVariables';
+import { useImageErrorFallback } from './useImageErrorFallback';
 
 export const EnrichedText = memo(
   ({ children, htmlStyle, style, selectionColor }: EnrichedTextProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
     const sanitizedHtml = useMemo(() => sanitizeHtml(children), [children]);
 
     const finalHtml = useMemo(
@@ -52,10 +55,13 @@ export const EnrichedText = memo(
       [textStyle, themingStyle, cssVars]
     );
 
+    useImageErrorFallback(containerRef, finalHtml);
+
     return (
       <>
         <style>{mentionRulesCSS}</style>
         <div
+          ref={containerRef}
           style={finalStyle}
           className={ENRICHED_TEXT_CLASSNAME}
           dangerouslySetInnerHTML={{ __html: finalHtml }}

src/web/normalization/prepareHtmlForWeb.ts

@@ -1,30 +1,5 @@
 export function prepareHtmlForWeb(html: string) {
-  return addImageErrorFallback(checkboxHtmlToWeb(html));
-}
-
-/*
- * Flag images that fail to load so CSS can swap in a broken-image
- * placeholder (see `img.error` in EnrichedText.css).
- *
- * The markup is rendered via dangerouslySetInnerHTML, where an `onerror`
- * attribute on an <img> still fires on load failure. This runs AFTER
- * sanitization on purpose, so the handler we add isn't stripped.
- */
-function addImageErrorFallback(html: string): string {
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
-
-  doc.querySelectorAll('img').forEach((img) => {
-    const src = img.getAttribute('src');
-
-    if (!src || src.trim() === '') {
-      img.classList.add('error');
-    }
-
-    img.setAttribute('onerror', "this.classList.add('error')");
-  });
-
-  return doc.body.innerHTML;
+  return checkboxHtmlToWeb(html);
 }
 
 /*

src/web/useImageErrorFallback.ts

@@ -0,0 +1,31 @@
+import { useEffect, type RefObject } from 'react';
+
+/*
+ * Flag images that fail to load so CSS can swap in a broken-image placeholder.
+ */
+export const useImageErrorFallback = (
+  containerRef: RefObject<HTMLElement | null>,
+  html: string
+) => {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const images = container.querySelectorAll<HTMLImageElement>('img');
+    const cleanups: (() => void)[] = [];
+
+    images.forEach((img) => {
+      const handleImageError = () => img.classList.add('error');
+
+      img.addEventListener('error', handleImageError);
+      cleanups.push(() => img.removeEventListener('error', handleImageError));
+
+      // Catch images that already failed before the listener attached
+      if (img.complete && img.naturalHeight === 0) {
+        handleImageError();
+      }
+    });
+
+    return () => cleanups.forEach((cleanup) => cleanup());
+  }, [containerRef, html]);
+};