fix/compatibility changes for migration (#924)

[![PR App][icn]][demo] | Fix RM-XYZ :-------------------:|:----------: ## 🧰 Changes migration diffs had a lot of discrepancies, tightening things up (only v minor changes) ## 🧬 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
readmeio · Jun 29, 2024 · 32cf20d · 32cf20d
1 parent bf2dff9
commit 32cf20d
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 63 deletions.
diff --git a/__tests__/__snapshots__/index.test.js.snap b/__tests__/__snapshots__/index.test.js.snap
@@ -335,7 +335,7 @@ exports[`export multiple Markdown renderers > renders plain markdown as React 1`
 
 exports[`heading 1`] = `"<h2 class=\\"heading heading-2 header-scroll\\" align=\\"\\"><div class=\\"heading-anchor anchor waypoint\\" id=\\"example-header\\"></div><div class=\\"heading-text\\"><div id=\\"section-example-header\\" class=\\"heading-anchor_backwardsCompatibility\\"></div>Example Header</div><a aria-label=\\"Skip link to Example Header\\" class=\\"heading-anchor-icon fa fa-anchor\\" href=\\"#example-header\\"></a></h2>"`;
 
-exports[`image 1`] = `"<p><span aria-label="Image" class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="http://example.com/image.png" width="auto" height="auto" title="" class="img img-align- " alt="Image" loading="eager"></span></span></p>"`;
+exports[`image 1`] = `"<span aria-label="Image" class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="http://example.com/image.png" width="auto" height="auto" title="" class="img img-align-center" alt="Image" loading="lazy"></span></span>"`;
 
 exports[`list items 1`] = `
 "<ul>

diff --git a/__tests__/compilers/compatability.test.ts b/__tests__/compilers/compatability.test.ts
@@ -94,7 +94,7 @@ describe('compatability with RDMD', () => {
       type: 'embed',
     };
 
-    expect(mdx(ast).trim()).toBe('<Embed html="false" url="https://cdn.shopify.com/s/files/1/0711/5132/1403/files/BRK0502-034178M.pdf" title="iframe" href="https://cdn.shopify.com/s/files/1/0711/5132/1403/files/BRK0502-034178M.pdf" typeOfEmbed="iframe" height="300px" width="100%" iframe="true" />');
+    expect(mdx(ast).trim()).toBe('<Embed url="https://cdn.shopify.com/s/files/1/0711/5132/1403/files/BRK0502-034178M.pdf" title="iframe" href="https://cdn.shopify.com/s/files/1/0711/5132/1403/files/BRK0502-034178M.pdf" typeOfEmbed="iframe" height="300px" width="100%" iframe="true" />');
   });
 
   it('compiles reusable-content nodes', () => {

diff --git a/__tests__/components/Image.test.tsx b/__tests__/components/Image.test.tsx
@@ -10,7 +10,7 @@ describe('Image', () => {
     expect(screen.getByRole('img')).toMatchInlineSnapshot(`
       <img
         alt=""
-        class="img img-align-center "
+        class="img img-align-center"
         height="auto"
         loading="lazy"
         src="https://files.readme.io/b8674d6-pizzabro.jpg"
@@ -40,20 +40,18 @@ describe('Image', () => {
         <span
           class="lightbox-inner"
         >
-          <figure>
-            <img
-              alt=""
-              class="img img-align-center "
-              height="auto"
-              loading="lazy"
-              src="https://files.readme.io/b8674d6-pizzabro.jpg"
-              title=""
-              width="auto"
-            />
-            <figcaption>
-              A pizza bro
-            </figcaption>
-          </figure>
+          <img
+            alt=""
+            class="img img-align-center"
+            height="auto"
+            loading="lazy"
+            src="https://files.readme.io/b8674d6-pizzabro.jpg"
+            title=""
+            width="auto"
+          />
+          <figcaption>
+            A pizza bro
+          </figcaption>
         </span>
       </span>
     `);

diff --git a/__tests__/components/__snapshots__/index.test.ts.snap b/__tests__/components/__snapshots__/index.test.ts.snap
@@ -10,4 +10,4 @@ exports[`Components > Embed 3`] = `"<div class="embed embed_hasImg"><a class="em
 
 exports[`Components > Embed 4`] = `"<div class="embed "><a class="embed-link" href="https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html" rel="noopener noreferrer" target="_blank"><div class="embed-body"><small class="embed-provider">nytimes.com</small><div class="embed-title">rdmd</div></div></a></div>"`;
 
-exports[`Components > Image 1`] = `"<p><span aria-label="Bro eats pizza and makes an OK gesture." class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" width="auto" height="auto" title="Pizza Face" class="img img-align- " alt="Bro eats pizza and makes an OK gesture." loading="eager"></span></span></p>"`;
+exports[`Components > Image 1`] = `"<span aria-label="Bro eats pizza and makes an OK gesture." class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" width="auto" height="auto" title="Pizza Face" class="img img-align-center" alt="Bro eats pizza and makes an OK gesture." loading="lazy"></span></span>"`;
diff --git a/components/Image/index.tsx b/components/Image/index.tsx
@@ -16,7 +16,7 @@ interface ImageProps {
 
 const Image = (Props: ImageProps) => {
   const {
-    align = '',
+    align = 'center',
     alt = '',
     border = false,
     caption,
@@ -25,7 +25,7 @@ const Image = (Props: ImageProps) => {
     src,
     title = '',
     width = 'auto',
-    lazy = false,
+    lazy = true,
     children,
   } = Props;
 
@@ -60,55 +60,53 @@ const Image = (Props: ImageProps) => {
 
   if (caption) {
     return (
-      <span
-        aria-label={alt}
-        className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
-        onClick={toggle}
-        onKeyDown={handleKeyDown}
-        role={'button'}
-        tabIndex={0}
-      >
-        <span className="lightbox-inner">
-          <figure>
+      <figure>
+        <span
+          aria-label={alt}
+          className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+          onClick={toggle}
+          onKeyDown={handleKeyDown}
+          role={'button'}
+          tabIndex={0}
+        >
+          <span className="lightbox-inner">
             <img
               src={src}
               width={width}
               height={height}
               title={title}
-              className={`img img-align-center ${border ? 'border' : ''}`}
+              className={`img img-align-center${border ? ' border' : ''}`}
               alt={alt}
               loading={lazy ? 'lazy' : 'eager'}
             />
             <figcaption>{children || caption}</figcaption>
-          </figure>
+          </span>
         </span>
-      </span>
+      </figure>
     );
   }
 
   return (
-    <p>
-      <span
-        aria-label={alt}
-        className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
-        onClick={toggle}
-        onKeyDown={handleKeyDown}
-        role={'button'}
-        tabIndex={0}
-      >
-        <span className="lightbox-inner">
-          <img
-            src={src}
-            width={width}
-            height={height}
-            title={title}
-            className={`img img-align-${align} ${border ? 'border' : ''}`}
-            alt={alt}
-            loading={lazy ? 'lazy' : 'eager'}
-          />
-        </span>
+    <span
+      aria-label={alt}
+      className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+      onClick={toggle}
+      onKeyDown={handleKeyDown}
+      role={'button'}
+      tabIndex={0}
+    >
+      <span className="lightbox-inner">
+        <img
+          src={src}
+          width={width}
+          height={height}
+          title={title}
+          className={`img img-align-${align}${border ? ' border' : ''}`}
+          alt={alt}
+          loading={lazy ? 'lazy' : 'eager'}
+        />
       </span>
-    </p>
+    </span>
   );
 };
 

diff --git a/processor/compile/compatibility.ts b/processor/compile/compatibility.ts
@@ -32,14 +32,16 @@ const html = (node: Html) => {
 };
 
 const figureToImageBlock = (node: any) => {
-  const { align, width, src, alt, title, ...image } = node.children.find((child: Node) => child.type === 'image');
+  const { align, width, src, url, alt, title, ...image } = node.children.find((child: Node) => child.type === 'image');
   const { className } = image.data.hProperties;
   const figcaption = node.children.find((child: Node) => child.type === 'figcaption');
 
-  const caption = figcaption ? toMarkdown({
-    type: 'paragraph',
-    children: figcaption.children, 
-  }).trim() : null;
+  const caption = figcaption
+    ? toMarkdown({
+        type: 'paragraph',
+        children: figcaption.children,
+      }).trim()
+    : null;
 
   const attributes = {
     ...(align && { align }),
@@ -48,10 +50,19 @@ const figureToImageBlock = (node: any) => {
     ...(caption && { caption }),
     ...(title && { title }),
     ...(width && { width }),
-    src,
+    src: src || url,
   };
   return `<Image ${formatProps(attributes)} />`;
-}
+};
+
+const embedToEmbedBlock = (node: any) => {
+  const { html, ...embed } = node.data.hProperties;
+  const attributes = {
+    ...embed,
+    ...(html && { html: encodeURIComponent(html) }),
+  };
+  return `<Embed ${formatProps(attributes)} />`;
+};
 
 const compatibility = (node: CompatNodes) => {
   switch (node.type) {
@@ -68,8 +79,7 @@ const compatibility = (node: CompatNodes) => {
     case 'figure':
       return figureToImageBlock(node);
     case 'embed':
-      const attributes = formatHProps(node);
-      return `<Embed ${attributes} />`;
+      return embedToEmbedBlock(node);
     default:
       throw new Error('Unhandled node type!');
   }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,4 @@ exports[`Components > Embed 3`] = `"<div class="embed embed_hasImg"><a class="em

		exports[`Components > Embed 4`] = `"<div class="embed "><a class="embed-link" href="https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html" rel="noopener noreferrer" target="_blank"><div class="embed-body"><small class="embed-provider">nytimes.com</small><div class="embed-title">rdmd</div></div></a></div>"`;

		exports[`Components > Image 1`] = `"<p><span aria-label="Bro eats pizza and makes an OK gesture." class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" width="auto" height="auto" title="Pizza Face" class="img img-align- " alt="Bro eats pizza and makes an OK gesture." loading="eager"></span></span></p>"`;
		exports[`Components > Image 1`] = `"<span aria-label="Bro eats pizza and makes an OK gesture." class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" width="auto" height="auto" title="Pizza Face" class="img img-align-center" alt="Bro eats pizza and makes an OK gesture." loading="lazy"></span></span>"`;