fix: wrap texts in paragraphs in blocks (#2)

* fix: wrap texts in paragraphs in blocks

Texts that are a single paragraph are not wrapped in  in block cells. This is a known issue and has yet to be fixed in the pipeline. It is semantically correct to wrap text in a .

* feat: also wrap pictures in p

* fix: dont wrap empty cells

* fix: cover icons as well

* fix: update logic to detect inline els

* fix: firstChild undefined

blocks/cards/cards.css

@@ -16,6 +16,10 @@
   margin: 16px;
 }
 
+.cards .cards-card-image p {
+  margin: 0;
+}
+
 .cards .cards-card-image {
   line-height: 0;
 }

scripts/aem.js

@@ -622,6 +622,18 @@ function decorateBlock(block) {
     blockWrapper.classList.add(`${shortBlockName}-wrapper`);
     const section = block.closest('.section');
     if (section) section.classList.add(`${shortBlockName}-container`);
+    // wrap plain text and non-block elements in a <p> or <pre>
+    block.querySelectorAll(':scope > div > div').forEach((cell) => {
+      const firstChild = cell.firstElementChild;
+      const cellText = cell.textContent.trim();
+      if ((!firstChild && cellText)
+        || (firstChild && !firstChild.tagName.match(/^(P(RE)?|H[1-6]|(U|O)L|TABLE)$/))) {
+        const tag = firstChild && firstChild.tagName === 'CODE' && cellText === firstChild.textContent.trim() ? 'pre' : 'p';
+        const paragraph = document.createElement(tag);
+        paragraph.append(...cell.childNodes);
+        cell.replaceChildren(paragraph);
+      }
+    });
   }
 }