ul done and dusted

app/globals.css

@@ -4,51 +4,63 @@
 
 @layer base {
   * {
-    @apply text-white box-border
+    @apply text-white box-border;
   }
   body {
-    @apply dark:bg-mixed-100 bg-primary-600
+    @apply dark:bg-mixed-100 bg-primary-600;
   }
   input {
-    @apply py-2 px-4 rounded-full dark:bg-mixed-200 bg-mixed-600 placeholder:text-dark-500
+    @apply py-2 px-4 rounded-full dark:bg-mixed-200 bg-mixed-600 placeholder:text-dark-500;
   }
-  h1,h2,h3,h4,h5,h6 {
+  h1,
-    @apply font-bold
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-bold;
   }
   p {
-    @apply py-1
+    @apply py-1;
   }
 }
 
 @layer components {
   .strapline {
-    @apply dark:text-primary-500 text-primary-100 uppercase font-bold mb-2 text-lg
+    @apply dark:text-primary-500 text-primary-100 uppercase font-bold mb-2 text-lg;
   }
 
   .heading {
     @apply pb-8 border-b border-b-primary-500 dark:border-b-dark-500 min-w-full;
   }
   .heading h1 {
-    @apply text-5xl font-bold
+    @apply text-5xl font-bold;
   }
 
   .card {
     @apply dark:bg-mixed-200 bg-primary-500 rounded-3xl p-6 shadow-2xl 
     /* mix-blend-luminosity */
-    /* @apply bg-mixed-200 rounded-3xl p-6 shadow-2xl */
+    /* @apply bg-mixed-200 rounded-3xl p-6 shadow-2xl */;
   }
 
   .btn-primary {
-    @apply dark:bg-primary-500 bg-primary-100 py-4 px-6 dark:text-mixed-100 text-white rounded-full font-bold text-lg
+    @apply dark:bg-primary-500 bg-primary-100 py-4 px-6 dark:text-mixed-100 text-white rounded-full font-bold text-lg;
   }
   .btn-secondary {
-    @apply dark:text-primary-500 text-primary-100 py-4 px-6 font-bold text-lg
+    @apply dark:text-primary-500 text-primary-100 py-4 px-6 font-bold text-lg;
   }
   .p {
-    @apply py-1
+    @apply py-1;
   }
 
   .poppable {
-    @apply card dark:bg-mixed-300 bg-primary-600 p-2 rounded-lg transition-opacity data-[visible=true]:z-10 data-[visible=true]:opacity-100 data-[visible=false]:opacity-0 -z-10 max-w-[400px] absolute
+    @apply card dark:bg-mixed-300 bg-primary-600 p-2 rounded-lg transition-opacity data-[visible=true]:z-10 data-[visible=true]:opacity-100 data-[visible=false]:opacity-0 -z-10 max-w-[400px] absolute;
+  }
+}
+
+@layer utilities {
+  .list-1 {
+    /* @apply list-[square]; */
+    list-style: square;
   }
 }

components/ttcmd/index.tsx

@@ -12,6 +12,12 @@ import StaticGenerationSearchParamsBailoutProvider from "next/dist/client/compon
 export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
   const text = use(body);
   const [elements, tabSpacing] = useMemo(() => createElements(text), [text]);
+  const tada = useMemo(
+    () => (
+      <>{renderer(elements.filter((e) => !e.parent).map((e) => e.token!))}</>
+    ),
+    [elements],
+  );
   return (
     <div className="text-lg col-span-2">
       <div>
@@ -24,7 +30,7 @@ export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
         </button>
       </div>
       {/* {elements.map((e, i) => <Fragment key={e.uuid}>{render(e)}</Fragment>)} */}
-      {renderer(elements.map((e) => e.token!), tabSpacing)}
+      {tada}
     </div>
     // <div className="grid grid-cols-3">
     //   {/* <pre suppressHydrationWarning>{JSON.stringify(elements,null,2)}</pre> */}
@@ -32,14 +38,14 @@ export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
   );
 };
 
