feat: use FileSystemFileHandle to modify a file on the local filesystem (#965)

## Launch Checklist

<!-- Thanks for the PR! Feel free to add or remove items from the
checklist. -->


 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [ ] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

## Changes

- This pull request makes use of the FileSystemFileHandle API to modify
a local file. No need to download it - just click save.
- I don't know how to cover this functionality by tests so I need
directions in case test coverage is required.
- The pull request adds
[@types/wicg-file-system-access](https://www.npmjs.com/package/@types/wicg-file-system-access)
as a new dev dependency which I am not really pleased about but can't
think of a way around it.

## Known Limitations

- The used File API is only available in when accessed from https or on
localhost.
- There is no visual indicator that the file has been saved. Previously
the browser showed it as a new download.

## Issue

- https://github.com/maplibre/maputnik/issues/964

## Screenshots

### Menu
<img
src="https://github.com/user-attachments/assets/dfcfc5c2-0019-4857-ba26-224b5598fc11"
/>

### Open modal
<img
src="https://github.com/user-attachments/assets/4e1293e8-16b6-4b86-925b-3bebb49d8ca6"
height="200px" />

### Save modal
<img
src="https://github.com/user-attachments/assets/4f10e2c0-2dd3-4726-a613-30e0406619b0"
height="200px" />

---------

Co-authored-by: Harel M <harel.mazor@gmail.com>
This commit is contained in:
Joscha
2025-01-09 17:54:26 +01:00
committed by GitHub
parent c6174a57d9
commit d50ea76347
14 changed files with 170 additions and 97 deletions
+7 -10
View File
@@ -29,7 +29,7 @@
"Map view": "Kartenansicht",
"Maputnik on GitHub": "Maputnik auf GitHub",
"Open": "Öffnen",
"Export": "Exportieren",
"Save": "Speichern",
"Data Sources": "Datenquellen",
"Style Settings": "Stileinstellungen",
"View": "Ansicht",
@@ -81,17 +81,14 @@
"Close modal": "Modale Fenster schließen",
"Debug": "Debug",
"Options": "Optionen",
"<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "<0>In OSM öffnen</0> &mdash; Öffnet die aktuelle Ansicht auf openstreetmap.org",
"Export Style": "Stil exportieren",
"Download Style": "Stil herunterladen",
"Download a JSON style to your computer.": "Lade einen JSON-Stil auf deinen Computer herunter.",
"Download HTML": "HTML herunterladen",
"Save Style": "Stil Speichern",
"Save the JSON style to your computer.": "Speichere den JSON Stil auf deinem Computer.",
"Save as": "Speichern unter",
"Create HTML": "HTML erstellen",
"Cancel": "Abbrechen",
"Open Style": "Stil öffnen",
"Upload Style": "Stil hochladen",
"Upload a JSON style from your computer.": "Lade einen JSON-Stil von deinem Computer hoch.",
"Style file": "Stildatei",
"Upload": "Hochladen",
"Open local Style": "Lokalen Stil öffnen",
"Open a local JSON style from your computer.": "Öffne einen lokalen JSON Stil von deinem Computer.",
"Load from URL": "Von URL laden",
"Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "Von einer URL laden. Beachte, dass die URL <1>CORS aktiviert</1> haben muss.",
"Style URL": "Stil-URL",