feat: add use this image option in image ribbon gallery

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -2113,6 +2113,55 @@ function RemoteFunctions(config = {}) {
                         font-size: 9px !important;
                         opacity: 0.85 !important;
                     }
+
+                    .phoenix-use-image-btn {
+                        position: absolute !important;
+                        top: 6px !important;
+                        right: 6px !important;
+                        background: rgba(0,0,0,0.55) !important;
+                        border: none !important;
+                        color: white !important;
+                        border-radius: 20px !important;
+                        height: 26px !important;
+                        display: flex !important;
+                        align-items: center !important;
+                        justify-content: center !important;
+                        cursor: pointer !important;
+                        font-size: 12px !important;
+                        z-index: 2 !important;
+                        padding: 0 8px !important;
+                        white-space: nowrap !important;
+                        opacity: 0 !important;
+                        transition: all 0.2s ease !important;
+                    }
+
+                    .phoenix-use-image-btn i {
+                        margin-right: 0 !important;
+                        transition: margin 0.2s !important;
+                    }
+
+                    .phoenix-use-image-btn span {
+                        display: none !important;
+                        font-size: 11px !important;
+                        font-weight: 500 !important;
+                    }
+
+                    .phoenix-ribbon-thumb:hover .phoenix-use-image-btn {
+                        opacity: 1 !important;
+                    }
+
+                    .phoenix-use-image-btn:hover {
+                        background: rgba(0,0,0,0.8) !important;
+                        padding: 0 10px !important;
+                    }
+
+                    .phoenix-use-image-btn:hover i {
+                        margin-right: 4px !important;
+                    }
+
+                    .phoenix-use-image-btn:hover span {
+                        display: inline !important;
+                    }
                 </style>
                 <div class="phoenix-image-ribbon">
                     <div class="phoenix-ribbon-header">
@@ -2136,6 +2185,7 @@ function RemoteFunctions(config = {}) {
         },
 
         _fetchImages: function(searchQuery = 'sunshine') {
+            this._currentSearchQuery = searchQuery;
             const apiUrl = `https://images.phcode.dev/api/images/search?q=${encodeURIComponent(searchQuery)}&per_page=10`;
             this._showLoading();
 
@@ -2254,14 +2304,7 @@ function RemoteFunctions(config = {}) {
 
                 const photographer = window.document.createElement('span');
                 photographer.className = 'photographer';
-
-                // unsplash attribution is in the format 'Photo by <name> on Unsplash'
-                // we extract the name from there
-                let photographerName = 'Anonymous'; // if not present, show anonymous
-                if (image.attribution) {
-                    const match = image.attribution.match(/Photo by (.+) on Unsplash/);
-                    if (match) { photographerName = match[1]; }
-                }
+                const photographerName = this._getPhotographerName(image);
                 photographer.textContent = photographerName;
 
                 const source = window.document.createElement('span');
@@ -2271,8 +2314,24 @@ function RemoteFunctions(config = {}) {
                 attribution.appendChild(photographer);
                 attribution.appendChild(source);
 
+                // use image button
+                const useImageBtn = window.document.createElement('button');
+                useImageBtn.className = 'phoenix-use-image-btn';
+                useImageBtn.innerHTML = '⬇<span>Use this image</span>';
+
+                // when use image button is clicked, we first generate the file name by which we need to save the image
+                // and then we add the image to project
+                useImageBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    const filename = this._generateFilename(image);
+                    const extnName = ".jpg";
+                    this._useImage(image.url, filename, extnName);
+                });
+
                 thumbDiv.appendChild(img);
                 thumbDiv.appendChild(attribution);
+                thumbDiv.appendChild(useImageBtn);
                 rowElement.appendChild(thumbDiv);
             });
         },
@@ -2285,6 +2344,42 @@ function RemoteFunctions(config = {}) {
             rowElement.className = 'phoenix-ribbon-row phoenix-ribbon-error';
         },
 
