diff --git a/app/globals.css b/app/globals.css index eff61e1..e05a5ad 100644 --- a/app/globals.css +++ b/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 { diff --git a/lib/tcmd/TokenIdentifiers.tsx b/lib/tcmd/TokenIdentifiers.tsx index 9cecf42..6bdaf69 100644 --- a/lib/tcmd/TokenIdentifiers.tsx +++ b/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 ( + + {!!headerRows && ( + + {headerRows.map((r, i) => ( + + {r.concat(Array(columns - r.length).fill("")).map((c) => { + const child = t.children?.find((child) => child.raw === c); + return ( + + ); + })} + + ))} + + )} + {!!bodyRows && ( + + {bodyRows.map((r, i) => ( + + {r.concat(Array(columns - r.length).fill("")).map((c) => { + const child = t.children?.find((child) => child.raw === c); + return ( + + ); + })} + + ))} + + )} + {!!footerRows && ( + + {footerRows.map((r, i) => ( + + {r.concat(Array(columns - r.length).fill("")).map((c) => { + const child = t.children?.find((child) => child.raw === c); + return ( + + ); + })} + + ))} + + )} +
+ {child?.render(child) || + c} +
+ {child?.render(child) || + c} +
+ {child?.render(child) || + c} +
+ ); }); return TokenIdentifiers; diff --git a/md/help articles/test.md b/md/help articles/test.md index 593986b..46021a0 100644 --- a/md/help articles/test.md +++ b/md/help articles/test.md @@ -1,4 +1,4 @@ | test | Table | header | -------------------------- +| ---- | ----- | ------ | | test | table | row | -| look | another | \ No newline at end of file +| shorter | *row* | \ No newline at end of file