Merge pull request #226 from ThisIs-Developer/agent/improve-file-image-drag-drop

feat(editor): add persistent media and improve file workflows

Author: ThisIs-Developer

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable code changes to **Markdown Viewer** are documented here.
 Non-code commits (documentation, planning, README-only updates) are excluded.
 
+## Unreleased
+
+- **Media upload, file drag-and-drop, and GitHub folders:** Replaced the blocking full-window drop overlay with a compact notice, made folder-targeted Markdown imports land in the selected folder, kept untargeted imports at the default workspace root, added hover-to-expand folders and Explorer edge auto-scrolling, and added a Markdown-style file drag preview. GitHub imports now recreate the repository's nested directory tree inside its repository-named folder, and the mobile Explorer filter bar now matches the compact 44 px search-control height. Uploaded, pasted, and dropped images now use short 90-day content-addressed links; animated GIFs retain animation, and MP4, WebM, and Ogg videos insert as sanitized playable media. Upload progress and every user-facing toast now share the GitHub-import toast position, while unsupported files show a red "File not supported" alert with recovery guidance. Right-clicking blank Explorer space offers New file and New folder, and existing embedded raster images can still be converted automatically after consent.
+
 ## v3.9.3
 
 - **Description:** Redesigned the Markdown Viewer workspace around a professional document Explorer, streamlined toolbar, responsive navigation, consistent icon system, and complete interface localization.

README.md

