From 16cae4fc07c5d114ff63efc686c5cffdfccf5bff Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Thu, 29 Aug 2024 15:10:08 +0200
Subject: [PATCH] feat: reset copyStatus on export dialog settings change
 (#8443)

---
 .../excalidraw/components/ImageExportDialog.tsx  | 16 +++++++++++++++-
 packages/excalidraw/hooks/useCopiedIndicator.ts  |  7 ++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/excalidraw/components/ImageExportDialog.tsx b/packages/excalidraw/components/ImageExportDialog.tsx
index 0f6a75703..8c225ab54 100644
--- a/packages/excalidraw/components/ImageExportDialog.tsx
+++ b/packages/excalidraw/components/ImageExportDialog.tsx
@@ -90,7 +90,20 @@ const ImageExportModal = ({
   const previewRef = useRef<HTMLDivElement>(null);
   const [renderError, setRenderError] = useState<Error | null>(null);
 
-  const { onCopy, copyStatus } = useCopyStatus();
+  const { onCopy, copyStatus, resetCopyStatus } = useCopyStatus();
+
+  useEffect(() => {
+    // if user changes setting right after export to clipboard, reset the status
+    // so they don't have to wait for the timeout to click the button again
+    resetCopyStatus();
+  }, [
+    projectName,
+    exportWithBackground,
+    exportDarkMode,
+    exportScale,
+    embedScene,
+    resetCopyStatus,
+  ]);
 
   const { exportedElements, exportingFrame } = prepareElementsForExport(
     elementsSnapshot,
@@ -108,6 +121,7 @@ const ImageExportModal = ({
     if (!maxWidth) {
       return;
     }
+
     exportToCanvas({
       elements: exportedElements,
       appState: {
diff --git a/packages/excalidraw/hooks/useCopiedIndicator.ts b/packages/excalidraw/hooks/useCopiedIndicator.ts
index 2204e6db4..18ad79348 100644
--- a/packages/excalidraw/hooks/useCopiedIndicator.ts
+++ b/packages/excalidraw/hooks/useCopiedIndicator.ts
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 
 const TIMEOUT = 2000;
 
@@ -15,8 +15,13 @@ export const useCopyStatus = () => {
     }, TIMEOUT);
   };
 
+  const resetCopyStatus = useCallback(() => {
+    setCopyStatus(null);
+  }, []);
+
   return {
     copyStatus,
+    resetCopyStatus,
     onCopy,
   };
 };