feat(editor): add image paste-to-upload for markdown files

- Add ImageUploadManager service provider registry in core
- Add paste interceptor on editor-holder that detects image clipboard
  content in markdown/gfm files and triggers upload flow
- Insert uploading placeholder with spinner SVG, replace with embed URL
- Show login dialog with image preview if not logged in
- Show upsell dialog if upload quota exceeded
- Add i18n strings for upload dialogs and messages

Author: abose

src/editor/EditorCommandHandlers.js

@@ -37,7 +37,11 @@ define(function (require, exports, module) {
         TokenUtils = require("utils/TokenUtils"),
         CodeMirror = require("thirdparty/CodeMirror/lib/codemirror"),
         _ = require("thirdparty/lodash"),
-        ChangeHelper = require("editor/EditorHelper/ChangeHelper");
+        ChangeHelper = require("editor/EditorHelper/ChangeHelper"),
+        LanguageManager = require("language/LanguageManager"),
+        ImageUploadManager = require("features/ImageUploadManager"),
+        Dialogs = require("widgets/Dialogs"),
+        AppInit = require("utils/AppInit");
 
     /**
      * List of constants
@@ -1262,6 +1266,159 @@ define(function (require, exports, module) {
         return result.promise();
     }
 
+    // --- Image paste-to-upload for markdown files ---
+    const ALLOWED_IMAGE_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
+
+    function _handleImagePaste(editor, cm, event) {
+        const items = event.clipboardData && event.clipboardData.items;
+        if (!items) {
+            return false;
+        }
+
+        // Find an image item in the clipboard
+        let imageItem = null;
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].kind === "file" && ALLOWED_IMAGE_TYPES.indexOf(items[i].type) !== -1) {
+                imageItem = items[i];
+                break;
+            }
+        }
+        if (!imageItem) {
+            return false;
+        }
+
+        // Only handle in markdown files
+        const doc = editor.document;
+        if (!doc || !doc.file) {
+            return false;
+        }
+        const lang = LanguageManager.getLanguageForPath(doc.file.fullPath);
+        const langId = lang ? lang.getId() : "";
+        if (langId !== "markdown" && langId !== "gfm") {
+            return false;
+        }
+
+        // Check if upload provider is available
+        if (!ImageUploadManager.isImageUploadAvailable()) {
+            return false;
+        }
+
+        event.preventDefault();
+
+        const blob = imageItem.getAsFile();
+        const fileName = blob.name || ("image." + blob.type.split("/")[1]);
+        const provider = ImageUploadManager.getImageUploadProvider();
+        const cmDoc = cm.getDoc();
+
+        // Upload asynchronously — provider shows confirmation dialog before uploading.
+        // Placeholder is inserted only after confirmation via onUploadStart callback.
+        let marker = null;
+
+        function _clearPlaceholder() {
+            if (marker) {
+                const range = marker.find();
+                marker.clear();
+                if (range) {
+                    cmDoc.replaceRange("", range.from, range.to);
+                }
+                marker = null;
+            }
+        }
+
+        provider.uploadImage(blob, fileName, function onUploadStart() {
+            // Insert placeholder after user confirms (avoids dirtying the file on cancel)
+            const cursor = cmDoc.getCursor();
+            const placeholder = `![${Strings.IMAGE_UPLOADING} ${fileName}](https://user-cdn.phcode.site/images/uploading.svg)`;
+            cmDoc.replaceRange(placeholder, cursor);
+            const from = cursor;
+            const to = { line: cursor.line, ch: cursor.ch + placeholder.length };
+            marker = cmDoc.markText(from, to, { className: "image-uploading", clearWhenEmpty: false });
+        }).then(function (result) {
+            if (result.embedURL) {
+                // Success — replace placeholder with final embed
+                if (marker) {
+                    const range = marker.find();
+                    marker.clear();
+                    marker = null;
+                    if (range) {
+                        cmDoc.replaceRange(`![${fileName}](${result.embedURL})`, range.from, range.to);
+                    }
+                }
+            } else if (result.error === "cancelled") {
+                // User cancelled confirmation — nothing was inserted
+            } else if (result.error === "login_required") {
+                _clearPlaceholder();
+                const previewURL = URL.createObjectURL(blob);
+                const loginHTML = `<div>
+                    <p>${Strings.IMAGE_UPLOAD_LOGIN_REQUIRED_MSG}</p>
+                    <div style="text-align: center;">
+                        <img src="${previewURL}" style="max-width: 300px; max-height: 200px; border: 1px solid #ccc; border-radius: 4px; margin: 12px 0;" />
+                    </div>
+                </div>`;
+                const dialog = Dialogs.showModalDialog(
+                    "",
+                    Strings.IMAGE_UPLOAD_LOGIN_REQUIRED_TITLE,
+                    loginHTML,
+                    [
+                        { className: Dialogs.DIALOG_BTN_CLASS_NORMAL, id: Dialogs.DIALOG_BTN_CANCEL,
+                            text: Strings.CANCEL },
+                        { className: Dialogs.DIALOG_BTN_CLASS_PRIMARY, id: "login",
+                            text: Strings.IMAGE_UPLOAD_LOGIN_BTN }
+                    ]
+                );
+                dialog.done(function (id) {
+                    URL.revokeObjectURL(previewURL);
+                    if (id === "login") {
+                        const profileBtn = document.getElementById("user-profile-button");
+                        if (profileBtn) {
+                            profileBtn.click();
+                        }
+                    }
+                });
+            } else if (result.errorCode === "UPGRADE_TO_PRO") {
+                _clearPlaceholder();
+                const ProDialogs = brackets.getModule(
+                    "extensionsIntegrated/phoenix-pro/services/pro-dialogs"
+                );
+                if (ProDialogs && ProDialogs.showUpsellDialog) {
+                    ProDialogs.showUpsellDialog(
+                        Strings.IMAGE_UPLOAD_LIMIT_TITLE,
+                        result.errorLoc,
+                        "imgUpload"
+                    );
+                }
+            } else {
+                _clearPlaceholder();
+                console.error("Image upload failed:", result.error, result.errorLoc);
+                Dialogs.showModalDialog(
+                    "",
+                    Strings.IMAGE_UPLOAD_FAILED,
+                    result.errorLoc || Strings.IMAGE_UPLOAD_FAILED
+                );
+            }
+        }).catch(function (err) {
+            _clearPlaceholder();
+            console.error("Image upload error:", err);
+        });
+
+        return true;
+    }
+
+    // Listen for paste events on the editor holder (capture phase) so image pastes
+    // are intercepted even when CM doesn't fire its own "paste" event (e.g. image-only clipboard).
+    AppInit.appReady(function () {
+        const editorHolder = document.getElementById("editor-holder");
+        if (editorHolder) {
+            editorHolder.addEventListener("paste", function (e) {
+                const editor = EditorManager.getFocusedEditor();
+                if (!editor) {
+                    return;
+                }
+                _handleImagePaste(editor, editor._codeMirror, e);
+            }, true);
+        }
+    });
+
     // Register commands
     CommandManager.register(Strings.CMD_INDENT, Commands.EDIT_INDENT, indentText);
     CommandManager.register(Strings.CMD_UNINDENT, Commands.EDIT_UNINDENT, unindentText);

src/features/ImageUploadManager.js

@@ -0,0 +1,63 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+/**
+ * ImageUploadManager provides a service provider interface for image uploads.
+ * Extensions (e.g. phoenix-pro) register an upload provider; core code (e.g.
+ * the paste handler in EditorCommandHandlers) calls the provider to upload images.
+ *
+ * Provider interface:
+ *   {
+ *     uploadImage(blob, fileName) → Promise<{embedURL}|{error, errorCode, errorLoc}>
+ *   }
+ */
+define(function (require, exports, module) {
+
+    let _provider = null;
+
+    /**
+     * Register an image upload provider. Only one provider is supported at a time.
+     * @param {Object} provider - must have an `uploadImage(blob, fileName)` method
+     */
+    function registerImageUploadProvider(provider) {
+        if (!provider || typeof provider.uploadImage !== "function") {
+            throw new Error("ImageUploadManager: provider must implement uploadImage(blob, fileName)");
+        }
+        _provider = provider;
+    }
+
+    /**
+     * @return {Object|null} The registered provider, or null if none registered.
+     */
+    function getImageUploadProvider() {
+        return _provider;
+    }
+
+    /**
+     * @return {boolean} True if an upload provider is registered.
+     */
+    function isImageUploadAvailable() {
+        return _provider !== null;
+    }
+
+    exports.registerImageUploadProvider = registerImageUploadProvider;
+    exports.getImageUploadProvider = getImageUploadProvider;
+    exports.isImageUploadAvailable = isImageUploadAvailable;
+});

src/nls/root/strings.js

@@ -394,6 +394,17 @@ define({
     "AVAILABLE_IN_PRO_TITLE": "Available in Phoenix Pro",
     "DEVICE_SIZE_LIMIT_MESSAGE": "Phoenix Pro lets you preview your page at the screen sizes defined in your CSS.",
     "MD_EDIT_UPSELL_MESSAGE": "Write Markdown like a document. Phoenix handles the formatting so you can stay focused on writing.",
+    "IMAGE_UPLOADING": "Uploading",
+    "IMAGE_UPLOAD_FAILED": "Failed to upload image",
+    "IMAGE_UPLOAD_LOGIN_REQUIRED_TITLE": "Log in to Embed Image",
+    "IMAGE_UPLOAD_LOGIN_REQUIRED_MSG": "Log in to upload and embed images in your document.",
+    "IMAGE_UPLOAD_LOGIN_BTN": "Log In",
+    "IMAGE_UPLOAD_CONFIRM_TITLE": "Embed Image",
+    "IMAGE_UPLOAD_CONFIRM_MSG": "Upload this image so it's included directly in your file. It'll work on any computer — no broken images when you share or move markdown files.",
+    "IMAGE_UPLOAD_HOSTED_ON": "Images are hosted on user-cdn.phcode.site",
+    "IMAGE_UPLOAD_BTN": "Upload & Embed",
+    "IMAGE_UPLOAD_DONT_SHOW_AGAIN": "Always embed without asking",
+    "IMAGE_UPLOAD_LIMIT_TITLE": "Upload more images with Phoenix Pro",
     "IMAGE_SEARCH_LIMIT_TITLE": "Image search limit reached",
     "IMAGE_SEARCH_LIMIT_MESSAGE": "You’ve used all {0} image searches for this month.<br>Start a paid Phoenix Pro plan to remove trial limits and continue searching.",
     "IMAGE_SEARCH_LIMIT_MESSAGE_THROTTLE": "Image search is temporarily unavailable due to high demand.<br>Start a paid Phoenix Pro plan to remove trial limits and continue searching.",