ttcMD: initial table renderer

app/globals.css

@@ -73,6 +73,14 @@
   .accordion:not(:has(+ .accordion)) {
     @apply rounded-b-md;
   }
+
+  .md-table {
+    @apply bg-black/20 rounded-md overflow-clip;
+  }
+  .md-table td,
+  .md-table th {
+    @apply px-4 border border-black/20 dark:border-white/20;
+  }
 }
 
 @keyframes identifier {

lib/tcmd/TokenIdentifiers.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { Fragment } from "react";
 import { Poppable } from "../poppables/components/poppable";
 import { Accordion, AccordionContent } from "../accordion";
+import { metadata } from "@/app/layout";
 
 type SearchFunction = (s: string, start: number, end: number) => {
   start: number;
@@ -572,8 +573,10 @@ export const buildOnlyDefaultElements = () => {
   });
 
   registerIdentifier("table", /^\|\s[\s\S]*?\|(?=(\n\n)|$)/g, (s, rx) => {
-    const rowSections = s.split(/-/gm).map((s) =>
-      s.split("\n").map((r) => r.split(/\s?\|\s?/g))
+    const rowSections = s.split(/^\|[|-\s]+\|$/gm).map((s) =>
+      s.split("\n").filter((r) => !!r).map((r) =>
+        r.split("|").map((c) => c.trim()).filter((c) => !!c)
+      )
     );
 
     let headerRows: string[][] = [],
@@ -603,15 +606,71 @@ export const buildOnlyDefaultElements = () => {
       content: s,
       raw: s,
       metadata: {
-        headerRows: headerRows.join(" | "),
-        bodyRows: bodyRows.join(" | "),
-        footerRows: footerRows.join(" | "),
-        columns: maxColumns.toString(),
+        headerRows: headerRows,
+        bodyRows: bodyRows,
+        footerRows: footerRows,
+        columns: maxColumns,
       },
       uuid: crypto.randomUUID(),
     };
   }, (t) => {
-    return <>{t.raw}</>;
+    const { headerRows, bodyRows, footerRows, columns } = t.metadata;
+
+    return (
+      <table className="md-table">
+        {!!headerRows && (
+          <thead>
+            {headerRows.map((r, i) => (
+              <tr key={r.join() + i}>
+                {r.concat(Array(columns - r.length).fill("")).map((c) => {
+                  const child = t.children?.find((child) => child.raw === c);
+                  return (
+                    <th key={r.join() + i + c}>
+                      {child?.render(child) ||
+                        c}
+                    </th>
+                  );
+                })}
+              </tr>
+            ))}
+          </thead>
+        )}
+        {!!bodyRows && (
+          <tbody>
+            {bodyRows.map((r, i) => (
+              <tr key={r.join() + i}>
+                {r.concat(Array(columns - r.length).fill("")).map((c) => {
+                  const child = t.children?.find((child) => child.raw === c);
+                  return (
+                    <td key={r.join() + i + c}>
+                      {child?.render(child) ||
+                        c}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        )}
+        {!!footerRows && (
+          <tfoot>
+            {footerRows.map((r, i) => (
+              <tr key={r.join() + i}>
+                {r.concat(Array(columns - r.length).fill("")).map((c) => {
+                  const child = t.children?.find((child) => child.raw === c);
+                  return (
+                    <td key={r.join() + i + c}>
+                      {child?.render(child) ||
+                        c}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tfoot>
+        )}
+      </table>
+    );
   });
 
   return TokenIdentifiers;

md/help articles/test.md

@@ -1,4 +1,4 @@
 | test | Table | header |
--------------------------
+| ---- | ----- | ------ |
 | test | table | row |
-| look | another |
+| shorter | *row* |