feat(toolbar): copy diagram to clipboard as PNG

Add a "⧉ Copy" button that places the current diagram on the system clipboard
as a PNG via the async Clipboard API (ClipboardItem). The write is invoked
synchronously with the PNG handed over as a promise, so it stays inside the
click gesture WebKit requires.

PNG export and clipboard copy now re-render through renderRaster(), which
forces htmlLabels off via an injected init directive. Flowcharts otherwise emit
<foreignObject> HTML labels that taint the canvas and make toBlob()/clipboard
writes fail — this also fixes pre-existing flowchart PNG export. The live
preview and SVG export keep the richer foreignObject labels.

Verified end-to-end: renderRaster yields a foreignObject-free SVG, it
rasterizes without tainting, and clipboard.write resolves on a real click.
This commit is contained in:
2026-05-22 21:12:54 +03:00
parent 3918d5b8d2
commit 6f23c620c1
4 changed files with 77 additions and 7 deletions

View File

@@ -28,7 +28,9 @@ TypeScript** frontend using **CodeMirror 6** and **Mermaid 11**.
**focus mode** spotlights any node and its neighbours so you can read a dense
graph without changing it. Every rewrite lands in the editor and is reversible
with ⌘Z.
- **Export** the current diagram to **SVG** or **PNG** (2× scale).
- **Export** the current diagram to **SVG** or **PNG** (2× scale), or **copy a
PNG straight to the clipboard**. (PNG/clipboard re-render flowcharts with
text labels so the bitmap rasterizes cleanly across platforms.)
- **Project registry** — recently opened projects are remembered in a local
SQLite database so you can jump back in from the start screen.
- **Themes** — switch the Mermaid theme (default / neutral / dark / forest /