ttcMD: improves table with full width

lib/tcmd/TokenIdentifiers.tsx

@@ -502,7 +502,6 @@ export const buildOnlyDefaultElements = () => {
       return (
         <div className="p">
           {children?.map((e) => {
-            console.log(e);
             return <Fragment key={e.uuid}>{e.render(e)}</Fragment>;
           })}
         </div>
@@ -564,9 +563,24 @@ export const buildOnlyDefaultElements = () => {
 
   registerIdentifier(
     "table",
-    /^\|\s[\s\S]*?\|(?=(\n\n)|$)/g,
+    /(?<=\n|^)\| [\s\S]*? \|(?=(\n|$)(?!\|))/g,
     (s) => {
-      const rowSections = s.split(/^\|[|-\s]+\|$/gm).map((s) =>
+      const splitMarker = "{{^^}}";
+      const original = s;
+
+      let columnPattern: string[] = [];
+      let fullWidth = false;
+      s = s.replace(/^\| (<-)?[-|\s^]+(->)? \|$/gm, (e) => {
+        if (!columnPattern.length) {
+          columnPattern = e.split("|").filter((e) => e);
+        }
+        if (e.match(/^\| <-.*?-> \|/gm)) {
+          fullWidth = true;
+        }
+        return splitMarker;
+      });
+
+      const rowSections = s.split(splitMarker).map((s) =>
         s
           .split("\n")
           .filter((r) => !!r)
@@ -602,22 +616,34 @@ export const buildOnlyDefaultElements = () => {
       );
 
       return {
-        content: s,
-        raw: s,
+        content: original,
+        raw: original,
         metadata: {
           headerRows: headerRows,
           bodyRows: bodyRows,
           footerRows: footerRows,
           columns: maxColumns,
+          columnPattern,
+          fullWidth,
         },
         uuid: crypto.randomUUID(),
       };
     },
     (t) => {
-      const { headerRows, bodyRows, footerRows, columns } = t.metadata;
+      const {
+        headerRows,
+        bodyRows,
+        footerRows,
+        columns,
+        columnPattern,
+        fullWidth,
+      } = t.metadata;
 
       return (
-        <table className="md-table">
+        <table
+          data-full-width={fullWidth}
+          className="md-table data-[full-width=true]:w-full"
+        >
           {!!headerRows && (
             <thead>
               {headerRows.map((r, i) => (
@@ -638,10 +664,15 @@ export const buildOnlyDefaultElements = () => {
             <tbody>
               {bodyRows.map((r, i) => (
                 <tr key={r.join() + i}>
-                  {r.concat(Array(columns - r.length).fill("")).map((c) => {
+                  {r.concat(Array(columns - r.length).fill("")).map((c, i) => {
                     const child = t.children?.find((child) => child.raw === c);
                     return (
-                      <td key={r.join() + i + c}>
+                      <td
+                        key={r.join() + i + c}
+                        className="data-[center=true]:text-center"
+                        data-center={!!(columnPattern?.at(i) &&
+                          columnPattern.at(i)?.includes("^"))}
+                      >
                         {child?.render(child) || c}
                       </td>
                     );