@@ -88,34 +88,34 @@ interface MermaidBlockProps {
8888 code : string
8989}
9090
91- export default function MermaidBlock ( { code : originalCode } : MermaidBlockProps ) {
91+ export default function MermaidBlock ( { code } : MermaidBlockProps ) {
9292 const containerRef = useRef < HTMLDivElement > ( null )
9393 const [ isLoading , setIsLoading ] = useState ( false )
9494 const [ error , setError ] = useState < string | null > ( null )
9595 const [ isErrorExpanded , setIsErrorExpanded ] = useState ( false )
9696 const [ svgContent , setSvgContent ] = useState < string > ( "" )
9797 const [ isFixing , setIsFixing ] = useState ( false )
98- const [ code , setCode ] = useState ( "" )
98+ const [ currentCode , setCurrentCode ] = useState ( "" )
9999 const { showCopyFeedback, copyWithFeedback } = useCopyToClipboard ( )
100100 const { t } = useAppTranslation ( )
101101
102102 // 1) Whenever `code` changes, mark that we need to re-render a new chart
103103 useEffect ( ( ) => {
104104 setIsLoading ( true )
105105 setError ( null )
106- setCode ( originalCode )
106+ setCurrentCode ( code )
107107 setIsFixing ( false )
108- } , [ originalCode ] )
108+ } , [ code ] )
109109
110110 const handleSyntaxFix = async ( ) => {
111111 if ( isFixing ) return
112112
113113 setIsLoading ( true )
114114 setIsFixing ( true )
115- const result = await MermaidSyntaxFixer . autoFixSyntax ( code )
115+ const result = await MermaidSyntaxFixer . autoFixSyntax ( currentCode )
116116 if ( result . fixedCode ) {
117117 // Use the improved code even if not completely successful
118- setCode ( result . fixedCode )
118+ setCurrentCode ( result . fixedCode )
119119 }
120120
121121 if ( ! result . success ) {
@@ -134,10 +134,10 @@ export default function MermaidBlock({ code: originalCode }: MermaidBlockProps)
134134 setIsLoading ( true )
135135
136136 mermaid
137- . parse ( code )
137+ . parse ( currentCode )
138138 . then ( ( ) => {
139139 const id = `mermaid-${ Math . random ( ) . toString ( 36 ) . substring ( 2 ) } `
140- return mermaid . render ( id , code )
140+ return mermaid . render ( id , currentCode )
141141 } )
142142 . then ( ( { svg } ) => {
143143 setError ( null )
@@ -153,7 +153,7 @@ export default function MermaidBlock({ code: originalCode }: MermaidBlockProps)
153153 } )
154154 } ,
155155 500 , // Delay 500ms
156- [ code , isFixing , originalCode , t ] , // Dependencies for scheduling
156+ [ currentCode , isFixing , code , t ] , // Dependencies for scheduling
157157 )
158158
159159 /**
@@ -232,7 +232,7 @@ export default function MermaidBlock({ code: originalCode }: MermaidBlockProps)
232232 < CopyButton
233233 onClick = { ( e ) => {
234234 e . stopPropagation ( )
235- const combinedContent = `Error: ${ error } \n\n\`\`\`mermaid\n${ code } \n\`\`\``
235+ const combinedContent = `Error: ${ error } \n\n\`\`\`mermaid\n${ currentCode } \n\`\`\``
236236 copyWithFeedback ( combinedContent , e )
237237 } } >
238238 < span className = { `codicon codicon-${ showCopyFeedback ? "check" : "copy" } ` } > </ span >
@@ -250,20 +250,20 @@ export default function MermaidBlock({ code: originalCode }: MermaidBlockProps)
250250 < div style = { { marginBottom : "8px" , color : "var(--vscode-descriptionForeground)" } } >
251251 { error }
252252 </ div >
253- < CodeBlock language = "mermaid" source = { code } />
254- { code !== originalCode && (
253+ < CodeBlock language = "mermaid" source = { currentCode } />
254+ { currentCode !== code && (
255255 < div style = { { marginTop : "8px" } } >
256256 < div style = { { marginBottom : "4px" , fontSize : "0.9em" , fontWeight : "bold" } } >
257257 { t ( "common:mermaid.original_code" ) }
258258 </ div >
259- < CodeBlock language = "mermaid" source = { originalCode } />
259+ < CodeBlock language = "mermaid" source = { code } />
260260 </ div >
261261 ) }
262262 </ div >
263263 ) }
264264 </ div >
265265 ) : (
266- < MermaidButton containerRef = { containerRef } code = { code } isLoading = { isLoading } svgToPng = { svgToPng } >
266+ < MermaidButton containerRef = { containerRef } code = { currentCode } isLoading = { isLoading } svgToPng = { svgToPng } >
267267 < SvgContainer
268268 onClick = { handleClick }
269269 ref = { containerRef }
0 commit comments