diff --git a/packages/excalidraw/components/ImageExportDialog.tsx b/packages/excalidraw/components/ImageExportDialog.tsx index 0f6a75703632..8c225ab54280 100644 --- a/packages/excalidraw/components/ImageExportDialog.tsx +++ b/packages/excalidraw/components/ImageExportDialog.tsx @@ -90,7 +90,20 @@ const ImageExportModal = ({ const previewRef = useRef(null); const [renderError, setRenderError] = useState(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 2204e6db482c..18ad79348665 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, }; };