@codearcade/markdown 1.0.1 → 1.2.0

package/README.md

@@ -1,19 +1,19 @@
-# @codearcade/mdx
+# @codearcade/markdown
 
 A modern, feature-rich Markdown renderer for React applications. Built for **speed**, **customizability**, and **developer experience**.
 
-Packed with **syntax highlighting**, **copy-to-clipboard** functionality, and seamless **dark mode** support out of the box.
+Packed with **dynamic syntax highlighting** (lazy-loaded for zero bloat), **copy-to-clipboard** functionality, and seamless **dark mode** support out of the box.
 
 ---
 
 ## ✨ Features
 
 - ⚡ **Powered by React Markdown**: Robust and reliable rendering.
+- 🚀 **Zero Initial Bloat**: Syntax highlighters and themes are dynamically lazy-loaded only when needed!
 - 🎨 **Theming Support**: First-class support for Light and Dark modes.
-- 💅 **Syntax Highlighting**: Integrated Prism syntax highlighting with **50+ themes** (Dracula, Atom Dark, Night Owl, etc.).
+- 💅 **Dual Engine Syntax Highlighting**: Choose between **Prism** or **Highlight.js** under the hood, with access to over 100+ combined themes.
 - 📋 **Copy Code**: Automatic "Copy to Clipboard" button for all code blocks.
 - 🍭 **GFM Support**: GitHub Flavored Markdown (tables, autolinks, strikethrough) enabled by default.
-- 🔌 **Plug & Play**: Works instantly with minimal configuration.
 
 ---
 
@@ -22,38 +22,39 @@ Packed with **syntax highlighting**, **copy-to-clipboard** functionality, and se
 Install the package via your preferred package manager:
 
 ```bash
-npm install @codearcade/mdx
+npm install @codearcade/markdown
 # or
-yarn add @codearcade/mdx
+yarn add @codearcade/markdown
 # or
-pnpm add @codearcade/mdx
+pnpm add @codearcade/markdown
 # or
-bun add @codearcade/mdx
+bun add @codearcade/markdown
 ```
 
 ## Usage
 
-Using `@codearcade/mdx` is simple. Import the component and pass your markdown string.
+Using `@codearcade/markdown` is simple. Import the component, select your engine (`prism` or `hljs`), and pass your markdown string.
 
 ### Basic Usage
 
 ```tsx
-import { MarkdownComponent } from "@codearcade/mdx";
+import { MarkdownComponent } from "@codearcade/markdown";
 
 const markdown = `
 # Hello World
 
 This is a **markdown** component.
 
-\`\`\`javascript
+```javascript
 console.log("Hello from CodeArcade!");
-\`\`\`
+```
 `;
 
 export default function App() {
   return (
     <div style={{ padding: 20 }}>
-      <MarkdownComponent markdownText={markdown} />
+      {/* The engine prop is required! Choose "prism" or "hljs" */}
+      <MarkdownComponent engine="prism" markdownText={markdown} />
     </div>
   );
 }
@@ -61,11 +62,11 @@ export default function App() {
 
 ### Dark Mode & Custom Themes
 
-Easily switch between light and dark modes, and customize the syntax highlighting theme for each mode.
+Easily switch between light and dark modes, and customize the syntax highlighting theme. Because this component is fully strongly-typed, your IDE will auto-complete the available themes based on the engine you select!
 
 ```tsx
 import { useState } from "react";
