From 630bc43120e8131487184a20716c172149320dca Mon Sep 17 00:00:00 2001
From: Max Edell <maxed@adobe.com>
Date: Mon, 2 Oct 2023 16:21:30 -0700
Subject: [PATCH 1/4] fix: pill styling, allow within tds

---
 scripts/scripts.js |  3 +--
 styles/styles.css  | 12 ++++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/scripts/scripts.js b/scripts/scripts.js
index 5b3d140..69b31d2 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -784,7 +784,7 @@ export function convertCodeIconsToText(main) {
 }
 
 export function decoratePills(main) {
-  main.querySelectorAll('p').forEach((p) => {
+  main.querySelectorAll('p,td').forEach((p) => {
     const matches = [...p.innerText.matchAll(/tt:\[([^\]]*)\]/g)];
     if (!matches.length) return;
 
@@ -804,7 +804,6 @@ export function decoratePills(main) {
 
     const parent = p.parentElement;
     p.remove();
-    console.log('nodes: ', nodes);
     parent.append(...nodes);
   });
 }
diff --git a/styles/styles.css b/styles/styles.css
index 2508e23..f9df784 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -746,6 +746,18 @@ a.button-primary--blue:hover,
   background-color: var(--primary-action-active-background-color);
 }
 
+span.pill {
+  background: #000;
+  color: #fff;
+  border-radius: 14px;
+  margin: 0 -5px;
+  padding: 2px 5px;
+}
+
+td > span.pill {
+  margin-right: 0;
+}
+
 .drawer {
   background: var(--drawer-background-color);
   border-radius: var(--spacing--4);

From d0e656f37a481f5e7b36b1dc3ac44f33d4349612 Mon Sep 17 00:00:00 2001
From: Max Edell <maxed@adobe.com>
Date: Mon, 2 Oct 2023 16:25:53 -0700
Subject: [PATCH 2/4] fix: decorate pills in table block

---
 blocks/table/table.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/blocks/table/table.js b/blocks/table/table.js
index 43d7ae1..eb88936 100644
--- a/blocks/table/table.js
+++ b/blocks/table/table.js
@@ -1,4 +1,6 @@
-import { html, isValidDocsURL, isValidWebURL } from '../../scripts/scripts.js';
+import {
+  decoratePills, html, isValidDocsURL, isValidWebURL,
+} from '../../scripts/scripts.js';
 
 /**
  * @param {HTMLElement} block
@@ -134,4 +136,6 @@ export default async function decorate(block) {
     </table>`.firstElementChild.firstElementChild;
     tbody.appendChild(tr);
   });
+
+  decoratePills(table);
 }

From c06edb7dba602f4b4ebfbe3e5d24936129443735 Mon Sep 17 00:00:00 2001
From: Max Edell <maxed@adobe.com>
Date: Mon, 2 Oct 2023 16:34:00 -0700
Subject: [PATCH 3/4] test .page fix

---
 blocks/table/table.js |  8 +++++---
 scripts/scripts.js    | 44 ++++++++++++++++++++++---------------------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/blocks/table/table.js b/blocks/table/table.js
index eb88936..58fa33f 100644
--- a/blocks/table/table.js
+++ b/blocks/table/table.js
@@ -131,11 +131,13 @@ export default async function decorate(block) {
     const cells = [...row.querySelectorAll(':scope > div')];
     const tr = html` <table>
       <tr>
-        ${cells.map((cell) => `<td>${cell.innerHTML}</td>`).join('\n')}
+        ${cells.map((cell) => {
+    decoratePills(cell);
+    return `<td>${cell.innerHTML}</td>`;
+  }).join('\n')
+}
       </tr>
     </table>`.firstElementChild.firstElementChild;
     tbody.appendChild(tr);
   });
-
-  decoratePills(table);
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 69b31d2..605a9a9 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -783,29 +783,31 @@ export function convertCodeIconsToText(main) {
   });
 }
 
-export function decoratePills(main) {
-  main.querySelectorAll('p,td').forEach((p) => {
-    const matches = [...p.innerText.matchAll(/tt:\[([^\]]*)\]/g)];
-    if (!matches.length) return;
-
-    const nodes = [];
-    let text = p.innerText;
-    matches.forEach((match) => {
-      const [left, ...rights] = text.split(match[0]);
-      if (left) {
-        nodes.push(left);
-      }
-      nodes.push(html`<span class="pill">${match[1]}</span>`);
-      text = rights.join(match[0]);
-    });
-    if (text) {
-      nodes.push(text);
+export function decoratePill(p) {
+  const matches = [...p.innerText.matchAll(/tt:\[([^\]]*)\]/g)];
+  if (!matches.length) return;
+
+  const nodes = [];
+  let text = p.innerText;
+  matches.forEach((match) => {
+    const [left, ...rights] = text.split(match[0]);
+    if (left) {
+      nodes.push(left);
     }
-
-    const parent = p.parentElement;
-    p.remove();
-    parent.append(...nodes);
+    nodes.push(html`<span class="pill">${match[1]}</span>`);
+    text = rights.join(match[0]);
   });
+  if (text) {
+    nodes.push(text);
+  }
+
+  const parent = p.parentElement;
+  p.remove();
+  parent.append(...nodes);
+}
+
+export function decoratePills(main) {
+  main.querySelectorAll('p,td').forEach(decoratePill);
 }
 
 /**

From 3ac5de3535354af24bb1b59e6a26ae062d443ddd Mon Sep 17 00:00:00 2001
From: Max Edell <maxed@adobe.com>
Date: Mon, 2 Oct 2023 16:44:17 -0700
Subject: [PATCH 4/4] fix: pills on hlx.page

---
 blocks/table/table.js |  8 +++-----
 scripts/scripts.js    | 12 +++++++++---
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/blocks/table/table.js b/blocks/table/table.js
index 58fa33f..eb88936 100644
--- a/blocks/table/table.js
+++ b/blocks/table/table.js
@@ -131,13 +131,11 @@ export default async function decorate(block) {
     const cells = [...row.querySelectorAll(':scope > div')];
     const tr = html` <table>
       <tr>
-        ${cells.map((cell) => {
-    decoratePills(cell);
-    return `<td>${cell.innerHTML}</td>`;
-  }).join('\n')
-}
+        ${cells.map((cell) => `<td>${cell.innerHTML}</td>`).join('\n')}
       </tr>
     </table>`.firstElementChild.firstElementChild;
     tbody.appendChild(tr);
   });
+
+  decoratePills(table);
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 605a9a9..4110864 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -801,9 +801,15 @@ export function decoratePill(p) {
     nodes.push(text);
   }
 
-  const parent = p.parentElement;
-  p.remove();
-  parent.append(...nodes);
+  if (p.tagName === 'p') {
+    const parent = p.parentElement;
+    p.remove();
+    parent.append(...nodes);
+  } else {
+    // td
+    p.innerHTML = '';
+    p.append(...nodes);
+  }
 }
 
 export function decoratePills(main) {