setting html DANGEROUSLY

components/HTMLBlock/index.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+
+const MATCH_SCRIPT_TAGS = /<script\b[^>]*>([\s\S]*?)<\/script *>\n?/gim;
+
+const extractScripts = (html: string = ''): [string, () => void] => {
+  const scripts: string[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = MATCH_SCRIPT_TAGS.exec(html)) !== null) {
+    scripts.push(match[1]);
+  }
+  const cleaned = html.replace(MATCH_SCRIPT_TAGS, '');
+  return [cleaned, () => scripts.map(js => window.eval(js))];
+};
+
+const HTMLBlock = props => {
+  const { children, runScripts, safeMode = false } = props;
+  const html = renderToString(<>{children}</>);
+  const [cleanedHtml, exec] = extractScripts(html);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && typeof runScripts === 'boolean' && runScripts) exec();
+  }, [runScripts, exec]);
+
+  if (safeMode) {
+    return (
+      <pre className="html-unsafe">
+        <code dangerouslySetInnerHTML={{ __html: renderToStaticMarkup(cleanedHtml) }} />
+      </pre>
+    );
+  }
+
+  return <div className="rdmd-html" dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+export default HTMLBlock;

components/Image/index.tsx

@@ -1,32 +1,18 @@
 import * as React from 'react';
 
-interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLImageElement>> {
-  align: string;
-  alt: string;
-  border: boolean;
-  caption: string;
-  className: string;
-  height: string;
-  lazy: boolean;
-  src: string;
-  title: string;
-  width: string;
-}
-
-const Image = (props: Props) => {
+const Image = props => {
   const [lightbox, setLightbox] = React.useState(false);
-
   const {
     align = '',
     alt = '',
     border = false,
     caption,
     className = '',
     height = 'auto',
-    lazy,
     src = '',
     title = '',
     width = 'auto',
+    lazyImages: lazy = true,
   } = props;
 
   if (className === 'emoji') {

docs/sanitizing-tests.md

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

enums.ts

@@ -3,4 +3,5 @@ export enum NodeTypes {
   emoji = 'emoji',
   i = 'i',
   image = 'image',
+  htmlBlock = 'html-block',
 }

index.tsx

@@ -48,6 +48,7 @@ const makeUseMDXComponents = (more: RunOpts['components']) => {
     ...Components,
     Variable,
     'code-tabs': Components.CodeTabs,
+    'html-block': Components.HTMLBlock,
     img: Components.Image,
   };
 

processor/compile/html-block.ts

@@ -0,0 +1,8 @@
+import { HTMLBlock } from '../../types';
+
+const htmlBlock = (node: HTMLBlock) => {
+  const html = node.data.hProperties.html;
+  return `<HTMLBlock>${JSON.stringify({ html }, null, 2)}</HTMLBlock>`;
+}
+
+export default htmlBlock;

processor/compile/index.ts

@@ -1,13 +1,15 @@
 import gemoji from './gemoji';
 import codeTabs from './code-tabs';
 import image from './image';
+import htmlBlock from './html-block';
 import { NodeTypes } from '../../enums';
 
 const compilers = {
   handlers: {
     [NodeTypes.emoji]: gemoji,
     [NodeTypes.codeTabs]: codeTabs,
     [NodeTypes.image]: image,
+    [NodeTypes.htmlBlock]: htmlBlock,
   },
 };
 

types.d.ts

@@ -9,6 +9,16 @@ interface CodeTabs extends Parent {
   };
 }
 
+interface HTMLBlock extends Parent {
+  type: NodeTypes.htmlBlock;
+  data: Data & {
+    hName: 'html-block';
+    hProperties: {
+      html: string;
+    };
+  };
+}
+
 interface Gemoji extends Literal {
   type: NodeTypes.emoji;
   name: string;