pd-markdown 1.0.0

package/packages/web/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@pd-markdown/web",
+  "version": "0.1.0",
+  "description": "React components for rendering markdown",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "rollup -c rollup.config.ts --configPlugin typescript",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  },
+  "dependencies": {
+    "@pd-markdown/parser": "workspace:*",
+    "@pd-markdown/utils": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.2.0",
+    "@types/mdast": "^4.0.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "jsdom": "^26.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "sideEffects": false,
+  "license": "MIT"
+}

package/packages/web/rollup.config.ts

@@ -0,0 +1,36 @@
+import typescript from '@rollup/plugin-typescript'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import { defineConfig } from 'rollup'
+
+export default defineConfig({
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/index.mjs',
+      format: 'esm',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/index.cjs',
+      format: 'cjs',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: true,
+      declarationDir: './dist',
+    }),
+  ],
+  external: [
+    'react',
+    'react-dom',
+    'react/jsx-runtime',
+    '@pd-markdown/utils',
+    '@pd-markdown/parser',
+  ],
+})

package/packages/web/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,70 @@
+import type { FC, CSSProperties } from 'react'
+import type { Root } from 'mdast'
+import { createParser, type ParserOptions } from '@pd-markdown/parser'
+import { MarkdownContext } from './context'
+import { NodeRenderer } from './NodeRenderer'
+import type { ComponentMap } from './defaults'
+
+export interface MarkdownRendererProps {
+  /** Markdown source string (will be parsed) */
+  source?: string
+  /** Pre-parsed AST (skip parsing, useful for SSR) */
+  ast?: Root
+  /** Custom component overrides */
+  components?: Partial<ComponentMap>
+  /** CSS class name for wrapper */
+  className?: string
+  /** Inline styles for wrapper */
+  style?: CSSProperties
+  /** Parser options (only used when source is provided) */
+  parserOptions?: ParserOptions
+}
+
+// Singleton parser for client-side use
+let defaultParser: ReturnType<typeof createParser> | null = null
+
+function getParser(options?: ParserOptions) {
+  if (options) {
+    return createParser(options)
+  }
+  if (!defaultParser) {
+    defaultParser = createParser()
+  }
+  return defaultParser
+}
+
+/**
+ * Main markdown renderer component
+ *
+ * Supports both client-side and server-side rendering:
+ * - Pass `source` for automatic parsing
+ * - Pass `ast` for pre-parsed content (SSR optimization)
+ */
+export const MarkdownRenderer: FC<MarkdownRendererProps> = ({
+  source,
+  ast,
+  components = {},
+  className,
+  style,
+  parserOptions,
+}) => {
+  // Use provided AST or parse source
+  let tree: Root
+  if (ast) {
+    tree = ast
+  } else if (source) {
+    const parser = getParser(parserOptions)
+    tree = parser.parse(source)
+  } else {
+    // No content provided
+    return null
+  }
+
+  return (
+    <MarkdownContext.Provider value={{ components }}>
+      <div className={className} style={style}>
+        <NodeRenderer node={tree} />
+      </div>
+    </MarkdownContext.Provider>
+  )
+}

package/packages/web/src/components/NodeRenderer.tsx

