From 54c15c541e822add2f72aa264e8eb0d0fda54a55 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 17 Mar 2026 15:29:36 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20image=20resizing?=
 =?UTF-8?q?=20when=20caption?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the caption was present, the image resizing
handles were not working.
This was because we were adding a Figure element
around the resizing div instead of the image itself.
---
 CHANGELOG.md                                  |  9 ++---
 .../custom-blocks/AccessibleImageBlock.tsx    | 33 +++++++------------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35c03fb3..a0fa37f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,13 +6,14 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Fixed
-
-- 🙈(docker) add \*\*/.next to .dockerignore #2034
-
 ### Changed
 
 - ♿️(frontend) ensure doc title is h1 for accessibility #2006
+
+### Fixed
+
+- 🐛(frontend) fix image resizing when caption #2045
+- 🙈(docker) add **/.next to .dockerignore #2034
 - ♿️(frontend) fix share modal heading hierarchy #2007
 - ♿️(frontend) fix Copy link toast accessibility for screen readers #2029
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/AccessibleImageBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/AccessibleImageBlock.tsx
index e43119e6..3410cc40 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/AccessibleImageBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/AccessibleImageBlock.tsx
@@ -57,30 +57,22 @@ export const accessibleImageRender =
       imgSelector?.removeAttribute('aria-hidden');
       imgSelector?.setAttribute('tabindex', '0');
 
-      const figureElement = document.createElement('figure');
+      const originalCaption = dom.querySelector('.bn-file-caption');
 
-      // Copy all attributes from the original div
-      figureElement.className = dom.className;
-      const styleAttr = dom.getAttribute('style');
-      if (styleAttr) {
-        figureElement.setAttribute('style', styleAttr);
-      }
-      figureElement.style.setProperty('margin', '0');
+      if (imgSelector?.parentNode && originalCaption) {
+        const figureElement = document.createElement('figure');
+        figureElement.style.setProperty('margin', '0');
 
-      Array.from(dom.children).forEach((child) => {
-        figureElement.appendChild(child.cloneNode(true));
-      });
+        // Wrap only the img inside figure, preserving the rest of the dom tree
+        imgSelector.parentNode.insertBefore(figureElement, imgSelector);
+        figureElement.appendChild(imgSelector);
 
-      // Replace the <p> caption with <figcaption>
-      const figcaptionElement = document.createElement('figcaption');
-      const originalCaption = figureElement.querySelector('.bn-file-caption');
-      if (originalCaption) {
+        // Replace the <p> caption with <figcaption> inside the figure
+        const figcaptionElement = document.createElement('figcaption');
         figcaptionElement.className = originalCaption.className;
         figcaptionElement.textContent = originalCaption.textContent;
-        originalCaption.parentNode?.replaceChild(
-          figcaptionElement,
-          originalCaption,
-        );
+        figureElement.appendChild(figcaptionElement);
+        originalCaption.parentNode?.removeChild(originalCaption);
 
         // Add explicit role and aria-label for better screen reader support
         figureElement.setAttribute('role', 'img');
@@ -90,10 +82,9 @@ export const accessibleImageRender =
         );
       }
 
-      // Return the figure element as the new dom
       return {
         ...imageRenderComputed,
-        dom: figureElement,
+        dom,
       };
     };