fix: remove dependency of t from clipboard and image (#7712)

* fix: remove dependency of t from clipboard and image

* pass errorMessage to copyTextToSystemClipboard where needed

* wrap copyTextToSystemClipboard and rethrow translated error in caller

* review fix

* typo

excalidraw-app/collab/RoomDialog.tsx

@@ -65,19 +65,18 @@ export const RoomModal = ({
   const copyRoomLink = async () => {
     try {
       await copyTextToSystemClipboard(activeRoomLink);
-
+    } catch (e) {
-      setJustCopied(true);
+      setErrorMessage(t("errors.copyToSystemClipboardFailed"));
-
-      if (timerRef.current) {
-        window.clearTimeout(timerRef.current);
-      }
-
-      timerRef.current = window.setTimeout(() => {
-        setJustCopied(false);
-      }, 3000);
-    } catch (error: any) {
-      setErrorMessage(error.message);
     }
+    setJustCopied(true);
+
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setJustCopied(false);
+    }, 3000);
 
     ref.current?.select();
   };

excalidraw-app/share/ShareDialog.tsx

@@ -69,20 +69,20 @@ const ActiveRoomDialog = ({
   const copyRoomLink = async () => {
     try {
       await copyTextToSystemClipboard(activeRoomLink);
-
+    } catch (e) {
-      setJustCopied(true);
+      collabAPI.setErrorMessage(t("errors.copyToSystemClipboardFailed"));
-
-      if (timerRef.current) {
-        window.clearTimeout(timerRef.current);
-      }
-
-      timerRef.current = window.setTimeout(() => {
-        setJustCopied(false);
-      }, 3000);
-    } catch (error: any) {
-      collabAPI.setErrorMessage(error.message);
     }
 
+    setJustCopied(true);
+
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setJustCopied(false);
+    }, 3000);
+
     ref.current?.select();
   };
 

packages/excalidraw/actions/actionClipboard.tsx

@@ -238,7 +238,11 @@ export const copyText = register({
         return acc;
       }, [])
       .join("\n\n");
-    copyTextToSystemClipboard(text);
+    try {
+      copyTextToSystemClipboard(text);
+    } catch (e) {
+      throw new Error(t("errors.copyToSystemClipboardFailed"));
+    }
     return {
       commitToHistory: false,
     };

packages/excalidraw/clipboard.ts

@@ -17,7 +17,6 @@ import { deepCopyElement } from "./element/newElement";
 import { mutateElement } from "./element/mutateElement";
 import { getContainingFrame } from "./frame";
 import { arrayToMap, isMemberOf, isPromiseLike } from "./utils";
-import { t } from "./i18n";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
@@ -435,7 +434,7 @@ export const copyTextToSystemClipboard = async (
 
   // (3) if that fails, use document.execCommand
   if (!copyTextViaExecCommand(text)) {
-    throw new Error(t("errors.copyToSystemClipboardFailed"));
+    throw new Error("Error copying to clipboard.");
   }
 };
 

packages/excalidraw/components/ShareableLinkDialog.tsx

@@ -31,19 +31,18 @@ export const ShareableLinkDialog = ({
   const copyRoomLink = async () => {
     try {
       await copyTextToSystemClipboard(link);
-
+    } catch (e) {
-      setJustCopied(true);
+      setErrorMessage(t("errors.copyToSystemClipboardFailed"));
-
-      if (timerRef.current) {
-        window.clearTimeout(timerRef.current);
-      }
-
-      timerRef.current = window.setTimeout(() => {
-        setJustCopied(false);
-      }, 3000);
-    } catch (error: any) {
-      setErrorMessage(error.message);
     }
+    setJustCopied(true);
+
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setJustCopied(false);
+    }, 3000);
 
     ref.current?.select();
   };

packages/excalidraw/data/index.ts

@@ -133,9 +133,12 @@ export const exportCanvas = async (
         },
       );
     } else if (type === "clipboard-svg") {
-      await copyTextToSystemClipboard(
+      const svg = await svgPromise.then((svg) => svg.outerHTML);
-        await svgPromise.then((svg) => svg.outerHTML),
+      try {
-      );
+        await copyTextToSystemClipboard(svg);
+      } catch (e) {
+        throw new Error(t("errors.copyToSystemClipboardFailed"));
+      }
       return;
     }
   }

packages/excalidraw/element/image.ts

@@ -3,7 +3,6 @@
 // -----------------------------------------------------------------------------
 
 import { MIME_TYPES, SVG_NS } from "../constants";
-import { t } from "../i18n";
 import { AppClassProperties, DataURL, BinaryFiles } from "../types";
 import { isInitializedImageElement } from "./typeChecks";
 import {
@@ -100,7 +99,7 @@ export const normalizeSVG = async (SVGString: string) => {
   const svg = doc.querySelector("svg");
   const errorNode = doc.querySelector("parsererror");
   if (errorNode || !isHTMLSVGElement(svg)) {
-    throw new Error(t("errors.invalidSVGString"));
+    throw new Error("Invalid SVG");
   } else {
     if (!svg.hasAttribute("xmlns")) {
       svg.setAttribute("xmlns", SVG_NS);

packages/excalidraw/locales/en.json

@@ -214,7 +214,6 @@
     "fileTooBig": "File is too big. Maximum allowed size is {{maxSize}}.",
     "svgImageInsertError": "Couldn't insert SVG image. The SVG markup looks invalid.",
     "failedToFetchImage": "Failed to fetch image.",
-    "invalidSVGString": "Invalid SVG.",
     "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again.",
     "importLibraryError": "Couldn't load library",
     "collabSaveFailed": "Couldn't save to the backend database. If problems persist, you should save your file locally to ensure you don't lose your work.",
@@ -248,7 +247,7 @@
     "library": "Library",
     "lock": "Keep selected tool active after drawing",
     "penMode": "Pen mode - prevent touch",
-    "link": "Add/ Update link for a selected shape",
+    "link": "Add / Update link for a selected shape",
     "eraser": "Eraser",
     "frame": "Frame tool",
     "magicframe": "Wireframe to code",