feat: remark plugins (#939)

| [![PR App][icn]][demo] | RM-9815 |
| :--------------------: | :-----: |

## 🧰 Changes

Adds an option for remark plugins.

By adding the `remarkPlugins` option, I can write a small plugin to
support indexing in the main app. We recently decided we're going to
refocus this repo to only deal with converting MDX to React. Recently,
we've been adding a lot of code that is specific only to our editor, and
we'd like to move that someplace.

The problem I'm trying to solve is for indexing. When converting `mdast`
to `hast`, in MDX, we lose some information. `remark-rehype` doesn't
know what to do with `mdxJsxFlowElements` and replaces them with
`div`'s.

**mdx**

```mdx
<h2>Hello, world!</h2>
```

**mdast**

```json
{
  "type": "root",
  "children": [
    {
      "type": "mdxJsxFlowElement",
      "name": "h2",
      "children": [
        {
          "type": "text",
          "value": "Hello, world!"
        }
      ]
    }
  ]
}
```

**hast**

```json
{
  "type": "root",
  "children": [
    {
      "type": "element",
      "tagName": "div",
      "children": [
        {
          "type": "element",
          "tagName": "p",
          "children": [
            {
              "type": "text",
              "value": "Hello, world!"
            }
          ]
        }
      ]
    }
  ]
}
```



## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].

[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

lib/ast-processor.ts

@@ -5,9 +5,11 @@ import remarkGfm from 'remark-gfm';
 
 import transformers, { readmeComponentsTransformer, variablesTransformer } from '../processor/transform';
 import rehypeSlug from 'rehype-slug';
+import { PluggableList } from 'unified';
 
 export type MdastOpts = {
   components?: Record<string, string>;
+  remarkPlugins?: PluggableList;
 };
 
 export const remarkPlugins = [remarkFrontmatter, remarkGfm, ...transformers];
@@ -17,6 +19,7 @@ const astProcessor = (opts: MdastOpts = { components: {} }) =>
   remark()
     .use(remarkMdx)
     .use(remarkPlugins)
+    .use(opts.remarkPlugins)
     .use(variablesTransformer, { asMdx: false })
     .use(readmeComponentsTransformer({ components: opts.components }));
 

lib/hast.ts

@@ -1,16 +1,12 @@
-import astProcessor, { rehypePlugins } from './ast-processor';
+import astProcessor, { rehypePlugins, MdastOpts } from './ast-processor';
 import remarkRehype from 'remark-rehype';
 import { injectComponents } from '../processor/transform';
 import { MdastComponents } from '../types';
 import mdast from './mdast';
 import { unified } from 'unified';
 import rehypeParse from 'rehype-parse';
 
-interface Options {
-  components?: Record<string, string>;
-}
-
-const hast = (text: string, opts: Options = {}) => {
+const hast = (text: string, opts: MdastOpts = {}) => {
   const components: MdastComponents = Object.entries(opts.components || {}).reduce((memo, [name, doc]) => {
     memo[name] = mdast(doc);
     return memo;