Fix adding sticker in media editor

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>

ts/components/MediaEditor.tsx

@@ -56,6 +56,7 @@ import { Theme } from '../util/theme';
 import { ThemeType } from '../types/Util';
 import { arrow } from '../util/keyboard';
 import { canvasToBytes } from '../util/canvasToBytes';
+import { loadImage } from '../util/loadImage';
 import { getConversationSelector } from '../state/selectors/conversations';
 import { hydrateRanges } from '../types/BodyRange';
 import { useConfirmDiscard } from '../hooks/useConfirmDiscard';
@@ -1213,17 +1214,19 @@ export function MediaEditor({
                 i18n={i18n}
                 installedPacks={installedPacks}
                 knownPacks={[]}
-                onPickSticker={(_packId, _stickerId, src: string) => {
+                onPickSticker={async (_packId, _stickerId, src: string) => {
                   if (!fabricCanvas) {
                     return;
                   }
 
+                  const img = await loadImage(src);
+
                   const STICKER_SIZE_RELATIVE_TO_CANVAS = 4;
                   const size =
                     Math.min(imageState.width, imageState.height) /
                     STICKER_SIZE_RELATIVE_TO_CANVAS;
 
-                  const sticker = new MediaEditorFabricSticker(src);
+                  const sticker = new MediaEditorFabricSticker(img);
                   sticker.scaleToHeight(size);
                   sticker.setPositionByOrigin(
                     new fabric.Point(

ts/components/UsernameLinkModalBody.tsx

@@ -17,6 +17,7 @@ import { IMAGE_PNG } from '../types/MIME';
 import { strictAssert } from '../util/assert';
 import { drop } from '../util/drop';
 import { splitText } from '../util/splitText';
+import { loadImage } from '../util/loadImage';
 import { Button, ButtonVariant } from './Button';
 import { Modal } from './Modal';
 import { ConfirmationDialog } from './ConfirmationDialog';
@@ -373,14 +374,7 @@ export async function _generateImageBlob({
   );
   const svgURL = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 
-  const img = new Image();
+  const img = await loadImage(svgURL);
-  await new Promise((resolve, reject) => {
-    img.addEventListener('load', resolve);
-    img.addEventListener('error', () =>
-      reject(new Error('Failed to load image'))
-    );
-    img.src = svgURL;
-  });
 
   context.drawImage(img, 0, 0, PRINT_WIDTH, PRINT_HEIGHT);
 

ts/util/loadImage.ts

@@ -0,0 +1,21 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { explodePromise } from './explodePromise';
+
+export async function loadImage(src: string): Promise<HTMLImageElement> {
+  const { promise, resolve, reject } = explodePromise<void>();
+
+  const img = new Image();
+  img.addEventListener('load', () => resolve(), { once: true });
+  img.addEventListener(
+    'error',
+    () => reject(new Error('Image failed to load')),
+    { once: true }
+  );
+  img.src = src;
+
+  await promise;
+
+  return img;
+}