From 45279f36b5f9944541a4fdb2dd5f24a29e23b843 Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Thu, 26 Sep 2024 09:53:33 -0700
Subject: [PATCH] fix: migrate emphasis (#974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[![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 <rafegoldberg@gmail.com>
---
 __tests__/compilers/compatability.test.tsx | 10 +++++++++
 lib/mdx.ts                                 |  3 ++-
 processor/transform/compatability.ts       | 25 ++++++++++++++++++++++
 processor/transform/index.ts               |  2 ++
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 processor/transform/compatability.ts

diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx
index 0c39dea08..2fb340dbd 100644
--- a/__tests__/compilers/compatability.test.tsx
+++ b/__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***
+      "
+    `);
+  });
 });
diff --git a/lib/mdx.ts b/lib/mdx.ts
index 9732dc143..685e76518 100644
--- a/lib/mdx.ts
+++ b/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);
 
diff --git a/processor/transform/compatability.ts b/processor/transform/compatability.ts
new file mode 100644
index 000000000..cfb8af9c9
--- /dev/null
+++ b/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;
diff --git a/processor/transform/index.ts b/processor/transform/index.ts
index fb4fb512c..aacdeb55d 100644
--- a/processor/transform/index.ts
+++ b/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,