fix: image blocks (#968)

[![PR App][icn]][demo] | Ref RM-10779
:-------------------:|:----------:

## 🧰 Changes

A previous PR broke compiling images. It was failing to compiler or
parse the height attribute.

## 🧬 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/images.test.ts

@@ -14,7 +14,7 @@ describe('image compiler', () => {
   });
 
   it('correctly serializes an Image component back to MDX', () => {
-    const doc = '<Image src="/path/to/image.png" width="200px" alt="alt text" />';
+    const doc = '<Image src="/path/to/image.png" width="200px" height="150px" alt="alt text" />';
 
     expect(mdx(mdast(doc))).toMatch(doc);
   });

processor/transform/readme-components.ts

@@ -74,16 +74,20 @@ const coerceJsxToMd =
         align,
         border,
         caption,
+        height,
         title = null,
         width,
         src,
-      } = getAttrs<Pick<ImageBlock, 'alt' | 'align' | 'border' | 'title' | 'width' | 'src' | 'caption'>>(node);
+      } = getAttrs<Pick<ImageBlock, 'alt' | 'align' | 'border' | 'height' | 'title' | 'width' | 'src' | 'caption'>>(
+        node,
+      );
 
       const attrs = {
         ...(align && { align }),
         ...(border && { border }),
         ...(src && { src }),
         ...(width && { width }),
+        ...(height && { height }),
         alt,
         children: caption ? mdast(caption).children : (node.children as any),
         title,

processor/transform/readme-to-mdx.ts

@@ -7,7 +7,7 @@ import { visit } from 'unist-util-visit';
 import { toAttributes } from '../utils';
 import { type HTMLBlock } from 'types';
 
-const imageAttrs = ['align', 'alt', 'caption', 'border', 'src', 'title', 'width', 'lazy', 'className'];
+const imageAttrs = ['align', 'alt', 'caption', 'border', 'height', 'src', 'title', 'width', 'lazy', 'className'];
 
 const readmeToMdx = (): Transform => tree => {
   // Unwrap pinned nodes, replace rdme-pin with its child node

types.d.ts

@@ -78,6 +78,7 @@ interface ImageBlockAttrs {
   border?: string;
   caption?: string;
   className?: string;
+  height?: string;
   lazy?: boolean;
   src: string;
   title: string;