tcmd: image element, heading links

components/tcmd/index.tsx

@@ -2,7 +2,7 @@
 
 import { createElements } from "@/lib/tcmd";
 import Link from "next/link";
-import React, { FC, ReactNode, use, useMemo } from "react";
+import React, { FC, Fragment, ReactNode, use, useMemo } from "react";
 
 export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
   const text = use(body);
@@ -27,10 +27,12 @@ const renderBlock = (block: BlockChildren): ReactNode => {
           style={{
             "--grid-cols": block.metadata.columns,
           } as React.CSSProperties}
-          className="grid grid-cols-dynamic gap-x-8 gap-y-6"
+          className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
         >
           {block.children.map((c, i) => (
-            <div key={"block-grid" + c.type + i}>{renderBlock(c)}</div>
+            <Fragment key={"block-grid" + c.type + i}>
+              {renderBlock(c)}
+            </Fragment>
           ))}
         </div>
       );
@@ -66,19 +68,37 @@ const renderToken = (t: Token) => {
   switch (t.type) {
     case "h1":
       return (
-        <p className="font-bold text-2xl">
+        <p
+          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
+            " ",
+            "-",
+          )}
+          className="font-bold text-2xl"
+        >
           {renderInlineToken(t.line)}
         </p>
       );
     case "h2":
       return (
-        <p className="font-bold text-xl">
+        <p
+          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
+            " ",
+            "-",
+          )}
+          className="font-bold text-xl"
+        >
           {renderInlineToken(t.line)}
         </p>
       );
     case "h3":
       return (
-        <p className="font-bold text-lg">
+        <p
+          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
+            " ",
+            "-",
+          )}
+          className="font-bold text-lg"
+        >
           {renderInlineToken(t.line)}
         </p>
       );
@@ -124,6 +144,9 @@ const renderInlineToken = (l: Line) => {
             {token.content}
           </Link>
         );
