zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-10 21:50:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

Optimization: Code: memo style & stable copy handler

Browse Source
This commit is contained in:
Enrico Ros
2026-04-14 14:11:40 -07:00
parent e22c40c7e4
commit 392a3b7949
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/blocks/code/RenderCode.tsx
+10 -4
View File
@@ -168,10 +168,13 @@ function RenderCodeImpl(props: RenderCodeBaseProps & {
// const handleMouseOverLeave = React.useCallback(() => setIsHovering(false), []); // const handleMouseOverLeave = React.useCallback(() => setIsHovering(false), []);
// Optimization: stabilize the copy handler
const codeRef = React.useRef(code);
codeRef.current = code;
const handleCopyToClipboard = React.useCallback((e: React.MouseEvent) => { const handleCopyToClipboard = React.useCallback((e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
copyToClipboard(code, 'Code'); copyToClipboard(codeRef.current, 'Code');
}, [code]); }, []);
// heuristics for specialized rendering // heuristics for specialized rendering
@@ -259,6 +262,9 @@ function RenderCodeImpl(props: RenderCodeBaseProps & {
flexDirection: 'column', flexDirection: 'column',
// justifyContent: (renderMermaid || renderPlantUML) ? 'center' : undefined, // justifyContent: (renderMermaid || renderPlantUML) ? 'center' : undefined,
// in fullscreen mode, amplify contrast
...isFullscreen && { backgroundColor: 'background.surface' },
// fix for SVG diagrams over dark mode: https://github.com/enricoros/big-AGI/issues/520 // fix for SVG diagrams over dark mode: https://github.com/enricoros/big-AGI/issues/520
'[data-joy-color-scheme="dark"] &': isRenderingDiagram ? { backgroundColor: 'neutral.500' } : {}, '[data-joy-color-scheme="dark"] &': isRenderingDiagram ? { backgroundColor: 'neutral.500' } : {},
@@ -268,7 +274,7 @@ function RenderCodeImpl(props: RenderCodeBaseProps & {
// patch the min height if we have the second row // patch the min height if we have the second row
// ...(hasExternalButtons ? { minHeight: '5.25rem' } : {}), // ...(hasExternalButtons ? { minHeight: '5.25rem' } : {}),
}), [isBorderless, isRenderingDiagram, props.sx, showSoftWrap]); }), [isBorderless, isFullscreen, isRenderingDiagram, props.sx, showSoftWrap]);
return ( return (
@@ -283,7 +289,7 @@ function RenderCodeImpl(props: RenderCodeBaseProps & {
ref={fullScreenElementRef} ref={fullScreenElementRef}
component='code' component='code'
className={`language-${inferredCodeLanguage || 'unknown'}${renderLineNumbers ? ' line-numbers' : ''}`} className={`language-${inferredCodeLanguage || 'unknown'}${renderLineNumbers ? ' line-numbers' : ''}`}
sx={!isFullscreen ? codeSx : { ...codeSx, backgroundColor: 'background.surface' }} sx={codeSx}
> >
{/* Markdown Title (File/Type) */} {/* Markdown Title (File/Type) */}