ink-markdown-es 1.0.0

package/README.md

@@ -0,0 +1,95 @@
+# ink-markdown-es
+
+A modern performance markdown renderer for [ink](https://github.com/vadimdemedes/ink) using [marked](https://github.com/markedjs/marked).
+
+Inspired by [ink-markdown](https://github.com/vadimdemedes/ink-markdown) and [prompt-kit](https://github.com/ibelick/prompt-kit).
+
+Compare with [ink-markdown](https://github.com/vadimdemedes/ink-markdown):
+
+- **ES module** support & only
+- Use memo & useMemo to improve performance
+- More flexible configuration (`renderers`  prop)
+
+## Quick Start
+
+```bash
+npm install ink-markdown-es  # npm
+
+pnpm add ink-markdown-es     # pnpm
+
+bun add ink-markdown-es      # bun
+```
+
+```tsx
+import Markdown from "ink-markdown-es";
+import { render } from "ink";
+
+const text = `# Hello World
+
+This is a show case.
+It's very fast!
+
+## Features
+- Render markdown in ink
+- Support custom renderers
+- **Bold text** and *italic text*
+- Inline \`code\` support
+
+### Code Block
+
+\`\`\`javascript
+const hello = "world";
+console.log(hello);
+\`\`\`
+
+> This is a blockquote
+> with multiple lines
+
+---
+
+Check out [this link](https://example.com) for more info.
+
+1. First item
+2. Second item
+3. Third item
+
+| Name | Age |
+|------|-----|
+| Alice | 25 |
+| Bob | 30 |
+`;
+
+render(
+  <Markdown
+    showSharp
+    renderers={{
+      h1: (text) => (
+        <Box padding={1} borderStyle="round" borderDimColor>
+          <Text bold color="greenBright">
+            {text}
+          </Text>
+        </Box>
+      ),
+    }}
+  >
+    {text}
+  </Markdown>
+);
+```
+
+<img width="1919" height="689" alt="image" src="https://github.com/user-attachments/assets/d7cc741d-4c52-4b27-b183-ca8cce13007b" />
+
+
+## Contributing
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run dev
+```

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+import type { BlockStyles, BoxStyleProps, TextStyleProps } from './types';
+export declare const DEFAULT_STYLES: BlockStyles;
+export declare const TEXT_STYLE_KEYS: (keyof TextStyleProps)[];
+export declare const BOX_STYLE_KEYS: (keyof BoxStyleProps)[];

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { type Token, type Tokens } from 'marked';
+import type { MarkdownProps } from './types';
+declare function MarkdownComponent({ children, styles, renderers, showSharp, }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+declare const Markdown: import("react").MemoExoticComponent<typeof MarkdownComponent>;
+export default Markdown;
+export type { Token, Tokens };

package/dist/index.js

@@ -0,0 +1,389 @@
+import { memo, useId, useMemo } from "react";
+import { marked } from "marked";
+import { Box, Text } from "ink";
+const DEFAULT_STYLES = {
+    h1: {
+        bold: true,
+        marginBottom: 1,
+        color: '#f74cc7ff'
+    },
+    h2: {
+        bold: true,
+        marginBottom: 1,
+        color: '#326cfcff'
+    },
+    h3: {
+        bold: true,
+        color: '#24ffedff'
+    },
+    h4: {
+        bold: true,
+        color: '#e29418ff'
+    },
+    h5: {
+        bold: true,
+        color: '#9fc214ff'
+    },
+    h6: {
+        bold: true,
+        dimColor: true,
+        color: '#88eb2bff'
+    },
+    paragraph: {},
+    blockquote: {
+        paddingLeft: 1,
+        dimColor: true,
+        borderTop: false,
+        borderBottom: false,
+        borderRight: false,
+        borderStyle: 'single',
+        borderDimColor: true
+    },
+    code: {
+        marginTop: 1
+    },
+    codespan: {
+        dimColor: true
+    },
+    list: {},
+    listItem: {
+        bullet: '●',
+        paddingLeft: 2
+    },
+    hr: {
+        char: '─',
+        width: 40,
+        dimColor: true
+    },
+    link: {
+        color: '#343afcff',
+        underline: true
+    },
+    strong: {
+        bold: true
+    },
+    em: {
+        italic: true
+    },
+    del: {
+        strikethrough: true,
+        dimColor: true
+    },
+    image: {
+        color: 'blue'
+    },
+    table: {},
+    tableCell: {
+        paddingRight: 2
+    }
+};
+const TEXT_STYLE_KEYS = [
+    'color',
+    'backgroundColor',
+    'dimColor',
+    'bold',
+    'italic',
+    'underline',
+    'strikethrough',
+    'inverse',
+    'wrap'
+];
+const BOX_STYLE_KEYS = [
+    'paddingLeft',
+    'paddingRight',
+    'paddingTop',
+    'paddingBottom',
+    'padding',
+    'paddingX',
+    'paddingY',
+    'marginLeft',
+    'marginRight',
+    'marginTop',
+    'marginBottom',
+    'margin',
+    'marginX',
+    'marginY',
+    'borderStyle',
+    'borderColor',
+    'borderTop',
+    'borderBottom',
+    'borderLeft',
+    'borderRight',
+    'borderDimColor',
+    'borderTopColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'borderRightColor',
+    'borderTopDimColor',
+    'borderBottomDimColor',
+    'borderLeftDimColor',
+    'borderRightDimColor'
+];
+function extractTextProps(style) {
+    if (!style) return {};
+    const result = {};
+    for (const key of TEXT_STYLE_KEYS)if (key in style) result[key] = style[key];
+    return result;
+}
+function extractBoxProps(style) {
+    if (!style) return {};
+    const result = {};
+    for (const key of BOX_STYLE_KEYS)if (key in style) result[key] = style[key];
+    return result;
+}
+function mergeStyles(defaultStyle, userStyle) {
+    if (!defaultStyle && !userStyle) return {};
+    if (!defaultStyle) return userStyle;
+    if (!userStyle) return defaultStyle;
+    return {
+        ...defaultStyle,
+        ...userStyle
+    };
+}
+function renderInlineTokens(tokens, styles, renderers) {
+    if (!tokens || 0 === tokens.length) return null;
+    return tokens.map((token, index)=>{
+        const key = `inline-${index}`;
+        switch(token.type){
+            case 'text':
+            case 'escape':
+                {
+                    const textToken = token;
+                    if ('tokens' in textToken && textToken.tokens) return /*#__PURE__*/ React.createElement(Text, {
+                        key: key
+                    }, renderInlineTokens(textToken.tokens, styles, renderers));
+                    return /*#__PURE__*/ React.createElement(Text, {
+                        key: key
+                    }, textToken.text);
+                }
+            case 'strong':
+                {
+                    const strongToken = token;
+                    const strongStyle = mergeStyles(DEFAULT_STYLES.strong, styles.strong);
+                    if (renderers.strong) return /*#__PURE__*/ React.createElement(Text, {
+                        key: key
+                    }, renderers.strong(renderInlineTokens(strongToken.tokens, styles, renderers), strongToken));
+                    return /*#__PURE__*/ React.createElement(Text, {
+                        key: key,
+                        ...extractTextProps(strongStyle)
+                    }, renderInlineTokens(strongToken.tokens, styles, renderers));
+                }
+            case 'em':
+                {
+                    const emToken = token;
+                    const emStyle = mergeStyles(DEFAULT_STYLES.em, styles.em);
+                    if (renderers.em) return /*#__PURE__*/ React.createElement(Text, {
+                        key: key
+                    }, renderers.em(renderInlineTokens(emToken.tokens, styles, renderers), emToken));
+                    return /*#__PURE__*/ React.createElement(Text, {
+                        key: key,
+                        ...extractTextProps(emStyle)
+                    }, renderInlineTokens(emToken.tokens, styles, renderers));
+                }
+            case 'del':
+                {
+                    const delToken = token;
+                    const delStyle = mergeStyles(DEFAULT_STYLES.del, styles.del);
+                    if (renderers.del) return /*#__PURE__*/ React.createElement(Text, {
+                        key: key
+                    }, renderers.del(renderInlineTokens(delToken.tokens, styles, renderers), delToken));
+                    return /*#__PURE__*/ React.createElement(Text, {
+                        key: key,
+                        ...extractTextProps(delStyle)
+                    }, renderInlineTokens(delToken.tokens, styles, renderers));
+                }
+            case 'codespan':
+                {
+                    const codespanToken = token;
+                    const codespanStyle = mergeStyles(DEFAULT_STYLES.codespan, styles.codespan);
+                    if (renderers.codespan) return /*#__PURE__*/ React.createElement(Text, {
+                        key: key
+                    }, renderers.codespan(codespanToken.text, codespanToken));
+                    return /*#__PURE__*/ React.createElement(Text, {
+                        key: key,
+                        ...extractTextProps(codespanStyle)
+                    }, codespanToken.text);
+                }
+            case 'link':
+                {
+                    const linkToken = token;
+                    const linkStyle = mergeStyles(DEFAULT_STYLES.link, styles.link);
+                    if (renderers.link) return /*#__PURE__*/ React.createElement(Text, {
+                        key: key
+                    }, renderers.link(linkToken.text, linkToken.href, linkToken.title, linkToken));
+                    return /*#__PURE__*/ React.createElement(Text, {
+                        key: key,
+                        ...extractTextProps(linkStyle)
+                    }, linkToken.text, linkToken.href && ` (${linkToken.href})`);
+                }
+            case 'image':
+                {
+                    const imageToken = token;
+                    const imageStyle = mergeStyles(DEFAULT_STYLES.image, styles.image);
+                    if (renderers.image) return /*#__PURE__*/ React.createElement(Text, {
+                        key: key
+                    }, renderers.image(imageToken.text, imageToken.href, imageToken.title, imageToken));
+                    return /*#__PURE__*/ React.createElement(Text, {
+                        key: key,
+                        ...extractTextProps(imageStyle)
+                    }, "[Image: ", imageToken.text || imageToken.href, "]");
+                }
+            case 'br':
+                return /*#__PURE__*/ React.createElement(Text, {
+                    key: key
+                }, '\n');
+            default:
+                if ('text' in token) return /*#__PURE__*/ React.createElement(Text, {
+                    key: key
+                }, token.text);
+                return null;
+        }
+    });
+}
+function renderBlockToken(token, styles, renderers, showSharp) {
+    switch(token.type){
+        case 'heading':
+            {
+                const headingToken = token;
+                const headingKey = `h${headingToken.depth}`;
+                const styleKey = `h${headingToken.depth}`;
+                const renderer = renderers[headingKey];
+                if (renderer) return renderer(headingToken.text, headingToken);
+                const headingStyle = mergeStyles(DEFAULT_STYLES[styleKey], styles[styleKey]);
+                const mergedShowSharp = 'boolean' == typeof headingStyle.showSharp ? headingStyle.showSharp : Boolean(showSharp);
+                return /*#__PURE__*/ React.createElement(Box, extractBoxProps(headingStyle), /*#__PURE__*/ React.createElement(Text, extractTextProps(headingStyle), mergedShowSharp && `${'#'.repeat(headingToken.depth)} `, renderInlineTokens(headingToken.tokens, styles, renderers)));
+            }
+        case 'paragraph':
+            {
+                const paragraphToken = token;
+                const paragraphStyle = mergeStyles(DEFAULT_STYLES.paragraph, styles.paragraph);
+                const content = renderInlineTokens(paragraphToken.tokens, styles, renderers);
+                if (renderers.paragraph) return renderers.paragraph(content, paragraphToken);
+                return /*#__PURE__*/ React.createElement(Box, extractBoxProps(paragraphStyle), /*#__PURE__*/ React.createElement(Text, extractTextProps(paragraphStyle), content));
+            }
+        case 'code':
+            {
+                const codeToken = token;
+                const codeStyle = mergeStyles(DEFAULT_STYLES.code, styles.code);
+                if (renderers.code) return renderers.code(codeToken.text, codeToken.lang, codeToken);
+                return /*#__PURE__*/ React.createElement(Box, extractBoxProps(codeStyle), /*#__PURE__*/ React.createElement(Text, extractTextProps(codeStyle), codeToken.text));
+            }
+        case 'blockquote':
+            {
+                const blockquoteToken = token;
+                const blockquoteStyle = mergeStyles(DEFAULT_STYLES.blockquote, styles.blockquote);
+                const content = blockquoteToken.tokens.map((t, i)=>/*#__PURE__*/ React.createElement(Box, {
+                        key: `bq-${i}`
+                    }, renderBlockToken(t, styles, renderers)));
+                if (renderers.blockquote) return renderers.blockquote(/*#__PURE__*/ React.createElement(React.Fragment, null, content), blockquoteToken);
+                return /*#__PURE__*/ React.createElement(Box, extractBoxProps(blockquoteStyle), /*#__PURE__*/ React.createElement(Box, {
+                    flexDirection: "column"
+                }, blockquoteToken.tokens.map((t, i)=>{
+                    const rendered = renderBlockToken(t, styles, renderers);
+                    if (rendered) return /*#__PURE__*/ React.createElement(Text, {
+                        key: `bq-text-${i}`,
+                        ...extractTextProps(blockquoteStyle)
+                    }, 'paragraph' === t.type ? renderInlineTokens(t.tokens, styles, renderers) : t.text || '');
+                    return null;
+                })));
+            }
+        case 'list':
+            {
+                const listToken = token;
+                const listStyle = mergeStyles(DEFAULT_STYLES.list, styles.list);
+                const listItemStyle = mergeStyles(DEFAULT_STYLES.listItem, styles.listItem);
+                const bullet = listItemStyle.bullet || '●';
+                const items = listToken.items.map((item, index)=>{
+                    const start = 'number' == typeof listToken.start ? listToken.start : 1;
+                    const prefix = listToken.ordered ? `${start + index}. ` : `${bullet} `;
+                    const itemContent = renderInlineTokens(item.tokens, styles, renderers);
+                    if (renderers.listItem) return /*#__PURE__*/ React.createElement(Box, {
+                        key: `li-${index}`,
+                        ...extractBoxProps(listItemStyle)
+                    }, renderers.listItem(itemContent, item));
+                    return /*#__PURE__*/ React.createElement(Box, {
+                        key: `li-${index}`,
+                        ...extractBoxProps(listItemStyle)
+                    }, /*#__PURE__*/ React.createElement(Text, extractTextProps(listItemStyle), prefix, itemContent));
+                });
+                if (renderers.list) return renderers.list(items, listToken.ordered, listToken);
+                return /*#__PURE__*/ React.createElement(Box, {
+                    flexDirection: "column",
+                    ...extractBoxProps(listStyle)
+                }, items);
+            }
+        case 'hr':
+            {
+                const hrToken = token;
+                const hrStyle = mergeStyles(DEFAULT_STYLES.hr, styles.hr);
+                const char = hrStyle.char || '─';
+                const width = hrStyle.width || 40;
+                if (renderers.hr) return renderers.hr(hrToken);
+                return /*#__PURE__*/ React.createElement(Box, extractBoxProps(hrStyle), /*#__PURE__*/ React.createElement(Text, extractTextProps(hrStyle), char.repeat(width)));
+            }
+        case 'table':
+            {
+                const tableToken = token;
+                const tableStyle = mergeStyles(DEFAULT_STYLES.table, styles.table);
+                const cellStyle = mergeStyles(DEFAULT_STYLES.tableCell, styles.tableCell);
+                const headerCells = tableToken.header.map((cell, i)=>/*#__PURE__*/ React.createElement(Box, {
+                        key: `th-${i}`,
+                        ...extractBoxProps(cellStyle)
+                    }, /*#__PURE__*/ React.createElement(Text, {
+                        bold: true,
+                        ...extractTextProps(cellStyle)
+                    }, renderInlineTokens(cell.tokens, styles, renderers))));
+                const header = /*#__PURE__*/ React.createElement(Box, {
+                    flexDirection: "row"
+                }, headerCells);
+                const bodyRows = tableToken.rows.map((row, rowIndex)=>/*#__PURE__*/ React.createElement(Box, {
+                        key: `tr-${rowIndex}`,
+                        flexDirection: "row"
+                    }, row.map((cell, cellIndex)=>/*#__PURE__*/ React.createElement(Box, {
+                            key: `td-${cellIndex}`,
+                            ...extractBoxProps(cellStyle)
+                        }, /*#__PURE__*/ React.createElement(Text, extractTextProps(cellStyle), renderInlineTokens(cell.tokens, styles, renderers))))));
+                const body = /*#__PURE__*/ React.createElement(React.Fragment, null, bodyRows);
+                if (renderers.table) return renderers.table(header, body, tableToken);
+                return /*#__PURE__*/ React.createElement(Box, {
+                    flexDirection: "column",
+                    ...extractBoxProps(tableStyle)
+                }, header, body);
+            }
+        case 'space':
+            return /*#__PURE__*/ React.createElement(Text, null, '\n');
+        case 'html':
+            {
+                const htmlToken = token;
+                return /*#__PURE__*/ React.createElement(Text, {
+                    dimColor: true
+                }, htmlToken.text);
+            }
+        default:
+            if ('text' in token) return /*#__PURE__*/ React.createElement(Text, null, token.text);
+            return null;
+    }
+}
+const src_MemoizedBlock = /*#__PURE__*/ memo(function({ token, styles, renderers, showSharp }) {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, renderBlockToken(token, styles, renderers, showSharp));
+}, (prevProps, nextProps)=>prevProps.token === nextProps.token);
+src_MemoizedBlock.displayName = 'MemoizedBlock';
+function MarkdownComponent({ children, styles = {}, renderers = {}, showSharp = false }) {
+    const generatedId = useId();
+    const tokens = useMemo(()=>marked.lexer(children), [
+        children
+    ]);
+    return /*#__PURE__*/ React.createElement(Box, {
+        flexDirection: "column"
+    }, tokens.map((token, index)=>/*#__PURE__*/ React.createElement(src_MemoizedBlock, {
+            key: `${generatedId}-block-${index}`,
+            token: token,
+            styles: styles,
+            renderers: renderers,
+            showSharp: showSharp
+        })));
+}
+const Markdown = /*#__PURE__*/ memo(MarkdownComponent);
+Markdown.displayName = 'Markdown';
+const src = Markdown;
+export default src;

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+import type { TextStyleProps, BoxStyleProps } from './types';
+export declare function extractTextProps(style: (TextStyleProps & BoxStyleProps) | undefined): TextStyleProps;
+export declare function extractBoxProps(style: (TextStyleProps & BoxStyleProps) | undefined): BoxStyleProps;
+export declare function mergeStyles<T>(defaultStyle: T | undefined, userStyle: T | undefined): T;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "ink-markdown-es",
+  "version": "1.0.0",
+  "description": "A modern performance markdown renderer for ink",
+  "keywords": [
+    "markdown",
+    "ink",
+    "react",
+    "esm",
+    "terminal"
+  ],
+  "author": "Mio <miownag@gmail.com>",
+  "repository": "https://github.com/miownag/ink-markdown-es",
+  "license": "MIT",
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "check": "biome check --write",
+    "dev": "bun --watch run examples/index.tsx",
+    "format": "biome format --write",
+    "prepublishOnly": "bun run build"
+  },
+  "devDependencies": {
+    "@rslib/core": "^0.19.2",
+    "@types/bun": "latest",
+    "@types/dedent": "^0.7.2",
+    "@types/react": "^19",
+    "@biomejs/biome": "2.3.8",
+    "ink": "^6",
+    "react": "^19",
+    "react-devtools-core": "^6",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "ink": "^6",
+    "react": "^19"
+  },
+  "dependencies": {
+    "dedent": "^1.7.1",
+    "marked": "^16.4.2"
+  }
+}