feat: make a reset mode and an error to explain to user the error and…

… propose a link to reset

src/app/mdx/playground/error.tsx

@@ -0,0 +1,39 @@
+"use client"; // Error components must be Client Components
+
+export default function Error({ error, reset: _reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="col-start-2 mt-4 p-8">
+      <p>Erreur du playground</p>
+
+      <p className="text-red-500">{error.message}</p>
+
+      <p>Vous pouvez recharger le playground. </p>
+      <p>Attention : toutes les données seront supprimées de votre navigateur.</p>
+
+      <p>
+        Pour ne pas perdre votre travail en cours, vous pouvez copier le contenu MDX ci-dessous, et corriger à la main
+        en se basant sur l'erreur remontée.
+      </p>
+
+      <details>
+        <summary>Détails</summary>
+
+        <p>
+          <pre>{localStorage.getItem("mdxContent")}</pre>
+        </p>
+      </details>
+
+      <div className="mt-8">
+        <a href={`/mdx/playground?reset=true`}>Recharger le playground</a>
+      </div>
+      {/* <button
+        onClick={ 
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+          }
+          >
+          Try again
+          </button> */}
+    </div>
+  );
+}

src/app/mdx/playground/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
+import { useSearchParams } from "next/navigation";
 import { compileMDX } from "next-mdx-remote/rsc";
 import { type ChangeEvent, useEffect, useState } from "react";
 
 import { Button } from "@/components/Button";
 import { defaultMdxComponents } from "@/mdx-components";
-import { useSearchParams } from "next/navigation";
 
 const placeholder = `---
 title: "Ajouter le titre"
@@ -77,20 +77,16 @@ export default function MDXEditorPage() {
   const [mdxContent, setMdxContent] = useState<string>("");
   const [renderedContent, setRenderedContent] = useState<React.ReactNode | null>(null);
   const [frontmatter, setFrontmatter] = useState<Record<string, unknown> | null>(null);
-  const searchParams = useSearchParams()
+  const searchParams = useSearchParams();
 
-  const reset = searchParams.get("reset") === "";
+  const reset = searchParams.get("reset") === "true";
 
   useEffect(() => {
     const storedContent = localStorage.getItem("mdxContent");
 
-    if (storedContent && !reset) {
-      setMdxContent(storedContent);
-    } else {
-      setMdxContent(placeholder);
-    }
+    setMdxContent(storedContent && !reset ? storedContent : placeholder);
     setAfterFirstInit(true);
-  }, []);
+  }, [reset]);
 
   useEffect(() => {
     const task = async () => {
@@ -113,7 +109,7 @@ export default function MDXEditorPage() {
         setRenderedContent(
           <div className="text-red-500">
             <p>Error rendering MDX</p>
-            {error instanceof Error && <p>{error.toString()}</p>}
+            {/* {error instanceof Error && <p>{error.toString()}</p>} */}
           </div>,
         );
       }

src/components/mdx/MdxCard.tsx

@@ -40,19 +40,18 @@ const MdxCardBody = ({ children }: PropsWithChildren) => {
 };
 
 type MarkerProps = {
-  marker: string;
   markerPosition: "left" | "right";
 };
 
-const MdxCardMarker = ({ markerPosition, marker }: MarkerProps) => {
+const MdxCardMarker = ({ markerPosition, children }: PropsWithChildren<MarkerProps>) => {
   return (
     <div
       className={cx(
         "bg-decoration-300 py-0 px-2 shadow-[1px_1px_0px_#183D2F] rounded-[24px] border-body-700 border border-solid text-sm leading-6 absolute -top-3",
         { "self-start": markerPosition === "left", "self-end": markerPosition === "right" },
       )}
     >
-      {marker}
+      {children}
     </div>
   );
 };
@@ -62,7 +61,7 @@ export const MdxCard = ({ children, fullWidth }: PropsWithChildren<Props>) => {
     <>
       <div
         className={cx(
-          "flex flex-col justify-start items-stretch p-4 gap-1 bg-white border border-solid border-body-700 shadow rounded-lg w-full h-full relative ",
+          "flex flex-col justify-start items-stretch p-4 gap-1 bg-white border border-solid border-body-700 shadow rounded-lg w-full relative ",
           {
             "max-w-lg": !fullWidth,
           },