@@ -0,0 +1,205 @@
+import type { FC, ReactNode } from 'react'
+import type { Content, Root, PhrasingContent, Parent } from 'mdast'
+import { useMarkdownContext } from './context'
+import { defaultComponents } from './defaults'
+
+export interface NodeRendererProps {
+  node: Content | Root
+}
+
+/**
+ * Recursive node renderer that renders AST nodes to React elements
+ */
+export const NodeRenderer: FC<NodeRendererProps> = ({ node }) => {
+  const { components } = useMarkdownContext()
+
+  // Get the component for this node type
+  const getComponent = (type: string) => {
+    return components[type] || defaultComponents[type]
+  }
+
+  // Render children nodes
+  const renderChildren = (children: Content[]): ReactNode => {
+    return children.map((child, index) => (
+      <NodeRenderer key={index} node={child} />
+    ))
+  }
+
+  // Render phrasing content (inline elements)
+  const renderPhrasingContent = (children: PhrasingContent[]): ReactNode => {
+    return children.map((child, index) => {
+      switch (child.type) {
+        case 'text':
+          return child.value
+
+        case 'strong':
+          return <strong key={index}>{renderPhrasingContent(child.children)}</strong>
+
+        case 'emphasis':
+          return <em key={index}>{renderPhrasingContent(child.children)}</em>
+
+        case 'delete':
+          return <del key={index}>{renderPhrasingContent(child.children)}</del>
+
+        case 'inlineCode': {
+          const InlineCode = getComponent('inlineCode')
+          return InlineCode ? <InlineCode key={index} node={child} /> : <code key={index}>{child.value}</code>
+        }
+
+        case 'link': {
+          const Link = getComponent('link')
+          return Link ? (
+            <Link key={index} node={child}>
+              {renderPhrasingContent(child.children)}
+            </Link>
+          ) : (
+            <a key={index} href={child.url}>
+              {renderPhrasingContent(child.children)}
+            </a>
+          )
+        }
+
+        case 'image': {
+          const Image = getComponent('image')
+          return Image ? <Image key={index} node={child} /> : <img key={index} src={child.url} alt={child.alt || ''} />
+        }
+
+        case 'break':
+          return <br key={index} />
+
+        case 'html':
+          // For safety, render HTML as text in React
+          return child.value
+
+        default:
+          // For unknown inline types, try to render as text if possible
+          if ('value' in child && typeof child.value === 'string') {
+            return child.value
+          }
+          if ('children' in child) {
+            return renderPhrasingContent((child as any).children)
+          }
+          return null
+      }
+    })
+  }
+
+  // Handle different node types
+  switch (node.type) {
+    case 'root':
+      return <>{renderChildren(node.children)}</>
+
+    case 'heading': {
+      const Heading = getComponent('heading')
+      return Heading ? (
+        <Heading node={node}>{renderPhrasingContent(node.children)}</Heading>
+      ) : null
+    }
+
+    case 'paragraph': {
+      const Paragraph = getComponent('paragraph')
+      return Paragraph ? (
+        <Paragraph node={node}>{renderPhrasingContent(node.children)}</Paragraph>
+      ) : null
+    }
+
+    case 'list': {
+      const List = getComponent('list')
+      return List ? (
+        <List node={node}>{renderChildren(node.children)}</List>
+      ) : null
+    }
+
+    case 'listItem': {
+      const ListItem = getComponent('listItem')
+      const children = node.children.map((child, index) => {
+        // Unwrap single paragraph in list item
+        if (child.type === 'paragraph' && node.children.length === 1) {
+          return renderPhrasingContent(child.children)
+        }
+        return <NodeRenderer key={index} node={child} />
+      })
+      return ListItem ? <ListItem node={node}>{children}</ListItem> : null
+    }
+
+    case 'table': {
+      const Table = getComponent('table')
+      const TableRow = getComponent('tableRow')
+      
+      if (!Table || !TableRow) return null
+
+      const [headerRow, ...bodyRows] = node.children
+
+      return (
+        <Table node={node}>
+          {headerRow && (
+            <TableRow node={headerRow} isHeader>
+              {headerRow.children.map((cell, index) => (
+                <NodeRenderer key={index} node={cell} />
+              ))}
+            </TableRow>
+          )}
+          {bodyRows.length > 0 && (
+            <tbody>
+              {bodyRows.map((row, rowIndex) => (
+                <TableRow key={rowIndex} node={row}>
+                  {row.children.map((cell, cellIndex) => (
+                    <NodeRenderer key={cellIndex} node={cell} />
+                  ))}
+                </TableRow>
+              ))}
+            </tbody>
+          )}
+        </Table>
+      )
+    }
+
+    case 'tableCell': {
+      const TableCell = getComponent('tableCell')
+      return TableCell ? (
+        <TableCell node={node}>{renderPhrasingContent(node.children)}</TableCell>
+      ) : null
+    }
+
+    case 'code': {
+      const Code = getComponent('code')
+      return Code ? <Code node={node} /> : null
+    }
+
+    case 'blockquote': {
+      const Blockquote = getComponent('blockquote')
+      return Blockquote ? (
+        <Blockquote node={node}>{renderChildren(node.children)}</Blockquote>
+      ) : null
+    }
+
+    case 'thematicBreak':
+      return <hr />
+
+    case 'html':
+      // For safety, don't render raw HTML by default
+      return null
+
+    case 'yaml':
+      // Frontmatter shouldn't be rendered
+      return null
+
+    default: {
+      // Try to find a custom component for unknown types
+      const CustomComponent = getComponent(node.type)
+      if (CustomComponent) {
+        const children = 'children' in node 
+          ? renderChildren((node as Parent).children as Content[])
+          : undefined
+        return <CustomComponent node={node}>{children}</CustomComponent>
+      }
+      
+      // Fallback: try to render children if available
+      if ('children' in node) {
+        return <>{renderChildren((node as Parent).children as Content[])}</>
+      }
+      
+      return null
+    }
+  }
+}

