ttcMD: add col-span logic to blocks and cards

lib/tcmd/TokenIdentifiers.tsx

@@ -1,6 +1,6 @@
 import { sanitize } from "isomorphic-dompurify";
 import Link from "next/link";
-import { Fragment } from "react";
+import React, { Fragment } from "react";
 import { Poppable } from "../poppables/components/poppable";
 import { Accordion, AccordionContent } from "../accordion";
 
@@ -110,7 +110,10 @@ export const buildOnlyDefaultElements = () => {
           } as React.CSSProperties}
           className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
         >
-          {children?.map((c) => <div key={c.uuid}>{c.render(c)}</div>)}
+          {children?.map((c) => {
+            const Comp = c.metadata.span ? Fragment : "div";
+            return <Comp key={c.uuid}>{c.render(c)}</Comp>;
+          })}
         </div>
       );
     },
@@ -121,17 +124,21 @@ export const buildOnlyDefaultElements = () => {
   // card
   registerIdentifier(
     "card",
-    /\[{2}([\s\S]*?)\n+\]{2}/g,
+    /\[{2}[\s\S]*?\n+\]{2}/g,
     (s) => {
-      const rx = /\[{2}(!?)\s*?\n+([\s\S]*)\n+\]{2}/;
+      const rx = /\[{2}((?:!?)(?:[0-9]?))\s*?\n+([\s\S]*)\n+\]{2}/;
       const match = s.match(rx);
-      const [_, isBlock, content] = match || ["", "", s];
+      const [_, isBlockOrSpan, content] = match || ["", "", s];
+
+      const isBlock = isBlockOrSpan.includes("!");
+      const span = Number(isBlockOrSpan.replace("!", ""));
 
       return {
         content: content.trim(),
         raw: s,
         metadata: {
           isBlock,
+          span,
         },
         uuid: crypto.randomUUID(),
         rendersChildrenOnly,
@@ -142,7 +149,10 @@ export const buildOnlyDefaultElements = () => {
       return (
         <div
           data-block={!!metadata.isBlock}
-          className="data-[block=false]:card mb-6"
+          style={{
+            "--v-span": metadata.span || 1,
+          } as React.CSSProperties}
+          className="data-[block=false]:card data-[block=false]:mb-6 col-span-2"
         >
           {children?.map((e) => <Fragment key={e.uuid}>{e.render(e)}
           </Fragment>)}
@@ -265,7 +275,7 @@ export const buildOnlyDefaultElements = () => {
     (token) => {
       return (
         <div
-          // id={generateId(token.raw, usedIds)}
+          id={token.metadata.id}
           data-strength={token.metadata.strength}
           className={`
         font-bold

lib/tcmd/index.ts

@@ -11,7 +11,7 @@ export const createElements = (body: string): Token[] => {
 const tokenize = (body: string) => {
   const tokenizedBody: TokenMarker[] = [];
 
-  body = body.replaceAll(/[ \t]+\n/g, "\n");
+  body = body.replaceAll(/[ \t]+\n/g, "\n").replaceAll(/\n{3,}/g, "\n\n");
 
   const addToken = (thing: TokenMarker) => {
     tokenizedBody.push(thing);

tailwind.config.ts

@@ -46,6 +46,9 @@ const config: Config = {
       height: {
         variable: "var(--v-height)",
       },
+      gridColumn: {
+        variable: "span var(--v-span) / span var(--v-span)",
+      },
     },
   },
   plugins: [],