laif-ds 0.2.77 → 0.2.79

package/dist/CHANGELOG.md

@@ -5,6 +5,25 @@ All notable technical changes to the laif-ds core will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [laif-ds@0.2.79]
+
+### 🚀 Added
+
+- **MarkdownRenderer**: Added support for raw HTML rendering via `rehype-raw`, including native `<u>...</u>` underline tags
+- **Storybook**: Added dedicated `MarkdownRenderer` stories with underline and full-formatting examples
+
+### 🔧 Changed
+
+- **AppEditor**: Switched external underline markdown format from `++text++` to standard HTML `<u>text</u>` while keeping internal conversion compatibility
+- **AppEditor**: Improved editor layout flexibility with `wrpClassName` and updated content container sizing behavior
+- **Documentation and Stories**: Updated `AppEditor` docs and stories to reflect `<u>...</u>` underline usage
+
+## [laif-ds@0.2.78]
+
+### 🐛 Fixed
+
+- **AppEditor**: Fixed missing underline text save in the component output
+
 ## [laif-ds@0.2.77]
 
 ### 🚀 Added

package/dist/_virtual/index3.js

@@ -1,8 +1,8 @@
 "use client";
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/eventemitter3/index2.js";
-var r = t();
-const m = /* @__PURE__ */ e(r);
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as e } from "../node_modules/style-to-js/cjs/index.js";
+var t = e();
+const a = /* @__PURE__ */ r(t);
 export {
-  m as default
+  a as default
 };

package/dist/_virtual/index4.js

@@ -1,8 +1,8 @@
 "use client";
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as e } from "../node_modules/style-to-js/cjs/index.js";
-var t = e();
-const a = /* @__PURE__ */ r(t);
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/extend/index.js";
+var t = r();
+const x = /* @__PURE__ */ e(t);
 export {
-  a as default
+  x as default
 };

package/dist/_virtual/index5.js

@@ -1,8 +1,8 @@
 "use client";
 import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/extend/index.js";
-var t = r();
-const x = /* @__PURE__ */ e(t);
+import { __require as t } from "../node_modules/eventemitter3/index2.js";
+var r = t();
+const m = /* @__PURE__ */ e(r);
 export {
-  x as default
+  m as default
 };

package/dist/_virtual/index6.js

@@ -1,5 +1,5 @@
 "use client";
-var e = { exports: {} };
+var e = {};
 export {
-  e as __module
+  e as __exports
 };

package/dist/_virtual/index7.js

@@ -1,5 +1,5 @@
 "use client";
-var e = {};
+var e = { exports: {} };
 export {
-  e as __exports
+  e as __module
 };

package/dist/agent-docs/adoption-report.json