-const renderer = (tokens: Token[], tabSpacing: number) => {
+function renderer(tokens: Token[]) {
   const usedIds: string[] = [];
   return tokens.map((t) => (
-    <div className="p" key={t.uuid}>{render(t, usedIds, tabSpacing)}</div>
+    <div className="p" key={t.uuid}>{render(t, usedIds)}</div>
   ));
-};
+}
 
-const render = (token: Token, usedIds: string[], tabSpacing: number) => {
+function render(token: Token, usedIds: string[]) {
   switch (token.type) {
     case "heading":
       return (
@@ -66,7 +72,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
         >
           {token.children?.map((c, i) => (
             <div key={c.uuid}>
-              {render(c, usedIds, tabSpacing)}
+              {render(c, usedIds)}
             </div>
           ))}
         </div>
@@ -82,7 +88,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
         <div className="card mb-6">
           {token.children?.map((e) => (
             <Fragment key={e.uuid}>
-              {render(e, usedIds, tabSpacing)}
+              {render(e, usedIds)}
             </Fragment>
           ))}
         </div>
@@ -123,7 +129,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
     case "popover":
       return (
         <Poppable
-          content={token.children?.map((c) => render(c, usedIds, tabSpacing)) ||
+          content={token.children?.map((c) => render(c, usedIds)) ||
             token.content}
           preferredAlign="centered"
           preferredEdge="bottom"
@@ -141,7 +147,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
         <div className="p">
           {token.children?.map((e, i) => (
             <Fragment key={e.uuid}>
-              {render(e, usedIds, tabSpacing)}
+              {render(e, usedIds)}
             </Fragment>
           ))}
         </div>
@@ -155,7 +161,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
             <AccordionContent>
               {token.children?.map((e, i) => (
                 <Fragment key={e.uuid}>
-                  {render(e, usedIds, tabSpacing)}
+                  {render(e, usedIds)}
                 </Fragment>
               ))}
             </AccordionContent>
@@ -174,6 +180,37 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
           {token.content}
         </span>
       );
+    case "list":
+      const items = token.children || [];
+      return (
+        <>
+          <ul
+            data-depth={(Number(token.metadata.initialDepth) / 2) % 3}
+            className="data-[depth='2']:list-[circle] data-[depth='1']:list-[square] list-disc ml-6"
+          >
+            {items.map((c) => {
+              return (
+                <li
+                  key={c.uuid}
+                  data-depth={token.metadata.initialDepth}
+                >
+                  {c.children?.map((c) => render(c, usedIds))}
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      );
+    case "list-item":
+      // This probably doesn't need to exist, but I'm leaving it anyway
+      return (
+        <li
+          data-depth={token.metadata.initialDepth}
+          className="ml-2"
+        >
+          {token.children?.map((c) => render(c, usedIds))}
+        </li>
+      );
     default:
       return (
         <div className="p bg-red-600 text-white">
@@ -181,94 +218,9 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
         </div>
       );
   }
-};
+}
 
-// const renderBlock = (
+function generateId(t: string, usedIds: string[]) {
-//   block: BlockChildren,
-//   usedIds: string[] = [],
-// ): ReactNode => {
-//   usedIds = usedIds || [];
-//   switch (block.type) {
-//     case "block":
-//       return block.children.map((e, i) => (
-//         <Fragment key={e.uuid}>{renderBlock(e, usedIds)}</Fragment>
-//       ));
-//     case "grid":
-//       return (
-//         <div
-//           style={{
-//             "--grid-cols": block.metadata.columns,
-//           } as React.CSSProperties}
-//           className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
-//         >
-//           {block.children.map((c, i) => (
-//             <div key={c.uuid}>
-//               {renderBlock(c, usedIds)}
-//             </div>
-//           ))}
-//         </div>
-//       );
-//     case "card":
-//       return (
-//         <div className="card mb-6">
-//           {block.children.map((e, i) => (
-//             <Fragment key={e.uuid}>
-//               {renderBlock(e, usedIds)}
-//             </Fragment>
-//           ))}
-//         </div>
-//       );
-//     case "accordion":
-//       return (
-//         <div className="bg-black/20 p-1 rounded-md">
-//           <Accordion
-//             title={block.metadata.title || "Expand"}
-//           >
-//             <AccordionContent>
-//               {block.children.map((e, i) => (
-//                 <Fragment key={e.uuid}>
-//                   {renderBlock(e, usedIds)}
-//                 </Fragment>
-//               ))}
-//             </AccordionContent>
-//           </Accordion>
-//         </div>
-//       );
-//     default:
-//       return (
-//         renderParagraph(block as ParagraphToken, usedIds)
-//       );
-//   }
-// };
-
-// const renderParagraph = (p: ParagraphToken, usedIds: string[]) => {
-//   switch (p.type) {
-//     case "p":
-//       return (
-//         <div className="p">
-//           {p.content.map((e, i) => (
-//             <Fragment key={e.uuid}>
-//               {renderToken(e, usedIds)}
-//             </Fragment>
-//           ))}
-//         </div>
-//       );
-//     case "code":
-//       return (
-//         <pre className="whitespace-pre-wrap bg-black/20 p-2 rounded-md">
-//           {p.content.map((c) => c.line.toString()).join("\n\n")}
-//         </pre>
-//       );
-//     default:
-//       return (
-//         <div className="p bg-red-600 text-white">
-//           Block or paragraph missing implementation: {p.type}
-//         </div>
-//       );
-//   }
-// };
-
-const generateId = (t: string, usedIds: string[]) => {
   let id = t.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
     " ",
     "-",
@@ -280,138 +232,4 @@ const generateId = (t: string, usedIds: string[]) => {
     idNum++;
   }
   return id;
-};
+}
-
-// const renderToken = (t: Token, usedIds: string[]) => {
-//   switch (t.type) {
-//     case "h1": {
-//       return (
-//         <div
-//           id={generateId(t.raw, usedIds)}
-//           className="font-bold text-2xl p"
-//         >
-//           {renderInlineToken(t.line)}
-//         </div>
-//       );
-//     }
-//     case "h2": {
-//       return (
-//         <div
-//           id={generateId(t.raw, usedIds)}
-//           className="font-bold text-xl p"
-//         >
-//           {renderInlineToken(t.line)}
-//         </div>
-//       );
-//     }
-//     case "h3": {
-//       return (
-//         <div
-//           id={generateId(t.raw, usedIds)}
-//           className="font-bold text-lg p"
-//         >
-//           {renderInlineToken(t.line)}
-//         </div>
-//       );
-//     }
-//     case "p":
-//       return (
-//         <div className="p">
-//           {t.lines.map((e, i) => (
-//             <Fragment key={e.uuid}>
-//               {renderInlineToken(e.line)}
-//             </Fragment>
-//           ))}
-//         </div>
-//       );
-//     case "text":
-//       return (
-//         <>
-//           {renderInlineToken(t.line)}
-//           &nbsp;
-//         </>
-//       );
-//     case "list1":
-//       return <li className="list-disc ml-6">{renderInlineToken(t.line)}</li>;
-//     case "list2":
-//       return <li className="list-disc ml-12">{renderInlineToken(t.line)}</li>;
-//     default:
-//       return (
-//         <div className="text-white bg-red-500 p">
-//           Missing implementation for tcMD element `{(t as { type: string })
-//             .type}`
-//         </div>
-//       );
-//   }
-// };
-
-// const renderInlineToken = (l: Line) => {
-//   if (typeof l === "string") return l;
-
-//   return l.map((token) => (
-//     <Fragment key={token.uuid}>
-//       {(() => {
-//         switch (token.type) {
-//           case "text":
-//             return <span>{token.content}</span>;
-//           case "bold":
-//             return <span className="font-bold">{token.content}</span>;
-//           case "italic":
-//             return <span className="italic">{token.content}</span>;
-//           case "anchor":
-//             return (
-//               <Link
-//                 className={token.data.style?.classes ||
-//                   "dark:text-primary-600 underline dark:no-underline"}
-//                 href={token.data.href}
-//               >
-//                 {token.content}
-//               </Link>
-//             );
-//           case "image": {
-//             token.data.src = token.data.src as string;
-//             if (token.data.src.startsWith("<svg")) {
-//               return (
-//                 <div
-//                   dangerouslySetInnerHTML={{
-//                     __html: sanitize(token.data.src, {
-//                       USE_PROFILES: { svg: true },
-//                     }),
-//                   }}
-//                 >
-//                 </div>
-//               );
-//             }
-//             // eslint-disable-next-line @next/next/no-img-element
-//             return <img src={token.data.src} alt={token.content} />;
-//           }
-//           case "popover":
-//             return (
-//               <Poppable
-//                 content={renderInlineToken(token.data.popover)}
-//                 preferredAlign="centered"
-//                 preferredEdge="bottom"
-//                 className="cursor-pointer"
-//               >
-//                 <span className="border-b-2 border-dotted border-white">
-//                   {token.content}
-//                 </span>
-//               </Poppable>
-//             );
-//           case "inline-code":
-//             return (
-//               <span className="p-1 rounded-md font-mono bg-black/20 border border-mixed-100/20 mx-2">
-//                 {token.content}
-//               </span>
-//             );
-//           default:
-//             return (
-//               <span className="bg-red-500">
-//                 Inline element not implemented: {token.type}
-//               </span>
-//             );
-//         }
-//       })()}
-//     </Fragment>
-//   ));
-// };

lib/tcmd/TokenIdentifiers.ts

@@ -21,7 +21,7 @@ export const TokenIdentifiers = new Map<string, {
 const rendersContentOnly = true;
 const rendersChildrenOnly = true;
 TokenIdentifiers.set("card", {
-  rx: /\[{2}\n+(\n|.*?)\n+\]{2}/g,
+  rx: /\[{2}\n+([\s\S]*?)\n+\]{2}/g,
   parse(s) {
     return {
       content: s.match(new RegExp(this.rx, ""))?.at(1) ||
@@ -47,6 +47,39 @@ TokenIdentifiers.set("code", {
     };
   },
 });
+TokenIdentifiers.set("list", {
+  rx: /^\s*-\s([\s\S]*?)\n\n/gm,
+  parse(s) {
+    return {
+      content: s.match(new RegExp(this.rx, ""))?.at(1) ||
+        "Unable to parse list",
+      raw: s,
+      metadata: {
+        initialDepth: s.replace("\n", "").split("-").at(0)?.length.toString() ||
+          "1",
+      },
+      type: "list",
+      uuid: crypto.randomUUID(),
+      rendersChildrenOnly,
+    };
+  },
+});
+TokenIdentifiers.set("list-item", {
+  rx: /^\s*-\s(.*?)$/gm,
+  parse(s) {
+    return {
+      content: s.match(new RegExp(this.rx, ""))?.at(1) ||
+        "Unable to parse list-item",
+      raw: s,
+      metadata: {
+        initialDepth: s.replace("\n", "").split("-").at(0)?.length.toString() ||
+          "1",
+      },
+      type: "list-item",
+      uuid: crypto.randomUUID(),
+    };
+  },
+});
 TokenIdentifiers.set("grid", {
   rx: /(?:\[\])+\n+((?:.|\n)*?)\n+\/\[\]/g,
   parse(s) {

lib/tcmd/index.ts

@@ -65,10 +65,38 @@ function buildAbstractSyntaxTree(markers: TokenMarker[]) {
     contentToChildren(marker.token);
   }
 
-  return markers.filter((m) => !m.parent);
+  // return markers.filter((m) => !m.parent);
-  // return markers;
+  return markers;
 }
 
+// function establishClosestParent(blocks: TokenMarker[]): void {
+//   blocks.sort((a, b) => a.start - b.start); // Sort blocks by start position
+
+//   for (let i = 0; i < blocks.length; i++) {
+//     const block = blocks[i];
+//     if (block.parent) continue; // Skip blocks that already have a parent
+
+//     let closestParent: TokenMarker | undefined = undefined;
+//     let minDistance = Number.MAX_SAFE_INTEGER;
+
+//     // Find the closest parent block for each block
+//     for (let j = 0; j < i; j++) {
+//       const otherBlock = blocks[j];
+//       if (otherBlock.end >= block.start && otherBlock.start <= block.start) {
+//         const distance = block.start - otherBlock.start;
+//         if (distance < minDistance) {
+//           minDistance = distance;
+//           closestParent = otherBlock;
+//         }
+//       }
+//     }
+
+//     if (closestParent) {
+//       block.parent = closestParent; // Assign the closest parent block
+//     }
+//   }
+// }
+
 function establishClosestParent(blocks: TokenMarker[]): void {
   blocks.sort((a, b) => a.start - b.start); // Sort blocks by start position
 
@@ -84,7 +112,10 @@ function establishClosestParent(blocks: TokenMarker[]): void {
       const otherBlock = blocks[j];
       if (otherBlock.end >= block.start && otherBlock.start <= block.start) {
         const distance = block.start - otherBlock.start;
-        if (distance < minDistance) {
+        if (
+          distance < minDistance &&
+          isAcceptableChild(otherBlock.type, block.type)
+        ) {
           minDistance = distance;
           closestParent = otherBlock;
         }
@@ -97,6 +128,20 @@ function establishClosestParent(blocks: TokenMarker[]): void {
   }
 }
 
+type ParentChildMap = {
+  [parentType: string]: string[]; // Map parent types to an array of acceptable child types
+};
+
+const parentChildMap: ParentChildMap = {
+  "list": ["list-item"],
+  // Add more mappings as needed...
+};
+
+function isAcceptableChild(parentType: string, childType: string): boolean {
+  const acceptableChildren = parentChildMap[parentType];
+  return acceptableChildren ? acceptableChildren.includes(childType) : true;
+}
+
 function filterOverlappingPBlocks(blocks: TokenMarker[]): TokenMarker[] {
   return blocks.filter((block) => {
     if (block.type !== "p") {
@@ -122,6 +167,10 @@ function filterOverlappingPBlocks(blocks: TokenMarker[]): TokenMarker[] {
 const contentToChildren = (token: Token) => {
   let content = token.content;
 
+  const wasSpecialCase = handleSpecial(token);
+
+  if (wasSpecialCase) return;
+
   const splitMarker = "{{^^}}";
   for (const child of token.children || []) {
     content = content.replace(child.raw, splitMarker);
@@ -139,3 +188,79 @@ const contentToChildren = (token: Token) => {
     token.children || [],
   ).filter((c) => c.children?.length || (c.rendersContentOnly && c.content));
 };
+
+function handleSpecial(token: Token) {
+  switch (token.type) {
+    case "list": {
+      const chunks = splitByDepth(token.children!);
+      const items = processChunks(chunks);
+      token.children = items.flat();
+      return token.children;
+    }
+    default:
+      return;
+  }
+}
+
+function splitByDepth(items: Token[]) {
+  const chunks: Token[][] = [];
+  let currentDepth = -1;
+  let chunk: Token[] = [];
+
+  if (!items) return chunks;
+
+  for (const item of items) {
+    const depth = Number(item.metadata.initialDepth);
+    if (depth === currentDepth) {
+      chunk.push(item);
+    } else {
+      if (chunk.length > 0) {
+        chunks.push(chunk);
+      }
+      chunk = [item];
+      currentDepth = depth;
+    }
+  }
+
+  if (chunk.length > 0) {
+    chunks.push(chunk);
+  }
+
+  return chunks;
+}
+
+function processChunks(chunks: Token[][]) {
+  const mergedChunks: Token[][] = [];
+  for (let i = 1; i < chunks.length; i++) {
+    const currentChunk = chunks[i];
+    let j = i - 1;
+
+    // Find the first chunk with a lower depth
+    while (j >= 0) {
+      const prevChunk = chunks[j];
+      const prevDepth = Number(prevChunk[0].metadata.initialDepth);
+
+      if (prevDepth < Number(currentChunk[0].metadata.initialDepth)) {
+        // Append the current chunk to the children of the found chunk
+        const lastPrev = prevChunk[prevChunk.length - 1];
+        lastPrev.children = lastPrev.children || [];
+        lastPrev.children.push({
+          type: "list",
+          content: "",
+          raw: "",
+          metadata: { initialDepth: currentChunk[0].metadata.initialDepth },
+          uuid: crypto.randomUUID(),
+          children: currentChunk,
+        });
+        mergedChunks.push(currentChunk);
+        break;
+      }
+
+      j--;
+    }
+  }
+
+  // console.log(chunks);
+  // Filter out chunks that were merged into others
+  return chunks.filter((c) => !mergedChunks.find((c2) => c === c2));
+}