fix: placeholder images not displaying on safari

Author: hejsztynx

src/web/EnrichedText.css

@@ -304,17 +304,7 @@
 }
 
 .et-view img.error {
-  /* hide the browser's broken-image alt text;
-    the ::before overlay covers the native broken-image icon. */
-  font-size: 0;
-  visibility: hidden;
-}
-
-.et-view img.error::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  visibility: visible;
+  content: linear-gradient(transparent, transparent);
   background-color: currentColor;
   -webkit-mask: var(--et-broken-image-glyph) no-repeat center / contain;
   mask: var(--et-broken-image-glyph) no-repeat center / contain;

src/web/EnrichedText.tsx

@@ -64,8 +64,8 @@ export const EnrichedText = memo(
       [textStyle, themingStyle, cssVars]
     );
 
-    useImageErrorFallback(containerRef, finalHtml);
     usePressInteractions(containerRef);
+    useImageErrorFallback(containerRef);
 
     return (
       <>

src/web/useImageErrorFallback.ts

@@ -4,28 +4,39 @@ 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
+  containerRef: RefObject<HTMLElement | null>
 ) => {
+  // listen for errors
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
 
-    const images = container.querySelectorAll<HTMLImageElement>('img');
-    const cleanups: (() => void)[] = [];
+    const handleImageError = (e: Event) => {
+      const target = e.target as HTMLElement;
+      if (target && target.tagName && target.tagName.toLowerCase() === 'img') {
+        target.classList.add('error');
+      }
+    };
 
-    images.forEach((img) => {
-      const handleImageError = () => img.classList.add('error');
+    container.addEventListener('error', handleImageError, true);
 
-      img.addEventListener('error', handleImageError);
-      cleanups.push(() => img.removeEventListener('error', handleImageError));
+    return () => {
+      container.removeEventListener('error', handleImageError, true);
+    };
+  }, [containerRef]);
 
-      // Catch images that already failed before the listener attached
+  // handle the cached unloaded images that will not emit the error event
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const images =
+      container.querySelectorAll<HTMLImageElement>('img:not(.error)');
+
+    images.forEach((img) => {
       if (img.complete && img.naturalHeight === 0) {
-        handleImageError();
+        img.classList.add('error');
       }
     });
-
-    return () => cleanups.forEach((cleanup) => cleanup());
-  }, [containerRef, html]);
+  });
 };