feat: fix incompatable emphasis (#988)

[![PR App][icn]][demo] | Ref CX-1135
:-------------------:|:----------:

## 🧰 Changes

Attempts to migrate more buggy emphasis syntax.

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

__tests__/compilers/compatability.test.tsx

@@ -205,8 +205,6 @@ This is an image: <img src="http://example.com/#\\>" >
   });
 
   describe('<HTMLBlock> wrapping', () => {
-    // configure({ defaultIgnore: undefined });
-
     const rawStyle = `<style data-testid="style-tag">
     p {
       color: red;
@@ -332,6 +330,15 @@ This is an image: <img src="http://example.com/#\\>" >
     `);
   });
 
+  it('moves whitespace surrounding phrasing content (emphasis, strong, etc) to the appropriate place', () => {
+    const md = `**bold **and also_ italic_ and*** bold italic***aaaaaah`;
+
+    const rmdx = mdx(rdmd.mdast(md));
+    expect(rmdx).toMatchInlineSnapshot(`
+      "**bold** and also *italic* and ***bold italic***aaaaaah
+      "
+    `);
+  });
 
   it('correctly parses and transforms image magic block with legacy data', () => {
     const md = `

processor/transform/compatability.ts

@@ -1,25 +1,51 @@
 import { Emphasis, Image, Strong, Node, Parent } from 'mdast';
-import { EXIT, SKIP, visit } from 'unist-util-visit';
 import { Transform } from 'mdast-util-from-markdown';
 import { phrasing } from 'mdast-util-phrasing';
+import { visit } from 'unist-util-visit';
 
 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;
+const addSpaceBefore = (index: number, parent: Parent) => {
+  if (!(index > 0 && parent.children[index - 1])) return;
+
+  const prev = parent.children[index - 1];
+  if (!('value' in prev) || prev.value.endsWith(' ') || prev.type === 'escape') return;
+
+  parent.children.splice(index, 0, { type: 'text', value: ' ' });
+};
+
+const addSpaceAfter = (index: number, parent: Parent) => {
+  if (!(index < parent.children.length - 1 && parent.children[index + 1])) return;
+
+  const nextChild = parent.children[index + 1];
+  if (!('value' in nextChild) || nextChild.value.startsWith(' ')) return;
+
+  parent.children.splice(index + 1, 0, { type: 'text', value: ' ' });
+};
+
+const trimEmphasis = (node: Emphasis | Strong, index: number, parent: Parent) => {
+  let trimmed = false;
+
+  visit(node, 'text', child => {
+    const newValue = child.value.trim();
+
+    if (newValue !== child.value) {
+      trimmed = true;
+      child.value = newValue;
+    }
   });
 
+  if (trimmed) {
+    addSpaceBefore(index, parent);
+    addSpaceAfter(index, parent);
+  }
+
+  return node;
+};
+
+const compatibilityTransfomer = (): Transform => tree => {
+  visit(tree, strongTest, trimEmphasis);
+
   visit(tree, 'image', (node: Image, index: number, parent: Parent) => {
     if (phrasing(parent) || !parent.children.every(child => child.type === 'image' || !phrasing(child))) return;