@togo-framework/ui-markdown 0.1.0

package/LICENSE

@@ -0,0 +1,5 @@
+MIT License
+
+Copyright (c) 2026 togo-framework
+
+Permission is hereby granted, free of charge, to any person obtaining a copy...

package/README.md

@@ -0,0 +1,17 @@
+<!-- togo-header -->
+# @togo-framework/ui-markdown
+
+Markdown renderer (GFM, syntax-highlighted code blocks, mermaid diagrams, table
+export to image) plus a lightweight markdown editor. Part of the togo UI kit.
+
+```bash
+npm install @togo-framework/ui-markdown
+```
+
+```tsx
+import { MarkdownRenderer, MarkdownEditor } from "@togo-framework/ui-markdown";
+```
+
+Requires `@togo-framework/ui-core` and `@togo-framework/ui-data-table` (tables
+embedded in markdown render via the shared DataTable component).
+<!-- togo-sponsors -->

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+interface MarkdownRendererProps {
+    content: string;
+    language?: "en" | "ar";
+    className?: string;
+}
+/** MarkdownTable — renders a GFM table via the kit's DataTable (sortable, searchable,
+ * CSV export). Exported so apps can reuse the markdown-table → DataTable mapping. */
+declare function MarkdownTable({ node, language }: {
+    node: any;
+    language?: "en" | "ar";
+}): React.JSX.Element;
+/** CodeBlock — a fenced code block with a language label, Copy, and download-as-PNG.
+ * Exported so apps can render standalone code with the same chrome. */
+declare function CodeBlock({ lang, children }: {
+    lang?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/** MarkdownRenderer — GFM markdown with highlighted code, mermaid diagrams, and
+ * token-themed prose (headings/lists/tables/code/quote/links). RTL-aware. */
+declare function MarkdownRenderer({ content, language, className }: MarkdownRendererProps): React.JSX.Element;
+
+type MarkdownView = "write" | "preview" | "split";
+interface MarkdownEditorProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    view?: MarkdownView;
+    defaultView?: MarkdownView;
+    onViewChange?: (view: MarkdownView) => void;
+    language?: "en" | "ar";
+    placeholder?: string;
+    minRows?: number;
+    className?: string;
+}
+/** MarkdownEditor — toolbar (bold/italic/headings/lists/link/code/quote) + a textarea
+ * with a Write / Preview / Split view toggle (Split shows a live MarkdownRenderer).
+ * Dependency-light (no CodeMirror/Monaco). Controlled or uncontrolled. RTL + EN/AR. */
+declare function MarkdownEditor({ value, defaultValue, onChange, view, defaultView, onViewChange, language, placeholder, minRows, className, }: MarkdownEditorProps): React.JSX.Element;
+
+export { CodeBlock, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, type MarkdownRendererProps, MarkdownTable, type MarkdownView };

package/dist/index.js

@@ -0,0 +1,352 @@
+// src/components/markdown/MarkdownRenderer.tsx
+import * as React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import { Copy, Check, ImageDown } from "lucide-react";
+import { cn } from "@togo-framework/ui-core";
+import { DataTable } from "@togo-framework/ui-data-table";
+import hljs from "highlight.js/lib/core";
+import hlBash from "highlight.js/lib/languages/bash";
+import hlGo from "highlight.js/lib/languages/go";
+import hlTs from "highlight.js/lib/languages/typescript";
+import hlJs from "highlight.js/lib/languages/javascript";
+import hlJson from "highlight.js/lib/languages/json";
+import hlYaml from "highlight.js/lib/languages/yaml";
+import hlSql from "highlight.js/lib/languages/sql";
+import hlGraphql from "highlight.js/lib/languages/graphql";
+import hlPwsh from "highlight.js/lib/languages/powershell";
+import hlDockerfile from "highlight.js/lib/languages/dockerfile";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var HL_LANGS = {
+  bash: hlBash,
+  go: hlGo,
+  typescript: hlTs,
+  javascript: hlJs,
+  json: hlJson,
+  yaml: hlYaml,
+  sql: hlSql,
+  graphql: hlGraphql,
+  powershell: hlPwsh,
+  dockerfile: hlDockerfile
+};
+for (const [name, def] of Object.entries(HL_LANGS)) {
+  try {
+    if (!hljs.getLanguage(name)) hljs.registerLanguage(name, def);
+  } catch {
+  }
+}
+var HL_ALIAS = {
+  sh: "bash",
+  shell: "bash",
+  zsh: "bash",
+  console: "bash",
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  mjs: "javascript",
+  yml: "yaml",
+  ps: "powershell",
+  ps1: "powershell",
+  gql: "graphql",
+  docker: "dockerfile"
+};
+function highlightToHtml(code, lang) {
+  const key = lang ? HL_ALIAS[lang] ?? lang : void 0;
+  try {
+    if (key && hljs.getLanguage(key)) return hljs.highlight(code, { language: key }).value;
+  } catch {
+  }
+  return null;
+}
+function hastText(node) {
+  if (!node) return "";
+  if (node.type === "text") return node.value ?? "";
+  if (Array.isArray(node.children)) return node.children.map(hastText).join("");
+  return "";
+}
+function parseTable(node) {
+  const kids = node?.children ?? [];
+  const thead = kids.find((c) => c.tagName === "thead");
+  const tbody = kids.find((c) => c.tagName === "tbody");
+  const hRow = (thead?.children ?? []).find((c) => c.tagName === "tr");
+  const headers = (hRow?.children ?? []).filter((c) => c.tagName === "th").map((c) => hastText(c).trim());
+  const rows = (tbody?.children ?? []).filter((c) => c.tagName === "tr").map((tr) => (tr.children ?? []).filter((c) => c.tagName === "td").map((c) => hastText(c).trim()));
+  return { headers, rows };
+}
+function MarkdownTable({ node, language = "en" }) {
+  const { headers, rows } = React.useMemo(() => parseTable(node), [node]);
+  if (!headers.length) {
+    return /* @__PURE__ */ jsx("div", { className: "my-3 overflow-x-auto rounded-lg border border-border", children: /* @__PURE__ */ jsx("table", { className: "w-full text-start text-sm" }) });
+  }
+  const columns = headers.map((h, i) => ({
+    accessorKey: `c${i}`,
+    header: h,
+    meta: { header_en: h, header_ar: h }
+  }));
+  const data = rows.map((r, i) => {
+    const o = { _id: String(i) };
+    r.forEach((c, j) => {
+      o[`c${j}`] = c;
+    });
+    return o;
+  });
+  return /* @__PURE__ */ jsx("div", { className: "my-3", children: /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      columns,
+      data,
+      getRowId: (r) => r._id,
+      language,
+      showGlobalSearch: rows.length > 8,
+      showCsvExport: true,
+      showDensityToggle: false,
+      pageSize: rows.length > 25 ? 25 : 1e3
+    }
+  ) });
+}
+function CodeBlock({ lang, children }) {
+  const boxRef = React.useRef(null);
+  const codeRef = React.useRef(null);
+  const [copied, setCopied] = React.useState(false);
+  const copy = () => {
+    const text = codeRef.current?.textContent ?? "";
+    navigator.clipboard?.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    });
+  };
+  const downloadPng = async () => {
+    if (!boxRef.current) return;
+    const { toPng } = await import("html-to-image");
+    const bg = getComputedStyle(boxRef.current).backgroundColor;
+    const url = await toPng(boxRef.current, { pixelRatio: 2, backgroundColor: bg });
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `code.${lang || "txt"}.png`;
+    a.click();
+  };
+  const raw = typeof children === "string" ? children : Array.isArray(children) && children.every((c) => typeof c === "string") ? children.join("") : null;
+  const html = raw != null ? highlightToHtml(raw.replace(/\n$/, ""), lang) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "tg-code my-3 overflow-hidden rounded-lg border border-border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border bg-muted/60 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground", children: lang || "code" }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs("button", { onClick: copy, className: "flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition hover:bg-accent hover:text-foreground", children: [
+          copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" }),
+          copied ? "Copied" : "Copy"
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: downloadPng, "aria-label": "Download as PNG", className: "flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition hover:bg-accent hover:text-foreground", children: [
+          /* @__PURE__ */ jsx(ImageDown, { className: "h-3 w-3" }),
+          "PNG"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: boxRef, className: "bg-muted/40 p-3", children: /* @__PURE__ */ jsx("pre", { dir: "ltr", className: "overflow-x-auto text-[0.8rem] leading-relaxed [&>code]:bg-transparent [&>code]:p-0", children: html != null ? /* @__PURE__ */ jsx("code", { ref: codeRef, className: cn("hljs", lang && `language-${lang}`), dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx("code", { ref: codeRef, className: cn("hljs", lang && `language-${lang}`), children }) }) })
+  ] });
+}
+var _mermaidPromise = null;
+function loadMermaid() {
+  if (!_mermaidPromise) {
+    _mermaidPromise = import("mermaid").then((m) => {
+      m.default.initialize({ startOnLoad: false, securityLevel: "strict", theme: "neutral" });
+      return m.default;
+    });
+  }
+  return _mermaidPromise;
+}
+var _mermaidSeq = 0;
+function MermaidBlock({ code }) {
+  const ref = React.useRef(null);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    let cancelled = false;
+    loadMermaid().then(async (mermaid) => {
+      const id = `tg-mermaid-${++_mermaidSeq}`;
+      const { svg } = await mermaid.render(id, code);
+      if (!cancelled && ref.current) ref.current.innerHTML = svg;
+    }).catch((e) => !cancelled && setError(String(e?.message || e)));
+    return () => {
+      cancelled = true;
+    };
+  }, [code]);
+  if (error) {
+    return /* @__PURE__ */ jsxs("pre", { className: "overflow-auto rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-xs text-destructive", children: [
+      "Mermaid error: ",
+      error,
+      "\n\n",
+      code
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ref, className: "my-3 flex justify-center overflow-x-auto rounded-lg border border-border bg-card p-3" });
+}
+function MarkdownRenderer({ content, language = "en", className }) {
+  const isRTL = language === "ar";
+  return /* @__PURE__ */ jsx("div", { dir: isRTL ? "rtl" : "ltr", className: cn("tg-md text-sm leading-relaxed text-foreground", className), children: /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [[rehypeHighlight, { detect: true, ignoreMissing: true }]],
+      components: {
+        h1: (p) => /* @__PURE__ */ jsx("h1", { className: "mb-3 mt-5 text-2xl font-bold", ...p }),
+        h2: (p) => /* @__PURE__ */ jsx("h2", { className: "mb-2 mt-5 border-b border-border pb-1 text-xl font-semibold", ...p }),
+        h3: (p) => /* @__PURE__ */ jsx("h3", { className: "mb-2 mt-4 text-lg font-semibold", ...p }),
+        p: (p) => /* @__PURE__ */ jsx("p", { className: "my-2.5", ...p }),
+        a: (p) => /* @__PURE__ */ jsx("a", { className: "font-medium text-primary underline-offset-2 hover:underline", ...p }),
+        ul: (p) => /* @__PURE__ */ jsx("ul", { className: "my-2.5 list-disc space-y-1 ps-6", ...p }),
+        ol: (p) => /* @__PURE__ */ jsx("ol", { className: "my-2.5 list-decimal space-y-1 ps-6", ...p }),
+        li: (p) => /* @__PURE__ */ jsx("li", { className: "marker:text-muted-foreground", ...p }),
+        blockquote: (p) => /* @__PURE__ */ jsx("blockquote", { className: "my-3 border-s-4 border-primary/40 ps-4 text-muted-foreground", ...p }),
+        hr: () => /* @__PURE__ */ jsx("hr", { className: "my-5 border-border" }),
+        // GFM tables render through the kit DataTable (sortable + CSV export).
+        table: (p) => /* @__PURE__ */ jsx(MarkdownTable, { node: p.node, language }),
+        code(props) {
+          const { children, className: cls, node, ...rest } = props;
+          const text = String(children ?? "");
+          const lang = /language-(\w+)/.exec(cls || "")?.[1];
+          const inline = !node || node.position?.start.line === node.position?.end.line;
+          if (lang === "mermaid") return /* @__PURE__ */ jsx(MermaidBlock, { code: text.replace(/\n$/, "") });
+          if (inline && !cls) return /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground", ...rest, children });
+          return /* @__PURE__ */ jsx(CodeBlock, { lang, children });
+        },
+        pre: (p) => /* @__PURE__ */ jsx(Fragment, { children: p.children })
+      },
+      children: content
+    }
+  ) });
+}
+
+// src/components/markdown/MarkdownEditor.tsx
+import * as React2 from "react";
+import { Bold, Italic, Heading1, Heading2, Heading3, List, ListOrdered, Link2, Code, Code2, Quote, Eye, Pencil, Columns2 } from "lucide-react";
+import { cn as cn2 } from "@togo-framework/ui-core";
+import { Button } from "@togo-framework/ui-core";
+import { Textarea } from "@togo-framework/ui-core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TOOLBAR = [
+  { icon: Bold, title: { en: "Bold", ar: "\u063A\u0627\u0645\u0642" }, act: { wrap: "**" } },
+  { icon: Italic, title: { en: "Italic", ar: "\u0645\u0627\u0626\u0644" }, act: { wrap: "_" } },
+  { icon: Heading1, title: { en: "Heading 1", ar: "\u0639\u0646\u0648\u0627\u0646 1" }, act: { line: "# " } },
+  { icon: Heading2, title: { en: "Heading 2", ar: "\u0639\u0646\u0648\u0627\u0646 2" }, act: { line: "## " } },
+  { icon: Heading3, title: { en: "Heading 3", ar: "\u0639\u0646\u0648\u0627\u0646 3" }, act: { line: "### " } },
+  { icon: List, title: { en: "Bulleted list", ar: "\u0642\u0627\u0626\u0645\u0629" }, act: { line: "- " } },
+  { icon: ListOrdered, title: { en: "Numbered list", ar: "\u0642\u0627\u0626\u0645\u0629 \u0645\u0631\u0642\u0645\u0629" }, act: { line: "1. " } },
+  { icon: Quote, title: { en: "Quote", ar: "\u0627\u0642\u062A\u0628\u0627\u0633" }, act: { line: "> " } },
+  { icon: Link2, title: { en: "Link", ar: "\u0631\u0627\u0628\u0637" }, act: { wrap: "[", end: "](https://)" } },
+  { icon: Code, title: { en: "Inline code", ar: "\u0643\u0648\u062F" }, act: { wrap: "`" } },
+  { icon: Code2, title: { en: "Code block", ar: "\u0643\u062A\u0644\u0629 \u0643\u0648\u062F" }, act: { wrap: "\n```\n", end: "\n```\n" } }
+];
+var VIEWS = [
+  { key: "write", icon: Pencil, en: "Write", ar: "\u0643\u062A\u0627\u0628\u0629" },
+  { key: "preview", icon: Eye, en: "Preview", ar: "\u0645\u0639\u0627\u064A\u0646\u0629" },
+  { key: "split", icon: Columns2, en: "Split", ar: "\u062A\u0642\u0633\u064A\u0645" }
+];
+function MarkdownEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  view,
+  defaultView = "split",
+  onViewChange,
+  language = "en",
+  placeholder,
+  minRows = 10,
+  className
+}) {
+  const isRTL = language === "ar";
+  const ref = React2.useRef(null);
+  const [internal, setInternal] = React2.useState(defaultValue);
+  const text = value ?? internal;
+  const setText = (v) => {
+    setInternal(v);
+    onChange?.(v);
+  };
+  const [internalView, setInternalView] = React2.useState(defaultView);
+  const activeView = view ?? internalView;
+  const setView = (v) => {
+    setInternalView(v);
+    onViewChange?.(v);
+  };
+  function apply(act) {
+    const el = ref.current;
+    if (!el) return;
+    const start = el.selectionStart, end = el.selectionEnd;
+    const sel = text.slice(start, end);
+    let next = text, caret = end;
+    if ("wrap" in act) {
+      const open = act.wrap, close = "end" in act ? act.end : act.wrap;
+      next = text.slice(0, start) + open + sel + close + text.slice(end);
+      caret = start + open.length + sel.length + close.length;
+    } else if ("line" in act) {
+      const lineStart = text.lastIndexOf("\n", start - 1) + 1;
+      next = text.slice(0, lineStart) + act.line + text.slice(lineStart);
+      caret = end + act.line.length;
+    } else if ("insert" in act) {
+      next = text.slice(0, start) + act.insert + text.slice(end);
+      caret = start + act.insert.length;
+    }
+    setText(next);
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(caret, caret);
+    });
+  }
+  const t = (en, ar) => isRTL ? ar : en;
+  return /* @__PURE__ */ jsxs2("div", { dir: isRTL ? "rtl" : "ltr", className: cn2("flex flex-col overflow-hidden rounded-xl border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-border p-1.5", children: [
+      TOOLBAR.map(({ icon: Icon, title, act }, i) => /* @__PURE__ */ jsx2(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 w-7 p-0",
+          title: t(title.en, title.ar),
+          "aria-label": t(title.en, title.ar),
+          disabled: activeView === "preview",
+          onClick: () => apply(act),
+          children: /* @__PURE__ */ jsx2(Icon, { className: "h-4 w-4" })
+        },
+        i
+      )),
+      /* @__PURE__ */ jsx2("div", { className: "ms-auto flex items-center gap-0.5", children: VIEWS.map(({ key, icon: Icon, en, ar }) => /* @__PURE__ */ jsxs2(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: activeView === key ? "secondary" : "ghost",
+          className: "h-7 gap-1.5 px-2",
+          onClick: () => setView(key),
+          children: [
+            /* @__PURE__ */ jsx2(Icon, { className: "h-3.5 w-3.5" }),
+            t(en, ar)
+          ]
+        },
+        key
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: cn2("min-h-0 flex-1", activeView === "split" && "grid grid-cols-1 divide-y divide-border md:grid-cols-2 md:divide-x md:divide-y-0 rtl:md:divide-x-reverse"), children: [
+      activeView !== "preview" && /* @__PURE__ */ jsx2(
+        Textarea,
+        {
+          ref,
+          value: text,
+          onChange: (e) => setText(e.target.value),
+          placeholder: placeholder ?? t("Write markdown\u2026", "\u0627\u0643\u062A\u0628 \u0645\u0627\u0631\u0643\u062F\u0627\u0648\u0646\u2026"),
+          rows: minRows,
+          dir: isRTL ? "rtl" : "ltr",
+          className: "min-h-[12rem] resize-y rounded-none border-0 font-mono text-sm focus-visible:ring-0"
+        }
+      ),
+      activeView !== "write" && /* @__PURE__ */ jsx2("div", { className: "min-h-[12rem] overflow-auto p-4", children: text.trim() ? /* @__PURE__ */ jsx2(MarkdownRenderer, { content: text, language }) : /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: t("Nothing to preview yet.", "\u0644\u0627 \u0634\u064A\u0621 \u0644\u0644\u0645\u0639\u0627\u064A\u0646\u0629 \u0628\u0639\u062F.") }) })
+    ] })
+  ] });
+}
+export {
+  CodeBlock,
+  MarkdownEditor,
+  MarkdownRenderer,
+  MarkdownTable
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/markdown/MarkdownRenderer.tsx","../src/components/markdown/MarkdownEditor.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { Copy, Check, ImageDown } from \"lucide-react\";\nimport type { ColumnDef } from \"@tanstack/react-table\";\nimport { cn } from \"@togo-framework/ui-core\";\nimport { DataTable } from \"@togo-framework/ui-data-table\";\n\n// Standalone syntax highlighting for CodeBlock — registers just the languages we use\n// (keeps the bundle lean; reuses the highlight.js the kit already depends on).\nimport hljs from \"highlight.js/lib/core\";\nimport hlBash from \"highlight.js/lib/languages/bash\";\nimport hlGo from \"highlight.js/lib/languages/go\";\nimport hlTs from \"highlight.js/lib/languages/typescript\";\nimport hlJs from \"highlight.js/lib/languages/javascript\";\nimport hlJson from \"highlight.js/lib/languages/json\";\nimport hlYaml from \"highlight.js/lib/languages/yaml\";\nimport hlSql from \"highlight.js/lib/languages/sql\";\nimport hlGraphql from \"highlight.js/lib/languages/graphql\";\nimport hlPwsh from \"highlight.js/lib/languages/powershell\";\nimport hlDockerfile from \"highlight.js/lib/languages/dockerfile\";\n\nconst HL_LANGS: Record<string, any> = {\n  bash: hlBash, go: hlGo, typescript: hlTs, javascript: hlJs, json: hlJson,\n  yaml: hlYaml, sql: hlSql, graphql: hlGraphql, powershell: hlPwsh, dockerfile: hlDockerfile,\n};\nfor (const [name, def] of Object.entries(HL_LANGS)) {\n  try { if (!hljs.getLanguage(name)) hljs.registerLanguage(name, def); } catch { /* noop */ }\n}\nconst HL_ALIAS: Record<string, string> = {\n  sh: \"bash\", shell: \"bash\", zsh: \"bash\", console: \"bash\",\n  ts: \"typescript\", tsx: \"typescript\", js: \"javascript\", jsx: \"javascript\", mjs: \"javascript\",\n  yml: \"yaml\", ps: \"powershell\", ps1: \"powershell\", gql: \"graphql\", docker: \"dockerfile\",\n};\n/** Highlight a raw code string to hljs HTML; returns null if the language is unknown. */\nfunction highlightToHtml(code: string, lang?: string): string | null {\n  const key = lang ? HL_ALIAS[lang] ?? lang : undefined;\n  try {\n    if (key && hljs.getLanguage(key)) return hljs.highlight(code, { language: key }).value;\n  } catch { /* fall through */ }\n  return null;\n}\n\nexport interface MarkdownRendererProps {\n  content: string;\n  language?: \"en\" | \"ar\";\n  className?: string;\n}\n\n// ── Markdown table → kit DataTable (sortable + CSV export) ──────────────────────\nfunction hastText(node: any): string {\n  if (!node) return \"\";\n  if (node.type === \"text\") return node.value ?? \"\";\n  if (Array.isArray(node.children)) return node.children.map(hastText).join(\"\");\n  return \"\";\n}\nfunction parseTable(node: any): { headers: string[]; rows: string[][] } {\n  const kids = node?.children ?? [];\n  const thead = kids.find((c: any) => c.tagName === \"thead\");\n  const tbody = kids.find((c: any) => c.tagName === \"tbody\");\n  const hRow = (thead?.children ?? []).find((c: any) => c.tagName === \"tr\");\n  const headers = (hRow?.children ?? []).filter((c: any) => c.tagName === \"th\").map((c: any) => hastText(c).trim());\n  const rows = (tbody?.children ?? []).filter((c: any) => c.tagName === \"tr\").map((tr: any) =>\n    (tr.children ?? []).filter((c: any) => c.tagName === \"td\").map((c: any) => hastText(c).trim()));\n  return { headers, rows };\n}\n\n/** MarkdownTable — renders a GFM table via the kit's DataTable (sortable, searchable,\n * CSV export). Exported so apps can reuse the markdown-table → DataTable mapping. */\nexport function MarkdownTable({ node, language = \"en\" }: { node: any; language?: \"en\" | \"ar\" }) {\n  const { headers, rows } = React.useMemo(() => parseTable(node), [node]);\n  if (!headers.length) {\n    return <div className=\"my-3 overflow-x-auto rounded-lg border border-border\"><table className=\"w-full text-start text-sm\" /></div>;\n  }\n  const columns: ColumnDef<Record<string, string>>[] = headers.map((h, i) => ({\n    accessorKey: `c${i}`,\n    header: h,\n    meta: { header_en: h, header_ar: h },\n  }));\n  const data = rows.map((r, i) => {\n    const o: Record<string, string> = { _id: String(i) };\n    r.forEach((c, j) => { o[`c${j}`] = c; });\n    return o;\n  });\n  return (\n    <div className=\"my-3\">\n      <DataTable\n        columns={columns}\n        data={data}\n        getRowId={(r) => (r as { _id: string })._id}\n        language={language}\n        showGlobalSearch={rows.length > 8}\n        showCsvExport\n        showDensityToggle={false}\n        pageSize={rows.length > 25 ? 25 : 1000}\n      />\n    </div>\n  );\n}\n\n// ── Code block — styled header + copy + PNG export ──────────────────────────────\n/** CodeBlock — a fenced code block with a language label, Copy, and download-as-PNG.\n * Exported so apps can render standalone code with the same chrome. */\nexport function CodeBlock({ lang, children }: { lang?: string; children?: React.ReactNode }) {\n  const boxRef = React.useRef<HTMLDivElement>(null);\n  const codeRef = React.useRef<HTMLElement>(null);\n  const [copied, setCopied] = React.useState(false);\n\n  const copy = () => {\n    const text = codeRef.current?.textContent ?? \"\";\n    navigator.clipboard?.writeText(text).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1400); });\n  };\n  const downloadPng = async () => {\n    if (!boxRef.current) return;\n    const { toPng } = await import(\"html-to-image\");\n    const bg = getComputedStyle(boxRef.current).backgroundColor;\n    const url = await toPng(boxRef.current, { pixelRatio: 2, backgroundColor: bg });\n    const a = document.createElement(\"a\");\n    a.href = url; a.download = `code.${lang || \"txt\"}.png`; a.click();\n  };\n\n  // Standalone use (e.g. on a landing page) passes a raw string → highlight it here.\n  // MarkdownRenderer passes already-highlighted nodes (rehype-highlight) → render as-is.\n  const raw =\n    typeof children === \"string\" ? children\n    : Array.isArray(children) && children.every((c) => typeof c === \"string\") ? children.join(\"\")\n    : null;\n  const html = raw != null ? highlightToHtml(raw.replace(/\\n$/, \"\"), lang) : null;\n\n  return (\n    <div className=\"tg-code my-3 overflow-hidden rounded-lg border border-border\">\n      <div className=\"flex items-center justify-between border-b border-border bg-muted/60 px-3 py-1.5\">\n        <span className=\"font-mono text-xs text-muted-foreground\">{lang || \"code\"}</span>\n        <span className=\"flex items-center gap-1\">\n          <button onClick={copy} className=\"flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition hover:bg-accent hover:text-foreground\">\n            {copied ? <Check className=\"h-3 w-3\" /> : <Copy className=\"h-3 w-3\" />}{copied ? \"Copied\" : \"Copy\"}\n          </button>\n          <button onClick={downloadPng} aria-label=\"Download as PNG\" className=\"flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition hover:bg-accent hover:text-foreground\">\n            <ImageDown className=\"h-3 w-3\" />PNG\n          </button>\n        </span>\n      </div>\n      <div ref={boxRef} className=\"bg-muted/40 p-3\">\n        <pre dir=\"ltr\" className=\"overflow-x-auto text-[0.8rem] leading-relaxed [&>code]:bg-transparent [&>code]:p-0\">\n          {html != null\n            ? <code ref={codeRef} className={cn(\"hljs\", lang && `language-${lang}`)} dangerouslySetInnerHTML={{ __html: html }} />\n            : <code ref={codeRef} className={cn(\"hljs\", lang && `language-${lang}`)}>{children}</code>}\n        </pre>\n      </div>\n    </div>\n  );\n}\n\n// ── Mermaid diagram block (rendered client-side, lazily) ────────────────────────\nlet _mermaidPromise: Promise<typeof import(\"mermaid\").default> | null = null;\nfunction loadMermaid() {\n  if (!_mermaidPromise) {\n    _mermaidPromise = import(\"mermaid\").then((m) => {\n      m.default.initialize({ startOnLoad: false, securityLevel: \"strict\", theme: \"neutral\" });\n      return m.default;\n    });\n  }\n  return _mermaidPromise;\n}\n\nlet _mermaidSeq = 0;\nfunction MermaidBlock({ code }: { code: string }) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [error, setError] = React.useState<string | null>(null);\n  React.useEffect(() => {\n    let cancelled = false;\n    loadMermaid()\n      .then(async (mermaid) => {\n        const id = `tg-mermaid-${++_mermaidSeq}`;\n        const { svg } = await mermaid.render(id, code);\n        if (!cancelled && ref.current) ref.current.innerHTML = svg;\n      })\n      .catch((e) => !cancelled && setError(String(e?.message || e)));\n    return () => { cancelled = true; };\n  }, [code]);\n  if (error) {\n    return (\n      <pre className=\"overflow-auto rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-xs text-destructive\">\n        Mermaid error: {error}\n        {\"\\n\\n\"}{code}\n      </pre>\n    );\n  }\n  return <div ref={ref} className=\"my-3 flex justify-center overflow-x-auto rounded-lg border border-border bg-card p-3\" />;\n}\n\n/** MarkdownRenderer — GFM markdown with highlighted code, mermaid diagrams, and\n * token-themed prose (headings/lists/tables/code/quote/links). RTL-aware. */\nexport function MarkdownRenderer({ content, language = \"en\", className }: MarkdownRendererProps) {\n  const isRTL = language === \"ar\";\n  return (\n    <div dir={isRTL ? \"rtl\" : \"ltr\"} className={cn(\"tg-md text-sm leading-relaxed text-foreground\", className)}>\n      <ReactMarkdown\n        remarkPlugins={[remarkGfm]}\n        rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}\n        components={{\n          h1: (p) => <h1 className=\"mb-3 mt-5 text-2xl font-bold\" {...p} />,\n          h2: (p) => <h2 className=\"mb-2 mt-5 border-b border-border pb-1 text-xl font-semibold\" {...p} />,\n          h3: (p) => <h3 className=\"mb-2 mt-4 text-lg font-semibold\" {...p} />,\n          p: (p) => <p className=\"my-2.5\" {...p} />,\n          a: (p) => <a className=\"font-medium text-primary underline-offset-2 hover:underline\" {...p} />,\n          ul: (p) => <ul className=\"my-2.5 list-disc space-y-1 ps-6\" {...p} />,\n          ol: (p) => <ol className=\"my-2.5 list-decimal space-y-1 ps-6\" {...p} />,\n          li: (p) => <li className=\"marker:text-muted-foreground\" {...p} />,\n          blockquote: (p) => <blockquote className=\"my-3 border-s-4 border-primary/40 ps-4 text-muted-foreground\" {...p} />,\n          hr: () => <hr className=\"my-5 border-border\" />,\n          // GFM tables render through the kit DataTable (sortable + CSV export).\n          table: (p: any) => <MarkdownTable node={p.node} language={language} />,\n          code(props) {\n            const { children, className: cls, node, ...rest } = props as any;\n            const text = String(children ?? \"\");\n            const lang = /language-(\\w+)/.exec(cls || \"\")?.[1];\n            const inline = !node || node.position?.start.line === node.position?.end.line;\n            if (lang === \"mermaid\") return <MermaidBlock code={text.replace(/\\n$/, \"\")} />;\n            if (inline && !cls) return <code className=\"rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground\" {...rest}>{children}</code>;\n            // Block code → styled CodeBlock (copy + PNG export). pre passes through.\n            return <CodeBlock lang={lang}>{children}</CodeBlock>;\n          },\n          pre: (p: any) => <>{p.children}</>,\n        }}\n      >\n        {content}\n      </ReactMarkdown>\n    </div>\n  );\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Bold, Italic, Heading1, Heading2, Heading3, List, ListOrdered, Link2, Code, Code2, Quote, Eye, Pencil, Columns2 } from \"lucide-react\";\nimport { cn } from \"@togo-framework/ui-core\";\nimport { Button } from \"@togo-framework/ui-core\";\nimport { Textarea } from \"@togo-framework/ui-core\";\nimport { MarkdownRenderer } from \"./MarkdownRenderer\";\n\nexport type MarkdownView = \"write\" | \"preview\" | \"split\";\n\nexport interface MarkdownEditorProps {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  view?: MarkdownView;\n  defaultView?: MarkdownView;\n  onViewChange?: (view: MarkdownView) => void;\n  language?: \"en\" | \"ar\";\n  placeholder?: string;\n  minRows?: number;\n  className?: string;\n}\n\ntype Action =\n  | { wrap: string }\n  | { wrap: string; end: string }\n  | { line: string }\n  | { insert: string };\n\nconst TOOLBAR: { icon: React.ElementType; title: { en: string; ar: string }; act: Action }[] = [\n  { icon: Bold,        title: { en: \"Bold\", ar: \"غامق\" },           act: { wrap: \"**\" } },\n  { icon: Italic,      title: { en: \"Italic\", ar: \"مائل\" },         act: { wrap: \"_\" } },\n  { icon: Heading1,    title: { en: \"Heading 1\", ar: \"عنوان 1\" },   act: { line: \"# \" } },\n  { icon: Heading2,    title: { en: \"Heading 2\", ar: \"عنوان 2\" },   act: { line: \"## \" } },\n  { icon: Heading3,    title: { en: \"Heading 3\", ar: \"عنوان 3\" },   act: { line: \"### \" } },\n  { icon: List,        title: { en: \"Bulleted list\", ar: \"قائمة\" }, act: { line: \"- \" } },\n  { icon: ListOrdered, title: { en: \"Numbered list\", ar: \"قائمة مرقمة\" }, act: { line: \"1. \" } },\n  { icon: Quote,       title: { en: \"Quote\", ar: \"اقتباس\" },        act: { line: \"> \" } },\n  { icon: Link2,       title: { en: \"Link\", ar: \"رابط\" },           act: { wrap: \"[\", end: \"](https://)\" } },\n  { icon: Code,        title: { en: \"Inline code\", ar: \"كود\" },     act: { wrap: \"`\" } },\n  { icon: Code2,       title: { en: \"Code block\", ar: \"كتلة كود\" }, act: { wrap: \"\\n```\\n\", end: \"\\n```\\n\" } },\n];\n\nconst VIEWS: { key: MarkdownView; icon: React.ElementType; en: string; ar: string }[] = [\n  { key: \"write\", icon: Pencil, en: \"Write\", ar: \"كتابة\" },\n  { key: \"preview\", icon: Eye, en: \"Preview\", ar: \"معاينة\" },\n  { key: \"split\", icon: Columns2, en: \"Split\", ar: \"تقسيم\" },\n];\n\n/** MarkdownEditor — toolbar (bold/italic/headings/lists/link/code/quote) + a textarea\n * with a Write / Preview / Split view toggle (Split shows a live MarkdownRenderer).\n * Dependency-light (no CodeMirror/Monaco). Controlled or uncontrolled. RTL + EN/AR. */\nexport function MarkdownEditor({\n  value, defaultValue = \"\", onChange, view, defaultView = \"split\", onViewChange,\n  language = \"en\", placeholder, minRows = 10, className,\n}: MarkdownEditorProps) {\n  const isRTL = language === \"ar\";\n  const ref = React.useRef<HTMLTextAreaElement>(null);\n  const [internal, setInternal] = React.useState(defaultValue);\n  const text = value ?? internal;\n  const setText = (v: string) => { setInternal(v); onChange?.(v); };\n\n  const [internalView, setInternalView] = React.useState<MarkdownView>(defaultView);\n  const activeView = view ?? internalView;\n  const setView = (v: MarkdownView) => { setInternalView(v); onViewChange?.(v); };\n\n  function apply(act: Action) {\n    const el = ref.current;\n    if (!el) return;\n    const start = el.selectionStart, end = el.selectionEnd;\n    const sel = text.slice(start, end);\n    let next = text, caret = end;\n    if (\"wrap\" in act) {\n      const open = act.wrap, close = (\"end\" in act ? act.end : act.wrap);\n      next = text.slice(0, start) + open + sel + close + text.slice(end);\n      caret = start + open.length + sel.length + close.length;\n    } else if (\"line\" in act) {\n      const lineStart = text.lastIndexOf(\"\\n\", start - 1) + 1;\n      next = text.slice(0, lineStart) + act.line + text.slice(lineStart);\n      caret = end + act.line.length;\n    } else if (\"insert\" in act) {\n      next = text.slice(0, start) + act.insert + text.slice(end);\n      caret = start + act.insert.length;\n    }\n    setText(next);\n    requestAnimationFrame(() => { el.focus(); el.setSelectionRange(caret, caret); });\n  }\n\n  const t = (en: string, ar: string) => (isRTL ? ar : en);\n\n  return (\n    <div dir={isRTL ? \"rtl\" : \"ltr\"} className={cn(\"flex flex-col overflow-hidden rounded-xl border border-border bg-card\", className)}>\n      {/* Toolbar */}\n      <div className=\"flex flex-wrap items-center gap-0.5 border-b border-border p-1.5\">\n        {TOOLBAR.map(({ icon: Icon, title, act }, i) => (\n          <Button key={i} type=\"button\" variant=\"ghost\" size=\"sm\" className=\"h-7 w-7 p-0\"\n            title={t(title.en, title.ar)} aria-label={t(title.en, title.ar)}\n            disabled={activeView === \"preview\"} onClick={() => apply(act)}>\n            <Icon className=\"h-4 w-4\" />\n          </Button>\n        ))}\n        <div className=\"ms-auto flex items-center gap-0.5\">\n          {VIEWS.map(({ key, icon: Icon, en, ar }) => (\n            <Button key={key} type=\"button\" size=\"sm\" variant={activeView === key ? \"secondary\" : \"ghost\"}\n              className=\"h-7 gap-1.5 px-2\" onClick={() => setView(key)}>\n              <Icon className=\"h-3.5 w-3.5\" />{t(en, ar)}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      {/* Body */}\n      <div className={cn(\"min-h-0 flex-1\", activeView === \"split\" && \"grid grid-cols-1 divide-y divide-border md:grid-cols-2 md:divide-x md:divide-y-0 rtl:md:divide-x-reverse\")}>\n        {activeView !== \"preview\" && (\n          <Textarea\n            ref={ref}\n            value={text}\n            onChange={(e) => setText(e.target.value)}\n            placeholder={placeholder ?? t(\"Write markdown…\", \"اكتب ماركداون…\")}\n            rows={minRows}\n            dir={isRTL ? \"rtl\" : \"ltr\"}\n            className=\"min-h-[12rem] resize-y rounded-none border-0 font-mono text-sm focus-visible:ring-0\"\n          />\n        )}\n        {activeView !== \"write\" && (\n          <div className=\"min-h-[12rem] overflow-auto p-4\">\n            {text.trim()\n              ? <MarkdownRenderer content={text} language={language} />\n              : <p className=\"text-sm text-muted-foreground\">{t(\"Nothing to preview yet.\", \"لا شيء للمعاينة بعد.\")}</p>}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["React","cn","jsx","jsxs","cn"]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@togo-framework/ui-markdown",
+  "version": "0.1.0",
+  "description": "togo UI kit — markdown renderer (GFM, syntax highlighting, mermaid-ready) + editor. Depends on @togo-framework/ui-core and @togo-framework/ui-data-table.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepare": "tsup"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@togo-framework/ui-core": "^0.1.2",
+    "@togo-framework/ui-data-table": "^0.1.0",
+    "@tanstack/react-table": "^8.21.3",
+    "highlight.js": "^11.11.1",
+    "html-to-image": "^1.11.13",
+    "mermaid": "^11.15.0",
+    "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^0.462.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0"
+  }
+}