fix(docx): make image generation safe for MS Word (#753)

danji90 · web-flow · commit 2b993e6fd95c · 2026-02-19T11:56:13.000+01:00
* fix(docx): make image generation safe for MS Word

* chore: make createImage function for all ImageRuns

* chore: clean

* chore: clean

* chore: clean

* chore: validate images first
diff --git a/utils/docx/bl/writeLocationTable.tsx b/utils/docx/bl/writeLocationTable.tsx
@@ -1,5 +1,5 @@
 import { cantonalMappings } from "@geops/tree-lib";
-import { BorderStyle, ImageRun, Paragraph, Table, TextRun } from "docx";
+import { BorderStyle, Paragraph, Table, TextRun } from "docx";
 
 import Site from "@/components/ForestTypeModal/ForestTypeDescription/bl/Site";
 import getImageHtml from "@/utils/getImageHtml";
@@ -10,27 +10,44 @@ import {
   getTilleringTreeTypes,
   soilIconTranslator,
 } from "../../../components/ForestTypeModal/ForestTypeDescription/bl/utils";
-import { getLocationTableRow, jsxToBlob, PAGE_WIDTH_DXA } from "../exportUtils";
+import {
+  createPng,
+  getLocationTableRow,
+  jsxToBlob,
+  PAGE_WIDTH_DXA,
+  validateImage,
+} from "../exportUtils";
 import { writeDataTable } from "../writeDataTable";
 
 import type { BlForestType } from "@geops/tree-lib/types";
 
-// const { getImageHtml, getMapping, getReliefImageUrl } = utils();
-
 const vegetationMapping = cantonalMappings?.bl?.vegetation;
 
 const writeLocationTable = async (
   data: BlForestType,
   t: (key: string) => string,
 ) => {
   const sitePng = await jsxToBlob(<Site data={data.expoandaspect} />);
-  const imagePath = getReliefImageUrl(data.code, "bl");
-  const imageHtml = imagePath && (await getImageHtml(imagePath));
-  const imageBlob =
-    imagePath &&
-    (await fetch(imagePath)
-      .then((response) => response.blob())
-      .then((blob) => blob.arrayBuffer()));
+
+  const terrainImagePath = getReliefImageUrl(data.code, "bl");
+  const terrainImageHtml = terrainImagePath
+    ? await getImageHtml(terrainImagePath)
+    : null;
+  const terrainImageBlob = terrainImagePath
+    ? await fetch(terrainImagePath)
+        .then((response) => response.blob())
+        .then((blob) => blob.arrayBuffer())
+    : null;
+  const terrainImage = validateImage(terrainImageBlob, terrainImageHtml)
+    ? createPng(
+        terrainImageBlob,
+        terrainImageHtml?.width ?? 0,
+        terrainImageHtml?.height ?? 0,
+      )
+    : undefined;
+
+  const slopeAndExpoImage = createPng(sitePng, 120, 120);
+
   const transitions = getValidForestTypes<BlForestType>(data.transitions, "bl");
   const borderConfig = {
     color: "e0e1e2",
@@ -110,34 +127,12 @@ const writeLocationTable = async (
     getLocationTableRow("Geologie", data.geology),
     getLocationTableRow(t("forestType.terrain"), [
       new Paragraph({
-        children: [
-          imageBlob
-            ? // @ts-expect-error Don't need fallback
-              new ImageRun({
-                data: imageBlob,
-                transformation: {
-                  height: (imageHtml as HTMLImageElement)?.height,
-                  width: (imageHtml as HTMLImageElement)?.width,
-                },
-              })
-            : new TextRun("-"),
-        ],
+        children: terrainImage ? [terrainImage] : [new TextRun("-")],
       }),
     ]),
     getLocationTableRow("Hangneigung & Exposition", [
       new Paragraph({
-        children: [
-          sitePng
-            ? // @ts-expect-error Don't need fallback
-              new ImageRun({
-                data: sitePng,
-                transformation: {
-                  height: 120,
-                  width: 120,
-                },
-              })
-            : new TextRun("-"),
-        ],
+        children: slopeAndExpoImage ? [slopeAndExpoImage] : [new TextRun("-")],
       }),
     ]),
     getLocationTableRow("Vegetation", data.vegetation),
diff --git a/utils/docx/exportUtils.ts b/utils/docx/exportUtils.ts
@@ -2,6 +2,7 @@ import {
   BorderStyle,
   ExternalHyperlink,
   HeadingLevel,
+  ImageRun,
   Paragraph,
   ShadingType,
   Table,
@@ -110,7 +111,7 @@ export const svgStringToBlob = async (string: string) => {
     fetch(uri)
       .then((res) => res.blob())
       .then((blob) => blob.arrayBuffer()),
-  )) as Buffer;
+  )) as ArrayBuffer;
 };
 
 export const svgUriToBlob = async (dataUri: string) =>
@@ -121,6 +122,29 @@ export const svgUriToBlob = async (dataUri: string) =>
 export const jsxToBlob = (jsx: React.ReactNode) =>
   isSvg(renderToString(jsx)) ? svgStringToBlob(renderToString(jsx)) : null;
 
+export const validateImage = (
+  blob: ArrayBuffer | null,
+  html: HTMLImageElement | null,
+) => {
+  return !!blob && !!html;
+};
+
+export const createPng = (
+  buffer: ArrayBuffer | null | undefined,
+  width = 25,
+  height = 25,
+) =>
+  buffer
+    ? new ImageRun({
+        data: buffer,
+        transformation: {
+          height,
+          width,
+        },
+        type: "png",
+      })
+    : undefined;
+
 // Docx table helpers
 export const getPermalink = (text: string) =>
   new Paragraph({
diff --git a/utils/docx/lu/writeLocationTable.tsx b/utils/docx/lu/writeLocationTable.tsx
@@ -1,5 +1,5 @@
 import { cantonalMappings } from "@geops/tree-lib";
-import { ImageRun, Paragraph, Table, TextRun } from "docx";
+import { Paragraph, Table, TextRun } from "docx";
 
 import getTilleringTreeTypes from "@/components/ForestTypeModal/ForestTypeDescription/lu/getTilleringTreeTypes";
 import getImageHtml from "@/utils/getImageHtml";
@@ -8,7 +8,13 @@ import getReliefImageUrl from "@/utils/getReliefImageUrl";
 import Site from "../../../components/ForestTypeModal/ForestTypeDescription/lu/Site";
 import Tillering from "../../../components/ForestTypeModal/ForestTypeDescription/lu/Tillering";
 import TilleringSingle from "../../../components/ForestTypeModal/ForestTypeDescription/lu/TilleringSingle";
-import { getLocationTableRow, jsxToBlob, PAGE_WIDTH_DXA } from "../exportUtils";
+import {
+  createPng,
+  getLocationTableRow,
+  jsxToBlob,
+  PAGE_WIDTH_DXA,
+  validateImage,
+} from "../exportUtils";
 import { writeDataTable } from "../writeDataTable";
 
 import type { LuForestType } from "@geops/tree-lib/types";
@@ -23,49 +29,44 @@ const writeLocationTable = async (
   const tilleringHardwoodPng = await jsxToBlob(
     <TilleringSingle data={data.tilleringhardwood} />,
   );
+  const tilleringHardwoodImage = createPng(tilleringHardwoodPng, 225, 30);
   const tilleringPng = await jsxToBlob(<Tillering data={data.tillering} />);
+  const tilleringImage = createPng(
+    tilleringPng,
+    225,
+    getTilleringTreeTypes(data.tillering).length * 19 + 30,
+  );
+
+  const terrainImagePath = getReliefImageUrl(data.code, "lu", true);
+  const terrainImageHtml = terrainImagePath
+    ? await getImageHtml(terrainImagePath)
+    : null;
+  const terrainImageBlob = terrainImagePath
+    ? await fetch(terrainImagePath)
+        .then((response) => response.blob())
+        .then((blob) => blob.arrayBuffer())
+    : null;
+  const imageWidth = terrainImageHtml ? terrainImageHtml.width / 3 : 0;
+  const imageHeight = terrainImageHtml ? terrainImageHtml.height / 3 : 0;
+  const terrainImage = validateImage(terrainImageBlob, terrainImageHtml)
+    ? createPng(terrainImageBlob, imageWidth, imageHeight)
+    : undefined;
+
   const sitePng = await jsxToBlob(<Site data={data.expoandaspect} />);
-  const imagePath = getReliefImageUrl(data.code, "lu", true);
-  const imageHtml = imagePath && (await getImageHtml(imagePath));
-  const imageBlob =
-    imagePath &&
-    (await fetch(imagePath)
-      .then((response) => response.blob())
-      .then((blob) => blob.arrayBuffer()));
+  const siteImage = createPng(sitePng, 120, 120);
 
   const rows = [
     getLocationTableRow(t("lu.forestType.tilleringHardwood"), [
       new Paragraph({
-        children: [
-          tilleringHardwoodPng
-            ? // @ts-expect-error Don't need fallback
-              new ImageRun({
-                data: tilleringHardwoodPng,
-                transformation: {
-                  height: 30,
-                  width: 225,
-                },
-              })
-            : new TextRun("-"),
-        ],
+        children: tilleringHardwoodImage
+          ? [tilleringHardwoodImage]
+          : [new TextRun("-")],
       }),
     ]),
     getLocationTableRow(t("lu.forestType.tillering"), [
       new Paragraph(""),
       new Paragraph({
-        children: [
-          tilleringPng
-            ? // @ts-expect-error Don't need fallback
-              new ImageRun({
-                data: tilleringPng,
-                transformation: {
-                  height:
-                    getTilleringTreeTypes(data.tillering).length * 19 + 30,
-                  width: 225,
-                },
-              })
-            : new TextRun("-"),
-        ],
+        children: tilleringImage ? [tilleringImage] : [new TextRun("-")],
       }),
       new Paragraph(""),
     ]),
@@ -99,18 +100,7 @@ const writeLocationTable = async (
     ),
     getLocationTableRow(t("forestType.terrain"), [
       new Paragraph({
-        children: [
-          imageBlob
-            ? // @ts-expect-error Don't need fallback
-              new ImageRun({
-                data: imageBlob,
-                transformation: {
-                  height: (imageHtml as HTMLImageElement).height / 3,
-                  width: (imageHtml as HTMLImageElement).width / 3,
-                },
-              })
-            : new TextRun("-"),
-        ],
+        children: terrainImage ? [terrainImage] : [new TextRun("-")],
       }),
     ]),
     getLocationTableRow(
@@ -119,18 +109,7 @@ const writeLocationTable = async (
       )}`,
       [
         new Paragraph({
-          children: [
-            sitePng
-              ? // @ts-expect-error Don't need fallback
-                new ImageRun({
-                  data: sitePng,
-                  transformation: {
-                    height: 120,
-                    width: 120,
-                  },
-                })
-              : new TextRun("-"),
-          ],
+          children: siteImage ? [siteImage] : [new TextRun("-")],
         }),
       ],
     ),
diff --git a/utils/docx/writeRecommendationTable.tsx b/utils/docx/writeRecommendationTable.tsx
@@ -1,4 +1,4 @@
-import { AlignmentType, ImageRun, Paragraph, Table, TableRow } from "docx";
+import { AlignmentType, Paragraph, Table, TableRow } from "docx";
 
 import AttentionIcon from "@/components/icons/RecommendationAttention";
 import NegativeIcon from "@/components/icons/RecommendationNegative";
@@ -10,6 +10,7 @@ import getSortedTreeTypes from "../getSortedTreeTypes";
 
 import {
   cellIconPadding,
+  createPng,
   getRecommendationTableCell,
   jsxToBlob,
   PAGE_WIDTH_DXA,
@@ -61,23 +62,19 @@ export const writeRecommendationTable = async (
   const neutralIcon = await jsxToBlob(<NeutralIcon color="#000000" />);
   const attentionIcon = await jsxToBlob(<AttentionIcon color="#000000" />);
 
+  const positiveRun = createPng(positiveIcon);
+  const negativeRun = createPng(negativeIcon);
+  const neutralRun = createPng(neutralIcon);
+  const attentionRun = createPng(attentionIcon);
+
   const rows = [
     new TableRow({
       children: [
         getRecommendationTableCell(
           [
             new Paragraph({
               alignment: AlignmentType.CENTER,
-              children: [
-                // @ts-expect-error Don't need fallback
-                new ImageRun({
-                  data: positiveIcon ?? new ArrayBuffer(0),
-                  transformation: {
-                    height: 25,
-                    width: 25,
-                  },
-                }),
-              ],
+              children: positiveRun ? [positiveRun] : [],
             }),
           ],
           cellIconPadding,
@@ -106,16 +103,7 @@ export const writeRecommendationTable = async (
           [
             new Paragraph({
               alignment: AlignmentType.CENTER,
-              children: [
-                // @ts-expect-error Don't need fallback
-                new ImageRun({
-                  data: neutralIcon ?? new ArrayBuffer(0),
-                  transformation: {
-                    height: 25,
-                    width: 25,
-                  },
-                }),
-              ],
+              children: neutralRun ? [neutralRun] : [],
             }),
           ],
           cellIconPadding,
@@ -144,16 +132,7 @@ export const writeRecommendationTable = async (
           [
             new Paragraph({
               alignment: AlignmentType.CENTER,
-              children: [
-                // @ts-expect-error Don't need fallback
-                new ImageRun({
-                  data: negativeIcon ?? new ArrayBuffer(0),
-                  transformation: {
-                    height: 25,
-                    width: 25,
-                  },
-                }),
-              ],
+              children: negativeRun ? [negativeRun] : [],
             }),
           ],
           cellIconPadding,
@@ -178,16 +157,7 @@ export const writeRecommendationTable = async (
             [
               new Paragraph({
                 alignment: AlignmentType.CENTER,
-                children: [
-                  // @ts-expect-error Don't need fallback
-                  new ImageRun({
-                    data: attentionIcon ?? new ArrayBuffer(0),
-                    transformation: {
-                      height: 25,
-                      width: 25,
-                    },
-                  }),
-                ],
+                children: attentionRun ? [attentionRun] : [],
               }),
             ],
             cellIconPadding,
