⚡️Enhance/html copy to download

[Ovgodd]

Purpose

Enable users to export an accessible HTML version of content, replacing the "Copy as HTML" option with a full export feature from the modal.

issue : 599

Proposal

• Move "Copy as HTML" to the export modal
• Add a new accessible HTML export format (.html in ZIP)
• Embed media files (images, SVG, PDF, video/audio) in the ZIP with clean filenames
• Update export modal UI and labels
• Add E2E test to validate HTML export ZIP structure and content

[github-actions]

Size Change: +26.8 kB (+0.65%)

Total Size: 4.14 MB

Filename	Size	Change
apps/impress/out/_next/static/chunks/1927.js	0 B	-703 kB (removed)	🏆
apps/impress/out/_next/static/eb4c2de9/_buildManifest.js	0 B	-906 B (removed)	🏆
apps/impress/out/_next/static/chunks/8323.js	730 kB	+730 kB (new file)	🆕
apps/impress/out/_next/static/d79120e8/_buildManifest.js	906 B	+906 B (new file)	🆕

_{compressed-size-action}

[AntoLC]

I have some cases where the mp3 and videos are not exported, I used this doc model:
https://www.blocknotejs.org/docs/features/blocks

[AntoLC]

I can see you use the CORS proxy, but I think it works only with images:

docs/src/backend/core/api/viewsets.py

Lines 1551 to 1555 in 999c814

	if not content_type.startswith("image/"):
	return drf.response.Response(
	status=status.HTTP_415_UNSUPPORTED_MEDIA_TYPE
	)

[Ovgodd]

Oh yes, I see, the current CORS proxy only supports images.
So that means external audio / video (when they’re not uploaded to our backend) are rejected and can’t be added to the HTML ZIP? ( as you said sometimes mp3 and vidéos are not exported )
In that case, should we update the backend proxy to also allow audio and video so these files can be exported too?

[AntoLC]

There are 2 types of "link" (internal / external), if the resources are internal like https://docs.numerique.gouv.fr/media/..., we have to download them and put them in the zip files because they will not be accessible otherwise; on the other hand, if the resources are external like https://youtube.com/kefseklsfes.mp4, I don't think we should download them but just let the src as it was, moreover we don't have the hand on the external resources they could be huge (1go) or even infected.

[AntoLC]

Could we improve this part to check what is inside the zip file ?

The idea:

import JSZip from 'jszip';

// In your test:
const zipBuffer = await cs.toBuffer(await download.createReadStream());

// Unzip and inspect contents
const zip = await JSZip.loadAsync(zipBuffer);

// Check that index.html exists
const indexHtml = zip.file('index.html');
expect(indexHtml).not.toBeNull();

// Read and verify HTML content
const htmlContent = await indexHtml!.async('string');
expect(htmlContent).toContain('Hello HTML ZIP');

// Check for media files
const mediaFiles = zip.file(/^media\//);
expect(mediaFiles.length).toBeGreaterThan(0);

// Verify the SVG image is included
const svgFile = mediaFiles.find(f => f.name.endsWith('.svg'));
expect(svgFile).toBeDefined();

[Ovgodd]

yes I agree this is much better

[AntoLC]

There are 2 types of "link" (internal / external), if the resources are internal like https://docs.numerique.gouv.fr/media/..., we have to download them and put them in the zip files because they will not be accessible otherwise; on the other hand, if the resources are external like https://youtube.com/kefseklsfes.mp4, I don't think we should download them but just let the src as it was, moreover we don't have the hand on the external resources they could be huge (1go) or even infected.

[AntoLC]

We should open a issue to add a css in the zip file to get the look and feel of what we have in Docs; because it seems correct on a accessibility perspective (dom) but visually it is not usable.