From 46c22fffb9866809ccca89595e60328523efccf9 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Tue, 18 Nov 2025 14:53:14 -0800
Subject: [PATCH] Desktop,Mobile: Resolves #12959: Remove image height limit in
 Markdown editor (#13717)

---
 .../rendering/renderBlockImages.test.ts       | 24 +++++++++----------
 .../extensions/rendering/renderBlockImages.ts | 23 +++++++++---------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/packages/editor/CodeMirror/extensions/rendering/renderBlockImages.test.ts b/packages/editor/CodeMirror/extensions/rendering/renderBlockImages.test.ts
index 9735766439..ce1159f755 100644
--- a/packages/editor/CodeMirror/extensions/rendering/renderBlockImages.test.ts
+++ b/packages/editor/CodeMirror/extensions/rendering/renderBlockImages.test.ts
@@ -22,11 +22,11 @@ const createEditor = async (initialMarkdown: string, hasImage: boolean) => {
 };
 
 const findImages = (editor: EditorView) => {
-	return editor.dom.querySelectorAll<HTMLDivElement>('div.cm-md-image > .image');
+	return editor.dom.querySelectorAll<HTMLImageElement>('div.cm-md-image > .image');
 };
 
-const getImageBackgroundUrls = (editor: EditorView) => {
-	return [...findImages(editor)].map(image => image.style.backgroundImage);
+const getImageUrls = (editor: EditorView) => {
+	return [...findImages(editor)].map(image => image.getAttribute('src'));
 };
 
 describe('renderBlockImages', () => {
@@ -60,9 +60,9 @@ describe('renderBlockImages', () => {
 		const editor = await createEditor('![test](:/a123456789abcdef0123456789abcdef)\n![test 2](:/b123456789abcdef0123456789abcde2)', true);
 
 		// Should have the expected original image URLs
-		expect(getImageBackgroundUrls(editor)).toMatchObject([
-			'url(:/a123456789abcdef0123456789abcdef?r=0)',
-			'url(:/b123456789abcdef0123456789abcde2?r=0)',
+		expect(getImageUrls(editor)).toMatchObject([
+			':/a123456789abcdef0123456789abcdef?r=0',
+			':/b123456789abcdef0123456789abcde2?r=0',
 		]);
 
 		editor.dispatch({
@@ -70,9 +70,9 @@ describe('renderBlockImages', () => {
 		});
 		await allowImageUrlsToBeFetched();
 
-		expect(getImageBackgroundUrls(editor)).toMatchObject([
-			'url(:/a123456789abcdef0123456789abcdef?r=1)',
-			'url(:/b123456789abcdef0123456789abcde2?r=0)',
+		expect(getImageUrls(editor)).toMatchObject([
+			':/a123456789abcdef0123456789abcdef?r=1',
+			':/b123456789abcdef0123456789abcde2?r=0',
 		]);
 
 		editor.dispatch({
@@ -83,9 +83,9 @@ describe('renderBlockImages', () => {
 		});
 		await allowImageUrlsToBeFetched();
 
-		expect(getImageBackgroundUrls(editor)).toMatchObject([
-			'url(:/a123456789abcdef0123456789abcdef?r=2)',
-			'url(:/b123456789abcdef0123456789abcde2?r=1)',
+		expect(getImageUrls(editor)).toMatchObject([
+			':/a123456789abcdef0123456789abcdef?r=2',
+			':/b123456789abcdef0123456789abcde2?r=1',
 		]);
 	});
 });
diff --git a/packages/editor/CodeMirror/extensions/rendering/renderBlockImages.ts b/packages/editor/CodeMirror/extensions/rendering/renderBlockImages.ts
index 4c9314d26a..b1371cd8e5 100644
--- a/packages/editor/CodeMirror/extensions/rendering/renderBlockImages.ts
+++ b/packages/editor/CodeMirror/extensions/rendering/renderBlockImages.ts
@@ -5,9 +5,6 @@ import { RenderedContentContext } from './types';
 import makeBlockReplaceExtension from './utils/makeBlockReplaceExtension';
 
 const imageClassName = 'cm-md-image';
-// Pre-set the image height for performance (allows CodeMirror to better calculate
-// the document height while scrolling).
-const imageHeight = 200;
 
 class ImageWidget extends WidgetType {
 	private resolvedSrc_: string;
@@ -26,7 +23,7 @@ class ImageWidget extends WidgetType {
 	}
 
 	public updateDOM(dom: HTMLElement): boolean {
-		const image = dom.querySelector<HTMLDivElement>('div.image');
+		const image = dom.querySelector<HTMLImageElement>('img.image');
 		if (!image) return false;
 
 		image.ariaLabel = this.alt_;
@@ -36,7 +33,7 @@ class ImageWidget extends WidgetType {
 			if (this.resolvedSrc_) {
 				// Use a background-image style property rather than img[src=]. This
 				// simplifies setting the image to the correct size/position.
-				image.style.backgroundImage = `url(${JSON.stringify(this.resolvedSrc_)})`;
+				image.src = this.resolvedSrc_;
 			}
 		};
 
@@ -56,7 +53,7 @@ class ImageWidget extends WidgetType {
 		const container = document.createElement('div');
 		container.classList.add(imageClassName);
 
-		const image = document.createElement('div');
+		const image = document.createElement('img');
 		image.classList.add('image');
 
 		container.appendChild(image);
@@ -66,7 +63,7 @@ class ImageWidget extends WidgetType {
 	}
 
 	public get estimatedHeight() {
-		return imageHeight;
+		return -1;
 	}
 }
 
@@ -105,12 +102,14 @@ export const testing__resetImageRefreshCounterCache = () => {
 
 const renderBlockImages = (context: RenderedContentContext) => [
 	EditorView.theme({
-		[`& .${imageClassName} > div`]: {
-			height: `${imageHeight}px`,
-			backgroundSize: 'contain',
-			backgroundRepeat: 'no-repeat',
-			backgroundPosition: 'center',
+		[`& .${imageClassName} > .image`]: {
+			maxWidth: '100%',
+			minWidth: 0,
 			display: 'block',
+
+			// Center
+			marginLeft: 'auto',
+			marginRight: 'auto',
 		},
 	}),
 	makeBlockReplaceExtension({