Fix: background dissapears after undo first action

Initial snapshot was takken before background image was set to canvas.
When undoing this caused canvas to restore to a state without
background.

Now wait for background image to exist in fabric canvas and take initial
snaphot in separate effect.

Author: HreshchyshynT

ts/components/MediaEditor.tsx

@@ -325,7 +325,6 @@ export function MediaEditor({
         width: img.width,
       };
       setImageState(newImageState);
-      takeSnapshot('initial state', newImageState, canvas);
     };
     img.onerror = (
       event: Event | string,
@@ -588,6 +587,20 @@ export function MediaEditor({
     drawFabricBackgroundImage({ fabricCanvas, image, imageState });
   }, [fabricCanvas, image, imageState]);
 
+  const initialSnapshotTaken = useRef(false);
+  useEffect(() => {
+    if (
+      !fabricCanvas ||
+      !fabricCanvas.backgroundImage ||
+      initialSnapshotTaken.current
+    ) {
+      return;
+    }
+
+    takeSnapshot('initial state', imageState, fabricCanvas);
+    initialSnapshotTaken.current = true;
+  }, [fabricCanvas, imageState, takeSnapshot]);
+
   const [canCrop, setCanCrop] = useState(false);
   const [cropAspectRatioLock, setCropAspectRatioLock] = useState(false);
   const [drawTool, setDrawTool] = useState<DrawTool>(DrawTool.Pen);

ts/util/lint/exceptions.json

@@ -2320,5 +2320,12 @@
     "line": "  message.innerHTML = window.i18n('icu:optimizingApplication');",
     "reasonCategory": "usageTrusted",
     "updated": "2021-09-17T21:02:59.414Z"
+  },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/MediaEditor.tsx",
+    "line": "  const initialSnapshotTaken = useRef(false);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2025-10-10T09:45:25.353Z"
   }
 ]