Fix inline images flickering on backspace

Expensify · Oct 10, 2024 · 03811f0 · 03811f0
1 parent dad2cfd
commit 03811f0
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/web/inputElements/inlineImage.ts b/src/web/inputElements/inlineImage.ts
@@ -20,6 +20,13 @@ type DebouncePreviewItem = {
 
 const timeoutMap = new Map<string, DebouncePreviewItem>();
 
+function createSeparatorElement() {
+  const separator = document.createElement('span');
+  separator.contentEditable = 'false';
+  separator.setAttribute('data-type', 'image-block-separator');
+  return separator;
+}
+
 function getImagePreviewElement(targetElement: HTMLMarkdownElement) {
   return Array.from(targetElement?.childNodes || []).find((el) => (el as HTMLElement)?.contentEditable === 'false') as HTMLMarkdownElement | undefined;
 }
@@ -159,6 +166,9 @@ function addInlineImagePreview(
     }
   }
 
+  // Add an empty span to fix issues connected with removing the image from the inner HTML when editing the input
+  targetNode.parentNode?.element.appendChild(createSeparatorElement());
+
   const imageMarginTop = parseStringWithUnitToNumber(`${markdownStyle.inlineImage?.marginTop}`);
   const imageMarginBottom = parseStringWithUnitToNumber(`${markdownStyle.inlineImage?.marginBottom}`);