From 10b088599cbd098e5415bf6456a6bc6096e6d938 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Thu, 15 May 2025 14:16:00 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20svg=20export?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Last upgrade of Blocknote to 0.30.0 broke the SVG
export. The previewWidth can be undefined, which causes the
export to fail. This commit adds a fallback
width in case previewWidth is undefined.
---
 .../apps/e2e/__tests__/app-impress/assets/test.svg   |  7 ++++++-
 .../docs/doc-export/blocks-mapping/imageDocx.tsx     | 12 +++++++-----
 .../docs/doc-export/blocks-mapping/imagePDF.tsx      |  7 +++++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/assets/test.svg b/src/frontend/apps/e2e/__tests__/app-impress/assets/test.svg
index 6da84dcd..6980c934 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/assets/test.svg
+++ b/src/frontend/apps/e2e/__tests__/app-impress/assets/test.svg
@@ -1,4 +1,9 @@
-<svg width="100" height="100" viewBox="0 0 100 100">
+<svg
+  width="100"
+  height="100"
+  viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg"
+>
   <circle cx="50" cy="30" r="20" fill="#3498db" />
   <polygon
     points="50,10 55,20 65,20 58,30 60,40 50,35 40,40 42,30 35,20 45,20"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imageDocx.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imageDocx.tsx
index e5c244dd..58967ec5 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imageDocx.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imageDocx.tsx
@@ -21,6 +21,7 @@ export const blockMappingImageDocx: DocsExporterDocx['mappings']['blockMapping']
     const blob = await exporter.resolveFile(block.props.url);
     let pngConverted: string | undefined;
     let dimensions: { width: number; height: number } | undefined;
+    let previewWidth = block.props.previewWidth || undefined;
 
     if (!blob.type.includes('image')) {
       return [];
@@ -28,7 +29,9 @@ export const blockMappingImageDocx: DocsExporterDocx['mappings']['blockMapping']
 
     if (blob.type.includes('svg')) {
       const svgText = await blob.text();
-      pngConverted = await convertSvgToPng(svgText, block.props.previewWidth);
+      const FALLBACK_SIZE = 536;
+      previewWidth = previewWidth || blob.size || FALLBACK_SIZE;
+      pngConverted = await convertSvgToPng(svgText, previewWidth);
       const img = new Image();
       img.src = pngConverted;
       await new Promise((resolve) => {
@@ -47,8 +50,7 @@ export const blockMappingImageDocx: DocsExporterDocx['mappings']['blockMapping']
 
     const { width, height } = dimensions;
 
-    let previewWidth = block.props.previewWidth;
-    if (previewWidth > MAX_WIDTH) {
+    if (previewWidth && previewWidth > MAX_WIDTH) {
       previewWidth = MAX_WIDTH;
     }
 
@@ -69,8 +71,8 @@ export const blockMappingImageDocx: DocsExporterDocx['mappings']['blockMapping']
                 }
               : undefined,
             transformation: {
-              width: previewWidth,
-              height: (previewWidth / width) * height,
+              width: previewWidth || width,
+              height: ((previewWidth || width) / width) * height,
             },
           }),
         ],
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx
index a5551b48..728d5f3a 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx
@@ -12,6 +12,7 @@ export const blockMappingImagePDF: DocsExporterPDF['mappings']['blockMapping']['
   async (block, exporter) => {
     const blob = await exporter.resolveFile(block.props.url);
     let pngConverted: string | undefined;
+    let width = block.props.previewWidth || undefined;
 
     if (!blob.type.includes('image')) {
       return <View wrap={false} />;
@@ -19,7 +20,9 @@ export const blockMappingImagePDF: DocsExporterPDF['mappings']['blockMapping']['
 
     if (blob.type.includes('svg')) {
       const svgText = await blob.text();
-      pngConverted = await convertSvgToPng(svgText, block.props.previewWidth);
+      const FALLBACK_SIZE = 536;
+      width = width || blob.size || FALLBACK_SIZE;
+      pngConverted = await convertSvgToPng(svgText, width);
     }
 
     return (
@@ -27,7 +30,7 @@ export const blockMappingImagePDF: DocsExporterPDF['mappings']['blockMapping']['
         <Image
           src={pngConverted || blob}
           style={{
-            width: block.props.previewWidth * PIXELS_PER_POINT,
+            width: width ? width * PIXELS_PER_POINT : undefined,
             maxWidth: '100%',
           }}
         />