Skip to content

feat(mermaid-editor): implement PNG export with direct file save and e2e tests#140

Merged
GCWing merged 1 commit intomainfrom
gcwing/dev
Mar 13, 2026
Merged

feat(mermaid-editor): implement PNG export with direct file save and e2e tests#140
GCWing merged 1 commit intomainfrom
gcwing/dev

Conversation

@GCWing
Copy link
Owner

@GCWing GCWing commented Mar 13, 2026

Summary

  • Refactored Mermaid editor PNG export to save directly to the user's downloads folder via Tauri fs API, replacing the old onExport callback pattern
  • Simplified the export UI from an SVG/PNG dropdown to a single PNG export button with data-testid for testability
  • Rewrote SVG-to-PNG conversion pipeline: prepare a self-contained SVG clone (strip interactive styles, add background rect, fix namespaces), load via Image, draw onto Canvas, export as Blob
  • Integrated notification system to show loading/success/error feedback during export
  • Exposed getSvgElement and getSvgDimensions on MermaidPreview ref for use by the export handler
  • Added data-testid attributes to NotificationButton, NotificationCenter, and MermaidEditor for E2E testability
  • Added new E2E test spec l1-mermaid-export.spec.ts and corresponding test:l1:mermaid-export npm script
  • Added .bitfun/ snapshot directory to tests/e2e/.gitignore
  • Added export-related i18n keys for en-US and zh-CN

Test plan

  • Open Mermaid editor, click the export (Download) button, verify PNG is saved to downloads folder
  • Verify notification shows loading state during export, then success with file path
  • Verify error notification is shown if export fails
  • Run npm run test:l1:mermaid-export in tests/e2e to validate E2E test passes

… e2e tests

- Refactor export to save PNG directly to downloads folder via Tauri fs API
- Simplify export button from SVG/PNG dropdown to a single PNG export button
- Expose getSvgElement/getSvgDimensions via MermaidPreview ref for export use
- Rewrite SVG-to-PNG conversion using Image/Canvas instead of blob URL approach
- Integrate notification system to show loading/success/error during export
- Prepare self-contained export SVG: strip interactive styles, add background rect
- Add data-testid attributes to NotificationButton, NotificationCenter, MermaidEditor
- Add l1-mermaid-export e2e test spec and corresponding npm script
- Add .bitfun/ to e2e .gitignore
- Add export i18n keys for en-US and zh-CN

Made-with: Cursor
@GCWing GCWing merged commit a5ee810 into main Mar 13, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant