feat: change the img src attribute when user clicks on use this image button

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -2369,14 +2369,17 @@ function RemoteFunctions(config = {}) {
         },
 
         _useImage: function(imageUrl, filename, extnName) {
-            // to use the image we send the message to the editor instance
-            // this is handled inside liveDevProtocol.js file
+            // send the message to the editor instance to save the image and update the source code
+            const tagId = this.element.getAttribute("data-brackets-id");
+
             window._Brackets_MessageBroker.send({
                 livePreviewEditEnabled: true,
                 useImage: true,
                 imageUrl: imageUrl,
                 filename: filename,
-                extnName: extnName
+                extnName: extnName,
+                element: this.element,
+                tagId: Number(tagId)
             });
         },
 

src/LiveDevelopment/LivePreviewEdit.js

@@ -626,14 +626,48 @@ define(function (require, exports, module) {
         return checkAndIncrement();
     }
 
+    /**
+     * This function updates the src attribute of an image element in the source code
+     * @param {Number} tagId - the data-brackets-id of the image element
+     * @param {String} newSrcValue - the new src value to set
+     */
+    function _updateImageSrcAttribute(tagId, newSrcValue) {
+        const editor = _getEditorAndValidate(tagId);
+        if (!editor) {
+            return;
+        }
+
+        const range = _getElementRange(editor, tagId);
+        if (!range) {
+            return;
+        }
+
+        const { startPos, endPos } = range;
+        const elementText = editor.getTextBetween(startPos, endPos);
+
+        // parse it using DOM parser so that we can update the src attribute
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(elementText, "text/html");
+        const imgElement = doc.querySelector('img');
+
+        if (imgElement) {
+            imgElement.setAttribute('src', newSrcValue);
+            const updatedElementText = imgElement.outerHTML;
+
+            editor.document.batchOperation(function () {
+                editor.replaceRange(updatedElementText, startPos, endPos);
+            });
+        }
+    }
+
     /**
      * 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 { imageUrl, filename, tagId } = message;
         const extnName = message.extnName || "jpg";
 
         const projectRoot = ProjectManager.getProjectRoot();
@@ -658,6 +692,8 @@ define(function (require, exports, module) {
                         { encoding: window.fs.BYTE_ARRAY_ENCODING }, (err) => {
                             if (err) {
                                 console.error('Failed to save image:', err);
+                            } else {
+                                _updateImageSrcAttribute(tagId, uniqueFilename);
                             }
                         });
                 })