tcmd: token uuids, fixes a few issues with poppables

components/tcmd/index.tsx

@@ -3,10 +3,11 @@
 import { Accordion, AccordionContent } from "@/lib/accordion";
 import { Poppable } from "@/lib/poppables/components/poppable";
 import { createElements } from "@/lib/tcmd";
-import { tokenizeInline } from "@/lib/tcmd/tokenizeInline";
 import Link from "next/link";
 import React, { FC, Fragment, ReactNode, use, useMemo } from "react";
 
+import { sanitize } from "isomorphic-dompurify";
+
 export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
   const text = use(body);
   const elements = useMemo(() => createElements(text), [text]);
@@ -15,9 +16,8 @@ export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
     //   <pre>{JSON.stringify(elements,null,2)}</pre>
     // </div>
     <div>
-      {elements.map((e, i) => (
-        <Fragment key={"tcmd-block" + i}>{renderBlock(e)}</Fragment>
-      ))}
+      {elements.map((e, i) => <Fragment key={e.uuid}>{renderBlock(e)}
+      </Fragment>)}
     </div>
   );
 };
@@ -26,7 +26,7 @@ const renderBlock = (block: BlockChildren): ReactNode => {
   switch (block.type) {
     case "block":
       return block.children.map((e, i) => (
-        <Fragment key={"tcmd-block" + i}>{renderBlock(e)}</Fragment>
+        <Fragment key={e.uuid}>{renderBlock(e)}</Fragment>
       ));
     case "grid":
       return (
@@ -37,7 +37,7 @@ const renderBlock = (block: BlockChildren): ReactNode => {
           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}>
+            <div key={c.uuid}>
               {renderBlock(c)}
             </div>
           ))}
@@ -47,7 +47,7 @@ const renderBlock = (block: BlockChildren): ReactNode => {
       return (
         <div className="card">
           {block.children.map((e, i) => (
-            <Fragment key={"card-block" + i + e.type}>
+            <Fragment key={e.uuid}>
               {renderBlock(e)}
             </Fragment>
           ))}
@@ -60,7 +60,7 @@ const renderBlock = (block: BlockChildren): ReactNode => {
         >
           <AccordionContent>
             {block.children.map((e, i) => (
-              <Fragment key={"accordion" + e.type + "i"}>
+              <Fragment key={e.uuid}>
                 {renderBlock(e)}
               </Fragment>
             ))}
@@ -80,7 +80,7 @@ const renderParagraph = (p: ParagraphToken) => {
       return (
         <div className="p">
           {p.content.map((e, i) => (
-            <Fragment key={"p-paragraph" + i + e.type}>
+            <Fragment key={e.uuid}>
               {renderToken(e)}
             </Fragment>
           ))}
@@ -88,7 +88,7 @@ const renderParagraph = (p: ParagraphToken) => {
       );
     case "code":
       return (
-        <pre className="whitespace-pre-wrap">
+        <pre className="whitespace-pre-wrap bg-black/20 p-2 rounded-md">
           {p.content.map((c) => c.line.toString()).join("\n\n")}
         </pre>
       );
@@ -143,7 +143,7 @@ const renderToken = (t: Token) => {
       return (
         <div className="p">
           {t.lines.map((e, i) => (
-            <Fragment key={"p-line" + i + e.type}>
+            <Fragment key={e.uuid}>
               {renderInlineToken(e.line)}
             </Fragment>
           ))}
@@ -159,7 +159,7 @@ const renderToken = (t: Token) => {
     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>;
+      return <li className="list-disc ml-12">{renderInlineToken(t.line)}</li>;
     default:
       return (
         <div className="text-white bg-red-500 p">
@@ -174,7 +174,7 @@ const renderInlineToken = (l: Line) => {
   if (typeof l === "string") return l;
 
   return l.map((token) => (
-    <Fragment key={"inline_token" + token.content}>
+    <Fragment key={token.uuid}>
       {(() => {
         switch (token.type) {
           case "text":
@@ -183,13 +183,30 @@ const renderInlineToken = (l: Line) => {
             return <span className="font-bold">{token.content}</span>;
           case "anchor":
             return (
-              <Link className="text-primary-600" href={token.data.href}>
+              <Link
+                className="dark:text-primary-600 underline dark:no-underline"
+                href={token.data.href}
+              >
                 {token.content}
               </Link>
             );
-          case "image":
+          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