+        _getPhotographerName: function(image) {
+            // unsplash API returns attribution in format 'Photo by <name> on Unsplash'
+            // this function is responsible to get the name
+            if (image.attribution) {
+                const match = image.attribution.match(/Photo by (.+) on Unsplash/);
+                if (match) {
+                    return match[1];
+                }
+            }
+            return 'Anonymous';
+        },
+
+        // file name with which we need to save the image
+        _generateFilename: function(image) {
+            const photographerName = this._getPhotographerName(image);
+            const searchTerm = this._currentSearchQuery || 'image';
+
+            // clean the search term and the photograper name to write in file name
+            const cleanSearchTerm = searchTerm.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+            const cleanPhotographerName = photographerName.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+
+            return `${cleanSearchTerm}-by-${cleanPhotographerName}`;
+        },
+
+        _useImage: function(imageUrl, filename, extnName) {
+            // to use the image we send the message to the editor instance
+            // this is handled inside liveDevProtocol.js file
+            window._Brackets_MessageBroker.send({
+                livePreviewEditEnabled: true,
+                useImage: true,
+                imageUrl: imageUrl,
+                filename: filename,
+                extnName: extnName
+            });
+        },
+
         create: function() {
             this.remove(); // remove existing ribbon if already present
 

src/LiveDevelopment/LivePreviewEdit.js

@@ -28,6 +28,8 @@ define(function (require, exports, module) {
     const HTMLInstrumentation = require("LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation");
     const LiveDevMultiBrowser = require("LiveDevelopment/LiveDevMultiBrowser");
     const CodeMirror = require("thirdparty/CodeMirror/lib/codemirror");
+    const ProjectManager = require("project/ProjectManager");
+    const FileSystem = require("filesystem/FileSystem");
 
     /**
      * This function syncs text content changes between the original source code
@@ -593,6 +595,80 @@ define(function (require, exports, module) {
         // write the AI implementation here...@abose
     }
 
+    /**
+     * this is a helper function to make sure that when saving a new image, there's no existing file with the same name
+     * @param {String} basePath - this is the base path where the image will be saved
+     * @param {String} filename - the name of the image file
+     * @param {String} extnName - the name of the image extension. (defaults to "jpg")
+     * @returns {String} - the new file name
+     */
+    function getUniqueFilename(basePath, filename, extnName) {
+        let counter = 0;
+        let uniqueFilename = filename + extnName;
+
+        function checkAndIncrement() {
+            const filePath = basePath + uniqueFilename;
+            const file = FileSystem.getFileForPath(filePath);
+
+            return new Promise((resolve) => {
+                file.exists((err, exists) => {
+                    if (exists) {
+                        counter++;
+                        uniqueFilename = `${filename}-${counter}${extnName}`;
+                        checkAndIncrement().then(resolve);
+                    } else {
+                        resolve(uniqueFilename);
+                    }
+                });
+            });
+        }
+
+        return checkAndIncrement();
+    }
+
+    /**
+     * This function is called when 'use this image' button is clicked in the image ribbon gallery
+     * this is responsible to download the image in the appropriate place
+     * and also change the src attribute of the element
+     * @param {Object} message - the message object which stores all the required data for this operation
+     */
+    function _handleUseThisImage(message) {
+        const { imageUrl, filename } = message;
+        const extnName = message.extnName || "jpg";
+
+        const projectRoot = ProjectManager.getProjectRoot();
+        if (!projectRoot) {
+            console.error('No project root found');
+            return;
+        }
+
+        getUniqueFilename(projectRoot.fullPath, filename, extnName).then((uniqueFilename) => {
+            fetch(imageUrl)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.arrayBuffer();
+                })
+                .then(arrayBuffer => {
+                    const uint8Array = new Uint8Array(arrayBuffer);
+
+                    const targetPath = projectRoot.fullPath + uniqueFilename;
+                    window.fs.writeFile(targetPath, window.Filer.Buffer.from(uint8Array),
+                        { encoding: window.fs.BYTE_ARRAY_ENCODING }, (err) => {
+                            if (err) {
+                                console.error('Failed to save image:', err);
+                            }
+                        });
+                })
+                .catch(error => {
+                    console.error('Failed to fetch image:', error);
+                });
+        }).catch(error => {
+            console.error('Something went wrong when trying to use this image', error);
+        });
+    }
+
     /**
      * This is the main function that is exported.
      * it will be called by LiveDevProtocol when it receives a message from RemoteFunctions.js
@@ -623,6 +699,12 @@ define(function (require, exports, module) {
             return;
         }
 
+        // use this image
+        if (message.useImage && message.imageUrl && message.filename) {
+            _handleUseThisImage(message);
+            return;
+        }
+
         if (!message.element || !message.tagId) {
             // check for undo
             if (message.undoLivePreviewOperation || message.redoLivePreviewOperation) {