fix: actually apply white export background over react-flow root

The .react-flow root paints its own opaque background via colorMode,
so html-to-image's backgroundColor option (which only fills transparent
areas) stayed black. Override the root background with an inline style
so the chosen export background is visible.

Refs #165
This commit is contained in:
Pouzor
2026-06-29 01:02:00 +02:00
parent fd2c50c1aa
commit 46185d187f
2 changed files with 24 additions and 2 deletions
@@ -68,6 +68,14 @@ describe('exportToPng', () => {
expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#ffffff' }))
})
it('overrides the react-flow root background via inline style so white is visible', async () => {
await exportToPng(el, 'standard', 'white')
expect(mockToPng).toHaveBeenCalledWith(
el,
expect.objectContaining({ style: expect.objectContaining({ backgroundColor: '#ffffff' }) }),
)
})
it('attaches the download anchor to the DOM so Firefox triggers the download', async () => {
await exportToPng(el, 'high')
expect(appendSpy).toHaveBeenCalled()
@@ -109,6 +117,14 @@ describe('exportToSvg', () => {
expect(mockToSvg).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#ffffff' }))
})
it('overrides the react-flow root background via inline style so white is visible', async () => {
await exportToSvg(el, 'white')
expect(mockToSvg).toHaveBeenCalledWith(
el,
expect.objectContaining({ style: expect.objectContaining({ backgroundColor: '#ffffff' }) }),
)
})
it('triggers a download', async () => {
await exportToSvg(el)
expect(clickSpy).toHaveBeenCalled()