From cf175ec5c5123e8eb976099543b649a4e303b7f1 Mon Sep 17 00:00:00 2001
From: Maksym Plavinskyi <Maksym_Plavinskyi@epam.com>
Date: Wed, 15 May 2024 14:56:15 -0500
Subject: [PATCH] [lexical-playground][image-node] Bug Fix: Load image error UI

---
 .../src/images/image-broken.svg               |  4 ++
 .../src/nodes/ImageComponent.tsx              | 56 ++++++++++++++-----
 2 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 packages/lexical-playground/src/images/image-broken.svg

diff --git a/packages/lexical-playground/src/images/image-broken.svg b/packages/lexical-playground/src/images/image-broken.svg
new file mode 100644
index 00000000000..58e4aa9a859
--- /dev/null
+++ b/packages/lexical-playground/src/images/image-broken.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22 3H2v18h20v-2h-2v-2h2v-2h-2v-2h2v-2h-2V9h2V7h-2V5h2V3zm-2 4v2h-2v2h2v2h-2v2h2v2h-2v2H4V5h14v2h2zm-6 2h-2v2h-2v2H8v2H6v2h2v-2h2v-2h2v-2h2v2h2v-2h-2V9zM6 7h2v2H6V7z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/packages/lexical-playground/src/nodes/ImageComponent.tsx b/packages/lexical-playground/src/nodes/ImageComponent.tsx
index 64aa336c589..d398cca6b84 100644
--- a/packages/lexical-playground/src/nodes/ImageComponent.tsx
+++ b/packages/lexical-playground/src/nodes/ImageComponent.tsx
@@ -48,6 +48,7 @@ import {Suspense, useCallback, useEffect, useRef, useState} from 'react';
 import {createWebsocketProvider} from '../collaboration';
 import {useSettings} from '../context/SettingsContext';
 import {useSharedHistoryContext} from '../context/SharedHistoryContext';
+import brokenImage from '../images/image-broken.svg';
 import EmojisPlugin from '../plugins/EmojisPlugin';
 import KeywordsPlugin from '../plugins/KeywordsPlugin';
 import LinkPlugin from '../plugins/LinkPlugin';
@@ -72,6 +73,9 @@ function useSuspenseImage(src: string) {
         imageCache.add(src);
         resolve(null);
       };
+      img.onerror = () => {
+        imageCache.add(src);
+      };
     });
   }
 }
@@ -84,6 +88,7 @@ function LazyImage({
   width,
   height,
   maxWidth,
+  onError,
 }: {
   altText: string;
   className: string | null;
@@ -92,6 +97,7 @@ function LazyImage({
   maxWidth: number;
   src: string;
   width: 'inherit' | number;
+  onError: () => void;
 }): JSX.Element {
   useSuspenseImage(src);
   return (
@@ -105,6 +111,21 @@ function LazyImage({
         maxWidth,
         width,
       }}
+      onError={onError}
+      draggable="false"
+    />
+  );
+}
+
+function BrokenImage(): JSX.Element {
+  return (
+    <img
+      src={brokenImage}
+      style={{
+        height: 200,
+        opacity: 0.2,
+        width: 200,
+      }}
       draggable="false"
     />
   );
@@ -142,6 +163,7 @@ export default function ImageComponent({
   const [editor] = useLexicalComposerContext();
   const [selection, setSelection] = useState<BaseSelection | null>(null);
   const activeEditorRef = useRef<LexicalEditor | null>(null);
+  const [isLoadError, setIsLoadError] = useState<boolean>(false);
 
   const $onDelete = useCallback(
     (payload: KeyboardEvent) => {
@@ -371,20 +393,26 @@ export default function ImageComponent({
     <Suspense fallback={null}>
       <>
         <div draggable={draggable}>
-          <LazyImage
-            className={
-              isFocused
-                ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}`
-                : null
-            }
-            src={src}
-            altText={altText}
-            imageRef={imageRef}
-            width={width}
-            height={height}
-            maxWidth={maxWidth}
-          />
+          {isLoadError ? (
+            <BrokenImage />
+          ) : (
+            <LazyImage
+              className={
+                isFocused
+                  ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}`
+                  : null
+              }
+              src={src}
+              altText={altText}
+              imageRef={imageRef}
+              width={width}
+              height={height}
+              maxWidth={maxWidth}
+              onError={() => setIsLoadError(true)}
+            />
+          )}
         </div>
+
         {showCaption && (
           <div className="image-caption-container">
             <LexicalNestedComposer initialEditor={caption}>
@@ -428,7 +456,7 @@ export default function ImageComponent({
             maxWidth={maxWidth}
             onResizeStart={onResizeStart}
             onResizeEnd={onResizeEnd}
-            captionsEnabled={captionsEnabled}
+            captionsEnabled={!isLoadError && captionsEnabled}
           />
         )}
       </>