toolbox: adds devtoolbox to easily manage debug components

components/ttcmd/index.tsx

@@ -1,13 +1,19 @@
-"use client";
-
 import { createElements } from "@/lib/tcmd";
 import React, { FC, Suspense, useEffect, useMemo, useState } from "react";
 
 import { MDSkeletonLoader } from "../loader";
+import { DevTool } from "../devtools/Toolbox";
 
-export const TTCMD: FC<
-  { body: string; escapeTOC?: (tokens: Token[]) => boolean }
-> = ({ body, escapeTOC = () => false }) => {
+interface Props {
+  body: string;
+  escapeTOC?: (tokens: Token[]) => boolean;
+  parserId: string;
+  title: string;
+}
+
+export const TTCMD: FC<Props> = (
+  { body, parserId, escapeTOC = () => false, title },
+) => {
   const elements = useMemo(() => createElements(body), [body]);
 
   const [toc, start, end] = useMemo(() => {
@@ -31,15 +37,19 @@ export const TTCMD: FC<
     setHasEscapedTOC(escapeTOC(toc));
   }, [escapeTOC, toc]);
 
+  console.log("mdId", parserId);
+
   return (
     <Suspense fallback={<MDSkeletonLoader />}>
-      <button
-        className="btn-primary"
-        onClick={() =>
-          navigator.clipboard.writeText(JSON.stringify(elements, null, 2))}
-      >
-        copy ast
-      </button>
+      <DevTool id={parserId}>
+        <button
+          className="btn-primary"
+          onClick={() =>
+            navigator.clipboard.writeText(JSON.stringify(elements, null, 2))}
+        >
+          Copy AST for {title}
+        </button>
+      </DevTool>
       {hasEscapedTOC !== undefined &&
         (
           <TTCMDRenderer