[MWPW-151673] Library templates

libs/blocks/library-config/library-config.css

@@ -277,7 +277,8 @@ input.sk-library-search-input:focus {
   padding: 0 24px;
 }
 
-.sk-library li.placeholder {
+.sk-library li.placeholder,
+.sk-library li.template {
   padding: 0 12px;
 }
 
@@ -287,6 +288,22 @@ input.sk-library-search-input:focus {
   padding: 0 12px;
 }
 
+.sk-library li.template {
+  display: flex;
+  align-items: stretch;
+  justify-content: end;
+}
+
+.sk-library li.template .item-title {
+  flex: 1 1 100%;
+}
+
+.sk-library li.template button {
+  position: static;
+  height: unset;
+  width: 44px;
+}
+
 .in-page {
   display: flex;
   justify-content: center;

libs/blocks/library-config/library-config.js

@@ -7,6 +7,11 @@ async function loadBlocks(content, list, query) {
   blocks(content, list, query);
 }
 
+async function loadTemplates(content, list) {
+  const { default: templates } = await import('./lists/templates.js');
+  templates(content, list);
+}
+
 async function loadPlaceholders(content, list) {
   const { default: placeholders } = await import('./lists/placeholders.js');
   placeholders(content, list);
@@ -65,6 +70,9 @@ async function loadList(type, content, list) {
       addSearch(content, list);
       loadBlocks(content, list, query);
       break;
+    case 'templates':
+      loadTemplates(content, list);
+      break;
     case 'placeholders':
       loadPlaceholders(content, list);
       break;
@@ -122,6 +130,7 @@ async function combineLibraries(base, supplied) {
   const library = {
     assets: await fetchAssetsData(assetsPath),
     blocks: base.blocks.data,
+    templates: base.templates?.data,
     icons: base.icons?.data,
     personalization_tags: base.personalization?.data,
     placeholders: base.placeholders?.data,
@@ -135,6 +144,10 @@ async function combineLibraries(base, supplied) {
     if (supplied.placeholders.data.length > 0) {
       library.placeholders = supplied.placeholders.data;
     }
+
+    if (supplied.templates?.data.length > 0) {
+      library.templates.push(...supplied.templates.data);
+    }
   }
 
   return library;

libs/blocks/library-config/lists/blocks.js

@@ -43,20 +43,22 @@ function getContainerName(container) {
   return getAuthorName(container) || getBlockName(firstBlock);
 }
 
-function getTable(block) {
+export function getTable(block, returnDom = false) {
   const name = getBlockName(block);
   const rows = [...block.children];
   const maxCols = rows.reduce((cols, row) => (
     row.children.length > cols ? row.children.length : cols), 0);
   const table = document.createElement('table');
   table.setAttribute('border', 1);
+  table.setAttribute('style', 'width: 100%');
   const headerRow = document.createElement('tr');
   headerRow.append(createTag('th', { colspan: maxCols }, name));
   table.append(headerRow);
   rows.forEach((row) => {
     const tr = document.createElement('tr');
     [...row.children].forEach((col) => {
       const td = document.createElement('td');
+      td.setAttribute('style', `width: ${100 / row.children.length}%`);
       if (row.children.length < maxCols) {
         td.setAttribute('colspan', maxCols);
       }
@@ -65,10 +67,11 @@ function getTable(block) {
     });
     table.append(tr);
   });
+  if (returnDom) return table;
   return table.outerHTML;
 }
 
-function handleLinks(element, path) {
+export function handleLinks(element, path) {
   if (!element || !path) return;
   try {
     const url = new URL(path);
@@ -83,7 +86,7 @@ function handleLinks(element, path) {
   }
 }
 
-function decorateImages(element, path) {
+export function decorateImages(element, path) {
   if (!element || !path) return;
   try {
     const url = new URL(path);

libs/blocks/library-config/lists/templates.js

@@ -0,0 +1,76 @@
+import { createTag } from '../../../utils/utils.js';
+import createCopy from '../library-utils.js';
+import { getTable, decorateImages, handleLinks } from './blocks.js';
+
+function createSpace() {
+  const br = createTag('br');
+  return createTag('p', null, br);
+}
+
+function formatDom(aemDom, path) {
+  // Decorate Links
+  handleLinks(aemDom, path);
+
+  // Decorate Images
+  decorateImages(aemDom, path);
+
+  // Decorate Blocks
+  const divs = aemDom.querySelectorAll('main > div > div');
+  divs.forEach((div) => {
+    // Give table some space
+    div.insertAdjacentElement('afterend', createSpace());
+
+    const table = getTable(div, true);
+    div.parentElement.replaceChild(table, div);
+  });
+
+  // Decorate Sections
+  const sections = aemDom.body.querySelectorAll('main > div');
+  const formattedSections = [...sections].map((section, idx) => {
+    const fragment = new DocumentFragment();
+    if (idx > 0) {
+      const divider = createTag('p', null, '---');
+      fragment.append(divider, createSpace());
+    }
+    fragment.append(...section.querySelectorAll(':scope > *'));
+
+    return fragment;
+  });
+  const flattedDom = createTag('div');
+  flattedDom.append(...formattedSections);
+  return flattedDom;
+}
+
+async function formatTemplate(path) {
+  const resp = await fetch(path);
+  if (!resp.ok) window.lana.log('Could not fetch template path', { tags: 'errorType=info,module=sidekick-templates' });
+
+  const html = await resp.text();
+  const dom = new DOMParser().parseFromString(html, 'text/html');
+  return formatDom(dom, path);
+}
+
+export default async function loadTemplates(templates, list) {
+  templates.forEach(async (template) => {
+    const titleText = createTag('p', { class: 'item-title' }, template.name);
+    const title = createTag('li', { class: 'template' }, titleText);
+    const previewButton = createTag('button', { class: 'preview-group' }, 'Preview');
+    const copy = createTag('button', { class: 'copy' });
+    const formatted = await formatTemplate(template.path);
+
+    list.append(title);
+    title.append(previewButton, copy);
+
+    previewButton.addEventListener('click', (e) => {
+      e.stopPropagation();
+      window.open(template.path, '_templatepreview');
+    });
+
+    copy.addEventListener('click', (e) => {
+      e.target.classList.add('copied');
+      setTimeout(() => { e.target.classList.remove('copied'); }, 3000);
+      const blob = new Blob([formatted.outerHTML], { type: 'text/html' });
+      createCopy(blob);
+    });
+  });
+}

test/blocks/library-config/mocks/blocks/chart/docx.html

@@ -1,3 +1,3 @@
-<table border="1"><tr><th colspan="1">chart (area, green, border)</th></tr><tr><td>
+<table border="1" style="width: 100%"><tr><th colspan="1">chart (area, green, border)</th></tr><tr><td style="width: 100%">
                 <h3 id="lorem-ipsum-dolor-sit-amet-consectetuer-adipiscing-elit">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3>
-            </td></tr><tr><td>Revenue dollars: 2020 vs 2021 forecasted vs 2021 actuals.</td></tr><tr><td><a href="https://main--milo--adobecom.hlx.page/docs/library/blocks/chart_data/areachart.json">https://main--milo--adobecom.hlx.page/docs/library/blocks/chart_data/areachart.json</a></td></tr><tr><td>Footnote lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td></tr></table>
+            </td></tr><tr><td style="width: 100%">Revenue dollars: 2020 vs 2021 forecasted vs 2021 actuals.</td></tr><tr><td style="width: 100%"><a href="https://main--milo--adobecom.hlx.page/docs/library/blocks/chart_data/areachart.json">https://main--milo--adobecom.hlx.page/docs/library/blocks/chart_data/areachart.json</a></td></tr><tr><td style="width: 100%">Footnote lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td></tr></table>

test/blocks/library-config/mocks/blocks/container/docx-container.html

@@ -1,15 +1,15 @@
-<table border="1"><tr><th colspan="1">carousel (lightbox)</th></tr><tr><td>Carousel lightbox</td></tr></table><table border="1"><tr><th colspan="2">section-metadata</th></tr><tr><td>style</td><td>xxl spacing</td></tr></table><p>---</p><h3 id="avocado-surprise">Avocado surprise</h3><p>
+<table border="1" style="width: 100%"><tr><th colspan="1">carousel (lightbox)</th></tr><tr><td style="width: 100%">Carousel lightbox</td></tr></table><table border="1" style="width: 100%"><tr><th colspan="2">section-metadata</th></tr><tr><td style="width: 50%">style</td><td style="width: 50%">xxl spacing</td></tr></table><p>---</p><h3 id="avocado-surprise">Avocado surprise</h3><p>
         <picture>
             <source type="image/webp" srcset="/test/blocks/library-config/mocks/media_1.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
             <source type="image/webp" srcset="/test/blocks/library-config/mocks/media_1.png?width=750&amp;format=webply&amp;optimize=medium">
             <source type="image/png" srcset="/test/blocks/library-config/mocks/media_1.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
             <img loading="lazy" alt="" type="image/png" src="https://main--milo--adobecom.hlx.page/media_1.png?width=750&amp;format=png&amp;optimize=medium" width="200" height="147">
         </picture>
-    </p><table border="1"><tr><th colspan="2">section-metadata</th></tr><tr><td>carousel</td><td>Carousel lightbox</td></tr><tr><td>style</td><td>Center</td></tr></table><p>---</p><h3 id="cabage-surprise">Cabage surprise</h3><p>
+    </p><table border="1" style="width: 100%"><tr><th colspan="2">section-metadata</th></tr><tr><td style="width: 50%">carousel</td><td style="width: 50%">Carousel lightbox</td></tr><tr><td style="width: 50%">style</td><td style="width: 50%">Center</td></tr></table><p>---</p><h3 id="cabage-surprise">Cabage surprise</h3><p>
         <picture>
             <source type="image/webp" srcset="/test/blocks/library-config/mocks/media_1.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
             <source type="image/webp" srcset="/test/blocks/library-config/mocks/media_1.png?width=750&amp;format=webply&amp;optimize=medium">
             <source type="image/png" srcset="/test/blocks/library-config/mocks/media_1.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
             <img loading="lazy" alt="" type="image/png" src="https://main--milo--adobecom.hlx.page/media_1.png?width=750&amp;format=png&amp;optimize=medium" width="200" height="147">
         </picture>
-    </p><table border="1"><tr><th colspan="2">section-metadata</th></tr><tr><td>carousel</td><td>Carousel lightbox</td></tr><tr><td>style</td><td>Center</td></tr></table><p>---</p>
+    </p><table border="1" style="width: 100%"><tr><th colspan="2">section-metadata</th></tr><tr><td style="width: 50%">carousel</td><td style="width: 50%">Carousel lightbox</td></tr><tr><td style="width: 50%">style</td><td style="width: 50%">Center</td></tr></table><p>---</p>

test/blocks/library-config/mocks/blocks/container/docx-single-block.html

@@ -1 +1 @@
-<table border="1"><tr><th colspan="1">carousel (container0)</th></tr><tr><td>Carousel container</td></tr></table>
+<table border="1" style="width: 100%"><tr><th colspan="1">carousel (container0)</th></tr><tr><td style="width: 100%">Carousel container</td></tr></table>

test/blocks/library-config/mocks/blocks/marquee/docx.html

@@ -1,11 +1,11 @@
-<table border="1"><tr><th colspan="2">marquee</th></tr><tr><td colspan="2">
+<table border="1" style="width: 100%"><tr><th colspan="2">marquee</th></tr><tr><td style="width: 100%" colspan="2">
                 <picture>
                     <source type="image/webp" srcset="/test/blocks/library-config/mocks/media_1.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                     <source type="image/webp" srcset="/test/blocks/library-config/mocks/media_1.png?width=750&amp;format=webply&amp;optimize=medium">
                     <source type="image/png" srcset="/test/blocks/library-config/mocks/media_1.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
                     <img loading="lazy" alt="" type="image/png" src="https://main--milo--adobecom.hlx.page/media_1.png?width=750&amp;format=png&amp;optimize=medium" width="199" height="100">
                 </picture>
-            </td></tr><tr><td>
+            </td></tr><tr><td style="width: 50%">
                 <p>
                     <picture>
                         <source type="image/webp" srcset="/test/blocks/library-config/mocks/media_1.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
@@ -18,11 +18,11 @@
                 <h2 id="heading-xl-marquee-standard-medium-left">Heading XL Marquee standard medium left</h2>
                 <p>Body M Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
                 <p><em><a href="https://www.adobe.com">Lorem ipsum</a></em> <strong><a href="https://www.adobe.com">Learn more</a></strong> <a href="https://www.adobe.com">Text link</a></p>
-            </td><td>
+            </td><td style="width: 50%">
                 <picture>
                     <source type="image/webp" srcset="/test/blocks/library-config/mocks/media_1.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                     <source type="image/webp" srcset="/test/blocks/library-config/mocks/media_1.png?width=750&amp;format=webply&amp;optimize=medium">
                     <source type="image/png" srcset="/test/blocks/library-config/mocks/media_1.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
                     <img loading="lazy" alt="" type="image/png" src="https://main--milo--adobecom.hlx.page/media_1.png?width=750&amp;format=png&amp;optimize=medium" width="199" height="100">
                 </picture>
-            </td></tr></table>
+            </td></tr></table>

test/blocks/library-config/mocks/blocks/text/docx.html

@@ -1,5 +1,5 @@
-<table border="1"><tr><th colspan="1">text</th></tr><tr><td>
+<table border="1" style="width: 100%"><tr><th colspan="1">text</th></tr><tr><td style="width: 100%">
                 <h3 id="text">Text</h3>
                 <p>Kick things off with hundreds of premium and free presets you can access with your Lightroom subscription.</p>
                 <p><em><a href="bookmark://nada">Learn more</a></em> <a href="bookmark://thing">Explore the premium collection</a></p>
-            </td></tr></table>
+            </td></tr></table>