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

RenderCode: reload button when html is rendered. Fixes #885

Browse Source
This commit is contained in:
Enrico Ros
2025-11-18 19:35:51 -08:00
parent 691d2e7228
commit 8876aa0866
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/blocks/code/RenderCode.tsx
+14 -5
View File
@@ -9,6 +9,7 @@ import EditRoundedIcon from '@mui/icons-material/EditRounded';
import FitScreenIcon from '@mui/icons-material/FitScreen';
import HtmlIcon from '@mui/icons-material/Html';
import NumbersRoundedIcon from '@mui/icons-material/NumbersRounded';
import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded';
import SquareTwoToneIcon from '@mui/icons-material/SquareTwoTone';
import WrapTextIcon from '@mui/icons-material/WrapText';
import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
@@ -124,6 +125,7 @@ function RenderCodeImpl(props: RenderCodeBaseProps & {
// state
// const [isHovering, setIsHovering] = React.useState(false);
const [fitScreen, setFitScreen] = React.useState(!!props.fitScreen);
const [htmlReloadKey, setHtmlReloadKey] = React.useState(0);
const [showHTML, setShowHTML] = React.useState(props.initialShowHTML === true);
const [showMermaid, setShowMermaid] = React.useState(true);
const [showPlantUML, setShowPlantUML] = React.useState(true);
@@ -280,7 +282,7 @@ function RenderCodeImpl(props: RenderCodeBaseProps & {
*/}
<Box component='span' sx={!isFullscreen ? undefined : { flex: 1, display: 'flex', flexDirection: 'column' }}>
{/* Renders HTML, or inline SVG, inline plantUML rendered, or highlighted code */}
{renderHTML ? <RenderCodeHtmlIFrame htmlCode={code} isFullscreen={isFullscreen} />
{renderHTML ? <RenderCodeHtmlIFrame key={htmlReloadKey} htmlCode={code} isFullscreen={isFullscreen} />
: renderMermaid ? <RenderCodeMermaid mermaidCode={code} fitScreen={fitScreen} />
: renderSVG ? <RenderCodeSVG svgCode={code} fitScreen={fitScreen} />
: (renderPlantUML && (plantUmlSvgData || plantUmlError)) ? <RenderCodePlantUML svgCode={plantUmlSvgData ?? null} error={plantUmlError} fitScreen={fitScreen} />
@@ -300,11 +302,18 @@ function RenderCodeImpl(props: RenderCodeBaseProps & {
{/* [row 1] */}
<Box sx={overlayFirstRowSx}>
{/* Show HTML */}
{/* Show HTML + Reload */}
{isHTMLCode && (
<OverlayButton tooltip={noTooltips ? null : renderHTML ? 'Show Code' : 'Show Web Page'} variant={renderHTML ? 'solid' : 'outlined'} color='danger' smShadow onClick={() => setShowHTML(!showHTML)}>
<HtmlIcon sx={{ fontSize: 'xl2' }} />
</OverlayButton>
<ButtonGroup aria-label='HTML options' sx={overlayGroupWithShadowSx}>
<OverlayButton tooltip={noTooltips ? null : renderHTML ? 'Show Code' : 'Show Web Page'} variant={renderHTML ? 'solid' : 'outlined'} color='danger' onClick={() => setShowHTML(!showHTML)}>
<HtmlIcon sx={{ fontSize: 'xl2' }} />
</OverlayButton>
{renderHTML && (
<OverlayButton tooltip={noTooltips ? null : 'Reload'} variant='outlined' color='danger' onClick={() => setHtmlReloadKey(k => k + 1)}>
<ReplayRoundedIcon />
</OverlayButton>
)}
</ButtonGroup>
)}
{/* SVG, Mermaid, PlantUML -- including a max-out button */}