Incredible majestic beautiful md parser

components/tcmd/index.tsx

@@ -1,123 +1,135 @@
-import { zipArrays } from "@/lib/zip";
-import { FC, PropsWithChildren, useMemo } from "react";
+"use client";
 
-export const TCMD: FC<{ body: string }> = ({ body }) => {
-  const elements = useMemo(() => createElements(body), [body]);
+import { createElements } from "@/lib/tcmd";
+import Link from "next/link";
+import React, { FC, ReactNode, use, useMemo } from "react";
+
+export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
+  const text = use(body);
+  const elements = useMemo(() => createElements(text), [text]);
   return (
-    <>
-      <pre>{JSON.stringify(elements,null,2)}</pre>
-    </>
+    // <div className="grid grid-cols-2">
+    //   <pre>{JSON.stringify(elements,null,2)}</pre>
+    // </div>
+    <div>
+      {elements.map(renderBlock)}
+    </div>
   );
 };
 
-const createElements = (body: string) => {
-  const tokens = tokenize(body);
-
-  return tokens;
+const renderBlock = (block: BlockChildren): ReactNode => {
+  switch (block.type) {
+    case "block":
+      return block.children.map(renderBlock);
+    case "grid":
+      return (
+        <div
+          style={{
+            "--grid-cols": block.metadata.columns,
+          } as React.CSSProperties}
+          className="grid grid-cols-dynamic gap-x-8 gap-y-6"
+        >
+          {block.children.map((c, i) => (
+            <div key={"block-grid" + c.type + i}>{renderBlock(c)}</div>
+          ))}
+        </div>
+      );
+    case "card":
+      return <div className="card">{block.children.map(renderBlock)}</div>;
+    default:
+      return (
+        renderParagraph(block as ParagraphToken)
+      );
+  }
 };
 
-type InlineToken = {
-  type: "text" | "bold";
-  content: string;
+const renderParagraph = (p: ParagraphToken) => {
+  switch (p.type) {
+    case "p":
+      return <p>{p.content.map(renderToken)}</p>;
+    case "code":
+      return (
+        <pre className="whitespace-pre-wrap">
+          {p.content.map((c) => c.line.toString()).join("\n\n")}
+        </pre>
+      );
+    default:
+      return (
+        <p className="bg-red-600 text-white">
+          Block or paragraph missing implementation: {p.type}
+        </p>
+      );
+  }
 };
 
-type Line = string | InlineToken[];
-
-type MultilineToken = {
-  type: "code";
-  lines: Token[];
+const renderToken = (t: Token) => {
+  switch (t.type) {
+    case "h1":
+      return (
+        <p className="font-bold text-2xl">
+          {renderInlineToken(t.line)}
+        </p>
+      );
+    case "h2":
+      return (
+        <p className="font-bold text-xl">
+          {renderInlineToken(t.line)}
+        </p>
+      );
+    case "h3":
+      return (
+        <p className="font-bold text-lg">
+          {renderInlineToken(t.line)}
+        </p>
+      );
+    case "p":
+      return (
+        <p>
+          {t.lines.map(renderToken)}
+        </p>
+      );
+    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-8">{renderInlineToken(t.line)}</li>;
+    default:
+      return (
+        <p className="text-white bg-red-500">
+          Missing implementation for tcMD element `{(t as { type: string })
+            .type}`
+        </p>
+      );
+  }
 };
 
-type Token = {
-  type: "h1" | "h2" | "h3" | "p";
-  line: Line;
-};
+const renderInlineToken = (l: Line) => {
+  if (typeof l === "string") return l;
 
-const tokenize = (md: string) => {
-  const tokens: (Token | MultilineToken)[] = [];
-  md = md.replace(/(?<=[a-z])\n(?=[a-z])/g, " ");
-  const lines = md.split("\n");
-  const multilineFlags = {
-    heading: 0,
-  };
-
-  const tokenMatches = [
-    {
-      rx: /^\s*#\s/,
-      create: (line: Line) => tokens.push({ type: "h1", line }),
-    },
-    {
-      rx: /^\s*##\s/,
-      create: (line: Line) => tokens.push({ type: "h2", line }),
-    },
-    {
-      rx: /^\s*###\s/,
-      create: (line: Line) => tokens.push({ type: "h3", line }),
-    },
-  ];
-
-  for (let line of lines) {
-    let foundLine = false;
-    token:
-    for (const token of tokenMatches) {
-      if (!token.rx.test(line)) continue token;
-      foundLine = true;
-      line = line.replace(token.rx, "").trim();
-
-      const lineContent = tokenizeInline(line);
-      token.create(lineContent);
+  return l.map((token) => {
+    switch (token.type) {
+      case "text":
+        return <span>{token.content}</span>;
+      case "bold":
+        return <span className="font-bold">{token.content}</span>;
+      case "anchor":
+        return (
+          <Link className="text-primary-600" href={token.data.href}>
+            {token.content}
+          </Link>
+        );
+      default:
+        return (
+          <span className="bg-red-500">
+            Inline element not implemented: {token.type}
+          </span>
+        );
     }
-
-    if (foundLine) continue;
-
-    tokens.push({
-      type: "p",
-      line: tokenizeInline(line),
-    });
-  }
-
-  console.log(tokens);
-  return tokens.filter((t) => (t as Token).line || (t as MultilineToken).lines);
-};
-
-const tokenizeInline = (line: string) => {
-  line = line.trim();
-  const originalLine = line;
-  const insertMarker = "{^}";
-  const tokens: InlineToken[] = [];
-
-  const tokenMatches = [
-    {
-      rx: /\*\*(.*?)\*\*/g,
-      create: (content: string) =>
-        tokens.push({
-          content,
-          type: "bold",
-        }),
-    },
-  ];
-  for (const token of tokenMatches) {
-    let match;
-    let last = 0;
-    while ((match = token.rx.exec(line)) !== null) {
-      const tokenStart = match.index;
-      const tokenEnd = match.index + match[0].length;
-      console.log(tokenEnd, token.rx.lastIndex);
-      token.create(line.substring(tokenStart, tokenEnd));
-      line = line.slice(last, tokenStart) + "{^}" +
-        line.slice(tokenEnd, line.length);
-      last = tokenEnd;
-    }
-  }
-
-  if (tokens.length) {
-    return zipArrays(
-      line.split(insertMarker).map((t): InlineToken => ({
-        content: t,
-        type: "text",
-      })),
-      tokens,
-    ).filter((t) => t.content);
-  }
-  return originalLine;
+  });
 };