Replace rehype with rehype-dom in the browser (#242)

Use `rehype-dom` 5.0 (36k) as the Rehype parser in browsers, where Rehype can use DOM APIs to parse HTML.

In Node, require in the full `rehype` processor, which is ~240k.

This should give smaller, faster bundles for Markdown parsing in browsers.

package.json

@@ -75,6 +75,7 @@
     "markdown-it-video": "~0.6.3",
     "mime": "~3.0.0",
     "rehype": "~11.0.0",
+    "rehype-dom": "~5.0.0",
     "rehype-react": "~6.2.1"
   }
 }

src/lib/utils.js

@@ -12,7 +12,7 @@ import twemoji from '@twemoji/api';
 import { sanitize } from 'isomorphic-dompurify';
 
 import { Fragment, createElement } from 'react';
-import rehype from 'rehype';
+import rehypeDom from 'rehype-dom';
 import rehype2react from 'rehype-react';
 
 import html5Embed from './html5-embed';
@@ -21,6 +21,11 @@ import relNofollow from './links-rel-nofollow';
 import replaceSymbols from './default-transformer';
 
 let counter = 0;
+let rehypeParser = rehypeDom;
+
+if (typeof window === 'undefined') {
+  rehypeParser = require('rehype');
+}
 
 export function emojify(input) {
   return twemoji.parse(input);
@@ -107,7 +112,7 @@ export function getComponentTree({ html, settings, components }) {
 
   let parsedHTML = null;
   try {
-    parsedHTML = rehype()
+    parsedHTML = rehypeParser()
       .data('settings', rehypeSettings)
       .use(rehype2react, {
         Fragment,