import React, { useMemo } from 'react' import type { StyleProp, TextStyle } from 'react-native' import { View } from 'react-native' import type { MarkdownNode } from 'react-native-nitro-markdown' import { parseMarkdownWithOptions } from 'react-native-nitro-markdown' import { MarkdownBlockquote, MarkdownBold, MarkdownCodeBlock, MarkdownCodeInline, MarkdownDocument, MarkdownHeading, MarkdownHorizontalRule, MarkdownImage, MarkdownItalic, MarkdownLineBreak, MarkdownLink, MarkdownList, MarkdownListItem, MarkdownMathBlock, MarkdownMathInline, MarkdownParagraph, MarkdownSoftBreak, MarkdownStrikethrough, MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableRow, MarkdownTaskListItem, MarkdownText } from './markdownItem' import { headingClasses } from './markdownItem/MarkdownHeading' import { SelectableText } from './markdownItem/SelectableText' interface MarkdownRendererProps { content: string } export function MarkdownRenderer({ content }: MarkdownRendererProps) { const ast = useMemo(() => { return parseMarkdownWithOptions(content, { gfm: true, math: true }) }, [content]) return } interface NodeRendererProps { node: MarkdownNode textClassName?: string textStyle?: StyleProp } function getTextContent(node: MarkdownNode): string { if (node.content) return node.content if (!node.children) return '' return node.children.map(getTextContent).join('') } const INLINE_TYPES = new Set([ 'text', 'bold', 'italic', 'strikethrough', 'link', 'code_inline', 'html_inline', 'math_inline', 'soft_break', 'line_break' ]) function isInline(type: MarkdownNode['type']): boolean { return INLINE_TYPES.has(type) } function containsMath(node: MarkdownNode): boolean { if (node.type === 'math_inline' || node.type === 'math_block') return true if (!node.children) return false return node.children.some(containsMath) } const BASE_TEXT_CLASSNAME = 'text-foreground text-base' const mergeClassName = (...classNames: (string | undefined)[]) => { const merged = classNames.filter(Boolean).join(' ') return merged.length ? merged : undefined } const mergeTextStyle = (base?: StyleProp, next?: StyleProp): StyleProp | undefined => { if (base && next) return [base, next] return base ?? next } function NodeRenderer({ node, textClassName, textStyle }: NodeRendererProps) { const renderInlineGroup = ( inlineNodes: MarkdownNode[], groupKey: string | undefined, inlineTextClassName: string | undefined, inlineTextStyle: StyleProp | undefined ) => { if (inlineNodes.length === 0) return null const groupClassName = mergeClassName(BASE_TEXT_CLASSNAME, inlineTextClassName) const hasMath = inlineNodes.some(containsMath) if (!hasMath) { return ( {inlineNodes.map((child, index) => ( ))} ) } const segments: React.ReactNode[] = [] let textRun: MarkdownNode[] = [] const flushTextRun = () => { if (textRun.length === 0) return const runKey = `text-run-${segments.length}` segments.push( {textRun.map((child, index) => ( ))} ) textRun = [] } inlineNodes.forEach((child, index) => { if (containsMath(child)) { flushTextRun() segments.push( ) return } textRun.push(child) }) flushTextRun() return ( {segments} ) } const renderChildren = ( targetNode: MarkdownNode = node, inlineTextClassName: string | undefined = textClassName, inlineTextStyle: StyleProp | undefined = textStyle ) => { if (!targetNode.children) return null const elements: React.ReactNode[] = [] let currentInlineGroup: MarkdownNode[] = [] const flushInlineGroup = () => { if (currentInlineGroup.length > 0) { const groupElement = renderInlineGroup( currentInlineGroup, `inline-group-${elements.length}`, inlineTextClassName, inlineTextStyle ) if (groupElement) { elements.push(groupElement) } currentInlineGroup = [] } } targetNode.children.forEach((child, index) => { if (isInline(child.type)) { currentInlineGroup.push(child) } else { flushInlineGroup() elements.push() } }) flushInlineGroup() return elements } switch (node.type) { case 'document': return {renderChildren()} case 'paragraph': { const paragraphTextClassName = mergeClassName(BASE_TEXT_CLASSNAME, textClassName) if (containsMath(node)) { return {renderChildren(node, textClassName, textStyle)} } return ( {node.children?.map((child, index) => ( ))} ) } case 'heading': { const level = (node.level || 1) as 1 | 2 | 3 | 4 | 5 | 6 const headingTextClassName = mergeClassName(headingClasses[level], textClassName) if (containsMath(node)) { return {renderChildren(node, headingTextClassName, textStyle)} } return ( {node.children?.map((child, index) => ( ))} ) } case 'text': return case 'soft_break': return case 'line_break': return case 'bold': { const boldClassName = mergeClassName(textClassName, 'font-bold') const boldStyle = mergeTextStyle(textStyle, { fontWeight: 'bold' }) if (node.children && containsMath(node)) { return renderInlineGroup(node.children, undefined, boldClassName, boldStyle) } return ( {node.children?.map((child, index) => ( ))} ) } case 'italic': { const italicClassName = mergeClassName(textClassName, 'italic') const italicStyle = mergeTextStyle(textStyle, { fontStyle: 'italic' }) if (node.children && containsMath(node)) { return renderInlineGroup(node.children, undefined, italicClassName, italicStyle) } return ( {node.children?.map((child, index) => ( ))} ) } case 'strikethrough': { const strikeClassName = mergeClassName(textClassName, 'line-through') const strikeStyle = mergeTextStyle(textStyle, { textDecorationLine: 'line-through' }) if (node.children && containsMath(node)) { return renderInlineGroup(node.children, undefined, strikeClassName, strikeStyle) } return ( {node.children?.map((child, index) => ( ))} ) } case 'code_inline': return case 'code_block': return case 'link': { const linkClassName = mergeClassName(textClassName, 'text-blue-600', 'text-base') return ( {node.children?.map((child, index) => ( ))} ) } case 'image': return case 'list': { const ordered = node.ordered ?? false const start = node.start ?? 1 return ( {node.children?.map((child, index) => { if (child.type === 'list_item') { const marker = ordered ? `${start + index}.` : '•' return ( {renderChildren(child)} ) } if (child.type === 'task_list_item') { return ( {renderChildren(child)} ) } return })} ) } case 'list_item': return {renderChildren()} case 'task_list_item': return {renderChildren()} case 'blockquote': return {renderChildren()} case 'horizontal_rule': return case 'table': return {renderChildren()} case 'table_head': return {renderChildren()} case 'table_body': return {renderChildren()} case 'table_row': return {renderChildren()} case 'table_cell': return {renderChildren()} case 'math_inline': return case 'math_block': return case 'html_block': case 'html_inline': return null default: if (node.children) { return <>{renderChildren()} } if (node.content) { return {node.content} } return null } }