feat(mdviewer): add image insert via toolbar dropdown, slash menu, and paste

abose · abose · commit 37c3158545c0 · 2026-03-29T14:19:03.000+05:30
- Add image dropdown in toolbar with "Image URL" and "Upload from Computer"
- Add two image items to slash menu (image URL and upload)
- Add image URL dialog with URL and alt text inputs
- Add file picker for image upload from computer
- Intercept image paste in mdviewer editor
- Forward image blobs to Phoenix via bridge for cloud upload
- Handle upload results (replace placeholder with embed URL)
- Add menu-style dropdown CSS with left-aligned icon + text items
- Collapse image section with blocks at narrow widths
diff --git a/src-mdviewer/src/bridge.js b/src-mdviewer/src/bridge.js
@@ -150,6 +150,9 @@ export function initBridge() {
             case "MDVIEWR_RERENDER_CONTENT":
                 handleRerenderContent(data);
                 break;
+            case "MDVIEWR_IMAGE_UPLOAD_RESULT":
+                _handleImageUploadResult(data);
+                break;
         }
     });
 
@@ -318,6 +321,17 @@ export function initBridge() {
         sendToParent("mdviewrRequestEditMode", {});
     });
 
+    // Forward image upload request from editor to Phoenix
+    on("bridge:uploadImage", async ({ blob, filename, uploadId }) => {
+        const arrayBuffer = await blob.arrayBuffer();
+        sendToParent("mdviewrImageUploadRequest", {
+            arrayBuffer,
+            mimeType: blob.type,
+            filename,
+            uploadId
+        });
+    });
+
     // Cursor sync toggle
     on("toggle:cursorSync", ({ enabled }) => {
         sendToParent("mdviewrCursorSyncToggle", { enabled });
@@ -615,6 +629,23 @@ function handleRerenderContent(data) {
     emit("file:rendered", parseResult);
 }
 
+function _handleImageUploadResult(data) {
+    const { uploadId, embedURL, error } = data;
+    const content = document.getElementById("viewer-content");
+    if (!content || !uploadId) return;
+    const placeholder = content.querySelector(`img[data-upload-id="${uploadId}"]`);
+    if (!placeholder) return;
+
+    if (embedURL) {
+        placeholder.src = embedURL;
+        placeholder.alt = placeholder.alt === "Uploading..." ? "" : placeholder.alt;
+        placeholder.removeAttribute("data-upload-id");
+    } else {
+        placeholder.remove();
+    }
+    content.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
 
 function handleSetLocale(data) {
     const { locale } = data;
diff --git a/src-mdviewer/src/components/editor.js b/src-mdviewer/src/components/editor.js
@@ -428,6 +428,12 @@ export function executeFormat(contentEl, command, value) {
         case "mermaidBlock":
             insertMermaidBlock(contentEl);
             break;
+        case "imageFromUrl":
+            showImageUrlDialog(contentEl);
+            break;
+        case "imageUpload":
+            openImageFilePicker(contentEl);
+            break;
     }
 
     broadcastSelectionState();
@@ -495,6 +501,114 @@ function insertCodeBlock(contentEl) {
     });
 }
 
+const UPLOAD_PLACEHOLDER_SRC = "https://user-cdn.phcode.site/images/uploading.svg";
+const ALLOWED_IMAGE_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
+
+function showImageUrlDialog(contentEl) {
+    // Create a simple overlay dialog for entering image URL and alt text
+    const backdrop = document.createElement("div");
+    backdrop.className = "confirm-dialog-backdrop";
+    backdrop.innerHTML = `
+        <div class="confirm-dialog">
+            <h3 class="confirm-dialog-title">${t("image_dialog.title") || "Insert Image URL"}</h3>
+            <div style="margin-bottom: 12px;">
+                <input type="text" id="img-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-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-dialog-cancel">${t("dialog.cancel") || "Cancel"}</button>
+                <button class="confirm-dialog-btn confirm-dialog-btn-save" id="img-dialog-insert">${t("image_dialog.insert") || "Insert"}</button>
+            </div>
+        </div>`;
+    document.body.appendChild(backdrop);
+
+    const urlInput = backdrop.querySelector("#img-url-input");
+    const altInput = backdrop.querySelector("#img-alt-input");
+    urlInput.focus();
+
+    function close() {
+        backdrop.remove();
+        contentEl.focus({ preventScroll: true });
+    }
+
+    backdrop.querySelector("#img-dialog-cancel").addEventListener("click", close);
+    backdrop.querySelector("#img-dialog-insert").addEventListener("click", () => {
+        const url = urlInput.value.trim();
+        const alt = altInput.value.trim();
+        if (url) {
+            close();
+            const imgHtml = `<img src="${url}" alt="${alt}">`;
+            document.execCommand("insertHTML", false, imgHtml);
+            contentEl.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+    });
+
+    // Enter key inserts, Escape cancels
+    backdrop.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            backdrop.querySelector("#img-dialog-insert").click();
+        } else if (e.key === "Escape") {
+            e.preventDefault();
+            close();
+        }
+    });
+
+    // Click on backdrop closes
+    backdrop.addEventListener("mousedown", (e) => {
+        if (e.target === backdrop) {
+            close();
+        }
+    });
+}
+
+function _insertUploadPlaceholder(contentEl) {
+    const uploadId = crypto.randomUUID();
+    const imgHtml = `<img src="${UPLOAD_PLACEHOLDER_SRC}" alt="Uploading..." data-upload-id="${uploadId}">`;
+    document.execCommand("insertHTML", false, imgHtml);
+    contentEl.dispatchEvent(new Event("input", { bubbles: true }));
+    return uploadId;
+}
+
+function openImageFilePicker(contentEl) {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.addEventListener("change", () => {
+        const file = input.files && input.files[0];
+        if (!file || !ALLOWED_IMAGE_TYPES.includes(file.type)) {
+            return;
+        }
+        const uploadId = _insertUploadPlaceholder(contentEl);
+        emit("bridge:uploadImage", { blob: file, filename: file.name, uploadId });
+    });
+    input.click();
+}
+
+/**
+ * Handle image paste in the mdviewer editor.
+ * @return {boolean} true if an image was found and handled
+ */
+function handleImagePaste(e, contentEl) {
+    const items = e.clipboardData && e.clipboardData.items;
+    if (!items) {
+        return false;
+    }
+    for (let i = 0; i < items.length; i++) {
+        if (items[i].kind === "file" && ALLOWED_IMAGE_TYPES.includes(items[i].type)) {
+            e.preventDefault();
+            const blob = items[i].getAsFile();
+            const fileName = blob.name || ("image." + blob.type.split("/")[1]);
+            const uploadId = _insertUploadPlaceholder(contentEl);
+            emit("bridge:uploadImage", { blob, filename: fileName, uploadId });
+            return true;
+        }
+    }
+    return false;
+}
+
 // ——— Table editing helpers ———
 
 function getTableContext() {
@@ -1046,6 +1160,11 @@ function sanitizePastedHTML(html) {
 }
 
 function handlePaste(e, contentEl) {
+    // Check for image paste first — upload to cloud
+    if (handleImagePaste(e, contentEl)) {
+        return;
+    }
+
     const mod = isModKey(e);
 
     // Inside table cells: paste as single line plain text (newlines break tables)
diff --git a/src-mdviewer/src/components/embedded-toolbar.js b/src-mdviewer/src/components/embedded-toolbar.js
@@ -30,7 +30,9 @@ import {
     BookOpen,
     Link2,
     Link2Off,
-    Printer
+    Printer,
+    Image as ImageIcon,
+    Upload
 } from "lucide";
 import { on, emit } from "../core/events.js";
 import { getState, setState } from "../core/state.js";
@@ -42,12 +44,12 @@ let cursorSyncEnabled = true;
 let collapseLevel = 0; // 0=expanded, 1=blocks, 2=blocks+lists, 3=all
 
 // Width thresholds for progressive collapse
-const THRESHOLD_BLOCKS = 640;  // collapse block elements first
+const THRESHOLD_BLOCKS = 640;  // collapse block elements + image first
 const THRESHOLD_LISTS = 520;   // then lists
-const THRESHOLD_TEXT = 420;    // finally text formatting
+const THRESHOLD_TEXT = 500;    // finally text formatting (all dropdowns collapsed)
 
 const allIcons = { Bold, Italic, Strikethrough, Underline, Code, Link, List, ListOrdered,
-    ListChecks, Quote, Minus, Table, FileCode, ChevronDown, Type, MoreHorizontal, Pencil, BookOpen, Link2, Link2Off, Printer };
+    ListChecks, Quote, Minus, Table, FileCode, ChevronDown, Type, MoreHorizontal, Pencil, BookOpen, Link2, Link2Off, Printer, Image: ImageIcon, Upload };
 
 export function initEmbeddedToolbar() {
     toolbar = document.getElementById("toolbar");
@@ -155,6 +157,10 @@ function renderEditMode(level) {
         btn("emb-codeblock", "file-code", t("format.code_block") || "Code block")
     ].join("");
 
+    const imageBtns = `
+        <button class="toolbar-btn toolbar-menu-item" id="emb-image-url"><i data-lucide="link"></i><span>${t("format.image_url") || "Image URL"}</span></button>
+        <button class="toolbar-btn toolbar-menu-item" id="emb-image-upload"><i data-lucide="upload"></i><span>${t("format.image_upload") || "Upload from Computer"}</span></button>`;
+
     // Build the text section (inline or dropdown)
     const textSection = level >= 3
         ? dropdown("text", "type", t("format.text_formatting") || "Text formatting", textBtns)
@@ -170,6 +176,9 @@ function renderEditMode(level) {
         ? dropdown("blocks", "more-horizontal", t("format.more_elements") || "More", blockBtns)
         : blockBtns;
 
+    // Image section is always a dropdown (two options inside)
+    const imageSection = dropdown("image", "image", t("format.image") || "Image", imageBtns);
+
     const formatRow = `
         <div class="format-row">
             ${blockTypeSelect}
@@ -179,6 +188,8 @@ function renderEditMode(level) {
             ${listSection}
             <div class="toolbar-divider"></div>
             ${blockSection}
+            <div class="toolbar-divider"></div>
+            ${imageSection}
         </div>`;
 
     toolbar.innerHTML = `<div class="embedded-toolbar">
@@ -224,7 +235,9 @@ const formatBindings = [
     { id: "emb-quote", command: "formatBlock", value: "<blockquote>" },
     { id: "emb-hr", command: "insertHorizontalRule" },
     { id: "emb-table", command: "table" },
-    { id: "emb-codeblock", command: "codeBlock" }
+    { id: "emb-codeblock", command: "codeBlock" },
+    { id: "emb-image-url", command: "imageFromUrl" },
+    { id: "emb-image-upload", command: "imageUpload" }
 ];
 
 function wireFormatButtons() {
diff --git a/src-mdviewer/src/components/slash-menu.js b/src-mdviewer/src/components/slash-menu.js
@@ -14,6 +14,8 @@ import {
   Minus,
   Pilcrow,
   Workflow,
+  Image as ImageIcon,
+  Upload,
 } from "lucide";
 import { emit } from "../core/events.js";
 import { getSelectionRect } from "./editor.js";
@@ -48,6 +50,8 @@ const menuItems = [
   { labelKey: "slash.code_block", descKey: "slash.code_block_desc", icon: "file-code", command: "codeBlock" },
   { labelKey: "slash.table", descKey: "slash.table_desc", icon: "table", command: "table" },
   { labelKey: "slash.divider", descKey: "slash.divider_desc", icon: "minus", command: "insertHorizontalRule" },
+  { labelKey: "slash.image_url", descKey: "slash.image_url_desc", icon: "image", command: "imageFromUrl" },
+  { labelKey: "slash.image_upload", descKey: "slash.image_upload_desc", icon: "image", command: "imageUpload" },
   { labelKey: "slash.mermaid", descKey: "slash.mermaid_desc", icon: "workflow", command: "mermaidBlock" },
 ];
 
@@ -193,7 +197,7 @@ function renderItems() {
   menu.innerHTML = html;
 
   createIcons({
-    icons: { Pilcrow, Heading1, Heading2, Heading3, Heading4, Heading5, List, ListOrdered, ListChecks, Quote, FileCode, Table, Minus, Workflow },
+    icons: { Pilcrow, Heading1, Heading2, Heading3, Heading4, Heading5, List, ListOrdered, ListChecks, Quote, FileCode, Table, Minus, Workflow, Image: ImageIcon, Upload },
     attrs: { class: "" },
   });
 
diff --git a/src-mdviewer/src/locales/en.json b/src-mdviewer/src/locales/en.json
@@ -78,7 +78,10 @@
     "block_type": "Block type",
     "text_formatting": "Text formatting",
     "lists": "Lists",
-    "more_elements": "More"
+    "more_elements": "More",
+    "image": "Image",
+    "image_url": "Image URL",
+    "image_upload": "Upload from Computer"
   },
   "slash": {
     "paragraph": "Paragraph",
@@ -109,8 +112,18 @@
     "divider_desc": "Horizontal rule",
     "mermaid": "Mermaid diagram",
     "mermaid_desc": "Insert a diagram",
+    "image_url": "Image URL",
+    "image_url_desc": "Embed from URL",
+    "image_upload": "Upload Image",
+    "image_upload_desc": "Upload from computer",
     "no_results": "No results"
   },
+  "image_dialog": {
+    "title": "Insert Image URL",
+    "url_placeholder": "https://example.com/image.png",
+    "alt_placeholder": "Image description",
+    "insert": "Insert"
+  },
   "mermaid": {
     "edit": "Edit",
     "done": "Done",
diff --git a/src-mdviewer/src/styles/app.css b/src-mdviewer/src/styles/app.css
@@ -344,3 +344,30 @@ mark[data-markjs].active {
 .toolbar-dropdown.open .toolbar-dropdown-panel {
   display: flex;
 }
+
+/* Menu-style dropdown items with icon + text label */
+.toolbar-dropdown-panel .toolbar-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 12px;
+  white-space: nowrap;
+  font-size: 13px;
+  border-radius: var(--radius-sm);
+  text-align: left;
+}
+
+.toolbar-dropdown-panel .toolbar-menu-item:hover {
+  background: var(--color-surface-hover);
+}
+
+/* Image dropdown uses vertical layout, right-aligned to avoid overflow */
+.toolbar-dropdown[data-group="image"] .toolbar-dropdown-panel {
+  flex-direction: column;
+  min-width: 180px;
+  left: auto;
+  right: 0;
+  padding: 4px;
+}
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js b/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js
