fixup! ✨(frontend) added accessible html export and moved download option

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx

@@ -19,19 +19,18 @@ import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, ButtonCloseModal, Text } from '@/components';
+import { useMediaUrl } from '@/core';
 import { useEditorStore } from '@/docs/doc-editor';
 import { Doc, useTrans } from '@/docs/doc-management';
+import { fallbackLng } from '@/i18n/config';
 
-import {
-  exportCorsResolveFileUrl,
-  exportResolveFileUrl,
-} from '../api/exportResolveFileUrl';
+import { exportCorsResolveFileUrl } from '../api/exportResolveFileUrl';
 import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { docxDocsSchemaMappings } from '../mappingDocx';
 import { odtDocsSchemaMappings } from '../mappingODT';
 import { pdfDocsSchemaMappings } from '../mappingPDF';
 import {
-  deriveMediaFilename,
+  addMediaFilesToZip,
   downloadFile,
   generateHtmlDocument,
 } from '../utils';
@@ -61,6 +60,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
     DocDownloadFormat.PDF,
   );
   const { untitledDocument } = useTrans();
+  const mediaUrl = useMediaUrl();
 
   const templateOptions = useMemo(() => {
     const templateOptions = (templates?.pages || [])
@@ -159,59 +159,11 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
       const domParser = new DOMParser();
       const parsedDocument = domParser.parseFromString(fullHtml, 'text/html');
 
-      const mediaFiles: { filename: string; blob: Blob }[] = [];
-      const mediaElements = Array.from(
-        parsedDocument.querySelectorAll<
-          | HTMLImageElement
-          | HTMLVideoElement
-          | HTMLAudioElement
-          | HTMLSourceElement
-        >('img, video, audio, source'),
-      );
-
-      await Promise.all(
-        mediaElements.map(async (element, index) => {
-          const src = element.getAttribute('src');
-
-          if (!src) {
-            return;
-          }
-
-          // data: URLs are already embedded and work offline; no need to create separate files.
-          if (src.startsWith('data:')) {
-            return;
-          }
-
-          // Only download same-origin resources (internal media like /media/...).
-          // External URLs keep their original src and are not included in the ZIP
-          let url: URL | null = null;
-          try {
-            url = new URL(src, window.location.origin);
-          } catch {
-            url = null;
-          }
-
-          if (!url || url.origin !== window.location.origin) {
-            return;
-          }
+      const zip = new JSZip();
 
-          const fetched = await exportResolveFileUrl(url.href);
+      await addMediaFilesToZip(parsedDocument, zip, mediaUrl);
 
-          if (!(fetched instanceof Blob)) {
-            return;
-          }
-
-          const filename = deriveMediaFilename({
-            src: url.href,
-            index,
-            blob: fetched,
-          });
-          element.setAttribute('src', filename);
-          mediaFiles.push({ filename, blob: fetched });
-        }),
-      );
-
-      const lang = i18next.language || 'fr';
+      const lang = i18next.language || fallbackLng;
       const editorHtmlWithLocalMedia = parsedDocument.body.innerHTML;
 
       const htmlContent = generateHtmlDocument(
@@ -220,13 +172,8 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         lang,
       );
 
-      const zip = new JSZip();
       zip.file('index.html', htmlContent);
 
-      mediaFiles.forEach(({ filename, blob }) => {
-        zip.file(filename, blob);
-      });
-
       blobExport = await zip.generateAsync({ type: 'blob' });
     } else {
       toast(t('The export failed'), VariantType.ERROR);

src/frontend/apps/impress/src/features/docs/doc-export/utils.ts

@@ -5,8 +5,11 @@ import {
 } from '@blocknote/core';
 import { Canvg } from 'canvg';
 import { IParagraphOptions, ShadingType } from 'docx';
+import JSZip from 'jszip';
 import React from 'react';
 
+import { exportResolveFileUrl } from './api';
+
 export function downloadFile(blob: Blob, filename: string) {
   const url = window.URL.createObjectURL(blob);
   const a = document.createElement('a');
@@ -288,3 +291,62 @@ ${editorHtmlWithLocalMedia}
   </body>
 </html>`;
 };
+
+export const addMediaFilesToZip = async (
+  parsedDocument: Document,
+  zip: JSZip,
+  mediaUrl: string,
+) => {
+  const mediaFiles: { filename: string; blob: Blob }[] = [];
+  const mediaElements = Array.from(
+    parsedDocument.querySelectorAll<
+      HTMLImageElement | HTMLVideoElement | HTMLAudioElement | HTMLSourceElement
+    >('img, video, audio, source'),
+  );
+
+  await Promise.all(
+    mediaElements.map(async (element, index) => {
+      const src = element.getAttribute('src');
+
+      if (!src) {
+        return;
+      }
+
+      // data: URLs are already embedded and work offline; no need to create separate files.
+      if (src.startsWith('data:')) {
+        return;
+      }
+
+      // Only download same-origin resources (internal media like /media/...).
+      // External URLs keep their original src and are not included in the ZIP
+      let url: URL | null = null;
+      try {
+        url = new URL(src, mediaUrl);
+      } catch {
+        url = null;
+      }
+
+      if (!url || url.origin !== mediaUrl) {
+        return;
+      }
+
+      const fetched = await exportResolveFileUrl(url.href);
+
+      if (!(fetched instanceof Blob)) {
+        return;
+      }
+
+      const filename = deriveMediaFilename({
+        src: url.href,
+        index,
+        blob: fetched,
+      });
+      element.setAttribute('src', filename);
+      mediaFiles.push({ filename, blob: fetched });
+    }),
+  );
+
+  mediaFiles.forEach(({ filename, blob }) => {
+    zip.file(filename, blob);
+  });
+};