fix: use existing APIs to reference the source code of the element given its tagId

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -232,16 +232,16 @@ function RemoteFunctions(config) {
     /**
      * This function gets called when the delete button is clicked
      * it sends a message to the editor using postMessage to delete the element from the source code
-     * @param {Event} e
+     * @param {Event} event
      * @param {DOMElement} element - the HTML DOM element that was clicked. it is to get the data-brackets-id attribute
      */
-    function _handleDeleteOptionClick(e, element) {
+    function _handleDeleteOptionClick(event, element) {
         const tagId = element.getAttribute("data-brackets-id");
         if (tagId) {
             window._Brackets_MessageBroker.send({
                 livePreviewEditEnabled: true,
                 element: element,
-                event: e,
+                event: event,
                 tagId: tagId,
                 delete: true
             });

src/LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation.js

@@ -851,10 +851,12 @@ define(function (require, exports, module) {
             return (mark.tagID === tagId);
         });
         if (markFound) {
-            return markFound.find().from;
+            return {
+                from: markFound.find().from,
+                to: markFound.find().to
+            };
         }
         return null;
-
     }
 
     // private methods

src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js

@@ -166,7 +166,7 @@ define(function (require, exports, module) {
         }
         const allOpenFileCount = MainViewManager.getWorkingSetSize(MainViewManager.ALL_PANES);
         function selectInHTMLEditor(fullHtmlEditor) {
-            const position = HTMLInstrumentation.getPositionFromTagId(fullHtmlEditor, parseInt(tagId, 10));
+            const position = HTMLInstrumentation.getPositionFromTagId(fullHtmlEditor, parseInt(tagId, 10)).from;
             if(position && fullHtmlEditor) {
                 const masterEditor = fullHtmlEditor.document._masterEditor || fullHtmlEditor;
                 masterEditor.setCursorPos(position.line, position.ch, true);
@@ -209,8 +209,10 @@ define(function (require, exports, module) {
             event = msg.method || "event",
             deferred;
         if (msg.livePreviewEditEnabled) {
-            LivePreviewEdit.deleteElementInSourceByTagId(msg);
-        } else if (msg.id) {
+            LivePreviewEdit.handleLivePreviewEditOperation(msg);
+        }
+
+        if (msg.id) {
             deferred = _responseDeferreds[msg.id];
             if (deferred) {
                 delete _responseDeferreds[msg.id];

src/LiveDevelopment/livePreviewEdit.js

@@ -1,27 +1,55 @@
 define(function (require, exports, module) {
     const EditorManager = require("editor/EditorManager");
+    const HTMLInstrumentation = require("LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation");
 
-    function deleteElementInSourceByTagId(tagId) {
+
+    /**
+     * This function is responsible to delete an element from the source code
+     * @param {Number} tagId - the data-brackets-id of the DOM element
+     */
+    function _deleteElementInSourceByTagId(tagId) {
         const editor = EditorManager.getActiveEditor();
         if (!editor || !tagId) {
             return;
         }
 
-        // this will give us the text marker object
-        const mark = editor.getAllMarks().find((m) => m.tagID === Number(tagId));
-        if (!mark) {
+        // this will give us the start pos and end pos of the DOM element in the source code
+        // can be referenced using range.from and range.to
+        const range = HTMLInstrumentation.getPositionFromTagId(editor, tagId);
+        if(!range) {
             return;
         }
 
-        // this give us the start position to the end position of the code.
-        // we just need to delete it
-        const range = mark.find();
-        if (!range) {
+        editor.replaceRange("", range.from, range.to);
+    }
+
+    /**
+     * This is the main function that is exported.
+     * it will be called by LiveDevProtocol when it receives a message from RemoteFunctions.js using MessageBroker
+     * Refer to: `handleOptionClick` function in the RemoteFunctions.js and `_receive` function in LiveDevProtocol.js
+     *
+     * @param {Object} message - this is the object that is passed by RemoteFunctions.js using MessageBroker
+     * this object will be in the format
+     * {
+                livePreviewEditEnabled: true,
+                element: element,
+                event: event,
+                tagId: tagId,
+                delete: true
+        }
+    * here element is the actual DOM element that is clicked, and tagId is the data-brackets-id
+    * and 'delete: true is just an example, it might be 'duplicate' or 'select-parent' also
+     */
+    function handleLivePreviewEditOperation(message) {
+        if (!message.element || !message.tagId) {
             return;
         }
 
-        editor.replaceRange("", range.from, range.to);
+        // just call the required functions
+        if (message.delete) {
+            _deleteElementInSourceByTagId(Number(message.tagId));
+        }
     }
 
-    exports.deleteElementInSourceByTagId = deleteElementInSourceByTagId;
+    exports.handleLivePreviewEditOperation = handleLivePreviewEditOperation;
 });