@infinilabs/markdown 0.0.1

package/README.md

@@ -0,0 +1,111 @@
+# @infinilabs/markdown
+
+A powerful and flexible Markdown component for React applications, built on top of `@ant-design/x-markdown`. It supports rendering markdown content from strings or URLs, with syntax highlighting, tables, and customizable components.
+
+## Installation
+
+```bash
+npm install @infinilabs/markdown antd react react-dom
+# or
+pnpm add @infinilabs/markdown antd react react-dom
+# or
+yarn add @infinilabs/markdown antd react react-dom
+```
+
+## Usage
+
+### Basic Usage
+
+Render markdown content directly:
+
+```tsx
+import Markdown from '@infinilabs/markdown';
+
+const markdownContent = `
+# Hello World
+
+This is a markdown component.
+
+- Item 1
+- Item 2
+`;
+
+function App() {
+  return (
+    <Markdown content={markdownContent} />
+  );
+}
+```
+
+### Fetch from URL
+
+Fetch and render markdown from a URL:
+
+```tsx
+import Markdown from '@infinilabs/markdown';
+
+function App() {
+  return (
+    <Markdown url="https://raw.githubusercontent.com/infinilabs/ui-common/main/README.md" />
+  );
+}
+```
+
+### With Custom Styles
+
+```tsx
+import Markdown from '@infinilabs/markdown';
+
+function App() {
+  return (
+    <Markdown 
+      content="# Styled Content" 
+      className="custom-markdown-class"
+      style={{ padding: 20 }}
+    />
+  );
+}
+```
+
+## API Reference
+
+### Markdown
+
+The `Markdown` component accepts all props from `XMarkdownProps` (from `@ant-design/x-markdown`) plus the following additional props:
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `content` | `string` | - | The markdown content string to render. |
+| `url` | `string` | - | The URL to fetch markdown content from. If provided, it overrides `content` after fetching. |
+| `className` | `string` | - | Custom CSS class name. |
+| `style` | `CSSProperties` | - | Custom inline styles. |
+| `components` | `Components` | - | Map of custom components to override default markdown elements (e.g., `code`, `a`, `table`). |
+
+### Supported Syntax
+
+- Headers (H1-H6)
+- Lists (Ordered and Unordered)
+- Links
+- Images
+- Tables
+- Code Blocks (with syntax highlighting)
+- Blockquotes
+- Inline Code
+- Emphasis (Bold, Italic)
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+
+# Build for production
+pnpm build
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { XMarkdownProps } from '@ant-design/x-markdown';
+
+declare const Markdown: FC<MarkdownProps>;
+export default Markdown;
+
+declare interface MarkdownProps extends XMarkdownProps {
+    url?: string;
+}
+
+export { }

package/dist/markdown.js

@@ -0,0 +1,85 @@
+import { jsx as u } from "react/jsx-runtime";
+import { XMarkdown as b } from "@ant-design/x-markdown";
+import g from "clsx";
+import { Children as p, isValidElement as f, useState as w, useEffect as x } from "react";
+import { Typography as A, Table as T } from "antd";
+import { Mermaid as _, CodeHighlighter as C } from "@ant-design/x";
+const { Text: k } = A, N = (t) => {
+  const { className: o, children: r } = t, n = o?.match(/language-(\w+)/)?.[1] ?? "";
+  return typeof r != "string" ? null : n === "mermaid" ? /* @__PURE__ */ u(_, { children: r }) : n ? /* @__PURE__ */ u(C, { lang: n, children: r }) : /* @__PURE__ */ u(k, { code: !0, children: r });
+}, m = (t) => typeof t == "string" || typeof t == "number" ? String(t) : f(t) ? m(t.props.children) : Array.isArray(t) ? t.map(m).join("") : "", $ = (t) => {
+  const o = [], r = [], n = p.toArray(t);
+  for (const e of n) {
+    if (!f(e)) continue;
+    const d = e.type;
+    if (d === "thead") {
+      const a = p.toArray(e.props.children);
+      for (const c of a) {
+        if (!f(c)) continue;
+        const i = p.toArray(c.props.children);
+        let s = 0;
+        for (const l of i) {
+          if (!f(l)) continue;
+          const h = m(l.props.children);
+          o.push({
+            title: h,
+            dataIndex: `col_${s}`,
+            key: `col_${s}`
+          }), s++;
+        }
+      }
+    }
+    if (d === "tbody") {
+      const a = p.toArray(e.props.children);
+      let c = 0;
+      for (const i of a) {
+        if (!f(i)) continue;
+        const s = { key: `row_${c}` }, l = p.toArray(i.props.children);
+        let h = 0;
+        for (const y of l)
+          f(y) && (s[`col_${h}`] = y.props.children, h++);
+        r.push(s), c++;
+      }
+    }
+  }
+  return { columns: o, dataSource: r };
+}, S = ({ children: t }) => {
+  const { columns: o, dataSource: r } = $(t);
+  return /* @__PURE__ */ u(
+    T,
+    {
+      className: "[&_table]:w-full! [&_table]:table!",
+      columns: o,
+      dataSource: r,
+      pagination: !1,
+      size: "small",
+      bordered: !0
+    }
+  );
+}, { Link: I } = A, L = (t) => {
+  const { url: o, className: r, components: n, ...e } = t, [d, a] = w(e.content), c = async (i) => {
+    const l = await (await fetch(i)).text();
+    a(l);
+  };
+  return x(() => {
+    o && c(o);
+  }, [o]), x(() => {
+    a(e.content);
+  }, [e.content]), /* @__PURE__ */ u(
+    b,
+    {
+      ...e,
+      className: g("[&_h1,h2,h3,h4,h5,h6,ul,ol,p]:[all:revert]", r),
+      content: d,
+      components: {
+        code: N,
+        a: I,
+        table: S,
+        ...n
+      }
+    }
+  );
+};
+export {
+  L as default
+};

