refactor: duplicate elemnt as lp plugin

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -380,27 +380,6 @@ function RemoteFunctions(config = {}) {
         }
     }
 
-    /**
-     * this is for duplicate button. Read '_handleDeleteOptionClick' jsdoc to understand more on how this works
-     * @param {Event} event
-     * @param {DOMElement} element - the HTML DOM element that was clicked.
-     */
-    function _handleDuplicateOptionClick(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),
-                duplicate: 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`
@@ -503,9 +482,6 @@ function RemoteFunctions(config = {}) {
             _handleSelectParentOptionClick(e, element);
         } else if (action === "edit-text") {
             startEditing(element);
-        } else if (action === "duplicate") {
-            _handleDuplicateOptionClick(e, element);
-            return true;
         } else if (action === "delete") {
             _handleDeleteOptionClick(e, element);
         } else if (action === "cut") {
@@ -963,10 +939,8 @@ function RemoteFunctions(config = {}) {
                 </span>`;
             }
 
-            // Always include duplicate and delete options
-            content += `<span data-action="duplicate" title="${strings.duplicate}">
-                    ${icons.duplicate}
-                </span>
+            // Always include delete options
+            content += `
                 <span data-action="delete" title="${strings.delete}">
                     ${icons.trash}
                 </span>
@@ -1022,7 +996,7 @@ function RemoteFunctions(config = {}) {
                         }
                     } else {
                         const keepExitingToolBox = handleOptionClick(event, action, this.element);
-                        // as we don't want to remove the options box on duplicate button click
+                        // as we don't want to remove the options box on certain items, for eg: duplicate
                         if (!keepExitingToolBox) {
                             this.remove();
                         }

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

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2021 - present core.ai
+ * SPDX-License-Identifier: LicenseRef-Proprietary
+ */
+
+/*global GLOBALS, LivePreviewView, cssStyles, strings, icons, proConstants*/
+
+
+/**
+ * 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.
+ * @param {Event} event
+ * @param {DOMElement} element - the HTML DOM element that was clicked.
+ */
+function _handleDuplicateOptionClick(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),
+            duplicate: true
+        });
+    } else {
+        console.error("The TagID might be unavailable or the element tag is directly body or html");
+    }
+    return true;
+}
+
+function _renderDuplicateIcon(element, shadow) {
+    if (element) {
+        return {
+            listOrder: proConstants.TOOLBOX_ORDERING.DUPLICATE,
+            htmlContent: `<span data-action="duplicate" title="${strings.duplicate}">
+                    ${icons.duplicate}
+                </span>`
+        };
+    }
+    return '';
+}
+
+
+// Register with LivePreviewView
+LivePreviewView.registerNodeMoreOptionsHandler("duplicate", {
+    renderToolBoxItem: _renderDuplicateIcon,
+    handleClick: _handleDuplicateOptionClick
+});

src/extensionsIntegrated/phoenix-pro/main.js

@@ -18,6 +18,7 @@ define(function (require, exports, module) {
     const HyperlinkEditorCode = require("text!./browser-context/hyperlink-editor.js");
     const RulerLinesCode = require("text!./browser-context/ruler-lines.js");
     const DragAndDropCode = require("text!./browser-context/dragAndDrop.js");
+    const GenericToolsCode = require("text!./browser-context/generic-tools.js");
     const LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
 
     function _addRemoteScripts() {
@@ -36,6 +37,7 @@ define(function (require, exports, module) {
         LiveDevProtocol.addRemoteFunctionScript("HyperlinkEditorCode", HyperlinkEditorCode);
         LiveDevProtocol.addRemoteFunctionScript("RulerLinesCode", RulerLinesCode);
         LiveDevProtocol.addRemoteFunctionScript("DragAndDrop", DragAndDropCode);
+        LiveDevProtocol.addRemoteFunctionScript("GenericTools", GenericToolsCode);
     }
     _addRemoteScripts();
 });

src/extensionsIntegrated/phoenix-pro/remote-constants.js

@@ -52,7 +52,6 @@ define(function (require, exports, module) {
         DUPLICATE: 40,
         DELETE: 50,
         IMAGE_GALLERY: 60,
-        MORE_OPTIONS: 70,
         AI: 600 // TBD
     };