docs: show mixed HTML and HTML sanitizing

Author: ChristianMurphy

package-lock.json

@@ -56,6 +56,8 @@
     "react-is": "^16.13.1",
     "react-test-renderer": "^16.13.1",
     "rehype-katex": "^3.0.0",
+    "rehype-raw": "^4.0.2",
+    "rehype-sanitize": "^3.0.1",
     "remark-math": "^2.0.1",
     "ts-loader": "^7.0.4",
     "tsdx": "^0.13.2",

package.json

@@ -2,6 +2,8 @@ import React from 'react';
 import { text } from '@storybook/addon-knobs';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
 import 'katex/dist/katex.min.css';
 
 import { Remark } from '../src';
@@ -11,7 +13,7 @@ export default {
   component: Remark,
 };
 
-export const Default = () => (
+export const PlainMarkdown = () => (
   <Remark>
     {text(
       'content',
@@ -26,7 +28,7 @@ export const Default = () => (
   </Remark>
 );
 
-export const Math = () => (
+export const MarkdownWithMath = () => (
   <Remark remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
     {text(
       'content',
@@ -38,3 +40,28 @@ $$`
     )}
   </Remark>
 );
+
+export const MixedHTMLSanitized = () => (
+  <Remark
+    remarkToRehypeOptions={{ allowDangerousHTML: true }}
+    rehypePlugins={[rehypeRaw, rehypeSanitize]}
+  >
+    {text(
+      'content',
+      `# header
+
+<strong>mixed</strong>
+<em>with</em>
+<kbd>html</kbd>
+`
+    )}
+  </Remark>
+);
+
+MixedHTMLSanitized.story = {
+  parameters: {
+    knobs: {
+      escapeHTML: false,
+    },
+  },
+};

stories/remark-component.stories.tsx

@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 import { text } from '@storybook/addon-knobs';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
 import 'katex/dist/katex.min.css';
 
 import { useRemark } from '../src';
@@ -11,9 +13,18 @@ export default {
   component: useRemark,
 };
 
-export const Default = () => {
+export const PlainMarkdown = () => {
   const [reactContent, setMarkdownSource] = useRemark();
-  const markdownSource = text('markdown', '# header\n* list');
+  const markdownSource = text(
+    'markdown',
+    `# header
+
+1. ordered
+2. list
+
+* unordered
+* list`
+  );
 
   useEffect(() => {
     setMarkdownSource(markdownSource);
@@ -22,7 +33,7 @@ export const Default = () => {
   return reactContent;
 };
 
-export const Math = () => {
+export const MarkdownWithMath = () => {
   const [reactContent, setMarkdownSource] = useRemark({
     remarkPlugins: [remarkMath],
     rehypePlugins: [rehypeKatex],
@@ -42,3 +53,32 @@ export const Math = () => {
 
   return reactContent;
 };
+
+export const MixedHTMLSanitized = () => {
+  const [reactContent, setMarkdownSource] = useRemark({
+    remarkToRehypeOptions: { allowDangerousHTML: true },
+    rehypePlugins: [rehypeRaw, rehypeSanitize],
+  });
+  const markdownSource = text(
+    'markdown',
+    `# header
+
+<strong>mixed</strong>
+<em>with</em>
+<kbd>html</kbd>`
+  );
+
+  useEffect(() => {
+    setMarkdownSource(markdownSource);
+  }, [markdownSource]);
+
+  return reactContent;
+};
+
+MixedHTMLSanitized.story = {
+  parameters: {
+    knobs: {
+      escapeHTML: false,
+    },
+  },
+};