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

## Launch 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>
2026-06-19 13:47:27 +00:00 · 2025-01-09 17:54:26 +01:00
parent c6174a57d9
commit d50ea76347
14 changed files with 170 additions and 97 deletions
@@ -1,6 +1,6 @@
 ## Internationalization

-The process of internationlization is pretty straight forward for Maputnik.
+The process of internationalization is pretty straight forward for Maputnik.

 ## Add a new language

@@ -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",
@@ -29,7 +29,7 @@
  "Map view": "Vue de la carte",
  "Maputnik on GitHub": "Maputnik sur GitHub",
  "Open": "Ouvrir",
-  "Export": "Exporter",
+  "Save": "Enregistrer",
  "Data Sources": "Sources de données",
  "Style Settings": "Paramètres du style",
  "View": "Vue",
@@ -81,17 +81,14 @@
  "Close modal": "Fermer la fenêtre modale",
  "Debug": "Déboguer",
  "Options": "Options",
-  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "<0>Ouvrir dans OSM</0> &mdash; Ouvre la vue actuelle sur openstreetmap.org",
-  "Export Style": "Exporter le style",
-  "Download Style": "Télécharger le style",
-  "Download a JSON style to your computer.": "Téléchargez un style JSON sur votre ordinateur.",
-  "Download HTML": "Télécharger HTML",
+  "Save Style": "Enregistrer le style",
+  "Save the JSON style to your computer.": "Enregistrer le style JSON sur votre ordinateur.",
+  "Save as": "Enregistrer sous",
+  "Create HTML": "Créer le HTML",
  "Cancel": "Annuler",
  "Open Style": "Ouvrir le style",
-  "Upload Style": "Transférer un style",
-  "Upload a JSON style from your computer.": "Transférer un style JSON depuis votre ordinateur.",
-  "Style file": "Fichier de style",
-  "Upload": "Transférer",
+  "Open local Style": "Ouvrir un style local",
+  "Open a local JSON style from your computer.": "Ouvrir un style JSON local depuis votre ordinateur.",
  "Load from URL": "Charger depuis une URL",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "Charger depuis une URL. Notez que l'URL doit avoir les <1>CORS activés</1>.",
  "Style URL": "URL du style",
@@ -29,7 +29,7 @@
  "Map view": "תצוגת מפה",
  "Maputnik on GitHub": "מפוטניק בגיטהב",
  "Open": "פתיחה",
-  "Export": "ייצוא",
+  "Save": "שמור",
  "Data Sources": "מקורות מידע",
  "Style Settings": "הגדרות הסטייל",
  "View": "תצוגה",
@@ -81,16 +81,14 @@
  "Close modal": "סגירת חלונית",
  "Debug": "דיבאג",
  "Options": "אפשרויות",
-  "Export Style": "ייצוא של הסטייל",
-  "Download Style": "הורדה של הסטייל",
-  "Download a JSON style to your computer.": "הורדה של הסטייל למחשב",
-  "Download HTML": "הורדה כ-HTML",
+  "Save Style": "שמירת הסטייל",
+  "Save the JSON style to your computer.": "שמירת הסטייל JSON במחשב שלך.",
+  "Save as": "שמירה בשם",
+  "Create HTML": "צור HTML",
  "Cancel": "ביטול",
  "Open Style": "פתיחת סטייל",
-  "Upload Style": "העלאה של סטייל",
-  "Upload a JSON style from your computer.": "העלאה של סטייל מהמחשב",
-  "Style file": "קובץ סטייל",
-  "Upload": "העלאה",
+  "Open local Style": "פתיחת סטייל מקומי",
+  "Open a local JSON style from your computer.": "פתיחת סטייל JSON מקומי מהמחשב שלך.",
  "Load from URL": "פתיחה מתוך כתובת",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "פתיחה מכתובת, שימו לב: הכתובת צריכה לתמוך ב- CORS",
  "Style URL": "כתוסת סטייל",
@@ -29,7 +29,7 @@
  "Map view": "地図画面",
  "Maputnik on GitHub": "GitHubのMaputnik",
  "Open": "開く",
-  "Export": "エクスポート",
+  "Save": "保存",
  "Data Sources": "データソース",
  "Style Settings": "スタイル設定",
  "View": "表示",
@@ -81,16 +81,14 @@
  "Close modal": "モーダルを閉じる",
  "Debug": "デバッグ",
  "Options": "設定",
-  "Export Style": "スタイルをエクスポート",
-  "Download Style": "スタイルをダウンロード",
-  "Download a JSON style to your computer.": "パソコンにJSONスタイルをダウンロードします。",
-  "Download HTML": "HTMLをダウンロード",
+  "Save Style": "スタイルを保存",
+  "Save the JSON style to your computer.": "JSONスタイルをコンピュータに保存します。",
+  "Save as": "名前を付けて保存",
+  "Create HTML": "HTMLを作成",
  "Cancel": "キャンセル",
  "Open Style": "スタイルを開く",
-  "Upload Style": "スタイルをアップロードする",
-  "Upload a JSON style from your computer.": "JSONスタイルをパソコンからアップロードする",
-  "Style file": "スタイルファイル",
-  "Upload": "アップロード",
+  "Open local Style": "ローカルスタイルを開く",
+  "Open a local JSON style from your computer.": "コンピュータからローカルJSONスタイルを開きます。",
  "Load from URL": "URLから読み込む",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "URLから読み込む。注意: URLは <1>CORSを有効にする</1> 必要があります。",
  "Style URL": "スタイルURL",
@@ -29,7 +29,7 @@
  "Map view": "地图视图",
  "Maputnik on GitHub": "GitHub上的Maputnik",
  "Open": "打开",
-  "Export": "导出",
+  "Save": "保存",
  "Data Sources": "数据源",
  "Style Settings": "样式设置",
  "View": "视图",
@@ -81,16 +81,14 @@
  "Close modal": "关闭模态框",
  "Debug": "调试",
  "Options": "选项",
-  "Export Style": "导出样式",
-  "Download Style": "下载样式",
-  "Download a JSON style to your computer.": "将JSON样式下载到您的电脑。",
-  "Download HTML": "下载HTML",
+  "Save Style": "保存样式",
+  "Save the JSON style to your computer.": "将JSON样式保存到您的计算机。",
+  "Save as": "另存为",
+  "Create HTML": "创建HTML",
  "Cancel": "取消",
  "Open Style": "打开样式",
-  "Upload Style": "上传样式",
-  "Upload a JSON style from your computer.": "从您的电脑上传JSON样式。",
-  "Style file": "样式文件",
-  "Upload": "上传",
+  "Open local Style": "打开本地样式",
+  "Open a local JSON style from your computer.": "从您的计算机打开本地JSON样式。",
  "Load from URL": "从URL加载",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "从URL加载。注意：URL必须启用 <1>CORS</1>。",
  "Style URL": "样式URL",