fix: allow html syntax in MDX v2 with format md (#8960)

* attempt to support html embeds in mdx with format md

* refactor mdx loader + support embedding html in commonmark thanks to rehype-raw

* extract processor code

* refactor processor code

* extract format + unit test

* try to refactor processor

* try to refactor processor

* adjust md page

* do not apply rehype-raw when format is mdx

* fix lint issue

website/_dogfooding/_pages tests/markdown-tests-md.md

@@ -23,7 +23,7 @@ import BrowserWindow from '@site/src/components/BrowserWindow';
 
 BrowserWindow content
 
-<BrowserWindow/>
+</BrowserWindow>
 
 export const answer = 42;
 
@@ -42,3 +42,55 @@ note
 ## Heading Id {#custom-heading-id}
 
 Custom heading syntax `{#custom-heading-id}` still works
+
+---
+
+## HTML
+
+### Styling
+
+<span style="color: blue;">blue span</span>
+
+<p style="color: green;">green p</p>
+
+<button style="color: red;">red button</button>
+
+<div style="border: solid; background-color: grey; color: lime; padding: 10px">
+  lime <span style="color: red; margin: 10px;">red</span>
+</div>
+
+<br/>
+
+### Embeds
+
+#### Closed image tag:
+
+<img src="/img/docusaurus.png"/>
+
+<br/>
+
+#### Unclosed image tag:
+
+<img src="/img/docusaurus.png">
+
+<br/>
+
+### Iframe
+
+<iframe src="/" style="width: 100%; height: 300px; border: solid red thick;"></iframe>
+
+<br/>
+
+### Security
+
+```md
+<p>
+  When pressing this button, no alert should be printed
+  <button onClick="alert('unsafe');">Click me</button>
+</p>
+```
+
+<p>
+  When pressing this button, no alert should be printed
+  <button onClick="alert('unsafe');">Click me</button>
+</p>

website/_dogfooding/_pages tests/markdown-tests-mdx.mdx

@@ -4,6 +4,8 @@ description: Markdown Page tests description
 wrapperClassName: docusaurus-markdown-example
 ---
 
+<button onClick={() => alert('unsafe :s')}>Should not alert</button>
+
 # Markdown .mdx tests
 
 This is a page generated from Markdown to illustrate the Markdown page feature and test some edge cases.