fix(chart): prevent infinite loops and remove hardcoded text
- Memoize ChartWrapper to prevent infinite re-renders in MarkdownContent - Remove hardcoded French text (multilingual app) - Return null for invalid charts instead of error messages
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { memo } from 'react'
|
import { memo, useMemo } from 'react'
|
||||||
import ReactMarkdown from 'react-markdown'
|
import ReactMarkdown from 'react-markdown'
|
||||||
import remarkGfm from 'remark-gfm'
|
import remarkGfm from 'remark-gfm'
|
||||||
import remarkMath from 'remark-math'
|
import remarkMath from 'remark-math'
|
||||||
@@ -9,6 +9,11 @@ import rehypeRaw from 'rehype-raw'
|
|||||||
import 'katex/dist/katex.min.css'
|
import 'katex/dist/katex.min.css'
|
||||||
import { NoteChartFromCode } from './note-chart'
|
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 {
|
interface MarkdownContentProps {
|
||||||
content: string
|
content: string
|
||||||
className?: string
|
className?: string
|
||||||
@@ -28,9 +33,10 @@ export const MarkdownContent = memo(function MarkdownContent({ content, classNam
|
|||||||
const match = /language-(\w+)/.exec(className || '')
|
const match = /language-(\w+)/.exec(className || '')
|
||||||
const language = match ? match[1] : ''
|
const language = match ? match[1] : ''
|
||||||
|
|
||||||
// Chart code blocks
|
// Chart code blocks - memoized to prevent infinite loops
|
||||||
if (language === 'chart') {
|
if (language === 'chart') {
|
||||||
return <NoteChartFromCode code={String(children).replace(/\n$/, '')} />
|
const chartCode = String(children).replace(/\n$/, '')
|
||||||
|
return <ChartWrapper key={chartCode.slice(0, 50)} code={chartCode} />
|
||||||
}
|
}
|
||||||
|
|
||||||
// Other code blocks
|
// Other code blocks
|
||||||
|
|||||||
@@ -182,7 +182,7 @@ function NoteChart({ type, title, data, colors, showLegend, height = 250 }: Note
|
|||||||
}
|
}
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return <div className="text-center text-muted-foreground py-8">Type de graphique non supporté: {type}</div>
|
return null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -246,6 +246,6 @@ export function parseChartFromCode(code: string): NoteChartProps | null {
|
|||||||
|
|
||||||
export function NoteChartFromCode({ code }: { code: string }) {
|
export function NoteChartFromCode({ code }: { code: string }) {
|
||||||
const props = useMemo(() => parseChartFromCode(code), [code])
|
const props = useMemo(() => parseChartFromCode(code), [code])
|
||||||
if (!props) return <div className="text-center text-muted-foreground py-4">Format de graphique invalide</div>
|
if (!props) return null
|
||||||
return <NoteChart {...props} />
|
return <NoteChart {...props} />
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user