From f209634643771cfd3fa7fde0db9c9d0b392f78d7 Mon Sep 17 00:00:00 2001
From: jennspencer <jennspencer@gmail.com>
Date: Fri, 28 Jun 2024 18:51:05 -0700
Subject: [PATCH 1/2] dialing in image/embed nodes

---
 components/Image/index.tsx         | 70 +++++++++++++++---------------
 processor/compile/compatibility.ts | 28 ++++++++----
 2 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/components/Image/index.tsx b/components/Image/index.tsx
index 3785e3bf0..a4a983893 100644
--- 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
index 69c32051f..a64c3258c 100644
--- 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!');
   }

From 0cbf1af717b9d2dd34848a80f53303337dbc9c11 Mon Sep 17 00:00:00 2001
From: jennspencer <jennspencer@gmail.com>
Date: Fri, 28 Jun 2024 18:53:58 -0700
Subject: [PATCH 2/2] snaps

---
 __tests__/__snapshots__/index.test.js.snap    |  2 +-
 __tests__/components/Image.test.tsx           | 28 +++++++++----------
 .../__snapshots__/index.test.ts.snap          |  2 +-
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/__tests__/__snapshots__/index.test.js.snap b/__tests__/__snapshots__/index.test.js.snap
index 034b28108..a7330bb0b 100644
--- 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__/components/Image.test.tsx b/__tests__/components/Image.test.tsx
index c075e51e9..6e3f9f4a9 100644
--- 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
index 8bfa44ee2..110832099 100644
--- 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>"`;