refactor: delete elemnt as lp plugin

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -106,7 +106,7 @@ function RemoteFunctions(config = {}) {
 
     const _moreOptionsHandlers = new Map();
     function registerNodeMoreOptionsHandler(handlerName, handler) {
-        if(_moreOptionsHandlers[handlerName]) {
+        if(_moreOptionsHandlers.get(handlerName)) {
             console.error(`lp: More options handler '${handlerName}' already registered. Ignoring new registration`);
             return;
         }
@@ -358,28 +358,6 @@ 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} event
-     * @param {DOMElement} element - the HTML DOM element that was clicked.
-     */
-    function _handleDeleteOptionClick(event, element) {
-        if (LivePreviewView.isElementEditable(element)) {
-            const tagId = element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
-
-            window._Brackets_MessageBroker.send({
-                livePreviewEditEnabled: true,
-                element: element,
-                event: event,
-                tagId: Number(tagId),
-                delete: true
-            });
-        } else {
-            console.error("The TagID might be unavailable or the element tag is directly body or html");
-        }
-    }
-
     /**
      * this is for cut button, when user clicks on cut button we copy the element's source code
      * into the clipboard and remove it from the src code. read `_cutElementToClipboard` in `LivePreviewEdit.js`
@@ -482,8 +460,6 @@ function RemoteFunctions(config = {}) {
             _handleSelectParentOptionClick(e, element);
         } else if (action === "edit-text") {
             startEditing(element);
-        } else if (action === "delete") {
-            _handleDeleteOptionClick(e, element);
         } else if (action === "cut") {
             _handleCutOptionClick(e, element);
         } else if (action === "copy") {
@@ -939,11 +915,8 @@ function RemoteFunctions(config = {}) {
                 </span>`;
             }
 
-            // Always include delete options
+            // Always include more option ellipses at the end
             content += `
-                <span data-action="delete" title="${strings.delete}">
-                    ${icons.trash}
-                </span>
                 <span data-action="more-options" title="${strings.moreOptions}">
                     ${icons.verticalEllipsis}
                 </span>

src/extensionsIntegrated/phoenix-pro/browser-context/generic-tools.js

@@ -5,7 +5,7 @@
 
 /*global GLOBALS, LivePreviewView, cssStyles, strings, icons, proConstants*/
 
-
+// duplicate option
 /**
  * this is for duplicate button. Read '_handleDeleteOptionClick' jsdoc to understand more on how this works
  * returns tru as we need to keep the exiting node highlighted.
@@ -33,17 +33,52 @@ function _renderDuplicateIcon(element, shadow) {
     if (element) {
         return {
             listOrder: proConstants.TOOLBOX_ORDERING.DUPLICATE,
-            htmlContent: `<span data-action="duplicate" title="${strings.duplicate}">
-                    ${icons.duplicate}
-                </span>`
+            htmlContent: `<span data-action="duplicate" title="${strings.duplicate}">${icons.duplicate}</span>`
         };
     }
     return '';
 }
 
-
 // Register with LivePreviewView
 LivePreviewView.registerNodeMoreOptionsHandler("duplicate", {
     renderToolBoxItem: _renderDuplicateIcon,
     handleClick: _handleDuplicateOptionClick
 });
+
+// delete option
+/**
+ * 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} event
+ * @param {DOMElement} element - the HTML DOM element that was clicked.
+ */
+function _handleDeleteOptionClick(event, element) {
+    if (LivePreviewView.isElementEditable(element)) {
+        const tagId = element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
+
+        window._Brackets_MessageBroker.send({
+            livePreviewEditEnabled: true,
+            element: element,
+            event: event,
+            tagId: Number(tagId),
+            delete: true
+        });
+    } else {
+        console.error("The TagID might be unavailable or the element tag is directly body or html");
+    }
+}
+
+function _renderDeleteIcon(element, shadow) {
+    if (element) {
+        return {
+            listOrder: proConstants.TOOLBOX_ORDERING.DELETE,
+            htmlContent: `<span data-action="delete" title="${strings.delete}">${icons.trash}</span>`
+        };
+    }
+    return '';
+}
+
+LivePreviewView.registerNodeMoreOptionsHandler("delete", {
+    renderToolBoxItem: _renderDeleteIcon,
+    handleClick: _handleDeleteOptionClick
+});