UX fixes

components/HTMLBlock/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 const MATCH_SCRIPT_TAGS = /<script\b[^>]*>([\s\S]*?)<\/script *>\n?/gim;
 
@@ -15,7 +15,10 @@ const extractScripts = (html: string = ''): [string, () => void] => {
 
 const HTMLBlock = props => {
   const { children, runScripts, safeMode = false } = props;
-  const html = renderToString(<>{children}</>);
+  let html = children;
+
+  if (typeof html !== 'string') html = renderToStaticMarkup(html);
+
   const [cleanedHtml, exec] = extractScripts(html);
 
   useEffect(() => {
@@ -25,7 +28,7 @@ const HTMLBlock = props => {
   if (safeMode) {
     return (
       <pre className="html-unsafe">
-        <code dangerouslySetInnerHTML={{ __html: renderToStaticMarkup(cleanedHtml) }} />
+        <code>{cleanedHtml}</code>
       </pre>
     );
   }

docs/html-tests.md

@@ -0,0 +1,71 @@
+---
+title: 'HTML Blocks'
+---
+
+## JSX (with no HTML attributes)
+
+<HTMLBlock runScripts={true}>
+  <script>console.log(true, 0);</script>
+  <h3>Header 0</h3>
+  <p>Paragraph with <em>italics</em> and <strong>bold stuff</strong>.</p>
+  <div>I am actually a div!</div>
+</HTMLBlock>
+
+
+## JSX
+
+<HTMLBlock>
+  <script>console.log(true, 1);</script>
+  <h3>Header 1</h3>
+  <p>Paragraph with <em>italics</em> and <strong>bold stuff</strong>.</p>
+  <div style={{ paddingLeft: "20px", color: "blue" }}>
+    Behold, I am blue and indented!
+  </div>
+</HTMLBlock>
+
+
+## HTML as a prop
+
+<HTMLBlock children='<script>console.log(true, 2);</script><h3>Header 2</h3>
+  <p>Paragraph with <em>italics</em> and <strong>bold stuff</strong>.</p>
+  <div style="padding-left: 20px; color: blue">Behold, I am blue and indented!</div>' />
+
+
+## HTML in template literal
+
+<HTMLBlock>
+  {`
+    <script>console.log(true, 3);</script>
+    <h3>Header 3</h3>
+    <p>Paragraph with <em>italics</em> and <strong>bold stuff</strong>.</p>
+    <div style="padding-left: 20px; color: blue">
+      Behold, I am blue and indented!
+    </div>
+  `}
+</HTMLBlock>
+
+
+## JSX in safe mode
+
+<HTMLBlock safeMode={true}>
+  <script>console.log(true, 4);</script>
+  <h3>Header 4</h3>
+  <p>Paragraph with <em>italics</em> and <strong>bold stuff</strong>.</p>
+  <div style={{ paddingLeft: "20px", color: "blue" }}>
+    Behold, I am blue and indented!
+  </div>
+</HTMLBlock>
+
+
+## HTML in safe mode
+
+<HTMLBlock safeMode={true}>
+{`
+  <script>console.log(true, 5);</script>
+  <h3>Header 5</h3>
+  <p>Paragraph with <em>italics</em> and <strong>bold stuff</strong>.</p>
+  <div style="padding-left: 20px; color: blue">
+    Behold, I am blue and indented!
+  </div>
+`}
+</HTMLBlock>

docs/sanitizing-tests.md

@@ -1,7 +1,22 @@
 
+## Sanitizing `style` tags
+
+<style>
+  * {
+    background-color: olive;
+  }
+</style>
+
+
+## Sanitizing `style` attributes
+
+<p style="background-color: salmon">fish content</p>
+
+
 ## Sanitizing html blocks
 
-<HTMLBlock>
-  <h2>Header</h2>
-  <p>hello there</p>
-</HTMLBlock>
+[block:html]
+{
+  "html": "<style>* { border: 3px solid magenta; }</style>"
+}
+[/block]

example/docs.ts

@@ -15,6 +15,8 @@ import gettingStarted from '../docs/getting-started.md';
 // @ts-ignore
 import headings from '../docs/headings.md';
 // @ts-ignore
+import htmlBlocks from '../docs/html-tests.md';
+// @ts-ignore
 import images from '../docs/images.md';
 // @ts-ignore
 import lists from '../docs/lists.md';
@@ -41,6 +43,7 @@ const fixtures = Object.entries({
   features,
   gettingStarted,
   headings,
+  htmlBlocks,
   images,
   lists,
   sanitizingTests,