fix: migrate emphasis (#974)

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

## 🧰 Changes

Trims whitespace surrounding emphasis content.

```
** bold **
```

Will get serialized to:

```
**bold**
```

We should probably remove this once everything is migrated to MDX.

## 🧬 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

---------

Co-authored-by: Rafe Goldberg <[email protected]>

__tests__/compilers/compatability.test.tsx

@@ -320,4 +320,14 @@ This is an image: <img src="http://example.com/#\\>" >
     `,
     );
   });
+
+  it('trims whitespace surrounding phrasing content (emphasis, strong, etc)', () => {
+    const md = `** bold ** and _ italic _ and ***   bold italic ***`;
+
+    const rmdx = mdx(rdmd.mdast(md));
+    expect(rmdx).toMatchInlineSnapshot(`
+      "**bold** and *italic* and ***bold italic***
+      "
+    `);
+  });
 });

lib/mdx.ts

@@ -5,7 +5,7 @@ import rehypeRemark from 'rehype-remark';
 import remarkStringify from 'remark-stringify';
 
 import compilers from '../processor/compile';
-import { divTransformer, readmeToMdx, tablesToJsx } from '../processor/transform';
+import { compatabilityTransfomer, divTransformer, readmeToMdx, tablesToJsx } from '../processor/transform';
 
 export const mdx = (tree: any, { hast = false, ...opts } = {}) => {
   const processor = unified()
@@ -15,6 +15,7 @@ export const mdx = (tree: any, { hast = false, ...opts } = {}) => {
     .use(divTransformer)
     .use(readmeToMdx)
     .use(tablesToJsx)
+    .use(compatabilityTransfomer)
     .use(compilers)
     .use(remarkStringify, opts);
 

processor/transform/compatability.ts

@@ -0,0 +1,25 @@
+import { Emphasis, Strong, Node } from 'mdast';
+import { EXIT, SKIP, visit } from 'unist-util-visit';
+import { Transform } from 'mdast-util-from-markdown';
+
+const strongTest = (node: Node): node is Strong | Emphasis => ['emphasis', 'strong'].includes(node.type);
+
+const compatibilityTransfomer = (): Transform => tree => {
+  const trimEmphasis = (node: Emphasis | Strong) => {
+    visit(node, 'text', child => {
+      child.value = child.value.trim();
+      return EXIT;
+    });
+
+    return node;
+  };
+
+  visit(tree, strongTest, node => {
+    trimEmphasis(node);
+    return SKIP;
+  });
+
+  return tree;
+};
+
+export default compatibilityTransfomer;

processor/transform/index.ts

@@ -9,8 +9,10 @@ import readmeComponentsTransformer from './readme-components';
 import readmeToMdx from './readme-to-mdx';
 import variablesTransformer from './variables';
 import tablesToJsx from './tables-to-jsx';
+import compatabilityTransfomer from './compatability';
 
 export {
+  compatabilityTransfomer,
   divTransformer,
   readmeComponentsTransformer,
   readmeToMdx,