⚡️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/c42e3881/_buildManifest.js	0 B	-906 B (removed)	🏆
apps/impress/out/_next/static/chunks/1927.js	0 B	-703 kB (removed)	🏆
apps/impress/out/_next/static/chunks/8323.js	730 kB	+730 kB (new file)	🆕
apps/impress/out/_next/static/e5ee7ee4/_buildManifest.js	907 B	+907 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]

Same, is 1mn really necessary, seems big ?

[Ovgodd]

The test was a bit flaky, I saw it fail occasionally and one run even took ~9s, so I put timeout to 1min a bit aggressively 😅
We could probably reduce it to 15–20s now ? Wdyt

[AntoLC]

You can remove totally this test, we don't assert things that does not exist anymore.

[AntoLC]

Suggested change

	const editorHtml = await editor.blocksToHTMLLossy();
	const editorHtml = editor.blocksToHTMLLossy();

Have you seen that you have editor.blocksToFullHTML available as well ?

[Ovgodd]

Yes, indeed, I’ve just switched to editor.blocksToFullHTML(), and it preserves the original document structure much better than blocksToHTMLLossy.
This is the best option BlockNote provides, I think.

[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]

I have the feeling it is error prone, what if the mimeType does not have a "/" ?

[Ovgodd]

Yes, good catch,
I’ve updated it so we first check for the / is present otherwise we skip the extension logic and keep the base filename

[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