Upgrade to react-markdown 9 (#1957)

Author: hshoff

packages/visx-demo/package.json

@@ -84,7 +84,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-github-button": "^0.1.10",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^9.0.1",
+    "rehype-raw": "^7.0.0",
     "topojson-client": "^3.0.0"
   },
   "publishConfig": {

packages/visx-demo/src/components/ApiTable.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import Markdown from 'react-markdown/with-html';
+import Markdown from 'react-markdown';
 import type { DocGenInfo, PropInfo, ParamInfo } from '../types';
 import { toExportName } from './util/format';
 import { getGitHubUrl } from '../utils/getGitHubUrl';
@@ -58,7 +58,7 @@ export default function ApiTable({ docgenInfo }: Props) {
       </h3>
       {description && (
         <div className="doc-description">
-          <Markdown source={description} />
+          <Markdown>{description}</Markdown>
         </div>
       )}
       {isFunction && parameters && parameters.length > 0 ? (
@@ -82,13 +82,13 @@ export default function ApiTable({ docgenInfo }: Props) {
                   )}
                 </div>
                 <div className="description">
-                  <Markdown
-                    source={`${param.description || ''}${
+                  <Markdown>
+                    {`${param.description || ''}${
                       param.defaultValue
                         ? `\n\nDefault \`${String(param.defaultValue.value) || '""'}\``
                         : ''
                     }`}
-                  />
+                  </Markdown>
                 </div>
               </div>
             );
@@ -119,13 +119,13 @@ export default function ApiTable({ docgenInfo }: Props) {
                 {prop.required && <span className="kind-badge required">required</span>}
               </div>
               <div className="description">
-                <Markdown
-                  source={`${prop.description}${
+                <Markdown>
+                  {`${prop.description}${
                     prop.defaultValue
                       ? `\n\nDefault \`${String(prop.defaultValue.value) || '""'}\``
                       : ''
                   }`}
-                />
+                </Markdown>
               </div>
             </div>
           );

packages/visx-demo/src/components/DocPage.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import React from 'react';
-import Markdown from 'react-markdown/with-html';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
 
 import ApiTable from './ApiTable';
 import PackageList from './PackageList';
@@ -24,7 +25,7 @@ export default function DocPage({ components, examples, visxPackage, readme }: P
         </div>
         <div className="doc-content">
           <div className="doc-readme">
-            <Markdown escapeHtml={false} source={readme} />
+            <Markdown rehypePlugins={[rehypeRaw]}>{readme}</Markdown>
           </div>
           {examples && examples.length > 0 && (
             <>