feat(mdviewer): add image popover with edit/delete and keyboard nav

Show a floating popover with Edit and Delete buttons when clicking an
image in edit mode. Edit opens the image URL dialog pre-filled with
current src/alt. Delete removes the image. Selected image gets a blue
outline. Arrow keys move cursor to adjacent elements, Enter creates
a new paragraph below, Backspace/Delete removes the image.

fix(mdviewer): don't intercept keyboard shortcuts in input fields
Skip shortcut forwarding to Phoenix when focus is in any input/textarea
outside viewer-content (dialogs, search bar, link popover inputs).

Author: abose

src-mdviewer/index.html

@@ -23,6 +23,7 @@
     </div>
     <div class="format-bar" id="format-bar" role="toolbar"></div>
     <div class="link-popover" id="link-popover" role="dialog"></div>
+    <div class="image-popover" id="image-popover" role="toolbar"></div>
     <div class="context-menu" id="context-menu" role="menu"></div>
     <div class="table-context-menu" id="table-context-menu" role="menu"></div>
     <div class="slash-menu-anchor" id="slash-menu-anchor">

src-mdviewer/src/bridge.js

@@ -223,6 +223,15 @@ export function initBridge() {
     const _mdEditorHandledShiftKeys = new Set(["x", "X", "z", "Z"]); // Ctrl/Cmd + Shift + key
 
     document.addEventListener("keydown", (e) => {
+        // Don't intercept shortcuts when focus is in any input/textarea (except Escape)
+        // This covers dialog inputs, search bar input, link popover input, etc.
+        const activeEl = document.activeElement;
+        if (e.key !== "Escape" && activeEl &&
+            (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA") &&
+            !activeEl.closest("#viewer-content")) {
+            return;
+        }
+
         if (e.key === "Escape") {
             // Don't forward Escape to Phoenix if any popup/overlay is open
             const popupSelectors = [

src-mdviewer/src/components/editor.js

@@ -8,6 +8,7 @@ import { t, tp } from "../core/i18n.js";
 import { initFormatBar, destroyFormatBar, focusFormatBar } from "./format-bar.js";
 import { initSlashMenu, destroySlashMenu, isSlashMenuVisible } from "./slash-menu.js";
 import { initLinkPopover, destroyLinkPopover } from "./link-popover.js";
+import { initImagePopover, destroyImagePopover } from "./image-popover.js";
 import { initLangPicker, destroyLangPicker, isLangPickerDropdownOpen } from "./lang-picker.js";
 import { highlightCode, renderAfterHTML, normalizeCodeLanguages } from "./viewer.js";
 import { initMermaidEditor, destroyMermaidEditor, insertMermaidBlock, attachOverlays } from "./mermaid-editor.js";
@@ -2191,6 +2192,7 @@ function enterEditMode(content) {
 
     initFormatBar(content);
     initLinkPopover(content);
+    initImagePopover(content);
     initLangPicker(content);
     initSlashMenu(content);
 
@@ -2208,6 +2210,7 @@ function cleanupEditMode(content) {
 
     destroyFormatBar();
     destroyLinkPopover();
+    destroyImagePopover();
     destroyLangPicker();
     destroySlashMenu();
     destroyMermaidEditor();

src-mdviewer/src/components/image-popover.js

@@ -0,0 +1,259 @@
+/**
+ * Image popover — appears when clicking an image in edit mode.
+ * Shows Edit (opens image URL dialog) and Delete buttons.
+ */
+import { emit, on } from "../core/events.js";
+import { t } from "../core/i18n.js";
+import { getState } from "../core/state.js";
+
+let popover = null;
+let currentImg = null;
+let contentEl = null;
+
+function hide() {
+    if (!popover) return;
+    popover.classList.remove("visible");
+    if (currentImg) {
+        currentImg.classList.remove("image-selected");
+    }
+    currentImg = null;
+}
+
+function _moveCursorBeforeImage(img) {
+    const block = img.closest("p, div, li, blockquote") || img.parentNode;
+    const prev = block.previousElementSibling;
+    if (prev) {
+        const range = document.createRange();
+        range.selectNodeContents(prev);
+        range.collapse(false); // end of previous element
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+}
+
+function _moveCursorAfterImage(img, content) {
+    const block = img.closest("p, div, li, blockquote") || img.parentNode;
+    let next = block.nextElementSibling;
+    if (!next) {
+        // Create a new paragraph if nothing follows
+        next = document.createElement("p");
+        next.innerHTML = "<br>";
+        block.parentNode.insertBefore(next, block.nextSibling);
+        content.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    const range = document.createRange();
+    range.selectNodeContents(next);
+    range.collapse(true); // start of next element
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+
+function _createParagraphAfterImage(img, content) {
+    const block = img.closest("p, div, li, blockquote") || img.parentNode;
+    const newP = document.createElement("p");
+    newP.innerHTML = "<br>";
+    block.parentNode.insertBefore(newP, block.nextSibling);
+    const range = document.createRange();
+    range.selectNodeContents(newP);
+    range.collapse(true);
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+    content.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function show(img) {
+    if (!popover || !img) return;
+    currentImg = img;
+
+    const rect = img.getBoundingClientRect();
+    const popW = popover.offsetWidth || 80;
+    const popH = popover.offsetHeight || 36;
+
+    // Position above the image, centered
+    let left = rect.left + rect.width / 2 - popW / 2;
+    let top = rect.top - popH - 8;
+
+    // Flip below if too close to top
+    if (top < 4) {
+        top = rect.bottom + 8;
+    }
+    // Clamp horizontal
+    left = Math.max(4, Math.min(left, window.innerWidth - popW - 4));
+
+    popover.style.left = left + "px";
+    popover.style.top = top + "px";
+    popover.classList.add("visible");
+}
+
+export function initImagePopover(content) {
+    contentEl = content;
+    popover = document.getElementById("image-popover");
+    if (!popover) return;
+
+    popover.innerHTML = "";
+
+    const editBtn = document.createElement("button");
+    editBtn.className = "image-popover-btn";
+    editBtn.setAttribute("aria-label", t("image.edit") || "Edit image");
+    editBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>';
+    editBtn.addEventListener("mousedown", (e) => e.preventDefault());
+    editBtn.addEventListener("click", () => {
+        const img = currentImg;
+        const src = img ? img.getAttribute("src") || "" : "";
+        const alt = img ? img.getAttribute("alt") || "" : "";
+        hide();
+        if (!img) return;
+        showEditDialog(img, src, alt);
+    });
+    popover.appendChild(editBtn);
+
+    const deleteBtn = document.createElement("button");
+    deleteBtn.className = "image-popover-btn image-popover-btn-delete";
+    deleteBtn.setAttribute("aria-label", t("image.delete") || "Delete image");
+    deleteBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>';
+    deleteBtn.addEventListener("mousedown", (e) => e.preventDefault());
+    deleteBtn.addEventListener("click", () => {
+        const img = currentImg;
+        hide();
+        if (!img || !img.parentNode) return;
+        img.remove();
+        if (contentEl) {
+            contentEl.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+    });
+    popover.appendChild(deleteBtn);
+
+    // Click on images in edit mode shows the popover and selects the image
+    content.addEventListener("click", (e) => {
+        if (!getState().editMode) return;
+        const img = e.target.closest("img");
+        if (img && content.contains(img)) {
+            e.preventDefault();
+            show(img);
+            // Add visual selection to the image
+            content.querySelectorAll("img.image-selected").forEach(
+                el => el.classList.remove("image-selected"));
+            img.classList.add("image-selected");
+        } else if (!popover.contains(e.target)) {
+            hide();
+            content.querySelectorAll("img.image-selected").forEach(
+                el => el.classList.remove("image-selected"));
+        }
+    });
+
+    // Keyboard handling when an image is selected
+    content.addEventListener("keydown", (e) => {
+        if (!getState().editMode || !currentImg) return;
+        const img = currentImg;
+
+        if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+            e.preventDefault();
+            hide();
+            _moveCursorBeforeImage(img);
+        } else if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+            e.preventDefault();
+            hide();
+            _moveCursorAfterImage(img, content);
+        } else if (e.key === "Enter") {
+            e.preventDefault();
+            hide();
+            _createParagraphAfterImage(img, content);
+        } else if (e.key === "Backspace" || e.key === "Delete") {
+            e.preventDefault();
+            hide();
+            if (img.parentNode) {
+                img.remove();
+                content.dispatchEvent(new Event("input", { bubbles: true }));
+            }
+        }
+    });
+
+    // Hide on scroll
+    const appViewer = document.getElementById("app-viewer");
+    if (appViewer) {
+        appViewer.addEventListener("scroll", hide);
+    }
+
+    // Hide on Escape
+    document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && popover.classList.contains("visible")) {
+            hide();
+            content.querySelectorAll("img.image-selected").forEach(
+                el => el.classList.remove("image-selected"));
+        }
+    });
+}
+
+function showEditDialog(imgEl, currentSrc, currentAlt) {
+    const backdrop = document.createElement("div");
+    backdrop.className = "confirm-dialog-backdrop";
+    backdrop.innerHTML = `
+        <div class="confirm-dialog">
+            <h3 class="confirm-dialog-title">${t("image.edit") || "Edit Image URL"}</h3>
+            <div style="margin-bottom: 12px;">
+                <input type="text" id="img-edit-url-input" placeholder="${t("image_dialog.url_placeholder") || "https://example.com/image.png"}"
+                    style="width: 100%; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg); color: var(--color-text); margin-bottom: 8px;" />
+                <input type="text" id="img-edit-alt-input" placeholder="${t("image_dialog.alt_placeholder") || "Image description"}"
+                    style="width: 100%; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg); color: var(--color-text);" />
+            </div>
+            <div class="confirm-dialog-buttons">
+                <button class="confirm-dialog-btn confirm-dialog-btn-cancel" id="img-edit-cancel">${t("dialog.cancel") || "Cancel"}</button>
+                <button class="confirm-dialog-btn confirm-dialog-btn-save" id="img-edit-save">${t("dialog.save") || "Save"}</button>
+            </div>
+        </div>`;
+    document.body.appendChild(backdrop);
+
+    const urlInput = backdrop.querySelector("#img-edit-url-input");
+    const altInput = backdrop.querySelector("#img-edit-alt-input");
+    urlInput.value = currentSrc;
+    altInput.value = currentAlt;
+    urlInput.focus();
+    urlInput.select();
+
+    function close() {
+        backdrop.remove();
+        if (contentEl) {
+            contentEl.focus({ preventScroll: true });
+        }
+    }
+
+    backdrop.querySelector("#img-edit-cancel").addEventListener("click", close);
+    backdrop.querySelector("#img-edit-save").addEventListener("click", () => {
+        const url = urlInput.value.trim();
+        const alt = altInput.value.trim();
+        if (url && imgEl && imgEl.parentNode) {
+            imgEl.setAttribute("src", url);
+            imgEl.setAttribute("alt", alt);
+            if (contentEl) {
+                contentEl.dispatchEvent(new Event("input", { bubbles: true }));
+            }
+        }
+        close();
+    });
+
+    backdrop.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            backdrop.querySelector("#img-edit-save").click();
+        } else if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            close();
+        }
+    });
+
+    backdrop.addEventListener("mousedown", (e) => {
+        if (e.target === backdrop) {
+            close();
+        }
+    });
+}
+
+export function destroyImagePopover() {
+    hide();
+    contentEl = null;
+    currentImg = null;
+}

src-mdviewer/src/locales/en.json

@@ -118,6 +118,10 @@
     "image_upload_desc": "Upload from computer",
     "no_results": "No results"
   },
+  "image": {
+    "edit": "Edit Image URL",
+    "delete": "Delete image"
+  },
   "image_dialog": {
     "title": "Insert Image URL",
     "url_placeholder": "https://example.com/image.png",

src-mdviewer/src/styles/editor.css

@@ -1356,3 +1356,64 @@
     height: auto !important;
   }
 }
+
+/* --- Image popover --- */
+
+#viewer-content.editing img {
+  cursor: pointer;
+}
+
+#viewer-content.editing img.image-selected {
+  outline: 2px solid var(--color-accent, #4285F4);
+  outline-offset: 2px;
+  border-radius: var(--radius-md);
+}
+
+.image-popover {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: var(--space-xs);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  z-index: 350;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(4px);
+  transition: opacity 150ms ease-out, transform 150ms ease-out;
+  will-change: opacity, transform;
+}
+
+.image-popover.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.image-popover-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--color-text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.image-popover-btn:hover {
+  background: var(--color-hover);
+}
+
+.image-popover-btn-delete {
+  color: var(--color-danger, #f85149);
+}
+
+.image-popover-btn-delete:hover {
+  background: rgba(248, 81, 73, 0.15);
+}