Momento/memento-note/components/markdown-content.tsx

'use client'

import { memo, useMemo } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import rehypeRaw from 'rehype-raw'
import 'katex/dist/katex.min.css'
import { NoteChartFromCode } from './note-chart'

// Memoized wrapper to prevent infinite re-renders
const ChartWrapper = memo(function ChartWrapper({ code }: { code: string }) {
  return <NoteChartFromCode code={code} />
})

interface MarkdownContentProps {
  content: string
  className?: string
}

export const MarkdownContent = memo(function MarkdownContent({ content, className }: MarkdownContentProps) {
  return (
    <div dir="auto" className={`prose prose-sm prose-compact dark:prose-invert max-w-none break-words ${className}`}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm, remarkMath]}
        rehypePlugins={[rehypeKatex, rehypeRaw]}
        components={{
          a: ({ node, ...props }) => (
            <a {...props} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer" />
          ),
          code({ node, inline, className, children, ...props }: any) {
            const match = /language-(\w+)/.exec(className || '')
            const language = match ? match[1] : ''

            // Chart code blocks - memoized to prevent infinite loops
            if (language === 'chart') {
              const chartCode = String(children).replace(/\n$/, '')
              return <ChartWrapper key={chartCode.slice(0, 50)} code={chartCode} />
            }

            // Other code blocks
            if (!inline && match) {
              return (
                <code className={className} {...props}>
                  {children}
                </code>
              )
            }

            return (
              <code className="bg-muted px-1.5 py-0.5 rounded text-sm" {...props}>
                {children}
              </code>
            )
          },
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  )
})