feat: enable deletion of elements in source code from live preview

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js

@@ -128,6 +128,8 @@
         }
     };
 
+    global._Brackets_MessageBroker = MessageBroker;
+
     /**
      * Runtime Domain. Implements remote commands for "Runtime.*"
      */

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -229,25 +229,39 @@ function RemoteFunctions(config) {
         console.log("handle duplicate option button was clicked");
     }
 
-    // TODO: need to implement
-    function _handleDeleteOptionClick(e) {
-        console.log("handle delete option button was clicked");
+    /**
+     * 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 {DOMElement} element - the HTML DOM element that was clicked. it is to get the data-brackets-id attribute
+     */
+    function _handleDeleteOptionClick(e, element) {
+        const tagId = element.getAttribute("data-brackets-id");
+        if (tagId) {
+            window._Brackets_MessageBroker.send({
+                livePreviewEditEnabled: true,
+                element: element,
+                event: e,
+                tagId: tagId,
+                delete: true
+            });
+        }
     }
 
-
     /**
      * This function will get triggered when from the multiple advance DOM buttons, one is clicked
      * this function just checks which exact button was clicked and call the required function
      * @param {Event} e
      * @param {String} action - the data-action attribute to differentiate between buttons
+     * @param {DOMElement} element - the selected DOM element
      */
-    function handleOptionClick(e, action) {
+    function handleOptionClick(e, action, element) {
         if (action === "select-parent") {
-            _handleSelectParentOptionClick(e);
+            _handleSelectParentOptionClick(e, element);
         } else if (action === "duplicate") {
-            _handleDuplicateOptionClick(e);
+            _handleDuplicateOptionClick(e, element);
         } else if (action === "delete") {
-            _handleDeleteOptionClick(e);
+            _handleDeleteOptionClick(e, element);
         }
     }
     /**
@@ -288,7 +302,7 @@ function RemoteFunctions(config) {
 
             const boxWidth = 82;
 
-            this.body.style.setProperty("left", (elemBounds.left + (elemBounds.width - boxWidth)) + "px");
+            this.body.style.setProperty("left", (elemBounds.right - boxWidth) + "px");
             this.body.style.setProperty(
                 "top",
                 // if there's not enough space to show the box above the element,
@@ -343,7 +357,7 @@ function RemoteFunctions(config) {
                     event.stopPropagation();
                     event.preventDefault();
                     const action = event.currentTarget.getAttribute('data-action');
-                    handleOptionClick(event, action);
+                    handleOptionClick(event, action, this.element);
                 });
             });
         },

src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js

@@ -52,7 +52,8 @@ define(function (require, exports, module) {
         HTMLInstrumentation   = require("LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation"),
         StringUtils = require("utils/StringUtils"),
         FileViewController    = require("project/FileViewController"),
-        MainViewManager     = require("view/MainViewManager");
+        MainViewManager     = require("view/MainViewManager"),
+        LivePreviewEdit     = require("LiveDevelopment/livePreviewEdit");
 
     const LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME = `phoenix_live_preview_scripts_instrumented_${StringUtils.randomString(8)}.js`;
     const LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME = `pageLoaderWorker_${StringUtils.randomString(8)}.js`;
@@ -207,7 +208,9 @@ define(function (require, exports, module) {
         var msg = JSON.parse(msgStr),
             event = msg.method || "event",
             deferred;
-        if (msg.id) {
+        if (msg.livePreviewEditEnabled) {
+            LivePreviewEdit.deleteElementInSourceByTagId(msg);
+        } else if (msg.id) {
             deferred = _responseDeferreds[msg.id];
             if (deferred) {
                 delete _responseDeferreds[msg.id];

src/LiveDevelopment/livePreviewEdit.js

@@ -0,0 +1,27 @@
+define(function (require, exports, module) {
+    const EditorManager = require("editor/EditorManager");
+
+    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) {
+            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) {
+            return;
+        }
+
+        editor.replaceRange("", range.from, range.to);
+    }
+
+    exports.deleteElementInSourceByTagId = deleteElementInSourceByTagId;
+});