@mdzip/editor 2.1.0 → 2.3.0

package/dist/view.js

@@ -19,6 +19,7 @@ import { escapeMarkdownImageAlt, findImageReferenceAtOffset, formatImageEditMark
 import { MdzipRenderingService, defaultSafeMarkdownRenderer, groupTokensIntoChunks, chunkSourceKey, collectMdzipHeadingIds, MDZIP_HEADING_ID_PREFIX, tokenEmbedsImage, tokenIsHeading } from './rendering.js';
 import { mdzipFrontMatterExtension } from './front-matter-extension.js';
 import { WORKSPACE_CSS } from './view-css.js';
+import { INLINE_SVG_SHADOW_CSS } from './svg-inline.js';
 const STYLE_ATTR = 'data-mdzip-ws-styles';
 const IMAGE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico|tiff?)$/i;
 const isImageFile = (path) => IMAGE_EXTENSIONS.test(path);
@@ -193,6 +194,29 @@ const PREVIEW_WIDTH_ICONS_HTML = {
     wide: PAGE_WIDTH_WIDE_ICON_HTML,
     full: PAGE_WIDTH_FULL_ICON_HTML
 };
+const HOST_FILE_ACTION_PREFIX = 'host:';
+/** The data type carrying dropped file addresses, if the drag has one. */
+function droppedUriListType(dataTransfer) {
+    const types = dataTransfer?.types ?? [];
+    for (const type of ['application/vnd.code.uri-list', 'text/uri-list']) {
+        if (types.includes(type))
+            return type;
+    }
+    return null;
+}
+/** URIs from a uri-list: one per line, `#` lines are comments (RFC 2483). */
+function parseUriList(text) {
+    return text.split('\n').map((line) => line.trim()).filter((line) => line && !line.startsWith('#'));
+}
+function fileActionTarget(target) {
+    return {
+        path: target.path,
+        isMarkdown: target.isMarkdown,
+        isImage: target.isImage,
+        isManifest: target.isManifest,
+        isEntryPoint: target.isEntryPoint
+    };
+}
 const ALL_HEADINGS = [1, 2, 3, 4, 5, 6];
 const ALL_LAYOUT_CONTROLS = {
     source: true,
@@ -662,6 +686,12 @@ const noSpellcheckHighlight = ViewPlugin.fromClass(class {
 const IMAGE_EDIT_AFFORDANCE_CLICK_EVENT = 'mdzip-image-edit-affordance-click';
 /** Holds an archive image's original `src` in the preview, whose `src` becomes a blob: URL. */
 const PREVIEW_IMAGE_SOURCE_ATTRIBUTE = 'data-mdzip-source';
+// Holds an archive-relative image source between parsing the preview HTML and
+// the image pass (collectPendingImages), so the browser never sees it as a
+// `src` and never requests it from the host page's server (#61).
+const PREVIEW_IMAGE_PENDING_ATTRIBUTE = 'data-mdzip-pending-src';
+// External, protocol-relative, data, blob and fragment URLs: left as they are.
+const NON_ARCHIVE_IMAGE_SOURCE_RE = /^(?:[a-z][a-z\d+.-]*:|\/\/|#)/i;
 // Preview chrome the editor adds around rendered content: removed, or
 // unwrapped (children kept), when the selection is copied as HTML.
 const PREVIEW_CHROME_REMOVE_SELECTOR = [
@@ -940,9 +970,13 @@ export class MdzipWorkspaceView {
         /** Choice whose icon the theme menu button shows, so render() only swaps it on change. */
         this.themeMenuIconPreference = null;
         this.colorSchemePreference = 'system';
+        /** The host theme System follows instead of the OS setting (see setSystemColorScheme). */
+        this.systemColorSource = null;
+        /** The System item's label and icon last rendered, so render() only rewrites them on change. */
+        this.systemItemKey = null;
         /** Re-resolves the scheme when the OS setting changes while 'system' is chosen. */
         this.onSystemColorSchemeChange = () => {
-            if (this.colorSchemePreference !== 'system' || this.destroyed) {
+            if (this.colorSchemePreference !== 'system' || this.systemColorSource || this.destroyed) {
                 return;
             }
             const next = this.resolveColorScheme('system');
@@ -1159,6 +1193,7 @@ export class MdzipWorkspaceView {
         // matches() does not re-run on every snapshot render of the same entry.
         this.entryMatchMissKey = null;
         this.entryGeneration = 0;
+        this.pendingAddFilesDir = null;
         this.options = options;
         this.controlPolicy = resolveMdzipControlPolicy(options.controls);
         this.navigationMode = options.navigationMode ?? 'editor';
@@ -1170,6 +1205,7 @@ export class MdzipWorkspaceView {
         this.layout = options.initialLayout ?? defaultLayoutForPolicy(this.controlPolicy);
         this.systemColorSchemeQuery = container.ownerDocument.defaultView?.matchMedia?.('(prefers-color-scheme: dark)') ?? null;
         this.systemColorSchemeQuery?.addEventListener?.('change', this.onSystemColorSchemeChange);
+        this.systemColorSource = options.systemColorScheme ?? null;
         this.colorSchemePreference = options.initialColorScheme ?? 'system';
         this.colorScheme = this.resolveColorScheme(this.colorSchemePreference);
         this.navVisible = options.navigationButtonActive ?? this.navVisible;
@@ -1269,6 +1305,7 @@ export class MdzipWorkspaceView {
         this.elDeleteDialogText = q('[data-ref="delete-dialog-text"]');
         this.elDeleteConfirmBtn = q('[data-ref="delete-confirm-btn"]');
         this.elReplaceInput = q('[data-ref="replace-input"]');
+        this.elAddFilesInput = q('[data-ref="add-files-input"]');
         this.elTooltip = q('[data-ref="tooltip"]');
         this.elCopyToast = q('[data-ref="copy-toast"]');
         this.elEmptyState = q('[data-ref="empty-state"]');
@@ -1740,6 +1777,10 @@ export class MdzipWorkspaceView {
         this.applyExternalLinkPolicy(this.elPreviewContent);
     }
     applyExternalLinkPolicy(root) {
+        for (const host of Array.from(root.querySelectorAll('.mdzip-inline-svg'))) {
+            if (host.shadowRoot)
+                this.applyExternalLinkPolicy(host.shadowRoot);
+        }
         const policy = this.options.externalLinks;
         for (const link of Array.from(root.querySelectorAll('a[href]'))) {
             const original = this.externalLinkOriginals.get(link);
@@ -2081,7 +2122,7 @@ export class MdzipWorkspaceView {
      * has resolved and had its final `src` assigned (or there are none).
      */
     mountProgressivePreview(html, snapshot, context, generation, animateImageHydration) {
-        this.elPreviewContent.innerHTML = html;
+        this.elPreviewContent.replaceChildren(this.inertPreviewFragment(html));
         // Cheap pass over every <img> happens before extensions/code-block
         // controls mount, same relative order as always — see
         // collectPendingImages for why it's split from the (expensive) slot
@@ -2100,9 +2141,9 @@ export class MdzipWorkspaceView {
     }
     /**
      * Cheap, attribute-only pass over every `<img>` under `roots`: no DOM tree
-     * mutation. Archive-relative sources have their `src` stripped here
-     * (immediately, so the browser never fires a bad network request for the
-     * archive-relative path) and are returned for {@link hydrateImages};
+     * mutation. Archive-relative sources (already moved off `src` by
+     * {@link inertPreviewFragment}, so the browser never requested them) are
+     * returned for {@link hydrateImages};
      * external/data/fragment sources are left untouched (just get their align
      * class, if any — they never get a slot). Returns `[]` without touching
      * anything when there's no asset session to resolve archive images
@@ -2119,6 +2160,69 @@ export class MdzipWorkspaceView {
      * the image, since a fresh `<img>` element never carries over its
      * predecessor's already-resolved `src`.
      */
+    /**
+     * Parses preview HTML without loading anything: a `<template>`'s content is
+     * inert, whereas `innerHTML` on any element of a live document (attached or
+     * not) starts fetching every `<img src>` at once, resolved against the host
+     * page's URL. Archive-relative sources move to a holding attribute for
+     * {@link collectPendingImages}; with no asset session to resolve them
+     * against, they're left as they are (that pass then skips them too).
+     */
+    inertPreviewFragment(html) {
+        const template = this.elPreviewContent.ownerDocument.createElement('template');
+        template.innerHTML = html;
+        if (this.assetSession) {
+            for (const image of Array.from(template.content.querySelectorAll('img[src]'))) {
+                const source = image.getAttribute('src');
+                if (!source || NON_ARCHIVE_IMAGE_SOURCE_RE.test(source))
+                    continue;
+                image.setAttribute(PREVIEW_IMAGE_PENDING_ATTRIBUTE, source);
+                image.removeAttribute('src');
+            }
+        }
+        return template.content;
+    }
+    inlineSvgLinksEnabled() {
+        return this.options.inlineSvgLinks !== false;
+    }
+    /**
+     * Replaces `image` with a shadow-root host holding a copy of the cleaned
+     * `svg` (see `svg-inline.ts`). The host carries the image's alt text,
+     * size, alignment and source path, so the layout matches the `<img>`.
+     */
+    mountInlineSvg(image, svg) {
+        const doc = this.elPreviewContent.ownerDocument;
+        const host = doc.createElement('span');
+        host.className = 'mdzip-inline-svg';
+        for (const name of [PREVIEW_IMAGE_SOURCE_ATTRIBUTE, 'title']) {
+            const value = image.getAttribute(name);
+            if (value !== null)
+                host.setAttribute(name, value);
+        }
+        for (const className of Array.from(image.classList)) {
+            if (className !== 'mdzip-image-loading')
+                host.classList.add(className);
+        }
+        const alignClass = rawHtmlImageAlignClass(image);
+        if (alignClass)
+            host.classList.add(alignClass);
+        const alt = image.getAttribute('alt');
+        host.setAttribute('role', 'group');
+        if (alt)
+            host.setAttribute('aria-label', alt);
+        const width = image.getAttribute('width');
+        if (width && /^\d+(\.\d+)?$/.test(width))
+            host.style.width = `${width}px`;
+        else if (width)
+            host.style.width = width;
+        const shadow = host.attachShadow({ mode: 'open' });
+        const style = doc.createElement('style');
+        style.textContent = INLINE_SVG_SHADOW_CSS + (host.style.width ? 'svg{width:100%}' : '');
+        shadow.append(style, svg.cloneNode(true));
+        this.applyExternalLinkPolicy(shadow);
+        image.replaceWith(host);
+        return host;
+    }
     collectPendingImages(roots, context, generation, animateImageHydration) {
         if (!this.assetSession) {
             return [];
@@ -2127,9 +2231,12 @@ export class MdzipWorkspaceView {
         for (const root of roots) {
             for (const image of Array.from(root.querySelectorAll('img'))) {
                 applyRawHtmlImageSizeAttributes(image);
-                const source = image.getAttribute('src');
+                const held = image.getAttribute(PREVIEW_IMAGE_PENDING_ATTRIBUTE);
+                if (held !== null)
+                    image.removeAttribute(PREVIEW_IMAGE_PENDING_ATTRIBUTE);
+                const source = held ?? image.getAttribute('src');
                 // Leave external, protocol-relative, data, and fragment URLs untouched.
-                if (!source || /^(?:[a-z][a-z\d+.-]*:|\/\/|#)/i.test(source)) {
+                if (!source || NON_ARCHIVE_IMAGE_SOURCE_RE.test(source)) {
                     const alignClass = rawHtmlImageAlignClass(image);
                     if (alignClass) {
                         image.classList.add(alignClass);
@@ -2138,7 +2245,14 @@ export class MdzipWorkspaceView {
                 }
                 // The src is replaced by a blob: URL; Copy as HTML restores it from here.
                 image.setAttribute(PREVIEW_IMAGE_SOURCE_ATTRIBUTE, source);
-                const known = this.assetSession.resolveKnownImage(source, context.currentPath);
+                const inlineSvg = this.inlineSvgLinksEnabled()
+                    ? this.assetSession.knownInlineSvg(source, context.currentPath)
+                    : null;
+                if (inlineSvg) {
+                    this.mountInlineSvg(image, inlineSvg);
+                    continue;
+                }
+                const known = inlineSvg === undefined ? undefined : this.assetSession.resolveKnownImage(source, context.currentPath);
                 if (known) {
                     if (known.width && known.height && !image.hasAttribute('width') && !image.hasAttribute('height')) {
                         image.setAttribute('width', String(known.width));
@@ -2208,6 +2322,26 @@ export class MdzipWorkspaceView {
             return slot;
         };
         const hydrate = (image, slot, source) => {
+            if (this.inlineSvgLinksEnabled() && session.knownInlineSvg(source, context.currentPath) !== null) {
+                void session.resolveInlineSvg(source, context.currentPath).then((svg) => {
+                    if (generation !== this.previewGeneration || context.signal.aborted) {
+                        settle();
+                        return;
+                    }
+                    if (!svg) {
+                        hydrateImage(image, slot, source);
+                        return;
+                    }
+                    image.classList.remove('mdzip-image-loading');
+                    this.mountInlineSvg(image, svg);
+                    this.openImageSlot(slot);
+                    settle();
+                });
+                return;
+            }
+            hydrateImage(image, slot, source);
+        };
+        const hydrateImage = (image, slot, source) => {
             void session.resolveImage(source, context.currentPath).then((resolved) => {
                 if (generation !== this.previewGeneration || context.signal.aborted) {
                     settle();
@@ -2754,7 +2888,7 @@ export class MdzipWorkspaceView {
         const doc = this.elPreviewContent.ownerDocument;
         const wrapper = doc.createElement('div');
         wrapper.className = 'mdzip-chunk';
-        wrapper.innerHTML = html;
+        wrapper.appendChild(this.inertPreviewFragment(html));
         if (beforeNode && beforeNode.parentNode === this.elPreviewContent) {
             this.elPreviewContent.insertBefore(wrapper, beforeNode);
         }
@@ -3590,14 +3724,26 @@ export class MdzipWorkspaceView {
             button.classList.toggle('active', this.colorSchemePreference === preference);
             button.setAttribute('aria-checked', String(this.colorSchemePreference === preference));
         }
+        const systemIcon = this.systemColorSource?.icon
+            ? `<span class="${TOOLBAR_ICON_CLASS} mdzip-host-icon" aria-hidden="true">${this.systemColorSource.icon}</span>`
+            : SYSTEM_THEME_ICON_HTML;
+        const systemItemLabel = this.systemColorSource?.label ?? 'System setting';
+        const systemItemKey = `${systemItemLabel}\n${systemIcon}`;
+        if (this.systemItemKey !== systemItemKey) {
+            this.systemItemKey = systemItemKey;
+            this.themeMenuIconPreference = null;
+            this.elSystemThemeBtn.innerHTML = systemIcon;
+            setTooltip(this.elSystemThemeBtn, systemItemLabel);
+            this.elSystemThemeBtn.setAttribute('aria-label', systemItemLabel);
+        }
         if (this.themeMenuIconPreference !== this.colorSchemePreference) {
             this.themeMenuIconPreference = this.colorSchemePreference;
             this.elThemeMenuIcon.innerHTML = this.colorSchemePreference === 'system'
-                ? SYSTEM_THEME_ICON_HTML
+                ? systemIcon
                 : this.colorSchemePreference === 'dark' ? DARK_THEME_ICON_HTML : LIGHT_THEME_ICON_HTML;
         }
         const schemeLabel = this.colorSchemePreference === 'system'
-            ? `System (${this.colorScheme})`
+            ? `${this.systemColorSource?.label ?? 'System'} (${this.colorScheme})`
             : this.colorSchemePreference === 'dark' ? 'Dark' : 'Light';
         setTooltip(this.elThemeMenuBtn, `Color scheme: ${schemeLabel}`);
         this.elThemeMenuBtn.setAttribute('aria-label', `Color scheme: ${schemeLabel}`);
@@ -3829,6 +3975,7 @@ export class MdzipWorkspaceView {
             }
             e.preventDefault();
             this.selectAllPreview();
+            this.keepPreviewSelectAll();
         });
         this.elNavBtn.addEventListener('click', () => {
             if (!this.controlPolicy.navigation) {
@@ -4341,6 +4488,15 @@ export class MdzipWorkspaceView {
                 void this.deleteFile(path);
             }
         });
+        this.elAddFilesInput.addEventListener('change', () => {
+            const files = Array.from(this.elAddFilesInput.files ?? []);
+            const dir = this.pendingAddFilesDir;
+            this.elAddFilesInput.value = '';
+            this.pendingAddFilesDir = null;
+            if (files.length > 0 && dir !== null) {
+                void this.addDroppedFiles(dir, files);
+            }
+        });
         this.elReplaceInput.addEventListener('change', () => {
             const file = this.elReplaceInput.files?.[0];
             const path = this.pendingReplacePath;
@@ -4366,7 +4522,9 @@ export class MdzipWorkspaceView {
             this.elPreviewPane.focus({ preventScroll: true });
         });
         this.elPreviewPane.addEventListener('click', (event) => {
-            const link = event.target.closest('a[href]');
+            // The event's path, not its target: clicks inside an inline SVG's shadow root are
+            // retargeted to the host, and SVG links are SVGAElements, not HTMLAnchorElements.
+            const link = event.composedPath().find((node) => node.nodeType === 1 && node.localName === 'a' && node.hasAttribute('href')) ?? null;
             const snapshot = this.workspace?.snapshot();
             if (!link || !snapshot) {
                 return;
@@ -4764,8 +4922,9 @@ export class MdzipWorkspaceView {
     }
     showTooltipForElementNow(element) {
         const rect = element.getBoundingClientRect();
-        // A menu item's tip goes beside it, so it doesn't cover the items above.
-        const placement = element.closest('.nav-context-menu') ? 'side' : 'above';
+        // A menu item's tip goes beside it, so it doesn't cover the items above:
+        // context menus and the toolbar's dropdowns (color scheme, page width).
+        const placement = element.closest('.nav-context-menu, .theme-popover, .toolbar-popover') ? 'side' : 'above';
         this.showTooltip(element.dataset['tooltip'] ?? '', rect.left + rect.width / 2, rect.top, placement, rect);
     }
     /**
@@ -5827,6 +5986,31 @@ export class MdzipWorkspaceView {
             end: range.endContainer, endOffset: range.endOffset
         };
     }
+    /**
+     * Some hosts run their own Select All after the key event, even when the
+     * editor handled it: a VS Code webview selects the whole page, source pane
+     * included. For a moment after Ctrl+A, a selection that reaches outside
+     * the preview is put back to the preview's own.
+     */
+    keepPreviewSelectAll() {
+        const doc = this.elPreviewContent.ownerDocument;
+        const stop = () => doc.removeEventListener('selectionchange', onChange);
+        const onChange = () => {
+            const selection = doc.defaultView?.getSelection();
+            if (this.destroyed || !this.previewSelectAll || !selection || selection.rangeCount === 0) {
+                stop();
+                return;
+            }
+            const range = selection.getRangeAt(0);
+            if (range.intersectsNode(this.elPreviewContent) && !this.elPreviewContent.contains(range.commonAncestorContainer)
+                && range.commonAncestorContainer !== this.elPreviewContent) {
+                stop();
+                this.selectAllPreview();
+            }
+        };
+        doc.addEventListener('selectionchange', onChange);
+        setTimeout(stop, 500);
+    }
     /**
      * Re-copies a Ctrl+C selection with its images embedded. Best effort: the
      * synchronous copy already on the clipboard stays if this fails, and it's
@@ -6739,11 +6923,27 @@ export class MdzipWorkspaceView {
         this.colorScheme = next;
         this.render();
     }
-    /** The light/dark scheme a choice means right now; `'system'` reads the OS setting. */
+    /**
+     * Sets what the menu's System choice follows: the host theme in `source`
+     * (its current scheme, and optionally the choice's name and icon), or the
+     * operating system's setting again with `null`. Call it whenever the host
+     * theme changes; while System is chosen the preview switches with it,
+     * keeping the rendered preview in place. Like `setColorScheme`, it fires
+     * no change callbacks.
+     */
+    setSystemColorScheme(source) {
+        this.systemColorSource = source;
+        this.colorScheme = this.resolveColorScheme(this.colorSchemePreference);
+        this.render();
+    }
+    /** The light/dark scheme a choice means right now; `'system'` reads the host theme or the OS setting. */
     resolveColorScheme(preference) {
         if (preference !== 'system') {
             return preference;
         }
+        if (this.systemColorSource) {
+            return this.systemColorSource.colorScheme;
+        }
         return this.systemColorSchemeQuery?.matches ? 'dark' : 'light';
     }
     themeMenuItems() {
@@ -6906,11 +7106,14 @@ export class MdzipWorkspaceView {
             }
             return [
                 { action: 'new-file', label: 'New .md File' },
-                { action: 'new-folder', label: 'New Folder' }
+                { action: 'new-folder', label: 'New Folder' },
+                null,
+                { action: 'add-files', label: 'Add Files…' }
             ];
         }
+        const hostItems = this.fileActionItems(target);
         if (target.isManifest) {
-            return [{ action: 'download', label: 'Download' }];
+            return [...hostItems, ...(hostItems.length ? [null] : []), { action: 'download', label: 'Download' }];
         }
         const groups = [];
         if (canMutate) {
@@ -6942,6 +7145,9 @@ export class MdzipWorkspaceView {
             }
             groups.push(editGroup);
         }
+        if (hostItems.length > 0) {
+            groups.push(hostItems);
+        }
         groups.push([{ action: 'download', label: 'Download' }]);
         if (canMutate && !target.isEntryPoint) {
             groups.push([{
@@ -6951,6 +7157,13 @@ export class MdzipWorkspaceView {
         }
         return groups.flatMap((group, index) => index === 0 ? group : [null, ...group]);
     }
+    /** Menu items for the host's {@link MdzipFileAction}s that apply to this file. */
+    fileActionItems(target) {
+        const file = fileActionTarget(target);
+        return (this.options.hostFileActions ?? [])
+            .filter((item) => item.appliesTo?.(file) ?? true)
+            .map((item) => ({ action: `${HOST_FILE_ACTION_PREFIX}${item.id}`, label: item.label }));
+    }
     async handleNavMenuAction(action) {
         const state = this.contextMenuState;
         this.contextMenuState = null;
@@ -6971,6 +7184,12 @@ export class MdzipWorkspaceView {
                         this.openNameDialog({ mode: 'new-folder', dir: target.path, value: 'new-folder' });
                     }
                     break;
+                case 'add-files':
+                    if (target.kind === 'directory') {
+                        this.pendingAddFilesDir = target.path;
+                        this.elAddFilesInput.click();
+                    }
+                    break;
                 case 'rename':
                     if (target.kind === 'file') {
                         this.openNameDialog({ mode: 'rename', oldPath: target.path, value: target.path });
@@ -7025,6 +7244,11 @@ export class MdzipWorkspaceView {
                     }
                     break;
                 default:
+                    if (action.startsWith(HOST_FILE_ACTION_PREFIX) && target.kind === 'file') {
+                        const id = action.slice(HOST_FILE_ACTION_PREFIX.length);
+                        const item = (this.options.hostFileActions ?? []).find((candidate) => candidate.id === id);
+                        await item?.run(fileActionTarget(target));
+                    }
                     break;
             }
         }
@@ -7277,7 +7501,8 @@ export class MdzipWorkspaceView {
             }
             const internal = this.dragSourcePath !== null
                 || (e.dataTransfer?.types.includes('application/x-mdzip-path') ?? false);
-            const external = e.dataTransfer?.types.includes('Files') ?? false;
+            const external = (e.dataTransfer?.types.includes('Files') ?? false)
+                || (this.options.resolveDroppedUris !== undefined && droppedUriListType(e.dataTransfer) !== null);
             if (!internal && !external) {
                 return;
             }
@@ -7312,6 +7537,15 @@ export class MdzipWorkspaceView {
             if (files && files.length > 0) {
                 e.preventDefault();
                 void this.addDroppedFiles(targetDir, Array.from(files));
+                return;
+            }
+            const uriListType = droppedUriListType(e.dataTransfer);
+            const resolveUris = this.options.resolveDroppedUris;
+            if (uriListType && resolveUris) {
+                e.preventDefault();
+                const uris = parseUriList(e.dataTransfer?.getData(uriListType) ?? '');
+                if (uris.length > 0)
+                    void this.addDroppedUris(targetDir, uris, resolveUris);
             }
         });
     }
@@ -7337,6 +7571,19 @@ export class MdzipWorkspaceView {
             this.options.onFailed?.(error);
         }
     }
+    async addDroppedUris(targetDir, uris, resolveUris) {
+        try {
+            const resolved = await resolveUris(uris);
+            // `File` here is an imported icon; take the browser's class from the page's window.
+            const FileClass = this.elPreviewContent.ownerDocument.defaultView?.File ?? globalThis.File;
+            const files = resolved.map(({ name, bytes }) => new FileClass([bytes], name));
+            if (files.length > 0)
+                await this.addDroppedFiles(targetDir, files);
+        }
+        catch (error) {
+            this.options.onFailed?.(error);
+        }
+    }
     async addDroppedFiles(targetDir, files) {
         const workspace = this.workspace;
         if (!workspace) {
@@ -8038,6 +8285,7 @@ const SHELL_HTML = `
   </div>
 
   <input type="file" data-ref="replace-input" hidden />
+  <input type="file" data-ref="add-files-input" multiple hidden />
 
   <div class="nav-context-menu" data-ref="nav-menu" hidden role="menu"></div>