diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index d9612160..e0dbecc8 100644 --- 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 index d894e557..9648d9c1 100644 --- 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') {