fix: links within quotes and captions (#184)

Author: jawinn

blocks/article-header/article-header.css

@@ -65,7 +65,7 @@
       font-weight: var(--spectrum-title-weight-s);
     }
 
-    & p:not(.author-description p, .quote__quotation) {
+    & p:not(.author-description p, .quote__quotation, figcaption p) {
       margin-block-start: 0.5rem;
     }
   }

blocks/image-with-caption/image-with-caption.js

@@ -8,7 +8,7 @@ export default function decorate(block) {
   const imageData = {
     firstImage: block.children?.[0]?.children?.[0]?.firstElementChild,
     secondImage: block.children?.[0]?.children?.[1]?.firstElementChild,
-    caption: block.children?.[1]?.children?.[0]?.textContent?.trim(),
+    caption: block.children?.[1]?.children?.[0]?.innerHTML,
     altText: block.children?.[2]?.children?.[0]?.textContent?.trim(),
     secondAltText: block.children?.[2]?.children?.[1]?.textContent?.trim(),
     fullWidth: block.children?.[3]?.children?.[0]?.textContent?.trim(),
@@ -33,7 +33,7 @@ export default function decorate(block) {
   if (imageData.caption) {
     const imageCaption = document.createElement('figcaption');
     imageCaption.classList.add('util-detail-s', 'image-with-caption__caption');
-    imageCaption.innerText = imageData.caption;
+    imageCaption.innerHTML = imageData.caption;
     imageContainer.append(imageCaption);
   }
 

blocks/quote/quote.css

@@ -22,11 +22,16 @@
 
 .quote__quotation {
   margin: 0;
+
+  & + .quote__quotation {
+    margin-top: 0.5em;
+  }
 }
 
 .quote__attribution {
   margin-block: 0.5rem 0;
 
+  & cite,
   & a {
     font-style: normal;
   }

blocks/quote/quote.js

@@ -2,11 +2,17 @@ export default async function decorate(block) {
   const [quotation, attribution, attributionUrl] = [...block.children].map((c) => c.firstElementChild);
   const blockquote = document.createElement('blockquote');
 
-  const quoteText = document.createElement('p');
-  quoteText.className = 'quote__quotation util-heading-quote';
-  quoteText.innerHTML = quotation.innerText;
-  blockquote.append(quoteText);
+  // Append quote text, within paragraph(s). May contain links.
+  if (quotation?.children?.length > 0) {
+    Array.from(quotation.children).forEach(textElement => {
+      const quoteText = document.createElement('p');
+      quoteText.className = 'quote__quotation util-heading-quote';
+      quoteText.innerHTML = textElement.innerHTML;
+      blockquote.append(quoteText);
+    });
+  }
 
+  // Append optional paragraph with attribution text and link.
   if (attribution) {
     const attributionText = document.createElement('p');
     attributionText.className = 'quote__attribution util-detail-s';