package/dist/markdown.umd.cjs

@@ -0,0 +1 @@
+(function(e,f){typeof exports=="object"&&typeof module<"u"?module.exports=f(require("react/jsx-runtime"),require("@ant-design/x-markdown"),require("clsx"),require("react"),require("antd"),require("@ant-design/x")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","@ant-design/x-markdown","clsx","react","antd","@ant-design/x"],f):(e=typeof globalThis<"u"?globalThis:e||self,e.InfinilabsMarkdown=f(e.jsxRuntime,e.AntDesignXMarkdown,e.clsx,e.React,e.antd,e.AntDesignX))})(this,(function(e,f,A,t,m,x){"use strict";const{Text:g}=m.Typography,k=n=>{const{className:o,children:r}=n,i=o?.match(/language-(\w+)/)?.[1]??"";return typeof r!="string"?null:i==="mermaid"?e.jsx(x.Mermaid,{children:r}):i?e.jsx(x.CodeHighlighter,{lang:i,children:r}):e.jsx(g,{code:!0,children:r})},y=n=>typeof n=="string"||typeof n=="number"?String(n):t.isValidElement(n)?y(n.props.children):Array.isArray(n)?n.map(y).join(""):"",C=n=>{const o=[],r=[],i=t.Children.toArray(n);for(const s of i){if(!t.isValidElement(s))continue;const p=s.type;if(p==="thead"){const l=t.Children.toArray(s.props.children);for(const c of l){if(!t.isValidElement(c))continue;const d=t.Children.toArray(c.props.children);let a=0;for(const u of d){if(!t.isValidElement(u))continue;const h=y(u.props.children);o.push({title:h,dataIndex:`col_${a}`,key:`col_${a}`}),a++}}}if(p==="tbody"){const l=t.Children.toArray(s.props.children);let c=0;for(const d of l){if(!t.isValidElement(d))continue;const a={key:`row_${c}`},u=t.Children.toArray(d.props.children);let h=0;for(const w of u)t.isValidElement(w)&&(a[`col_${h}`]=w.props.children,h++);r.push(a),c++}}}return{columns:o,dataSource:r}},T=({children:n})=>{const{columns:o,dataSource:r}=C(n);return e.jsx(m.Table,{className:"[&_table]:w-full! [&_table]:table!",columns:o,dataSource:r,pagination:!1,size:"small",bordered:!0})},{Link:E}=m.Typography;return n=>{const{url:o,className:r,components:i,...s}=n,[p,l]=t.useState(s.content),c=async d=>{const u=await(await fetch(d)).text();l(u)};return t.useEffect(()=>{o&&c(o)},[o]),t.useEffect(()=>{l(s.content)},[s.content]),e.jsx(f.XMarkdown,{...s,className:A("[&_h1,h2,h3,h4,h5,h6,ul,ol,p]:[all:revert]",r),content:p,components:{code:k,a:E,table:T,...i}})}}));

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@infinilabs/markdown",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/markdown.umd.cjs",
+  "module": "./dist/markdown.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/markdown.js",
+      "require": "./dist/markdown.umd.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/x": "^2.1.3",
+    "@ant-design/x-markdown": "^2.1.3",
+    "clsx": "^2.1.1"
+  },
+  "peerDependencies": {
+    "antd": ">=5",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "globals": "^16.5.0",
+    "typescript": "~5.8.2",
+    "unocss": "^66.5.10",
+    "vite": "^7.2.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}