don't loose DOCTYPE header in embed resource processing

[cderv]

fix #12295

If a HTML file does not have DOCTYPE, then the browser are using Quirks mode and not applying standard HTML5 CSS. Hence the problem seen in #12295

• https://developer.mozilla.org/en-US/docs/Glossary/Doctype
• https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

[cscheid]

Good fix! But do we understand where the regression comes from?

[cderv]

But do we understand where the regression comes from?

I tried to explain this above. Let me try to reformulate. When there is no DOCTYPE in the document, browsers use specific modes that don't use the same browser's default CSS. The link I shared above explains that.

The problem is caused by a difference in the browser's default CSS. I can't point you to the rule exactly.

However, we were wrongly removing the DOCTYPE while doing embedding, so it seems to be the cause of the breakage in Quarto, even thought I did not see the browser rule that changed.

Quirks mode showed other warning in Browser console, so we definitely don't want that.

[cscheid]

Sorry. What I meant is that I thought this was a regression given #12295 (comment), and I would like to understand what caused the regression.

[cderv]

Did you see #12295 (comment) ?

The commit that cause the problem is 19cf9ef where esbuild is used before embedding.

Following the change the DOM is parsed

quarto-cli/src/core/pandoc/self-contained.ts

Lines 50 to 51 in 19cf9ef

	const contents = Deno.readTextFileSync(file);
	const dom = await parseHtml(contents);

and inserted in raw block after esbuild run

quarto-cli/src/core/pandoc/self-contained.ts

Lines 52 to 57 in 19cf9ef

	await bundleModules(dom, workingDir);
	const input: string[] = [];
	input.push("````````{=html}");
	input.push(dom.documentElement!.outerHTML);
	input.push("````````");

Before that it was directly the text file content put in raw block (which includes DOCTYPE line)

quarto-cli/src/core/pandoc/self-contained.ts

Lines 25 to 29 in 92cad44

	const contents = Deno.readTextFileSync(file);
	const input: string[] = [];
	input.push("````````{=html}");
	input.push(contents);
	input.push("````````");

But parsing the DOM and only use dom.documentElement!.outerHTML looses the DOCTYPE it seems.
So we need to put it back first if any which this PR does.

I feel you may have understood this already, and I missing the point of what you want to understand... 🤔 am I ?

[cscheid]

This clarifies it, thank you! It's the roundtrip through the DOM parser specifically, and not esbuild itself.

[cderv]

It's the roundtrip through the DOM parser specifically, and not esbuild itself.

Yes exactly ! A very good summary 😄 thank you !