@mdzip/editor 2.2.0 → 2.4.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,17 @@ 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;
+// A raw draw.io diagram (.drawio, .dio). The preview can't draw these yet (#59),
+// so an image pointing at one shows a placeholder card instead of a broken
+// image. `.drawio.svg` and `.drawio.png` end in .svg/.png and stay images.
+const DRAWIO_PATH_RE = /\.(?:drawio|dio)$/i;
+const DRAWIO_PLACEHOLDER_CLASS = 'mdzip-drawio-placeholder';
 // 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 = [
@@ -670,8 +705,9 @@ const PREVIEW_CHROME_REMOVE_SELECTOR = [
     '[data-mdzip-image-edit-affordance]'
 ].join(',');
 // Subtrees left out of a plain-text copy: the chrome above, plus markup whose
-// text isn't document text (a drawn diagram's SVG carries its stylesheet).
-const PLAIN_TEXT_SKIP_SELECTOR = `${PREVIEW_CHROME_REMOVE_SELECTOR},style,script,template,svg,button`;
+// text isn't document text (a drawn diagram's SVG carries its stylesheet, the
+// draw.io placeholder's explanation is the editor's, not the document's).
+const PLAIN_TEXT_SKIP_SELECTOR = `${PREVIEW_CHROME_REMOVE_SELECTOR},style,script,template,svg,button,.${DRAWIO_PLACEHOLDER_CLASS}`;
 /**
  * The text of rendered preview markup for a plain-text copy: the document's
  * own text, without style or script contents, drawn diagrams or the editor's
@@ -1163,6 +1199,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';
@@ -1274,6 +1311,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"]');
@@ -1745,6 +1783,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);
@@ -2086,7 +2128,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
@@ -2105,9 +2147,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
@@ -2124,6 +2166,130 @@ 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;
+    }
+    /**
+     * Replaces an image of a raw draw.io diagram (`.drawio`, `.dio`) with a card
+     * saying what it is, why the preview can't draw it yet (#59) and how to show
+     * it anyway, plus a button for each host file action that applies to it
+     * (VS Code's "Open in VS Code Editor" opens it in Draw.io Integration). The
+     * card keeps the image's source and alt text, so copying restores the image.
+     */
+    mountDrawioPlaceholder(image, path) {
+        const doc = this.elPreviewContent.ownerDocument;
+        const el = (tag, className, text) => {
+            const node = doc.createElement(tag);
+            if (className)
+                node.className = className;
+            if (text !== undefined)
+                node.textContent = text;
+            return node;
+        };
+        const card = el('span', DRAWIO_PLACEHOLDER_CLASS);
+        card.setAttribute('role', 'note');
+        card.setAttribute(PREVIEW_IMAGE_SOURCE_ATTRIBUTE, image.getAttribute(PREVIEW_IMAGE_SOURCE_ATTRIBUTE) ?? path);
+        const alt = image.getAttribute('alt')?.trim() ?? '';
+        if (alt)
+            card.setAttribute('data-mdzip-alt', alt);
+        const fileName = path.split('/').pop() ?? path;
+        const icon = el('span', `${DRAWIO_PLACEHOLDER_CLASS}-icon`);
+        icon.setAttribute('aria-hidden', 'true');
+        icon.innerHTML = '<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">'
+            + '<rect x="8.5" y="2.5" width="7" height="5" rx="1"/><rect x="2.5" y="16.5" width="7" height="5" rx="1"/>'
+            + '<rect x="14.5" y="16.5" width="7" height="5" rx="1"/><path d="M12 7.5v4.5M6 16.5V12h12v4.5"/></svg>';
+        const body = el('span', `${DRAWIO_PLACEHOLDER_CLASS}-body`);
+        body.append(el('strong', `${DRAWIO_PLACEHOLDER_CLASS}-title`, alt || fileName), el('span', `${DRAWIO_PLACEHOLDER_CLASS}-file`, `draw.io diagram · ${path}`));
+        const why = el('span', `${DRAWIO_PLACEHOLDER_CLASS}-text`);
+        why.append(doc.createTextNode('This preview can\'t draw '), el('code', '', '.drawio'), doc.createTextNode(' files yet. To show the diagram here, save it from draw.io as an editable SVG ('), el('code', '', '.drawio.svg'), doc.createTextNode(') and use that file for the image instead. You can still open this file in draw.io to see and edit it.'));
+        body.append(why);
+        const target = { path, isMarkdown: false, isImage: false, isManifest: false, isEntryPoint: false };
+        const actions = (this.options.hostFileActions ?? []).filter((item) => item.appliesTo?.(target) ?? true);
+        if (actions.length) {
+            const row = el('span', `${DRAWIO_PLACEHOLDER_CLASS}-actions`);
+            for (const action of actions) {
+                const button = el('button', `${DRAWIO_PLACEHOLDER_CLASS}-action`, action.label);
+                button.type = 'button';
+                button.addEventListener('click', () => {
+                    void Promise.resolve()
+                        .then(() => action.run(target))
+                        .catch((error) => this.options.onFailed?.(error));
+                });
+                row.append(button);
+            }
+            body.append(row);
+            // The same actions are on the file's right-click menu in the contents
+            // pane, when this host shows one.
+            if (this.controlPolicy.navigation) {
+                const hint = el('span', `${DRAWIO_PLACEHOLDER_CLASS}-hint`);
+                hint.append(doc.createTextNode('Or right-click '), el('code', '', fileName), doc.createTextNode(' in the contents pane.'));
+                body.append(hint);
+            }
+        }
+        card.append(icon, body);
+        image.replaceWith(card);
+        return card;
+    }
     collectPendingImages(roots, context, generation, animateImageHydration) {
         if (!this.assetSession) {
             return [];
@@ -2132,9 +2298,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);
@@ -2143,7 +2312,19 @@ 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 drawioPath = this.assetSession.assetPath(source, context.currentPath);
+                if (drawioPath && DRAWIO_PATH_RE.test(drawioPath)) {
+                    this.mountDrawioPlaceholder(image, drawioPath);
+                    continue;
+                }
+                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));
@@ -2213,6 +2394,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();
@@ -2759,7 +2960,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);
         }
@@ -4359,6 +4560,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;
@@ -4384,7 +4594,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;
@@ -5802,6 +6014,13 @@ export class MdzipWorkspaceView {
         }
         const container = doc.createElement('div');
         container.appendChild(content);
+        // A draw.io placeholder copies as the image it stands for.
+        for (const card of Array.from(container.querySelectorAll(`.${DRAWIO_PLACEHOLDER_CLASS}`))) {
+            const image = doc.createElement('img');
+            image.setAttribute(PREVIEW_IMAGE_SOURCE_ATTRIBUTE, card.getAttribute(PREVIEW_IMAGE_SOURCE_ATTRIBUTE) ?? '');
+            image.setAttribute('alt', card.getAttribute('data-mdzip-alt') ?? '');
+            card.replaceWith(image);
+        }
         const text = previewPlainText(container);
         for (const element of Array.from(container.querySelectorAll(PREVIEW_CHROME_REMOVE_SELECTOR))) {
             element.remove();
@@ -6966,11 +7185,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) {
@@ -7002,6 +7224,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([{
@@ -7011,6 +7236,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;
@@ -7031,6 +7263,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 });
@@ -7085,6 +7323,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;
             }
         }
@@ -7337,7 +7580,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;
             }
@@ -7372,6 +7616,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);
             }
         });
     }
@@ -7397,6 +7650,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) {
@@ -8098,6 +8364,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>