Markdown example: File Open/Save/Save As via the File System Access API

#11 in Riparion/riparion-editor — merged 2026-06-05

Summary

• File ▸ Open… — OS-native open dialog via showOpenFilePicker(), filtered to .md/.markdown/.txt; the returned FileSystemFileHandle is stashed JS-side (window.__riparionFileHandle) since it can't cross the wasm boundary
• File ▸ Save — writes back to the opened file in place via createWritable() when a handle exists; otherwise behaves like Save As
• File ▸ Save As… — always raises showSaveFilePicker() with the current file name as the suggestion, then re-points the handle so later Saves go there
• File ▸ New — also drops the handle so saving a fresh document can't silently overwrite the previously open file

Fallbacks

The File System Access API is Chromium-only. On Firefox/Safari, Open falls back to a hidden <input type=file> (same native dialog, no writable handle) and Save/Save As fall back to the existing Blob-download path. Cancelling a picker (AbortError) is a no-op.

Test plan

• dx serve --example markdown --features web in Chrome: Open a .md, edit, Save → file on disk updates in place (one-time write-permission prompt)
• Save As → picker with suggested name; later Saves target the new file
• New → confirm → Save raises the picker (handle dropped)
• Firefox: Open uses <input type=file>, Save downloads document.md

🤖 Generated with Claude Code