From 7c5accee2f85bf5b92e6163ecbcfb467557dc57a Mon Sep 17 00:00:00 2001
From: Vaibhav sasulkar <vaibhav.sasulkar@teknopoint.local>
Date: Wed, 9 Oct 2024 16:59:58 +0530
Subject: [PATCH]  code block add table

---
 blocks/boards/boards.js |  4 ++--
 blocks/code/code.js     |  4 +++-
 blocks/code/table.js    | 53 +++++++++++++++++++++++++++++++++++++++++
 component-models.json   | 17 +++++++++++++
 4 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 blocks/code/table.js

diff --git a/blocks/boards/boards.js b/blocks/boards/boards.js
index 8a869c7279..44b17d9199 100644
--- a/blocks/boards/boards.js
+++ b/blocks/boards/boards.js
@@ -27,8 +27,8 @@ export default async function decorate(block) {
     // if (header && i === 0) thead.append(row);
     // else 
     tbody.append(row);
-    // [...child.firstElementChild?.firstElementChild?.children]?.forEach((col) => {
-    [...child.children].forEach((col) => {
+    [...child.firstElementChild?.firstElementChild?.children]?.forEach((col) => {
+    // [...child.children].forEach((col) => {
       const cell = buildCell(header ? i : i + 1);
       if (col.innerHTML.includes('img') && col.textContent.trim()) {
         col.remove();
diff --git a/blocks/code/code.js b/blocks/code/code.js
index f40b3201a7..33d84a11cf 100644
--- a/blocks/code/code.js
+++ b/blocks/code/code.js
@@ -3,7 +3,9 @@ import { mobileHeaderAnalytics } from "./code-analytics.js";
 
 export default async function decorate(block) {
     block.innerHTML = await decoratePlaceholder(block);
-
+    if(block.classList.add('table')){
+        decorateTable(block)
+    }
     const titleData = block.children[0]?.querySelector('p')?.textContent.trim() || '';
     block.innerHTML = '';
     if (titleData) {
diff --git a/blocks/code/table.js b/blocks/code/table.js
new file mode 100644
index 0000000000..20c90cec79
--- /dev/null
+++ b/blocks/code/table.js
@@ -0,0 +1,53 @@
+/*
+ * Table Block
+ * Recreate a table
+ * https://www.hlx.live/developer/block-collection/table
+ */
+
+function buildCell(rowIndex) {
+    const cell = rowIndex ? document.createElement('td') : document.createElement('th');
+    if (!rowIndex) cell.setAttribute('scope', 'col');
+    return cell;
+}
+
+export function decorateTable(block) {
+    block.classList.add('code');
+    block.parentElement.classList.add('code-wrapper');
+    const table = document.createElement('table');
+    const div = document.createElement('div');
+    const thead = document.createElement('thead');
+    const tbody = document.createElement('tbody');
+
+    const header = !block.classList.contains('no-header');
+    // if (header) table.append(thead);
+    table.append(tbody);
+
+    [...block.children].forEach((child, i) => {
+        const row = document.createElement('tr');
+        // if (header && i === 0) thead.append(row);
+        // else 
+        tbody.append(row);
+        [...child.firstElementChild?.firstElementChild?.children]?.forEach((col) => {
+            // [...child.children].forEach((col) => {
+            const cell = buildCell(header ? i : i + 1);
+            if (col.innerHTML.includes('img') && col.textContent.trim()) {
+                col.remove();
+                const p = document.createElement('p');
+                const span = document.createElement('span');
+                span.append(col.textContent.trim());
+                p.append(col.querySelector('img'))
+                p.append(span)
+                cell.append(p);
+            } else if (col.innerHTML.includes('img')) {
+                col.remove();
+                cell.append(col.querySelector('img'));
+            } else {
+                cell.innerHTML = col.innerHTML;
+            }
+            row.append(cell);
+        });
+    });
+    block.innerHTML = '';
+    div.append(table);
+    block.append(div);
+}
\ No newline at end of file
diff --git a/component-models.json b/component-models.json
index bd0c706d9f..dfcce89db2 100644
--- a/component-models.json
+++ b/component-models.json
@@ -2195,6 +2195,23 @@
   {
     "id": "code",
     "fields": [
+      {
+        "component": "multiselect",
+        "name": "classes",
+        "label": "Style",
+        "valueType": "string",
+        "options": [
+          {
+            "name": "Type",
+            "children": [
+              {
+                "name": "Table",
+                "value": "table"
+              }
+            ]
+          }
+        ]
+      },
       {
         "component": "text-area",
         "valueType": "string",