+      case "image":
+        // eslint-disable-next-line @next/next/no-img-element
+        return <img src={token.data.src} alt={token.content} />;
       default:
         return (
           <span className="bg-red-500">

lib/tcmd/inlineTokens.ts

@@ -24,7 +24,7 @@ export const inlineTokens: {
     },
   },
   {
-    rx: /\[(.*?)\]\((.*?)\)/g,
+    rx: /(?<!\!)\[(.*?)\]\((.*?)\)/g,
     create(content, start, end, tokens) {
       const [_, label, href] = content;
       tokens.push({
@@ -42,4 +42,22 @@ export const inlineTokens: {
       // return l
     },
   },
+  {
+    rx: /!\[(.*?)\]\((.*?)\)/g,
+    create(content, start, end, tokens) {
+      const [_, alt, src] = content;
+      tokens.push({
+        content: alt,
+        end,
+        start,
+        type: "image",
+        data: {
+          src,
+        },
+      });
+    },
+    replace(l) {
+      return l;
+    },
+  },
 ];

test.md

@@ -60,4 +60,78 @@ const blockTokens: {
 
 ]]
 
+[[
+
+![Goofy](https://yt3.ggpht.com/a/AATXAJwbIW0TwEhqdT2ZPeSB1AtdtWD2ZXam80oijg=s900-c-k-c0xffffffff-no-rj-mo)
+
+[Google link](https://google.com/)
+
+]]
+
+/[]
+
+[][][][][]
+
+[[
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Sollicitudin tempor id eu nisl nunc
+mi ipsum faucibus vitae. Lobortis elementum nibh tellus molestie nunc. Purus non
+enim praesent elementum facilisis leo vel. Orci nulla pellentesque dignissim
+enim sit amet venenatis. Eu feugiat pretium nibh ipsum. Gravida dictum fusce ut
+placerat orci nulla pellentesque. Tincidunt vitae semper quis lectus nulla at
+volutpat diam ut. Proin sed libero enim sed faucibus turpis in eu mi. Dui sapien
+eget mi proin sed libero enim sed faucibus. Felis donec et odio pellentesque
+diam volutpat commodo sed egestas. Massa tincidunt dui ut ornare lectus sit amet
+est placerat. Auctor urna nunc id cursus metus aliquam eleifend.
+
+Nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis
+egestas sed tempus urna et pharetra pharetra. In arcu cursus euismod quis
+viverra nibh cras. Volutpat est velit egestas dui. Dictum non consectetur a erat
+nam at lectus urna. Vulputate eu scelerisque felis imperdiet. Pharetra pharetra
+massa massa ultricies mi. Nec ultrices dui sapien eget mi proin sed libero.
+Dictum at tempor commodo ullamcorper a lacus vestibulum. Odio morbi quis commodo
+odio aenean sed adipiscing diam. Euismod elementum nisi quis eleifend quam. Nisi
+est sit amet facilisis magna etiam tempor. Quisque id diam vel quam elementum.
+Quis blandit turpis cursus in hac habitasse. Mattis pellentesque id nibh tortor
+id aliquet lectus proin nibh. Sit amet consectetur adipiscing elit pellentesque
+habitant morbi tristique senectus. Nec tincidunt praesent semper feugiat. Quis
+risus sed vulputate odio ut enim blandit volutpat.
+
+Cursus metus aliquam eleifend mi in nulla. Enim sit amet venenatis urna cursus
+eget. Adipiscing diam donec adipiscing tristique risus nec. Ullamcorper
+malesuada proin libero nunc consequat. Auctor neque vitae tempus quam
+pellentesque nec nam aliquam. Facilisi etiam dignissim diam quis enim. Ultrices
+dui sapien eget mi. Aliquet risus feugiat in ante metus dictum at. Leo vel orci
+porta non pulvinar. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis
+gravida. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo.
+Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Rhoncus est
+pellentesque elit ullamcorper dignissim cras tincidunt.
+
+Platea dictumst vestibulum rhoncus est. Amet tellus cras adipiscing enim eu. Sit
+amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Egestas
+fringilla phasellus faucibus scelerisque. Ac turpis egestas integer eget aliquet
+nibh praesent tristique. Integer enim neque volutpat ac tincidunt. Nec feugiat
+nisl pretium fusce. Eget lorem dolor sed viverra ipsum nunc aliquet. Faucibus
+nisl tincidunt eget nullam. Lacus suspendisse faucibus interdum posuere lorem
+ipsum dolor sit amet. Adipiscing vitae proin sagittis nisl rhoncus mattis
+rhoncus. Porta lorem mollis aliquam ut. Blandit volutpat maecenas volutpat
+blandit. Sed libero enim sed faucibus turpis. In hendrerit gravida rutrum
+quisque non tellus. A erat nam at lectus urna duis convallis convallis tellus.
+Pellentesque elit ullamcorper dignissim cras tincidunt. Eget nunc lobortis
+mattis aliquam faucibus purus in massa. Purus in massa tempor nec feugiat nisl
+pretium fusce id.
+
+Quisque non tellus orci ac. Varius morbi enim nunc faucibus a pellentesque sit
+amet. Purus semper eget duis at tellus at urna condimentum mattis. Et malesuada
+fames ac turpis. Pellentesque id nibh tortor id. Turpis tincidunt id aliquet
+risus feugiat in ante metus. Pharetra et ultrices neque ornare aenean euismod
+elementum nisi. Scelerisque eu ultrices vitae auctor eu augue ut. Massa placerat
+duis ultricies lacus sed. Ornare arcu odio ut sem. Adipiscing diam donec
+adipiscing tristique risus nec feugiat.
+
+[Top](#hello-welcome-to-tabletop-commander)
+
+]]
+
 /[]

types.d.ts

@@ -1,5 +1,5 @@
 type InlineToken = {
-  type: "text" | "bold" | "anchor";
+  type: "text" | "bold" | "anchor" | "image";
   content: string;
   data?: any;
 };