fix: legacy image migration (#975)

[![PR App][icn]][demo] | Ref CX-1113, CX-1114
:-------------------:|:----------:

## 🧰 Changes

Fixes migrating images with legacy data.

We deprecated a particular format of image magic block, but we failed to
ever migrate pages away from it. They've been broken/changed for awhile,
and I'm not sure if we could correctly detect the format at this point?

When they get parsed into an AST, they appear to be inline image nodes,
which can then compile incorrectly. We've been treating image nodes that
are alone in a paragraph as block images for awhile, so lets encode that
in the migration.

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

@@ -332,6 +332,37 @@ This is an image: <img src="http://example.com/#\\>" >
     `);
   });
 
+
+  it('correctly parses and transforms image magic block with legacy data', () => {
+    const md = `
+[block:image]
+{
+  "images": [
+    {
+      "image": [
+        "https://files.readme.io/9ac3bf4-SAP_Folders_Note.png",
+        "SAP Folders Note.png",
+        806,
+        190,
+        "#e8e9ea"
+      ]
+    }
+  ]
+}
+[/block]
+## Tile View
+    `;
+
+    const tree = rdmd.mdast(md);
+    const rmdx = mdx(tree);
+    expect(rmdx).toMatchInlineSnapshot(`
+      "![806](https://files.readme.io/9ac3bf4-SAP_Folders_Note.png "SAP Folders Note.png")
+
+      ## Tile View
+      "
+    `);
+  });
+
   it('compiles parameter magic blocks with breaks to jsx', () => {
     const md = `
 [block:parameters]

processor/transform/compatability.ts

@@ -1,6 +1,7 @@
-import { Emphasis, Strong, Node } from 'mdast';
+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';
 
 const strongTest = (node: Node): node is Strong | Emphasis => ['emphasis', 'strong'].includes(node.type);
 
@@ -19,6 +20,12 @@ const compatibilityTransfomer = (): Transform => tree => {
     return SKIP;
   });
 
+  visit(tree, 'image', (node: Image, index: number, parent: Parent) => {
+    if (phrasing(parent) || !parent.children.every(child => child.type === 'image' || !phrasing(child))) return;
+
+    parent.children.splice(index, 1, { type: 'paragraph', children: [node] });
+  });
+
   return tree;
 };