-import { MarkdownComponent } from "@codearcade/mdx";
+import { MarkdownComponent } from "@codearcade/markdown";
 
 export default function BlogPost() {
   const [isDarkMode, setIsDarkMode] = useState(false);
@@ -75,9 +76,10 @@ export default function BlogPost() {
       <button onClick={() => setIsDarkMode(!isDarkMode)}>Toggle Theme</button>
 
       <MarkdownComponent
-        markdownText={content}
+        engine="prism"
+        markdownText={`console.log('test')`}
         theme={isDarkMode ? "dark" : "light"}
-        // Customize syntax highlighting themes
+        // These will auto-complete to valid Prism themes!
         defaultMarkdownThemeLight="atomDark"
         defaultMarkdownThemeDark="dracula"
       />
@@ -91,23 +93,35 @@ export default function BlogPost() {
 ### `<MarkdownComponent />`
 
 | Prop | Type | Default | Description |
-|Text | | | |
+|---|---|---|---|
+| `engine` | `"prism" \| "hljs"` | **Required** | The syntax highlighting engine to power the code blocks. |
 | `markdownText` | `string` | **Required** | The raw markdown string to render. |
-| `theme` | `"light" \| "dark"` | `"light"` | Controls the rendering mode of the component. |
-| `defaultMarkdownThemeLight` | `MarkdownTheme` | `"a11yDark"` | Syntax highlighting theme to use when `theme` is `"light"`. |
-| `defaultMarkdownThemeDark` | `MarkdownTheme` | `"twilight"` | Syntax highlighting theme to use when `theme` is `"dark"`. |
+| `theme` | `"light" \| "dark"` | `"light"` | Controls the rendering mode of the surrounding component. |
+| `defaultMarkdownThemeLight` | `string` | `"a11yDark"` | Syntax highlighting theme to use when `theme` is `"light"`. Allowed strings change based on the `engine`. |
+| `defaultMarkdownThemeDark` | `string` | `"twilight"` (Prism) / `"vs2015"` (HLJS) | Syntax highlighting theme to use when `theme` is `"dark"`. Allowed strings change based on the `engine`. |
 
 ### Available Themes
 
-We support a wide range of Prism themes. You can import `prismStyleNames` to see the full list or use it to build a theme selector.
+We support a wide range of syntax highlighting themes. You can import the arrays directly if you want to build a theme-selector UI in your app!
+
+#### Prism Themes
 
 ```tsx
-import { prismStyleNames } from "@codearcade/mdx";
+import { prismStyleNames } from "@codearcade/markdown";
 
 console.log(prismStyleNames);
 // ["dracula", "atomDark", "nightOwl", "vs", "monokai", ...]
 ```
 
+#### Highlight.js Themes
+
+```tsx
+import { hljsStyleNames } from "@codearcade/markdown";
+
+console.log(hljsStyleNames);
+// ["atom-one-dark", "atom-one-light", "base16/darcula", "github-dark", "nord", ...]
+```
+
 ## License
 
-MIT © [CodeArcade](https://github.com/codearcade-io)
+MIT © [CodeArcade](https://github.com/codearcade-io)

package/dist/components/icons.d.ts

@@ -0,0 +1,3 @@
+declare const CheckMarkIcon: () => import("react/jsx-runtime").JSX.Element;
+declare const CopyIcon: () => import("react/jsx-runtime").JSX.Element;
+export { CheckMarkIcon, CopyIcon };

package/dist/components/markdown.d.ts

@@ -1,12 +1,18 @@
 import React from "react";
-declare const prismStyleNames: readonly ["a11yDark", "atomDark", "base16AteliersulphurpoolLight", "cb", "coldarkCold", "coldarkDark", "coyWithoutShadows", "coy", "darcula", "dark", "dracula", "duotoneDark", "duotoneEarth", "duotoneForest", "duotoneLight", "duotoneSea", "duotoneSpace", "funky", "ghcolors", "gruvboxDark", "gruvboxLight", "holiTheme", "hopscotch", "lucario", "materialDark", "materialLight", "materialOceanic", "nightOwl", "nord", "okaidia", "oneDark", "oneLight", "pojoaque", "prism", "shadesOfPurple", "solarizedDarkAtom", "solarizedlight", "synthwave84", "tomorrow", "twilight", "vs", "vscDarkPlus", "xonokai", "zTouch"];
-type MarkdownTheme = (typeof prismStyleNames)[number];
+import { HljsTheme, PrismTheme } from "../constants/theme";
 type Theme = "dark" | "light";
-interface MarkdownComponentProps {
+type MarkdownComponentProps = {
+    engine: "prism";
+    defaultMarkdownThemeLight?: PrismTheme;
+    theme?: Theme;
+    markdownText: string;
+    defaultMarkdownThemeDark?: PrismTheme;
+} | {
+    engine: "hljs";
+    defaultMarkdownThemeLight?: HljsTheme;
     markdownText: string;
     theme?: Theme;
-    defaultMarkdownThemeLight?: MarkdownTheme;
-    defaultMarkdownThemeDark?: MarkdownTheme;
-}
+    defaultMarkdownThemeDark?: HljsTheme;
+};
 declare const MarkdownComponent: React.FC<MarkdownComponentProps>;
-export { MarkdownComponent, prismStyleNames };
+export { MarkdownComponent };

package/dist/constants/theme.d.ts

@@ -0,0 +1,6 @@
+declare const prismStyleNames: readonly ["a11yDark", "atomDark", "base16AteliersulphurpoolLight", "cb", "coldarkCold", "coldarkDark", "coyWithoutShadows", "coy", "darcula", "dark", "dracula", "duotoneDark", "duotoneEarth", "duotoneForest", "duotoneLight", "duotoneSea", "duotoneSpace", "funky", "ghcolors", "gruvboxDark", "gruvboxLight", "holiTheme", "hopscotch", "lucario", "materialDark", "materialLight", "materialOceanic", "nightOwl", "nord", "okaidia", "oneDark", "oneLight", "pojoaque", "prism", "shadesOfPurple", "solarizedDarkAtom", "solarizedlight", "synthwave84", "tomorrow", "twilight", "vs", "vscDarkPlus", "xonokai", "zTouch"];
+declare const hljsStyleNames: readonly ["a11yDark", "a11yLight", "agate", "anOldHope", "androidstudio", "arduinoLight", "arta", "ascetic", "atelierCaveDark", "atelierCaveLight", "atelierDuneDark", "atelierDuneLight", "atelierEstuaryDark", "atelierEstuaryLight", "atelierForestDark", "atelierForestLight", "atelierHeathDark", "atelierHeathLight", "atelierLakesideDark", "atelierLakesideLight", "atelierPlateauDark", "atelierPlateauLight", "atelierSavannaDark", "atelierSavannaLight", "atelierSeasideDark", "atelierSeasideLight", "atelierSulphurpoolDark", "atelierSulphurpoolLight", "atomOneDarkReasonable", "atomOneDark", "atomOneLight", "brownPaper", "codepenEmbed", "colorBrewer", "darcula", "dark", "defaultStyle", "docco", "dracula", "far", "foundation", "githubGist", "github", "gml", "googlecode", "gradientDark", "grayscale", "gruvboxDark", "gruvboxLight", "hopscotch", "hybrid", "idea", "irBlack", "isblEditorDark", "isblEditorLight", "kimbieDark", "kimbieLight", "lightfair", "lioshi", "magula", "monoBlue", "monokaiSublime", "monokai", "nightOwl", "nnfxDark", "nnfx", "nord", "obsidian", "ocean", "paraisoDark", "paraisoLight", "pojoaque", "purebasic", "qtcreatorDark", "qtcreatorLight", "railscasts", "rainbow", "routeros", "schoolBook", "shadesOfPurple", "solarizedDark", "solarizedLight", "srcery", "stackoverflowDark", "stackoverflowLight", "sunburst", "tomorrowNightBlue", "tomorrowNightBright", "tomorrowNightEighties", "tomorrowNight", "tomorrow", "vs", "vs2015", "xcode", "xt256", "zenburn"];
+type PrismTheme = (typeof prismStyleNames)[number];
+type HljsTheme = (typeof hljsStyleNames)[number];
+export { prismStyleNames, hljsStyleNames };
+export type { PrismTheme, HljsTheme };

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from "./components/markdown";
+export * from "./constants/theme";

package/dist/index.js

@@ -11,7 +11,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/components/markdown.tsx
 import { useCallback, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import remarkGfm from "remark-gfm";
 
 // src/components/markdown.module.css
@@ -21,60 +20,13 @@ var markdown_module_default = {
   dark: "dark_A8U9fw"
 };
 
-// src/components/markdown.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-var prismStyleNames = [
-  "a11yDark",
-  "atomDark",
-  "base16AteliersulphurpoolLight",
-  "cb",
-  "coldarkCold",
-  "coldarkDark",
-  "coyWithoutShadows",
-  "coy",
-  "darcula",
-  "dark",
-  "dracula",
-  "duotoneDark",
-  "duotoneEarth",
-  "duotoneForest",
-  "duotoneLight",
-  "duotoneSea",
-  "duotoneSpace",
-  "funky",
-  "ghcolors",
-  "gruvboxDark",
-  "gruvboxLight",
-  "holiTheme",
-  "hopscotch",
-  "lucario",
-  "materialDark",
-  "materialLight",
-  "materialOceanic",
-  "nightOwl",
-  "nord",
-  "okaidia",
-  "oneDark",
-  "oneLight",
-  "pojoaque",
-  "prism",
-  "shadesOfPurple",
-  "solarizedDarkAtom",
-  "solarizedlight",
-  "synthwave84",
-  "tomorrow",
-  "twilight",
-  "vs",
-  "vscDarkPlus",
-  "xonokai",
-  "zTouch"
-];
+// src/components/icons.tsx
+import { jsx } from "react/jsx-runtime";
 var CheckMarkIcon = () => {
-  return /* @__PURE__ */ jsxDEV("svg", {
+  return /* @__PURE__ */ jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsxDEV("path", {
+    children: /* @__PURE__ */ jsx("path", {
       fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
@@ -85,11 +37,11 @@ var CheckMarkIcon = () => {
   }, undefined, false, undefined, this);
 };
 var CopyIcon = () => {
-  return /* @__PURE__ */ jsxDEV("svg", {
+  return /* @__PURE__ */ jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
     children: [
-      /* @__PURE__ */ jsxDEV("rect", {
+      /* @__PURE__ */ jsx("rect", {
         x: "128",
         y: "128",
         width: "336",
@@ -101,7 +53,7 @@ var CopyIcon = () => {
         "stroke-linejoin": "round",
         "stroke-width": "24"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("path", {
+      /* @__PURE__ */ jsx("path", {
         d: "M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24",
         fill: "none",
         stroke: "currentColor",
@@ -112,6 +64,10 @@ var CopyIcon = () => {
     ]
   }, undefined, true, undefined, this);
 };
+
+// src/components/markdown.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+"use client";
 var CopyToClipboard = ({ text }) => {
   const [isCopied, setIsCopied] = useState(false);
   const copyToClipboard = useCallback(async () => {
@@ -128,42 +84,69 @@ var CopyToClipboard = ({ text }) => {
       }, 2000);
     }
   }, [text, isCopied]);
-  return /* @__PURE__ */ jsxDEV("button", {
+  return /* @__PURE__ */ jsx2("button", {
     onClick: copyToClipboard,
     className: markdown_module_default.markdownAction,
     "aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard",
     children: [
-      isCopied ? /* @__PURE__ */ jsxDEV(CheckMarkIcon, {}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(CopyIcon, {}, undefined, false, undefined, this),
+      isCopied ? /* @__PURE__ */ jsx2(CheckMarkIcon, {}, undefined, false, undefined, this) : /* @__PURE__ */ jsx2(CopyIcon, {}, undefined, false, undefined, this),
       " ",
       isCopied ? "Copied" : "Copy"
     ]
   }, undefined, true, undefined, this);
 };
-var MarkdownComponent = ({
-  markdownText,
-  theme = "light",
-  defaultMarkdownThemeLight = "a11yDark",
-  defaultMarkdownThemeDark = "twilight"
-}) => {
+var MarkdownComponent = (props) => {
+  const { markdownText, theme = "light", engine = "prism" } = props;
   const [markdownTheme, setMarkdownTheme] = useState();
+  const [Highlighter, setHighlighter] = useState();
   useEffect(() => {
-    import("react-syntax-highlighter/dist/esm/styles/prism").then((module) => {
-      setMarkdownTheme(module[theme === "dark" ? defaultMarkdownThemeDark : defaultMarkdownThemeLight]);
-    });
-  }, [defaultMarkdownThemeLight, defaultMarkdownThemeDark, theme]);
-  return /* @__PURE__ */ jsxDEV("section", {
+    let isMounted = true;
+    const loadDependencies = async () => {
+      try {
+        let themeModule;
+        let highlighterModule;
+        let selectedThemeName;
+        if (engine === "hljs") {
+          const hljsProps = props;
+          selectedThemeName = theme === "dark" ? hljsProps.defaultMarkdownThemeDark ?? "vs2015" : hljsProps.defaultMarkdownThemeLight ?? "a11yDark";
+          [highlighterModule, themeModule] = await Promise.all([
+            import("react-syntax-highlighter"),
+            import("react-syntax-highlighter/dist/esm/styles/hljs")
+          ]);
+        } else {
+          const prismProps = props;
+          selectedThemeName = theme === "dark" ? prismProps.defaultMarkdownThemeDark ?? "twilight" : prismProps.defaultMarkdownThemeLight ?? "a11yDark";
+          [highlighterModule, themeModule] = await Promise.all([
+            import("react-syntax-highlighter/dist/esm/prism"),
+            import("react-syntax-highlighter/dist/esm/styles/prism")
+          ]);
+        }
+        if (isMounted) {
+          setHighlighter(() => highlighterModule.default);
+          setMarkdownTheme(themeModule[selectedThemeName]);
+        }
+      } catch (error) {
+        console.error("Failed to load syntax highlighter dependencies:", error);
+      }
+    };
+    loadDependencies();
+    return () => {
+      isMounted = false;
+    };
+  }, [engine, theme]);
+  return /* @__PURE__ */ jsx2("section", {
     className: `${markdown_module_default.markdownBody} ${theme}`,
-    children: /* @__PURE__ */ jsxDEV(ReactMarkdown, {
+    children: /* @__PURE__ */ jsx2(ReactMarkdown, {
       remarkPlugins: [remarkGfm],
       components: {
-        code(props) {
-          const { className, children, ref, ...rest } = props;
+        code(props2) {
+          const { className, children, ref, ...rest } = props2;
           const match = /language-(\w+)/.exec(className || "");
           const codeText = String(children).replace(/\n$/, "");
-          return match ? /* @__PURE__ */ jsxDEV("div", {
+          return match && Highlighter ? /* @__PURE__ */ jsx2("div", {
             style: { position: "relative" },
             children: [
-              /* @__PURE__ */ jsxDEV(SyntaxHighlighter, {
+              /* @__PURE__ */ jsx2(Highlighter, {
                 ...rest,
                 PreTag: "div",
                 ref,
@@ -172,11 +155,11 @@ var MarkdownComponent = ({
                 style: markdownTheme,
                 children: codeText
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(CopyToClipboard, {
+              /* @__PURE__ */ jsx2(CopyToClipboard, {
                 text: codeText
               }, undefined, false, undefined, this)
             ]
-          }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV("code", {
+          }, undefined, true, undefined, this) : /* @__PURE__ */ jsx2("code", {
             ...rest,
             className,
             children
@@ -187,9 +170,153 @@ var MarkdownComponent = ({
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 };
+// src/constants/theme.ts
+var prismStyleNames = [
+  "a11yDark",
+  "atomDark",
+  "base16AteliersulphurpoolLight",
+  "cb",
+  "coldarkCold",
+  "coldarkDark",
+  "coyWithoutShadows",
+  "coy",
+  "darcula",
+  "dark",
+  "dracula",
+  "duotoneDark",
+  "duotoneEarth",
+  "duotoneForest",
+  "duotoneLight",
+  "duotoneSea",
+  "duotoneSpace",
+  "funky",
+  "ghcolors",
+  "gruvboxDark",
+  "gruvboxLight",
+  "holiTheme",
+  "hopscotch",
+  "lucario",
+  "materialDark",
+  "materialLight",
+  "materialOceanic",
+  "nightOwl",
+  "nord",
+  "okaidia",
+  "oneDark",
+  "oneLight",
+  "pojoaque",
+  "prism",
+  "shadesOfPurple",
+  "solarizedDarkAtom",
+  "solarizedlight",
+  "synthwave84",
+  "tomorrow",
+  "twilight",
+  "vs",
+  "vscDarkPlus",
+  "xonokai",
+  "zTouch"
+];
+var hljsStyleNames = [
+  "a11yDark",
+  "a11yLight",
+  "agate",
+  "anOldHope",
+  "androidstudio",
+  "arduinoLight",
+  "arta",
+  "ascetic",
+  "atelierCaveDark",
+  "atelierCaveLight",
+  "atelierDuneDark",
+  "atelierDuneLight",
+  "atelierEstuaryDark",
+  "atelierEstuaryLight",
+  "atelierForestDark",
+  "atelierForestLight",
+  "atelierHeathDark",
+  "atelierHeathLight",
+  "atelierLakesideDark",
+  "atelierLakesideLight",
+  "atelierPlateauDark",
+  "atelierPlateauLight",
+  "atelierSavannaDark",
+  "atelierSavannaLight",
+  "atelierSeasideDark",
+  "atelierSeasideLight",
+  "atelierSulphurpoolDark",
+  "atelierSulphurpoolLight",
+  "atomOneDarkReasonable",
+  "atomOneDark",
+  "atomOneLight",
+  "brownPaper",
+  "codepenEmbed",
+  "colorBrewer",
+  "darcula",
+  "dark",
+  "defaultStyle",
+  "docco",
+  "dracula",
+  "far",
+  "foundation",
+  "githubGist",
+  "github",
+  "gml",
+  "googlecode",
+  "gradientDark",
+  "grayscale",
+  "gruvboxDark",
+  "gruvboxLight",
+  "hopscotch",
+  "hybrid",
+  "idea",
+  "irBlack",
+  "isblEditorDark",
+  "isblEditorLight",
+  "kimbieDark",
+  "kimbieLight",
+  "lightfair",
+  "lioshi",
+  "magula",
+  "monoBlue",
+  "monokaiSublime",
+  "monokai",
+  "nightOwl",
+  "nnfxDark",
+  "nnfx",
+  "nord",
+  "obsidian",
+  "ocean",
+  "paraisoDark",
+  "paraisoLight",
+  "pojoaque",
+  "purebasic",
+  "qtcreatorDark",
+  "qtcreatorLight",
+  "railscasts",
+  "rainbow",
+  "routeros",
+  "schoolBook",
+  "shadesOfPurple",
+  "solarizedDark",
+  "solarizedLight",
+  "srcery",
+  "stackoverflowDark",
+  "stackoverflowLight",
+  "sunburst",
+  "tomorrowNightBlue",
+  "tomorrowNightBright",
+  "tomorrowNightEighties",
+  "tomorrowNight",
+  "tomorrow",
+  "vs",
+  "vs2015",
+  "xcode",
+  "xt256",
+  "zenburn"
+];
 export {
   prismStyleNames,
+  hljsStyleNames,
   MarkdownComponent
 };
-
-//# debugId=06022BF521D3780764756E2164756E21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codearcade/markdown",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "dist/*.css"
   ],
   "scripts": {
-    "build": "bun ./builder.ts && bun run generate-types",
+    "build": "NODE_ENV=production && bun ./builder.ts && bun run generate-types",
     "prepublishOnly": "bun run build",
     "generate-types": "bunx tsc --emitDeclarationOnly --declaration --outDir dist",
     "clear": "rm -rf dist"

package/dist/index.js.map

@@ -1,10 +0,0 @@
-{
-  "version": 3,
-  "sources": ["..\\src\\components\\markdown.tsx"],
-  "sourcesContent": [
-    "\"use client\";\r\n\r\nimport type { Ref } from \"react\";\r\nimport React, { useCallback, useEffect, useState } from \"react\";\r\nimport ReactMarkdown from \"react-markdown\";\r\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\r\nimport remarkGfm from \"remark-gfm\";\r\n\r\n// @ts-ignore\r\nimport styles from \"./markdown.module.css\";\r\n\r\nconst prismStyleNames = [\r\n  \"a11yDark\",\r\n  \"atomDark\",\r\n  \"base16AteliersulphurpoolLight\",\r\n  \"cb\",\r\n  \"coldarkCold\",\r\n  \"coldarkDark\",\r\n  \"coyWithoutShadows\",\r\n  \"coy\",\r\n  \"darcula\",\r\n  \"dark\",\r\n  \"dracula\",\r\n  \"duotoneDark\",\r\n  \"duotoneEarth\",\r\n  \"duotoneForest\",\r\n  \"duotoneLight\",\r\n  \"duotoneSea\",\r\n  \"duotoneSpace\",\r\n  \"funky\",\r\n  \"ghcolors\",\r\n  \"gruvboxDark\",\r\n  \"gruvboxLight\",\r\n  \"holiTheme\",\r\n  \"hopscotch\",\r\n  \"lucario\",\r\n  \"materialDark\",\r\n  \"materialLight\",\r\n  \"materialOceanic\",\r\n  \"nightOwl\",\r\n  \"nord\",\r\n  \"okaidia\",\r\n  \"oneDark\",\r\n  \"oneLight\",\r\n  \"pojoaque\",\r\n  \"prism\",\r\n  \"shadesOfPurple\",\r\n  \"solarizedDarkAtom\",\r\n  \"solarizedlight\",\r\n  \"synthwave84\",\r\n  \"tomorrow\",\r\n  \"twilight\",\r\n  \"vs\",\r\n  \"vscDarkPlus\",\r\n  \"xonokai\",\r\n  \"zTouch\",\r\n] as const;\r\n\r\ntype MarkdownTheme = (typeof prismStyleNames)[number];\r\n\r\nconst CheckMarkIcon = () => {\r\n  return (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n      <path\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"24\"\r\n        d=\"M416 128L192 384l-96-96\"\r\n      />\r\n    </svg>\r\n  );\r\n};\r\n\r\nconst CopyIcon = () => {\r\n  return (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n      <rect\r\n        x=\"128\"\r\n        y=\"128\"\r\n        width=\"336\"\r\n        height=\"336\"\r\n        rx=\"57\"\r\n        ry=\"57\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"24\"\r\n      />\r\n      <path\r\n        d=\"M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"24\"\r\n      />\r\n    </svg>\r\n  );\r\n};\r\n\r\nconst CopyToClipboard = ({ text }: { text: string }) => {\r\n  const [isCopied, setIsCopied] = useState(false);\r\n\r\n  const copyToClipboard = useCallback(async () => {\r\n    if (isCopied) return;\r\n\r\n    try {\r\n      await navigator.clipboard.writeText(text);\r\n      setIsCopied(true);\r\n    } catch (err) {\r\n      console.error(\"Failed to copy text: \", err);\r\n      // Optionally, show a user-friendly error message\r\n    } finally {\r\n      setTimeout(() => {\r\n        setIsCopied(false);\r\n      }, 2000);\r\n    }\r\n  }, [text, isCopied]);\r\n\r\n  return (\r\n    <button\r\n      onClick={copyToClipboard}\r\n      className={styles.markdownAction}\r\n      aria-label={isCopied ? \"Copied to clipboard\" : \"Copy to clipboard\"}\r\n    >\r\n      {isCopied ? <CheckMarkIcon /> : <CopyIcon />}{\" \"}\r\n      {isCopied ? \"Copied\" : \"Copy\"}\r\n    </button>\r\n  );\r\n};\r\n\r\ntype Theme = \"dark\" | \"light\";\r\n\r\ninterface MarkdownComponentProps {\r\n  markdownText: string;\r\n  theme?: Theme;\r\n  defaultMarkdownThemeLight?: MarkdownTheme;\r\n  defaultMarkdownThemeDark?: MarkdownTheme;\r\n}\r\n\r\ntype SyntaxHighlighterStyle = { [key: string]: React.CSSProperties };\r\n\r\nconst MarkdownComponent: React.FC<MarkdownComponentProps> = ({\r\n  markdownText,\r\n  theme = \"light\",\r\n  defaultMarkdownThemeLight = \"a11yDark\",\r\n  defaultMarkdownThemeDark = \"twilight\",\r\n}) => {\r\n  const [markdownTheme, setMarkdownTheme] = useState<SyntaxHighlighterStyle>();\r\n\r\n  useEffect(() => {\r\n    import(\"react-syntax-highlighter/dist/esm/styles/prism\").then((module) => {\r\n      setMarkdownTheme(\r\n        module[\r\n          theme === \"dark\"\r\n            ? defaultMarkdownThemeDark\r\n            : defaultMarkdownThemeLight\r\n        ],\r\n      );\r\n    });\r\n  }, [defaultMarkdownThemeLight, defaultMarkdownThemeDark, theme]);\r\n\r\n  return (\r\n    <section className={`${styles.markdownBody} ${theme}`}>\r\n      <ReactMarkdown\r\n        remarkPlugins={[remarkGfm]}\r\n        components={{\r\n          code(props) {\r\n            const { className, children, ref, ...rest } = props;\r\n            const match = /language-(\\w+)/.exec(className || \"\");\r\n            const codeText = String(children).replace(/\\n$/, \"\");\r\n            return match ? (\r\n              <div style={{ position: \"relative\" }}>\r\n                <SyntaxHighlighter\r\n                  {...rest}\r\n                  PreTag=\"div\"\r\n                  ref={ref as Ref<SyntaxHighlighter>}\r\n                  customStyle={{ borderRadius: \"1rem\" }}\r\n                  language={match[1]}\r\n                  style={markdownTheme}\r\n                >\r\n                  {codeText}\r\n                </SyntaxHighlighter>\r\n                <CopyToClipboard text={codeText} />\r\n              </div>\r\n            ) : (\r\n              <code {...rest} className={className}>\r\n                {children}\r\n              </code>\r\n            );\r\n          },\r\n        }}\r\n      >\r\n        {markdownText}\r\n      </ReactMarkdown>\r\n    </section>\r\n  );\r\n};\r\n\r\nexport { MarkdownComponent, prismStyleNames };\r\n"
-  ],
-  "mappings": "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",
-  "debugId": "06022BF521D3780764756E2164756E21",
-  "names": []
-}