package/packages/web/src/components/context.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react'
+import type { ComponentMap } from './defaults'
+
+/**
+ * Context value for markdown renderer
+ */
+export interface MarkdownContextValue {
+  /** Custom component overrides */
+  components: Partial<ComponentMap>
+}
+
+/**
+ * Context for passing configuration down the component tree
+ */
+export const MarkdownContext = createContext<MarkdownContextValue>({
+  components: {},
+})
+
+/**
+ * Hook to access markdown context
+ */
+export function useMarkdownContext(): MarkdownContextValue {
+  return useContext(MarkdownContext)
+}

package/packages/web/src/components/defaults/Blockquote.tsx

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from 'react'
+import type { Blockquote as BlockquoteNode } from 'mdast'
+
+export interface BlockquoteProps {
+  node: BlockquoteNode
+  children: ReactNode
+}
+
+export const Blockquote: FC<BlockquoteProps> = ({ children }) => {
+  return <blockquote>{children}</blockquote>
+}

package/packages/web/src/components/defaults/Code.tsx

@@ -0,0 +1,26 @@
+import type { FC, ReactNode } from 'react'
+import type { Code as CodeNode, InlineCode } from 'mdast'
+
+export interface CodeProps {
+  node: CodeNode
+  children?: ReactNode
+}
+
+export const Code: FC<CodeProps> = ({ node }) => {
+  const className = node.lang ? `language-${node.lang}` : undefined
+
+  return (
+    <pre>
+      <code className={className}>{node.value}</code>
+    </pre>
+  )
+}
+
+export interface InlineCodeProps {
+  node: InlineCode
+  children?: ReactNode
+}
+
+export const InlineCodeComponent: FC<InlineCodeProps> = ({ node }) => {
+  return <code>{node.value}</code>
+}

package/packages/web/src/components/defaults/Heading.tsx

@@ -0,0 +1,14 @@
+import type { FC, ReactNode } from 'react'
+import type { Heading as HeadingNode } from 'mdast'
+
+export interface HeadingProps {
+  node: HeadingNode
+  children: ReactNode
+}
+
+export const Heading: FC<HeadingProps> = ({ node, children }) => {
+  const Tag = `h${node.depth}` as const
+  const id = node.data && 'id' in node.data ? (node.data.id as string) : undefined
+
+  return <Tag id={id}>{children}</Tag>
+}

package/packages/web/src/components/defaults/Image.tsx

@@ -0,0 +1,10 @@
+import type { FC } from 'react'
+import type { Image as ImageNode } from 'mdast'
+
+export interface ImageProps {
+  node: ImageNode
+}
+
+export const Image: FC<ImageProps> = ({ node }) => {
+  return <img src={node.url} alt={node.alt || ''} title={node.title || undefined} />
+}

package/packages/web/src/components/defaults/Link.tsx

@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from 'react'
+import type { Link as LinkNode } from 'mdast'
+
+export interface LinkProps {
+  node: LinkNode
+  children: ReactNode
+}
+
+export const Link: FC<LinkProps> = ({ node, children }) => {
+  // Basic security: prevent javascript: URLs
+  const href = node.url?.startsWith('javascript:') ? '#' : node.url
+
+  return (
+    <a href={href} title={node.title || undefined}>
+      {children}
+    </a>
+  )
+}

package/packages/web/src/components/defaults/List.tsx

@@ -0,0 +1,33 @@
+import type { FC, ReactNode } from 'react'
+import type { List as ListNode, ListItem as ListItemNode } from 'mdast'
+
+export interface ListProps {
+  node: ListNode
+  children: ReactNode
+}
+
+export const List: FC<ListProps> = ({ node, children }) => {
+  const Tag = node.ordered ? 'ol' : 'ul'
+  const start = node.ordered && node.start != null && node.start !== 1 ? node.start : undefined
+
+  return <Tag start={start}>{children}</Tag>
+}
+
+export interface ListItemProps {
+  node: ListItemNode
+  children: ReactNode
+}
+
+export const ListItem: FC<ListItemProps> = ({ node, children }) => {
+  // Handle task list items
+  if (typeof node.checked === 'boolean') {
+    return (
+      <li className="task-list-item">
+        <input type="checkbox" checked={node.checked} readOnly />
+        <span>{children}</span>
+      </li>
+    )
+  }
+
+  return <li>{children}</li>
+}

package/packages/web/src/components/defaults/Paragraph.tsx

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from 'react'
+import type { Paragraph as ParagraphNode } from 'mdast'
+
+export interface ParagraphProps {
+  node: ParagraphNode
+  children: ReactNode
+}
+
+export const Paragraph: FC<ParagraphProps> = ({ children }) => {
+  return <p>{children}</p>
+}

