add foldable

packages/website/src/pages/playground/_Playground.tsx

@@ -2,7 +2,7 @@ import { useState, type FC, useMemo, type ReactNode, useEffect } from "react"
 import Editor from "@monaco-editor/react"
 import { unified } from "unified"
 import remarkParse from "remark-parse"
-import remarkCallout from "@r4ai/remark-callout"
+import remarkCallout, { defaultOptions } from "@r4ai/remark-callout"
 import remarkRehype from "remark-rehype"
 import rehypeStringify from "rehype-stringify"
 import rehypeKatex from "rehype-katex"
@@ -134,7 +134,23 @@ const render = (html: string) =>
   unified()
     .use(remarkParse)
     .use(remarkMath)
-    .use(remarkCallout)
+    .use(remarkCallout, {
+      root: (callout) => ({
+        tagName: callout.isFoldable ? "details" : "div",
+        properties: {
+          "data-callout": true,
+          "data-callout-type": callout.type,
+          open: callout.defaultFolded === undefined ? undefined : !callout.defaultFolded,
+        },
+      }),
+      title: (callout) => ({
+        tagName: callout.isFoldable ? "summary" : "div",
+        properties: {
+          "data-callout-title": true,
+          "data-is-foldable": String(callout.isFoldable),
+        },
+      }),
+    })
     .use(remarkRehype)
     .use(rehypeKatex)
     .use(rehypeStringify)

packages/website/src/pages/playground/_callout.css

@@ -16,6 +16,20 @@
       content: "Note";
     }
 
+    &[data-is-foldable="true"] {
+      & {
+        @apply cursor-pointer;
+      }
+
+      &::after {
+        @apply w-full bg-contain bg-right bg-no-repeat;
+        content: "Note";
+
+        /* lucide:chevron-right */
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im05IDE4bDYtNmwtNi02Ii8+PC9zdmc+");
+      }
+    }
+
     &::before {
       @apply mt-1 block h-5 w-5 bg-current content-[""];
       mask-repeat: no-repeat;
@@ -37,6 +51,11 @@
   }
 }
 
+[data-callout][open] > [data-callout-title]::after {
+  /* lucide:chevron-down */
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im02IDlsNiA2bDYtNiIvPjwvc3ZnPg==");
+}
+
 [data-callout][data-callout-type="info"] {
   & {
     @apply border-blue-600/20 bg-blue-400/20 dark:border-blue-800/20 dark:bg-blue-600/10;