{"version":3,"file":"mermaid.mjs","names":["DefaultCode"],"sources":["../src/mermaid.tsx"],"sourcesContent":["// `@notion-headless-cms/react-renderer/mermaid` サブパス。\n// mermaid は約 1 MB ある重い依存なので、利用側が明示的にこの subpath を import し\n// `components={{ Code: MermaidCode }}` で差し込んだ場合だけバンドルに含まれる。\n\"use client\";\n\nimport type { CodeBlockObjectResponse } from \"@notionhq/client/build/src/api-endpoints\";\nimport { useEffect, useId, useState } from \"react\";\nimport { Code as DefaultCode } from \"./blocks/Code.js\";\nimport type { BlockComponentProps } from \"./types.js\";\n\nfunction plainText(rt: CodeBlockObjectResponse[\"code\"][\"rich_text\"]): string {\n  return rt.map((t) => t.plain_text).join(\"\");\n}\n\n/**\n * Code ブロックを描画するコンポーネント。\n * `language === \"mermaid\"` のときだけ動的 import で `mermaid` を読んで SVG にし、\n * それ以外の言語は既定の `Code` に委譲する。\n *\n * 使い方:\n * ```tsx\n * import { MermaidCode } from \"@notion-headless-cms/react-renderer/mermaid\";\n * <NotionRenderer blocks={blocks} components={{ Code: MermaidCode }} />\n * ```\n */\nexport function MermaidCode(\n  props: BlockComponentProps<CodeBlockObjectResponse>,\n) {\n  if (props.block.code.language === \"mermaid\") {\n    return <MermaidSvg source={plainText(props.block.code.rich_text)} />;\n  }\n  return <DefaultCode {...props} />;\n}\n\nfunction MermaidSvg({ source }: { source: string }) {\n  const reactId = useId();\n  const [svg, setSvg] = useState<string | null>(null);\n  useEffect(() => {\n    let cancelled = false;\n    (async () => {\n      try {\n        const mermaid = (await import(\"mermaid\")).default;\n        mermaid.initialize({ startOnLoad: false, securityLevel: \"loose\" });\n        const id = `mermaid-${reactId.replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n        const { svg } = await mermaid.render(id, source);\n        if (!cancelled) setSvg(svg);\n      } catch {\n        // mermaid 未インストール / render 失敗時は素のコード表示にフォールバック\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [source, reactId]);\n\n  if (!svg) {\n    return (\n      <pre className=\"overflow-x-auto rounded-lg bg-muted p-4 text-sm\">\n        <code>{source}</code>\n      </pre>\n    );\n  }\n  return (\n    <div\n      className=\"my-3 flex justify-center\"\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: mermaid 由来 SVG\n      dangerouslySetInnerHTML={{ __html: svg }}\n    />\n  );\n}\n"],"mappings":";;;;;AAUA,SAAS,UAAU,IAA0D;CAC3E,OAAO,GAAG,KAAK,MAAM,EAAE,UAAU,CAAC,CAAC,KAAK,EAAE;AAC5C;;;;;;;;;;;;AAaA,SAAgB,YACd,OACA;CACA,IAAI,MAAM,MAAM,KAAK,aAAa,WAChC,OAAO,oBAAC,YAAD,EAAY,QAAQ,UAAU,MAAM,MAAM,KAAK,SAAS,EAAI,CAAA;CAErE,OAAO,oBAACA,MAAD,EAAa,GAAI,MAAQ,CAAA;AAClC;AAEA,SAAS,WAAW,EAAE,UAA8B;CAClD,MAAM,UAAU,MAAM;CACtB,MAAM,CAAC,KAAK,UAAU,SAAwB,IAAI;CAClD,gBAAgB;EACd,IAAI,YAAY;EAChB,CAAC,YAAY;GACX,IAAI;IACF,MAAM,WAAW,MAAM,OAAO,WAAA,CAAY;IAC1C,QAAQ,WAAW;KAAE,aAAa;KAAO,eAAe;IAAQ,CAAC;IACjE,MAAM,KAAK,WAAW,QAAQ,QAAQ,mBAAmB,EAAE;IAC3D,MAAM,EAAE,QAAQ,MAAM,QAAQ,OAAO,IAAI,MAAM;IAC/C,IAAI,CAAC,WAAW,OAAO,GAAG;GAC5B,QAAQ,CAER;EACF,EAAA,CAAG;EACH,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,IAAI,CAAC,KACH,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA;CACjB,CAAA;CAGT,OACE,oBAAC,OAAD;EACE,WAAU;EAEV,yBAAyB,EAAE,QAAQ,IAAI;CACxC,CAAA;AAEL"}