fix: skip wrapping heading in callouts for non pragraph (#1230)

[![PR App][icn]][demo] | Fix RM-XYZ
:-------------------:|:----------:

## 🧰 Changes

If a callout starts with an html element, the content gets dropped when
migrated. I found that this is because in migrate-callouts.ts, we are
wrapping the first children in a heading, assuming the node has a
children attribute, and putting the children under the heading. However,
the node might be an HTML node (or could be others) that don't have
children, as a result the value gets dropped.

Current approach to fix is to avoid wrapping the node entirely if it's
not a paragraph since the others won't have children.

## 🧬 QA & Testing

```
// Use the migrate() function

const markdown = '> ⚠️ <div>hello</div>'
const mdx = migrate(markdown);
```
The mdx should retain the <div>hello</div>'

- [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

Author: eaglethrost

__tests__/migration/callouts.test.ts

@@ -0,0 +1,16 @@
+import { migrate } from '../helpers';
+
+describe('migrating callouts', () => {
+  it('retains HTML content that starts a callout body', () => {
+    const md = `> ⚠️ <div><b>hello</b></div>
+    `;
+
+    const mdx = migrate(md);
+    expect(mdx).toMatchInlineSnapshot(`
+      "<Callout icon="⚠️" theme="warn">
+        <div><b>hello</b></div>
+      </Callout>
+      "
+    `);
+  });
+});

processor/transform/migrate-callouts.ts

@@ -7,7 +7,11 @@ import { wrapHeading } from './callouts';
 
 const migrateCallouts: Plugin<[], Root> = (): Transformer<Root> => (tree: Root) => {
   visit(tree, 'rdme-callout', callout => {
-    callout.children[0] = wrapHeading(callout);
+    const firstChild = callout.children?.[0];
+    // This will retain the value of the node if it is not a paragraph, e.g. an HTML node
+    if (firstChild && firstChild.type === 'paragraph') {
+      callout.children[0] = wrapHeading(callout);
+    }
   });
 
   return tree;