Fix inline images flickering (#516)

Expensify · Oct 16, 2024 · e312fb8 · e312fb8
1 parent 5a7985f
commit e312fb8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -61,6 +61,7 @@ type MarkdownTextInputElement = HTMLDivElement &
   HTMLInputElement & {
     tree: TreeNode;
     selection: Selection;
+    imageElements: HTMLImageElement[];
   };
 
 type HTMLMarkdownElement = HTMLElement & {

diff --git a/src/web/inputElements/inlineImage.ts b/src/web/inputElements/inlineImage.ts
@@ -75,11 +75,17 @@ function handleOnLoad(
       justifyContent: 'center',
     }),
   });
-
   Object.assign(img.style, !err && imgStyle);
 
   targetElement.appendChild(imageContainer);
 
+  const currentInputElement = currentInput;
+  if (currentInput.imageElements) {
+    currentInputElement.imageElements.push(img);
+  } else {
+    currentInputElement.imageElements = [img];
+  }
+
   const imageClientHeight = Math.max(img.clientHeight, imageContainer.clientHeight);
   Object.assign(imageContainer.style, {
     height: `${imageClientHeight}px`,
@@ -164,7 +170,7 @@ function addInlineImagePreview(
 
   // If the inline image markdown with the same href exists in the current input, use it instead of creating new one.
   // Prevents from image flickering and layout jumps
-  const alreadyLoadedPreview = currentInput.querySelector(`img[src="${imageHref}"]`);
+  const alreadyLoadedPreview = currentInput.imageElements?.find((el) => el?.src === imageHref);
   const loadedImageContainer = alreadyLoadedPreview?.parentElement;
 
   if (loadedImageContainer && loadedImageContainer.getAttribute('data-type') === 'inline-container') {