@@ -106,7 +106,8 @@ For the full feature list, details, limitations, and privacy notes, see the [fea
 ## Markdown Editing and Live Preview
 
 - Write plain Markdown in a focused editor while the live preview renders GitHub-Flavored Markdown, syntax highlighting, math, alerts, footnotes, tables, task lists, and sanitized HTML.
-- Organize up to 50 Markdown files in a closable, responsive left sidebar with a persistent tab-strip toggle, fixed Default and Secret workspaces, one-level folders, search, Recent, Favorites, single-click opening, and drag-and-drop moves. Secret Workspace content is password-encrypted on the device, and multi-file imports show compact progress without blocking the editor.
+- Organize up to 50 Markdown files in a closable, responsive left sidebar with a persistent tab-strip toggle, fixed Default and Secret workspaces, one-level folders, search, Recent, Favorites, single-click opening, precise drag-and-drop moves, hover-to-expand folders, and edge auto-scrolling. Secret Workspace content is password-encrypted on the device, and multi-file imports show compact progress without blocking the editor.
+- Paste, upload, or drop images, animated GIFs, and MP4, WebM, or Ogg videos at the editor cursor. A GitHub-import-style toast reports media upload progress, and managed media uses short content-addressed HTTPS links that remain usable across refreshes, Share Snapshot, Live Share, and Markdown export until their 90-day expiry. Existing inline raster data can be converted after the same first-use consent.
 - Use WYSIWYG-style toolbar helpers for common Markdown syntax while keeping full control of the plain-text Markdown source.
 - Preview large documents with debounced rendering and a background worker so typing stays responsive.
 
@@ -234,6 +235,7 @@ Markdown-Viewer/
 +-- preview-worker.js       # Markdown preview worker
 +-- sw.js                   # Service worker cache behavior
 +-- assets/                 # App images and icons
+|   +-- i18n/              # Interface catalogs and locale generator
 +-- functions/              # Cloudflare Pages Functions
 +-- workers/                # Live Share Worker source
 +-- desktop-app/            # Neutralinojs desktop build
@@ -271,14 +273,14 @@ Some advanced diagram engines use remote renderers such as PlantUML, Kroki, or m
 
 Markdown Viewer is not a cloud workspace. Normal typing, preview rendering, local file import, tab autosave, theme settings, and most exports happen on your device. No login is required, and the app does not implement analytics, telemetry, ads, or tracking cookies.
 
-Network use is user-triggered for features such as GitHub import, remote diagram renderers, Share Snapshot, Live Share, CDN libraries, and external document assets. Private mode in Workspace settings keeps document content, workspace state, and review feedback session-only while editing and review tools remain available. For the full reference, read the [data handling summary](wiki/Features.md#data-handling-summary).
+Network use is user-triggered for features such as consented managed-media upload, GitHub import, remote diagram renderers, Share Snapshot, Live Share, CDN libraries, and external document assets. Private mode in Workspace settings keeps document content, workspace state, and review feedback session-only while editing and review tools remain available. For the full reference, read the [data handling summary](wiki/Features.md#data-handling-summary).
 
 ## Security and Privacy Controls
 
 - Preview HTML is sanitized before insertion, and exported HTML includes a restrictive CSP plus SRI metadata for its external assets.
 - Secret Workspace derives a local encryption key from the user's password with PBKDF2-SHA-256 and encrypts its files and folder names with AES-GCM. The key is kept only for the unlocked browser session, and forgotten passwords cannot be recovered.
 - Cloudflare Pages deployments use `_headers` for CSP, clickjacking protection, referrer and permissions policies, and no-sniff protection; sensitive paths are redirected to 404 responses.
-- Stored Share Snapshot API CORS is limited to the production app, `null`, and local development origins. Stored responses are `no-store`, and creators receive a deletion token from the API.
+- Managed media and stored Share Snapshot API uploads are limited to the production app, previews, `null`, and local development origins. Managed images, GIFs, and videos are public through unguessable immutable links for 90 days; stored snapshot responses are `no-store`, and snapshot creators receive a deletion token from the API.
 - STL rendering rejects oversized sources, non-finite geometry, and excessive vertex counts before WebGL rendering.
 - The Neutralino desktop build removes the default `os.execCommand` exposure and keeps native APIs on an explicit allowlist. See the [security model](wiki/Features.md#security-model) and [configuration reference](wiki/Configuration.md#share-api).
 

_headers

@@ -1,6 +1,6 @@
 /*
   Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
-  Content-Security-Policy: default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; form-action 'none'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh 'sha256-DgMFO4QE+qqf2xNgeNb5gMKG6BtiiQFniYj21c88yME=' 'sha256-NnbK2LG1LUwYyZ1xgJN7k3oK4oTvHY4o9852VxwNA/o='; script-src-attr 'none'; worker-src 'self'; connect-src 'self' https://api.github.com https://raw.githubusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh https://kroki.io https://www.plantuml.com https://mermaid.ink https://paulrosen.github.io wss://markdownviewer.pages.dev; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src-attr 'unsafe-inline'; font-src 'self' data: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; media-src 'self' blob: data:; manifest-src 'self'; frame-src 'none'; upgrade-insecure-requests
+  Content-Security-Policy: default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; form-action 'none'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh 'sha256-DgMFO4QE+qqf2xNgeNb5gMKG6BtiiQFniYj21c88yME=' 'sha256-NnbK2LG1LUwYyZ1xgJN7k3oK4oTvHY4o9852VxwNA/o='; script-src-attr 'none'; worker-src 'self'; connect-src 'self' https://markdownviewer.pages.dev https://api.github.com https://raw.githubusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh https://kroki.io https://www.plantuml.com https://mermaid.ink https://paulrosen.github.io wss://markdownviewer.pages.dev; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src-attr 'unsafe-inline'; font-src 'self' data: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; media-src 'self' blob: data: https:; manifest-src 'self'; frame-src 'none'; upgrade-insecure-requests
   X-Frame-Options: DENY
   X-Content-Type-Options: nosniff
   Referrer-Policy: strict-origin-when-cross-origin

assets/i18n/de.json

@@ -11,7 +11,6 @@
   ", file location": ", Dateispeicherort",
   ", locked": ", gesperrt",
   ", or": ", oder",
-  ".md or .markdown files supported": ".md- oder .markdown-Dateien werden unterstützt",
   "\" style=\"width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;\">": "\" style=\"width:100%; Höhe: 100 %; Anzeige:flex; align-items:center; justify-content:center; overflow:hidden;\">",
   "{{0}} characters": "{{0}} Zeichen",
   "{{0}} details go here.": "{{0}} Details finden Sie hier.",
@@ -64,7 +63,6 @@
   "All changes saved": "Alle Änderungen gespeichert",
   "All workspace folders collapsed.": "Alle Arbeitsbereichsordner wurden minimiert.",
   "All workspace folders expanded.": "Alle Arbeitsbereichsordner erweitert.",
-  "Alt Text (used for title)": "Alt-Text (wird für den Titel verwendet)",
   "Apache License 2.0": "Apache-Lizenz 2.0",
   "Appearance": "Aussehen",
   "Application information": "Anwendungsinformationen",
@@ -95,7 +93,6 @@
   "Cancel feedback": "Feedback abbrechen",
   "Cancel Image generation": "Bilderzeugung abbrechen",
   "Cancel PDF generation": "PDF-Generierung abbrechen",
-  "Cannot import: The selected file appears to be a binary file.": "Import nicht möglich: Die ausgewählte Datei scheint eine Binärdatei zu sein.",
   "Capturing document": "Dokument erfassen",
   "Capturing image": "Bild wird aufgenommen",
   "Change text case": "Text-Groß-/Kleinschreibung ändern",
@@ -253,7 +250,6 @@
   "Download started": "Download gestartet",
   "Download SVG": "SVG herunterladen",
   "Drag files to move": "Ziehen Sie Dateien zum Verschieben",
-  "Drop your Markdown files anywhere": "Legen Sie Ihre Markdown-Dateien irgendwo ab",
   "Duet Accord": "Duett-Akkord",
   "Duplicate": "Duplizieren",
   "Duplicate {{0}}": "Duplikat {{0}}",
@@ -303,7 +299,6 @@
   "Export document": "Dokument exportieren",
   "Export failed:": "Export fehlgeschlagen:",
   "Export PDF Options": "PDF-Optionen exportieren",
-  "External Image (URL)": "Externes Bild (URL)",
   "Faceted Gear Wheel": "Facettiertes Zahnrad",
   "Failed to copy HTML:": "HTML konnte nicht kopiert werden:",
   "Failed to copy Markdown:": "Fehler beim Kopieren von Markdown:",
@@ -329,7 +324,6 @@
   "File created": "Datei erstellt",
   "File deleted": "Datei gelöscht",
   "File is already in that location.": "Die Datei befindet sich bereits an diesem Speicherort.",
-  "File is too large (maximum 10MB supported).": "Datei ist zu groß (maximal 10 MB unterstützt).",
   "File moved to": "Datei verschoben nach",
   "File name": "Dateiname",
   "File options": "Dateioptionen",
@@ -364,7 +358,6 @@
   "Folder renamed": "Ordner umbenannt",
   "Folder renamed to": "Ordner umbenannt in",
   "folders": "-Ordner",
-  "Folders stay one level deep inside a workspace.": "Ordner bleiben eine Ebene tief in einem Arbeitsbereich.",
   "Folk & Lyrics": "Folk & Texte",
   "for this block.": "für diesen Block.",
   "Forgot access key? Reset Secret Workspace": "Zugangsschlüssel vergessen? Geheimen Arbeitsbereich zurücksetzen",
@@ -410,11 +403,8 @@
   "HTML": "HTML",
   "HTML entities": "HTML-Entitäten",
   "HTML export failed:": "HTML-Export fehlgeschlagen:",
-  "Image": "Bild",
   "Image (.png)": "Bild (.png)",
-  "Image description": "Bildbeschreibung",
   "Image generation progress": "Fortschritt der Bildgenerierung",
-  "Image URL": "Bild-URL",
   "Implement live preview with GitHub styling": "Live-Vorschau mit GitHub-Stil implementieren",
   "Import": "Importieren",
   "Import complete": "Import abgeschlossen",
@@ -435,7 +425,6 @@
   "Inline Code Blocks": "Inline-Codeblöcke",
   "Insert": "Einfügen",
   "Insert Diagram & More": "Diagramm und mehr einfügen",
-  "Insert image": "Bild einfügen",
   "Insert link": "Link einfügen",
   "Insert reference": "Referenz einfügen",
   "Insert table": "Tabelle einfügen",
@@ -614,7 +603,6 @@
   "Please enter a GitHub URL.": "Please enter a GitHub URL.",
   "Please enter a valid GitHub URL.": "Please enter a valid GitHub URL.",
   "Please select at least one file to import.": "Bitte wählen Sie mindestens eine Datei zum Importieren aus.",
-  "Please upload Markdown files (.md or .markdown)": "Bitte laden Sie Markdown Dateien hoch (.md oder .markdown)",
   "PNG": "PNG",
   "PNG export failed:": "PNG export failed:",
   "Polyphony Voices": "Polyphony Voices",
@@ -883,7 +871,6 @@
   "Unlock Secret Workspace": "Geheimen Arbeitsbereich freischalten",
   "Unlock workspace": "Arbeitsbereich entsperren",
   "Unlocking…": "Entsperren…",
-  "Upload from Device": "Vom Gerät hochladen",
   "UPPERCASE": "GROSSBUCHSTABEN",
   "Use": "Verwendung",
   "Use at least 8 characters.": "Verwenden Sie mindestens 8 Zeichen.",
@@ -1009,8 +996,6 @@
   "Incorrect access key or unreadable Secret Workspace data.": "Falscher Zugriffsschlüssel oder unlesbare Secret Workspace-Daten.",
   "Live room disconnected": "Live-Raum nicht verbunden",
   "Maximum document limit reached": "Maximale Dokumentengrenze erreicht",
-  "Mermaid diagram": "Meerjungfrau-Diagramm",
-  "Mermaid diagram actions": "Meerjungfrau-Diagrammaktionen",
   "No documents match your search.": "Keine Dokumente entsprechen Ihrer Suche.",
   "Open or create a document to use editing tools.": "Öffnen oder erstellen Sie ein Dokument, um Bearbeitungswerkzeuge zu verwenden.",
   "Review item deleted.": "Bewertungselement gelöscht.",
@@ -1027,5 +1012,55 @@
   "This share link has expired or does not exist.": "Dieser Freigabelink ist abgelaufen oder existiert nicht.",
   "This shared document is read-only for you.": "Dieses freigegebene Dokument ist für Sie schreibgeschützt.",
   "Your file is ready.": "Ihre Datei ist fertig.",
-  "Your files are ready.": "Ihre Dateien sind bereit."
+  "Your files are ready.": "Ihre Dateien sind bereit.",
+  "Collapse": "Reduzieren",
+  "converted to short links.": "in Kurzlinks umgewandelt.",
+  "Converting embedded images to short links.": "Eingebettete Bilder in Kurzlinks umwandeln.",
+  "Drop to import or insert": "Zum Importieren oder Einfügen ablegen",
+  "embedded image": "eingebettetes Bild",
+  "Embedded images could not be converted. Please try again.": "Eingebettete Bilder konnten nicht konvertiert werden. Bitte versuchen Sie es erneut.",
+  "expanded.": "erweitert.",
+  "Image conversion was cancelled because the document changed.": "Die Bildkonvertierung wurde abgebrochen, da sich das Dokument geändert hat.",
+  "MD": "MD",
+  "Open an editable Markdown file before inserting images.": "Öffnen Sie eine bearbeitbare Markdown-Datei, bevor Sie Bilder einfügen.",
+  "uploaded and inserted with short links.": "hochgeladen und mit Kurzlinks eingefügt.",
+  "\" aria-label=\"": "\" aria-label=\"",
+  "cancel": "abbrechen",
+  "Description": "Beschreibung",
+  "Dismiss notification": "Benachrichtigung verwerfen",
+  "External Media (URL)": "Externe Medien (URL)",
+  "Image, GIF, or video": "Bild, GIF oder Video",
+  "Images, GIFs, and videos are uploaded to create a short public link that expires after 90 days. Anyone with the media URL can view it until then. GIF limit: 5 MB; video limit: 10 MB.": "Bilder, GIFs und Videos werden hochgeladen, um einen kurzen öffentlichen Link zu erstellen, der nach 90 Tagen abläuft. Bis dahin kann jeder mit der Medien-URL es sehen. GIF-Limit: 5 MB; Videolimit: 10 MB.",
+  "Insert image, GIF, or video": "Fügen Sie ein Bild, GIF oder Video ein",
+  "Markdown files, images, GIFs, and videos are supported": "Markdown Dateien, Bilder, GIFs und Videos werden unterstützt",
+  "Media description": "Medienbeschreibung",
+  "media file": "Mediendatei",
+  "Media file": "Mediendatei",
+  "Media insertion cancelled": "Medieneinfügung abgebrochen",
+  "Media insertion was cancelled because the document changed.": "Das Einfügen des Mediums wurde abgebrochen, da sich das Dokument geändert hat.",
+  "Media upload cancelled.": "Medien-Upload abgebrochen.",
+  "Media upload complete": "Medien-Upload abgeschlossen",
+  "Media upload failed": "Medien-Upload fehlgeschlagen",
+  "Media upload progress": "Fortschritt des Medien-Uploads",
+  "Media URL": "Medien-URL",
+  "Notifications": "Benachrichtigungen",
+  "Preparing upload...": "Upload wird vorbereitet...",
+  "The document changed during upload.": "Das Dokument wurde während des Hochladens geändert.",
+  "The media file could not be inserted.": "Die Mediendatei konnte nicht eingefügt werden.",
+  "Upload Image, GIF, or Video": "Bild, GIF oder Video hochladen",
+  "Upload media?": "Medien hochladen?",
+  "Uploading media": "Medien werden hochgeladen",
+  "Uploading media file": "Mediendatei wird hochgeladen",
+  "Uploading media files": "Hochladen von Mediendateien",
+  "Choose a Markdown file (.md or .markdown).": "Wählen Sie eine Markdown-Datei (.md oder .markdown).",
+  "Choose an image, GIF, MP4, WebM, or Ogg video file.": "Wählen Sie ein Bild, eine GIF-, MP4-, WebM- oder Ogg-Videodatei.",
+  "Clipboard files must be an image, GIF, MP4, WebM, or Ogg video.": "Zwischenablagedateien müssen ein Bild, GIF, MP4, WebM oder Ogg-Video sein.",
+  "Dropped files must be Markdown, image, GIF, MP4, WebM, or Ogg files.": "Abgelegte Dateien müssen Markdown-, Bild-, GIF-, MP4-, WebM- oder Ogg-Dateien sein.",
+  "File not supported": "Datei wird nicht unterstützt",
+  "Some files were skipped. Choose Markdown files (.md or .markdown).": "Einige Dateien wurden übersprungen. Wählen Sie Markdown-Dateien (.md oder .markdown).",
+  "This file appears to be binary. Choose a Markdown file (.md or .markdown).": "Diese Datei scheint binär zu sein. Wählen Sie eine Markdown-Datei (.md oder .markdown).",
+  "This Markdown file is too large. The maximum supported size is 10 MB.": "Diese Markdown-Datei ist zu groß. Die maximal unterstützte Größe beträgt 10 MB.",
+  "This media file exceeds the supported limit: still images 25 MB before optimization, GIFs 5 MB, and videos 10 MB.": "Diese Mediendatei überschreitet den unterstützten Grenzwert: Standbilder 25 MB vor der Optimierung, GIFs 5 MB und Videos 10 MB.",
+  "Create a folder inside": "Erstellen Sie darin einen Ordner",
+  "Create a folder inside this workspace.": "Erstellen Sie einen Ordner in diesem Arbeitsbereich."
 }