package/packages/web/src/components/defaults/Table.tsx

@@ -0,0 +1,50 @@
+import type { FC, ReactNode } from 'react'
+import type {
+  Table as TableNode,
+  TableRow as TableRowNode,
+  TableCell as TableCellNode,
+} from 'mdast'
+
+export interface TableProps {
+  node: TableNode
+  children: ReactNode
+}
+
+export const Table: FC<TableProps> = ({ children }) => {
+  return (
+    <table>
+      {children}
+    </table>
+  )
+}
+
+export interface TableRowProps {
+  node: TableRowNode
+  children: ReactNode
+  isHeader?: boolean
+}
+
+export const TableRow: FC<TableRowProps> = ({ children, isHeader }) => {
+  if (isHeader) {
+    return (
+      <thead>
+        <tr>{children}</tr>
+      </thead>
+    )
+  }
+  return <tr>{children}</tr>
+}
+
+export interface TableCellProps {
+  node: TableCellNode
+  children: ReactNode
+}
+
+export const TableCell: FC<TableCellProps> = ({ node, children }) => {
+  const isHeader = node.data?.isHeader
+  const align = node.data?.align as 'left' | 'center' | 'right' | null
+  const Tag = isHeader ? 'th' : 'td'
+  const style = align ? { textAlign: align } : undefined
+
+  return <Tag style={style}>{children}</Tag>
+}

package/packages/web/src/components/defaults/index.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+
+import { Heading, HeadingProps } from './Heading'
+import { Paragraph, ParagraphProps } from './Paragraph'
+import { List, ListItem, ListProps, ListItemProps } from './List'
+import { Table, TableRow, TableCell, TableProps, TableRowProps, TableCellProps } from './Table'
+import { Code, InlineCodeComponent, CodeProps, InlineCodeProps } from './Code'
+import { Link, LinkProps } from './Link'
+import { Image, ImageProps } from './Image'
+import { Blockquote, BlockquoteProps } from './Blockquote'
+
+// Re-export all components
+export {
+  Heading,
+  Paragraph,
+  List,
+  ListItem,
+  Table,
+  TableRow,
+  TableCell,
+  Code,
+  InlineCodeComponent,
+  Link,
+  Image,
+  Blockquote,
+}
+
+// Re-export prop types
+export type {
+  HeadingProps,
+  ParagraphProps,
+  ListProps,
+  ListItemProps,
+  TableProps,
+  TableRowProps,
+  TableCellProps,
+  CodeProps,
+  InlineCodeProps,
+  LinkProps,
+  ImageProps,
+  BlockquoteProps,
+}
+
+/**
+ * Map of node types to their corresponding React components
+ */
+export interface ComponentMap {
+  heading: React.FC<HeadingProps>
+  paragraph: React.FC<ParagraphProps>
+  list: React.FC<ListProps>
+  listItem: React.FC<ListItemProps>
+  table: React.FC<TableProps>
+  tableRow: React.FC<TableRowProps>
+  tableCell: React.FC<TableCellProps>
+  code: React.FC<CodeProps>
+  inlineCode: React.FC<InlineCodeProps>
+  link: React.FC<LinkProps>
+  image: React.FC<ImageProps>
+  blockquote: React.FC<BlockquoteProps>
+  // Allow custom node types
+  [key: string]: React.FC<any>
+}
+
+/**
+ * Default component map
+ */
+export const defaultComponents: ComponentMap = {
+  heading: Heading,
+  paragraph: Paragraph,
+  list: List,
+  listItem: ListItem,
+  table: Table,
+  tableRow: TableRow,
+  tableCell: TableCell,
+  code: Code,
+  inlineCode: InlineCodeComponent,
+  link: Link,
+  image: Image,
+  blockquote: Blockquote,
+}

package/packages/web/src/hooks/useMarkdown.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+import type { Root } from 'mdast'
+import { createParser, type ParserOptions } from '@pd-markdown/parser'
+
+// Cached parser instance
+let cachedParser: ReturnType<typeof createParser> | null = null
+
+function getParser(options?: ParserOptions) {
+  if (options) {
+    return createParser(options)
+  }
+  if (!cachedParser) {
+    cachedParser = createParser()
+  }
+  return cachedParser
+}
+
+/**
+ * Hook for parsing markdown on the client side
+ *
+ * @param source - Markdown source string
+ * @param options - Parser options
+ * @returns Parsed AST
+ */
+export function useMarkdown(source: string, options?: ParserOptions): Root {
+  const ast = useMemo(() => {
+    const parser = getParser(options)
+    return parser.parse(source)
+  }, [source, options])
+
+  return ast
+}