@@ -1,12 +1,12 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-03-24T15:46:53.964Z",
+  "generatedAt": "2026-04-01T11:02:03.946Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.77"
+    "version": "0.2.79"
   },
   "summary": {
-    "scannedFiles": 393,
+    "scannedFiles": 394,
     "deprecatedComponentsCount": 2,
     "deprecatedComponentsUsedCount": 0,
     "componentsWithoutExamplesCount": 5,

package/dist/agent-docs/components/AppEditor.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-Rich text editor powered by Lexical with optional Markdown sync. Supports configurable toolbars (block format, font format, history), clear action, and character counter.
+Rich text editor powered by Lexical with optional Markdown sync. Supports configurable toolbars (block format, font format, history), clear action, character counter, and extended Markdown syntax including underline support.
 
 ---
 
@@ -23,14 +23,16 @@ Rich text editor powered by Lexical with optional Markdown sync. Supports config
 ## Behavior
 
 - **Markdown sync**: When `onlyMarkdown=true`, initializes from Markdown and emits Markdown on every change.
+- **Extended Markdown**: Supports standard Markdown plus underline syntax using `<u>text</u>` (e.g., `<u>underlined text</u>`).
 - **Toolbars**:
   - `history`: undo/redo toolbar.
-  - `block-format`: heading levels, list types, quote.
-  - `font-format`: bold/italic/underline/strikethrough.
+  - `block-format`: heading levels (h1-h3), numbered/bulleted/check lists, blockquote.
+  - `font-format`: bold, italic, underline, strikethrough, inline code.
 - **Plugins**:
   - `clear`: clear actions in the footer.
   - `counter`: UTF-16 character counter in the footer.
 - **Editing**: Autosave via `onMarkdownEdit`. Keyboard navigation and selection per Lexical defaults.
+- **Markdown Features**: Full support for headings, lists, quotes, links, inline code, bold, italic, strikethrough, and custom underline syntax.
 
 ---
 
@@ -69,7 +71,7 @@ import * as React from "react";
 import { AppEditor } from "laif-ds";
 
 export function MarkdownDefault() {
-  const initial = "**Titolo** con testo in markdown";
+  const initial = "**Titolo** con testo in <u>markdown</u> e *corsivo*";
   const [md, setMd] = React.useState(initial);
   return (
     <AppEditor
@@ -81,10 +83,31 @@ export function MarkdownDefault() {
 }
 ```
 
+### Underline Support
+
+```tsx
+import * as React from "react";
+import { AppEditor } from "laif-ds";
+
+export function UnderlineExample() {
+  const initial = "Testo normale <u>testo sottolineato</u> altro normale";
+  const [md, setMd] = React.useState(initial);
+  return (
+    <AppEditor
+      defaultValue={initial}
+      onMarkdownEdit={setMd}
+      toolbars={["font-format"]}
+    />
+  );
+}
+```
+
 ---
 
 ## Notes
 
-- **Sizing**: Control height via `className` (e.g., `h-96`).
+- **Sizing**: Control height via `className` (e.g., `h-96`). Default height is `h-72`.
 - **Performance**: Prefer Markdown mode for content pipelines that store Markdown; use `onlyMarkdown=false` for plain text initialization.
 - **Accessibility**: Toolbar buttons and editor area follow Lexical best practices.
+- **Underline Syntax**: Uses `<u>text</u>` HTML tags for underline, which is standard HTML and natively supported by both this component and `MarkdownRenderer` via `rehype-raw`.
+- **Theme**: Uses design system tokens for consistent styling with `border-d-border`, `bg-d-background`, etc.

package/dist/agent-docs/manifest.json

@@ -1,9 +1,9 @@
 {
   "schemaVersion": "1.1.0",
-  "generatedAt": "2026-03-24T15:46:53.701Z",
+  "generatedAt": "2026-04-01T11:02:03.665Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.77"
+    "version": "0.2.79"
   },
   "stats": {
     "documentedComponentCount": 92,
@@ -531,7 +531,8 @@
         "hasExamples": true,
         "exampleTitles": [
           "Full Toolbar + Plugins",
-          "Markdown Default Value"
+          "Markdown Default Value",
+          "Underline Support"
         ],
         "controlledPattern": "likely-controlled",
         "requiredProps": []
@@ -6058,5 +6059,5 @@
       ]
     }
   ],
-  "checksum": "04503a20ecd4bab54c8394f25ac6f42427d60e457070009b8248a22c8747a5de"
+  "checksum": "405eb253ef5b553303bd5f6005a1395f86f08f55c627c8c96046719fcf78a9ad"
 }

package/dist/components/editor/editor-ui/content-editable.js

@@ -1,20 +1,27 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
-import { ContentEditable as l } from "../../../node_modules/@lexical/react/LexicalContentEditable.prod.js";
-function a({
+import { ContentEditable as r } from "../../../node_modules/@lexical/react/LexicalContentEditable.prod.js";
+import { cn as o } from "../../../lib/utils.js";
+function s({
   placeholder: e,
-  className: o,
-  placeholderClassName: n
+  className: n,
+  placeholderClassName: l
 }) {
   return /* @__PURE__ */ t(
-    l,
+    r,
     {
-      className: o ?? "ContentEditable__root relative block min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none",
+      className: o(
+        "ContentEditable__root relative block overflow-auto px-8 py-4 focus:outline-none",
+        n
+      ),
       "aria-placeholder": e,
       placeholder: /* @__PURE__ */ t(
         "div",
         {
-          className: n ?? "text-muted-foreground pointer-events-none absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis select-none",
+          className: o(
+            "text-muted-foreground pointer-events-none absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis select-none",
+            l
+          ),
           children: e
         }
       )
@@ -22,5 +29,5 @@ function a({
   );
 }
 export {
-  a as ContentEditable
+  s as ContentEditable
 };

package/dist/components/ui/app-editor.js

@@ -1,150 +1,169 @@
 "use client";
-import { jsx as r, jsxs as t, Fragment as s } from "react/jsx-runtime";
-import { ListNode as w, ListItemNode as L } from "../../node_modules/@lexical/list/LexicalList.prod.js";
-import { $convertToMarkdownString as S, $convertFromMarkdownString as T, TRANSFORMERS as C } from "../../node_modules/@lexical/markdown/LexicalMarkdown.prod.js";
+import { jsx as r, jsxs as e, Fragment as s } from "react/jsx-runtime";
+import { ListNode as S, ListItemNode as T } from "../../node_modules/@lexical/list/LexicalList.prod.js";
+import { $convertToMarkdownString as L, $convertFromMarkdownString as k, TRANSFORMERS as A } from "../../node_modules/@lexical/markdown/LexicalMarkdown.prod.js";
 import { CheckListPlugin as j } from "../../node_modules/@lexical/react/LexicalCheckListPlugin.prod.js";
-import { ClearEditorPlugin as A } from "../../node_modules/@lexical/react/LexicalClearEditorPlugin.prod.js";
-import { LexicalComposer as B } from "../../node_modules/@lexical/react/LexicalComposer.prod.js";
-import { useLexicalComposerContext as H } from "../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
-import { LexicalErrorBoundary as R } from "../../node_modules/@lexical/react/LexicalErrorBoundary.prod.js";
-import { HistoryPlugin as $ } from "../../node_modules/@lexical/react/LexicalHistoryPlugin.prod.js";
-import { ListPlugin as O } from "../../node_modules/@lexical/react/LexicalListPlugin.prod.js";
-import { OnChangePlugin as z } from "../../node_modules/@lexical/react/LexicalOnChangePlugin.prod.js";
-import { RichTextPlugin as D } from "../../node_modules/@lexical/react/LexicalRichTextPlugin.prod.js";
-import { HeadingNode as I, QuoteNode as M } from "../../node_modules/@lexical/rich-text/LexicalRichText.prod.js";
-import { ParagraphNode as d, TextNode as p, $getRoot as f } from "../../node_modules/lexical/Lexical.prod.js";
-import { useState as Q, useEffect as _ } from "react";
-import { ContentEditable as J } from "../editor/editor-ui/content-editable.js";
-import { ActionsPlugin as U } from "../editor/plugins/actions/actions-plugin.js";
-import { ClearEditorActionPlugin as q } from "../editor/plugins/actions/clear-editor-plugin.js";
-import { CounterCharacterPlugin as G } from "../editor/plugins/actions/counter-character-plugin.js";
-import { FormatBulletedList as K } from "../editor/plugins/toolbar/block-format/format-bulleted-list.js";
-import { FormatCheckList as W } from "../editor/plugins/toolbar/block-format/format-check-list.js";
-import { FormatHeading as X } from "../editor/plugins/toolbar/block-format/format-heading.js";
-import { FormatNumberedList as Y } from "../editor/plugins/toolbar/block-format/format-numbered-list.js";
-import { FormatParagraph as Z } from "../editor/plugins/toolbar/block-format/format-paragraph.js";
-import { FormatQuote as V } from "../editor/plugins/toolbar/block-format/format-quote.js";
-import { BlockFormatDropDown as rr } from "../editor/plugins/toolbar/block-format-toolbar-plugin.js";
+import { ClearEditorPlugin as O } from "../../node_modules/@lexical/react/LexicalClearEditorPlugin.prod.js";
+import { LexicalComposer as $ } from "../../node_modules/@lexical/react/LexicalComposer.prod.js";
+import { useLexicalComposerContext as B } from "../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
+import { LexicalErrorBoundary as D } from "../../node_modules/@lexical/react/LexicalErrorBoundary.prod.js";
+import { HistoryPlugin as H } from "../../node_modules/@lexical/react/LexicalHistoryPlugin.prod.js";
+import { ListPlugin as I } from "../../node_modules/@lexical/react/LexicalListPlugin.prod.js";
+import { OnChangePlugin as M } from "../../node_modules/@lexical/react/LexicalOnChangePlugin.prod.js";
+import { RichTextPlugin as U } from "../../node_modules/@lexical/react/LexicalRichTextPlugin.prod.js";
+import { HeadingNode as z, QuoteNode as Q } from "../../node_modules/@lexical/rich-text/LexicalRichText.prod.js";
+import { ParagraphNode as d, TextNode as f, $getRoot as p } from "../../node_modules/lexical/Lexical.prod.js";
+import { useState as _, useEffect as J } from "react";
+import { ContentEditable as q } from "../editor/editor-ui/content-editable.js";
+import { ActionsPlugin as G } from "../editor/plugins/actions/actions-plugin.js";
+import { ClearEditorActionPlugin as K } from "../editor/plugins/actions/clear-editor-plugin.js";
+import { CounterCharacterPlugin as W } from "../editor/plugins/actions/counter-character-plugin.js";
+import { FormatBulletedList as X } from "../editor/plugins/toolbar/block-format/format-bulleted-list.js";
+import { FormatCheckList as Y } from "../editor/plugins/toolbar/block-format/format-check-list.js";
+import { FormatHeading as Z } from "../editor/plugins/toolbar/block-format/format-heading.js";
+import { FormatNumberedList as V } from "../editor/plugins/toolbar/block-format/format-numbered-list.js";
+import { FormatParagraph as rr } from "../editor/plugins/toolbar/block-format/format-paragraph.js";
+import { FormatQuote as or } from "../editor/plugins/toolbar/block-format/format-quote.js";
+import { BlockFormatDropDown as er } from "../editor/plugins/toolbar/block-format-toolbar-plugin.js";
 import { FontFormatToolbarPlugin as l } from "../editor/plugins/toolbar/font-format-toolbar-plugin.js";
 import { ToolbarPlugin as c } from "../editor/plugins/toolbar/toolbar-plugin.js";
-import { editorTheme as or } from "../editor/themes/editor-theme.js";
-import { TooltipProvider as tr } from "./tooltip.js";
-import { HistoryToolbarPlugin as er } from "../editor/plugins/toolbar/history-toolbar-plugin.js";
-const ir = "Start typing...";
-function nr({
+import { editorTheme as tr } from "../editor/themes/editor-theme.js";
+import { TooltipProvider as ir } from "./tooltip.js";
+import { HistoryToolbarPlugin as nr } from "../editor/plugins/toolbar/history-toolbar-plugin.js";
+import { cn as ar } from "../../lib/utils.js";
+const lr = "Start typing...", mr = {
+  format: ["underline"],
+  tag: "++",
+  type: "text-format"
+}, v = [
+  ...A,
+  mr
+], sr = (o) => o.replace(/<u>(.*?)<\/u>/g, "++$1++"), cr = (o) => o.replace(/\+\+(.+?)\+\+/g, "<u>$1</u>");
+function dr({
   defaultValue: o,
   onlyMarkdown: i
 }) {
-  const [n] = H();
-  return _(() => {
+  const [n] = B();
+  return J(() => {
     o && n.update(() => {
-      i ? T(o, C) : f().append(
-        new d().append(new p(o))
+      i ? k(
+        sr(o),
+        v
+      ) : p().append(
+        new d().append(new f(o))
       );
-      const a = f();
+      const a = p();
       (a.getFirstChild() ?? a).selectStart();
     });
   }, [n, o, i]), null;
 }
-function Or({
+function _r({
   defaultValue: o,
   onMarkdownEdit: i,
   plugins: n = [],
   toolbars: a = [],
-  placeholder: N = ir,
+  placeholder: F = lr,
   onlyMarkdown: h = !0,
-  className: F = "overflow-hidden rounded-lg border border-d-border"
+  className: C = "rounded-lg border border-d-border",
+  wrpClassName: E = ""
 }) {
-  const [, P] = Q(null), y = {
+  const [, P] = _(null), w = {
     namespace: "AppEditor",
-    theme: or,
+    theme: tr,
     nodes: [
-      I,
+      z,
       d,
-      p,
-      M,
-      w,
-      L
+      f,
+      Q,
+      S,
+      T
     ],
-    onError: (e) => {
-      console.error(e);
+    onError: (t) => {
+      console.error(t);
     },
     ...o && !h ? {
       editorState: () => {
-        f().append(
-          new d().append(new p(o))
+        p().append(
+          new d().append(new f(o))
         );
       }
     } : {}
-  }, u = (e) => n.includes(e), m = (e) => a.includes(e), g = u("clear"), v = u("counter"), b = m("block-format"), E = m("font-format"), x = m("history");
-  return /* @__PURE__ */ r("div", { className: "bg-d-background", children: /* @__PURE__ */ r(B, { initialConfig: y, children: /* @__PURE__ */ t(tr, { children: [
+  }, u = (t) => n.includes(t), m = (t) => a.includes(t), g = u("clear"), x = u("counter"), b = m("block-format"), y = m("font-format"), N = m("history");
+  return /* @__PURE__ */ r("div", { className: ar("bg-d-background flex h-96 flex-col", E), children: /* @__PURE__ */ r($, { initialConfig: w, children: /* @__PURE__ */ e(ir, { children: [
     o && /* @__PURE__ */ r(
-      nr,
+      dr,
       {
         defaultValue: o,
         onlyMarkdown: h
       }
     ),
-    /* @__PURE__ */ t("div", { className: "border-d-border flex items-center border-b", children: [
-      x && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ r(er, {}) }) }),
-      b && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ t(rr, { children: [
-        /* @__PURE__ */ r(Z, {}),
-        /* @__PURE__ */ r(X, { levels: ["h1", "h2", "h3"] }),
+    /* @__PURE__ */ e("div", { className: "border-d-border flex items-center border-b", children: [
+      N && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ r(nr, {}) }) }),
+      b && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ e(er, { children: [
+        /* @__PURE__ */ r(rr, {}),
+        /* @__PURE__ */ r(Z, { levels: ["h1", "h2", "h3"] }),
+        /* @__PURE__ */ r(V, {}),
+        /* @__PURE__ */ r(X, {}),
         /* @__PURE__ */ r(Y, {}),
-        /* @__PURE__ */ r(K, {}),
-        /* @__PURE__ */ r(W, {}),
-        /* @__PURE__ */ r(V, {})
+        /* @__PURE__ */ r(or, {})
       ] }) }) }) }),
-      E && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ t("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: [
+      y && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ e("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: [
         /* @__PURE__ */ r(l, { format: "bold" }),
         /* @__PURE__ */ r(l, { format: "italic" }),
         /* @__PURE__ */ r(l, { format: "underline" }),
         /* @__PURE__ */ r(l, { format: "strikethrough" })
       ] }) })
     ] }),
-    /* @__PURE__ */ t("div", { className: "relative", children: [
-      x && /* @__PURE__ */ r($, {}),
+    /* @__PURE__ */ e("div", { className: "relative flex min-h-0 w-full flex-1 flex-col", children: [
+      N && /* @__PURE__ */ r(H, {}),
       /* @__PURE__ */ r(
-        D,
+        U,
         {
-          ErrorBoundary: R,
-          contentEditable: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r("div", { ref: P, children: /* @__PURE__ */ r(
-            J,
+          ErrorBoundary: D,
+          contentEditable: /* @__PURE__ */ r(
+            "div",
             {
-              placeholder: N,
-              className: `ContentEditable__root relative block h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none ${F}`
+              ref: P,
+              className: "flex min-h-0 w-full flex-1 overflow-auto",
+              children: /* @__PURE__ */ r(
+                q,
+                {
+                  placeholder: F,
+                  className: `border-d-border w-full rounded-none border-b ${C}`
+                }
+              )
             }
-          ) }) })
+          )
         }
       ),
-      b && /* @__PURE__ */ t(s, { children: [
-        /* @__PURE__ */ r(O, {}),
+      b && /* @__PURE__ */ e(s, { children: [
+        /* @__PURE__ */ r(I, {}),
         /* @__PURE__ */ r(j, {})
       ] }),
-      (g || v) && /* @__PURE__ */ r(U, { children: /* @__PURE__ */ t("div", { className: "clear-both flex items-center justify-between gap-2 p-1", children: [
+      (g || x) && /* @__PURE__ */ r(G, { children: /* @__PURE__ */ e("div", { className: "clear-both flex items-center justify-between gap-2 p-1", children: [
         /* @__PURE__ */ r("div", { className: "flex flex-1 justify-start" }),
-        /* @__PURE__ */ r("div", { children: v && /* @__PURE__ */ r(G, { charset: "UTF-16" }) }),
-        /* @__PURE__ */ r("div", { className: "flex flex-1 justify-end gap-2", children: g && /* @__PURE__ */ t(s, { children: [
-          /* @__PURE__ */ r(q, {}),
-          /* @__PURE__ */ r(A, {})
+        /* @__PURE__ */ r("div", { children: x && /* @__PURE__ */ r(W, { charset: "UTF-16" }) }),
+        /* @__PURE__ */ r("div", { className: "flex flex-1 justify-end gap-2", children: g && /* @__PURE__ */ e(s, { children: [
+          /* @__PURE__ */ r(K, {}),
+          /* @__PURE__ */ r(O, {})
         ] }) })
       ] }) })
     ] }),
     /* @__PURE__ */ r(
-      z,
+      M,
       {
         ignoreSelectionChange: !0,
-        onChange: (e) => {
+        onChange: (t) => {
           if (!i) return;
-          const k = e.read(
-            () => S(C)
+          const R = t.read(
+            () => L(v)
           );
-          i(k);
+          i(cr(R));
         }
       }
     )
   ] }) }) });
 }
 export {
-  Or as AppEditor
+  _r as AppEditor
 };

package/dist/components/ui/markdown-renderer.js

@@ -1,30 +1,39 @@
 "use client";
-import { jsx as o, jsxs as p, Fragment as y } from "react/jsx-runtime";
+import { jsx as t, jsxs as p, Fragment as y } from "react/jsx-runtime";
 import g, { Suspense as x } from "react";
 import { CopyButton as k } from "./copy-button.js";
 import { cn as m } from "../../lib/utils.js";
-import { Markdown as N } from "../../node_modules/react-markdown/lib/index.js";
+import { Markdown as w } from "../../node_modules/react-markdown/lib/index.js";
+import N from "../../node_modules/rehype-raw/lib/index.js";
 import v from "../../node_modules/remark-gfm/lib/index.js";
-function q({ children: e }) {
-  return /* @__PURE__ */ o("div", { className: "space-y-3", children: /* @__PURE__ */ o(N, { remarkPlugins: [v], components: C, children: e }) });
+function B({ children: e }) {
+  return /* @__PURE__ */ t("div", { className: "space-y-3", children: /* @__PURE__ */ t(
+    w,
+    {
+      remarkPlugins: [v],
+      rehypePlugins: [N],
+      components: S,
+      children: e
+    }
+  ) });
 }
-const h = g.memo(
-  async ({ children: e, language: t, ...n }) => {
+const u = g.memo(
+  async ({ children: e, language: o, ...n }) => {
     const { codeToTokens: i, bundledLanguages: d } = await import("../../node_modules/shiki/dist/index.js");
-    if (!(t in d))
-      return /* @__PURE__ */ o("pre", { ...n, children: e });
+    if (!(o in d))
+      return /* @__PURE__ */ t("pre", { ...n, children: e });
     const { tokens: l } = await i(e, {
-      lang: t,
+      lang: o,
       defaultColor: !1,
       themes: {
         light: "github-light",
         dark: "github-dark"
       }
     });
-    return /* @__PURE__ */ o("pre", { ...n, children: /* @__PURE__ */ o("code", { children: l.map((u, c) => /* @__PURE__ */ p(y, { children: [
-      /* @__PURE__ */ o("span", { children: u.map((a, b) => {
+    return /* @__PURE__ */ t("pre", { ...n, children: /* @__PURE__ */ t("code", { children: l.map((h, c) => /* @__PURE__ */ p(y, { children: [
+      /* @__PURE__ */ t("span", { children: h.map((a, b) => {
         const f = typeof a.htmlStyle == "string" ? void 0 : a.htmlStyle;
-        return /* @__PURE__ */ o(
+        return /* @__PURE__ */ t(
           "span",
           {
             className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg",
@@ -39,53 +48,54 @@ const h = g.memo(
     ] })) }) });
   }
 );
-h.displayName = "HighlightedCode";
-const w = ({
+u.displayName = "HighlightedCode";
+const C = ({
   children: e,
-  className: t,
+  className: o,
   language: n,
   ...i
 }) => {
   const d = typeof e == "string" ? e : s(e), l = m(
     "overflow-x-scroll rounded-md border  border-d-border bg-d-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
-    t
+    o
   );
   return /* @__PURE__ */ p("div", { className: "group/code relative mb-4", children: [
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ t(
       x,
       {
-        fallback: /* @__PURE__ */ o("pre", { className: l, ...i, children: e }),
-        children: /* @__PURE__ */ o(h, { language: n, className: l, children: d })
+        fallback: /* @__PURE__ */ t("pre", { className: l, ...i, children: e }),
+        children: /* @__PURE__ */ t(u, { language: n, className: l, children: d })
       }
     ),
-    /* @__PURE__ */ o("div", { className: "invisible absolute top-2 right-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ o(k, { content: d, copyMessage: "Copied code to clipboard" }) })
+    /* @__PURE__ */ t("div", { className: "invisible absolute top-2 right-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ t(k, { content: d, copyMessage: "Copied code to clipboard" }) })
   ] });
 };
 function s(e) {
   if (typeof e == "string")
     return e;
   if (g.isValidElement(e) && e.props && typeof e.props == "object" && "children" in e.props) {
-    const t = e.props.children;
-    return t && typeof t == "object" && Array.isArray(t) ? t.map((n) => s(n)).join("") : s(t);
+    const o = e.props.children;
+    return o && typeof o == "object" && Array.isArray(o) ? o.map((n) => s(n)).join("") : s(o);
   }
   return "";
 }
-const C = {
+const S = {
   h1: r("h1", "text-2xl font-semibold"),
   h2: r("h2", "font-semibold text-xl"),
   h3: r("h3", "font-semibold text-lg"),
   h4: r("h4", "font-semibold text-base"),
   h5: r("h5", "font-medium"),
   strong: r("strong", "font-semibold"),
+  u: r("u", "underline"),
   a: r("a", "text-d-primary underline underline-offset-2"),
   blockquote: r("blockquote", "border-l-2 border-d-primary pl-4"),
   code: ({
     children: e,
-    className: t,
+    className: o,
     ...n
   }) => {
-    const i = /language-(\w+)/.exec(t || "");
-    return i ? /* @__PURE__ */ o(w, { className: t, language: i[1], ...n, children: e }) : /* @__PURE__ */ o(
+    const i = /language-(\w+)/.exec(o || "");
+    return i ? /* @__PURE__ */ t(C, { className: o, language: i[1], ...n, children: e }) : /* @__PURE__ */ t(
       "code",
       {
         className: m(
@@ -116,13 +126,13 @@ const C = {
   p: r("p", "whitespace-pre-wrap"),
   hr: r("hr", "border-foreground/20")
 };
-function r(e, t) {
+function r(e, o) {
   const n = ({
     ...i
-  }) => /* @__PURE__ */ o(e, { className: t, ...i });
+  }) => /* @__PURE__ */ t(e, { className: o, ...i });
   return n.displayName = String(e), n;
 }
 export {
-  q as MarkdownRenderer,
-  q as default
+  B as MarkdownRenderer,
+  B as default
 };