feat(html pipe): Unwrap hero images

Unwrap sole images in a single paragraph in a section so the hero image is not inside a paragraph
tag

fix #338

Author: ramboz

src/defaults/html.pipe.js

@@ -31,6 +31,7 @@ const validate = require('../utils/validate');
 const { cache, uncached } = require('../html/shared-cache');
 const embeds = require('../html/find-embeds');
 const parseFrontmatter = require('../html/parse-frontmatter');
+const unwrapHeroImages = require('../html/unwrap-hero-images.js');
 const rewriteLinks = require('../html/static-asset-links');
 const tovdom = require('../html/html-to-vdom');
 const tohtml = require('../html/stringify-response');
@@ -64,6 +65,7 @@ const htmlpipe = (cont, context, action) => {
     .before(smartypants)
     .before(sections)
     .before(meta).expose('meta')
+    .before(unwrapHeroImages)
     .before(selectstrain)
     .before(selecttest)
     .before(html).expose('html')

src/html/unwrap-hero-images.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2018 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+const map = require('unist-util-map');
+
+function reformat({ content }) {
+  content.sections.forEach((section) => {
+    map(section, (node, index, parent) => {
+      if (node.type === 'paragraph' // If we have a paragraph
+          && parent.type === 'root' // … in a top section
+          && parent.types.includes('has-only-image') // … that only has images
+          && parent.types.includes('nb-image-1')) { // … and actually only 1 of them
+        // … then consider it a hero image, and unwrap from the paragraph
+        const position = content.mdast.children.indexOf(node);
+        const [img] = content.mdast.children[position].children;
+        content.mdast.children[position] = img;
+      }
+    });
+  });
+}
+
+module.exports = reformat;

test/testHTMLFromMarkdown.js

@@ -363,4 +363,29 @@ describe('Testing Markdown conversion', () => {
       SANITIZE_DOM: true,
     });
   });
+
+  it('Unwraps hero images', async () => {
+    await assertMd(`
+        ![Foo](/bar.png)
+      `, `
+        <img sizes="100vw" srcset="/bar.png?width=480&amp;auto=webp 480w,/bar.png?width=1384&amp;auto=webp 1384w,/bar.png?width=2288&amp;auto=webp 2288w,/bar.png?width=3192&amp;auto=webp 3192w,/bar.png?width=4096&amp;auto=webp 4096w"  src="/bar.png" alt="Foo"/>
+    `, {
+      SANITIZE_DOM: true,
+    });
+  });
+
+  it('Leaves regular images inside paragraphs', async () => {
+    await assertMd(`
+        # Baz
+
+        ![Foo](/bar.png)
+      `, `
+        <h1 id="baz">Baz</h1>
+        <p>
+          <img sizes="100vw" srcset="/bar.png?width=480&amp;auto=webp 480w,/bar.png?width=1384&amp;auto=webp 1384w,/bar.png?width=2288&amp;auto=webp 2288w,/bar.png?width=3192&amp;auto=webp 3192w,/bar.png?width=4096&amp;auto=webp 4096w"  src="/bar.png" alt="Foo"/>
+        </p>
+    `, {
+      SANITIZE_DOM: true,
+    });
+  });
 });