beca2c52c3
- Add NoteChart component using Recharts (bar, line, area, pie, radar, funnel, gauge)
- Add generate_chart and insert_chart_in_note AI tools
- Add chart code block support in MarkdownContent (```chart ... ```)
- Support JSON and simple data formats (label: value)
- Add i18n translations for chart features
Chart syntax examples:
- JSON: ```chart {"type":"bar","data":[{"label":"A","value":10}]} ```
- Simple: ```chart\nbar\nSales Data\nJan: 120\nFeb: 150\n```
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { memo } 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'
|
|
|
|
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
|
|
if (language === 'chart') {
|
|
return <NoteChartFromCode code={String(children).replace(/\n$/, '')} />
|
|
}
|
|
|
|
// 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>
|
|
)
|
|
})
|