[UE] pass-through converter: rewrite images (#1145)

* [UE] pass-through converter: rewrite images

- externalize image references so that the Helix Admin can generate image blobs
- fix breadcrumb editing

component-filters.json

@@ -2,8 +2,7 @@
   {
     "id": "main",
     "components": [
-      "section",
-      "breadcrumb"
+      "section"
     ]
   },
   {
@@ -22,6 +21,7 @@
   {
     "id": "section",
     "components": [
+      "breadcrumb",
       "text",
       "image",
       "button",

tools/actions/convert/src/index.js

@@ -34,7 +34,7 @@ function domParser(html, url) {
   return new JSDOM(html, { url }).window.document;
 }
 
-function updateLink(link, attribute, origin, liveUrls) {
+function rewriteLink(link, attribute, origin, liveUrls) {
   const urlStr = link.getAttribute(attribute);
   if (urlStr) {
     if (urlStr.startsWith('#')) return;
@@ -53,7 +53,15 @@ function updateLink(link, attribute, origin, liveUrls) {
   }
 }
 
-async function appendDotHtmlStep(state) {
+function rewriteImage(image, origin) {
+  const src = image.getAttribute('src');
+  // for url starting with '/' we add the origin
+  if (src && src.startsWith('/')) {
+    image.setAttribute('src', new URL(src, origin));
+  }
+}
+
+async function rewriteLinks(state) {
   // eslint-disable-next-line prefer-const
   let { blob, contentType, originUrl } = state;
   let { origin, liveUrls = [] } = converterCfg || {};
@@ -66,11 +74,11 @@ async function appendDotHtmlStep(state) {
     const document = domParser(blob, originUrl);
     const links = document.querySelectorAll('[href]');
     links.forEach((link) => {
-      updateLink(link, 'href', origin, liveUrls);
+      rewriteLink(link, 'href', origin, liveUrls);
     });
     const metaOgUrl = document.querySelector('meta[property="og:url"]');
     if (metaOgUrl) {
-      updateLink(metaOgUrl, 'content', origin, liveUrls);
+      rewriteLink(metaOgUrl, 'content', origin, liveUrls);
     }
     blob = document.documentElement.outerHTML;
 
@@ -82,14 +90,37 @@ async function appendDotHtmlStep(state) {
   return state;
 }
 
+async function rewriteImages(state) {
+  // eslint-disable-next-line prefer-const
+  let { blob, contentType, originUrl } = state;
+  let { origin } = converterCfg || {};
+  origin = new URL(origin);
+
+  if (contentType === 'text/html') {
+    const document = domParser(blob, originUrl);
+    const images = document.querySelectorAll('img[src]');
+    images.forEach((image) => {
+      rewriteImage(image, origin);
+    });
+    blob = document.documentElement.outerHTML;
+
+    // eslint-disable-next-line no-param-reassign
+    state = {
+      ...state, originUrl, blob, contentType, contentLength: blob.length,
+    };
+  }
+  return state;
+}
+
 export async function main(params) {
   // eslint-disable-next-line no-underscore-dangle
   const path = params.__ow_path;
   const silent = params.silent === 'true';
   const pipeline = skipConverter(path)
     ? pipe()
       .use(fetchContent)
-      .use(appendDotHtmlStep)
+      .use(rewriteImages)
+      .use(rewriteLinks)
     : createPipeline();
   if (silent) {
     pipeline.logger = { log: () => {} };

tools/actions/convert/test/pass-through/simple-converted.html

@@ -8,6 +8,12 @@
       <p><a href="/path/to/page/">/path/to/page/</a></p>
       <p><a href="/path/to/page.html">/path/to/page.html</a></p>
       <p><a href="https://www.adobe.com/path/to/page">https://www.adobe.adobeaemcloud.com/path/to/page</a></p>
+      <p>
+        <img src="https://author-dummy.adobeaemcloud.com/path/to/image.png" alt="">
+      </p>
+      <p>
+        <img src="https://www.adobe.com/path/to/image.png" alt="">
+      </p>
       <div class="metadata">
         <div>
           <div>canonical</div>

tools/actions/convert/test/pass-through/simple-pass-through.html

@@ -8,6 +8,8 @@
 <div><a href="/path/to/page/">/path/to/page/</a></div>
 <div><a href="/path/to/page.html">/path/to/page.html</a></div>
 <div><a href="https://www.adobe.com/path/to/page">https://www.adobe.adobeaemcloud.com/path/to/page</a></div>
+<div><img src="https://author-dummy.adobeaemcloud.com/path/to/image.png"></div>
+<div><img src="https://www.adobe.com/path/to/image.png"></div>
 
 
 </body></html>

tools/actions/convert/test/pass-through/simple.html

@@ -10,5 +10,7 @@
 <div><a href="/path/to/page/">/path/to/page/</a></div>
 <div><a href="/path/to/page.html">/path/to/page.html</a></div>
 <div><a href="https://www.adobe.com/path/to/page">https://www.adobe.adobeaemcloud.com/path/to/page</a></div>
+<div><img src="/path/to/image.png"/></div>
+<div><img src="https://www.adobe.com/path/to/image.png"/></div>
 </body>
 </html>