refactor: cut element into lp plugin

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -360,28 +360,6 @@ function RemoteFunctions(config = {}) {
         });
     }
 
-    /**
-     * 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`
-     * @param {Event} event
-     * @param {DOMElement} element - the element we need to cut
-     */
-    function _handleCutOptionClick(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),
-                cut: true
-            });
-        } else {
-            console.error("The TagID might be unavailable or the element tag is directly body or html");
-        }
-    }
-
     /**
      * this is for copy button, similar to cut just we don't remove the elements source code
      * @param {Event} event
@@ -434,8 +412,6 @@ function RemoteFunctions(config = {}) {
     function handleOptionClick(e, action, element) {
         if (action === "edit-text") {
             startEditing(element);
-        } else if (action === "cut") {
-            _handleCutOptionClick(e, element);
         } else if (action === "copy") {
             _handleCopyOptionClick(e, element);
         } else if (action === "paste") {
@@ -447,7 +423,7 @@ function RemoteFunctions(config = {}) {
             return true;
         } else if(LivePreviewView.getNodeMoreOptionsHandler(action)) {
             const handler = LivePreviewView.getNodeMoreOptionsHandler(action);
-            return handler.handleClick(e, element);
+            return handler && handler.handleClick && handler.handleClick(e, element);
         }
     }
 
@@ -1055,10 +1031,6 @@ function RemoteFunctions(config = {}) {
 
             let content = `
                 <div class="more-options-dropdown">
-                    <div class="dropdown-item" data-action="cut">
-                        <span class="item-icon">${icons.cut}</span>
-                        <span class="item-label">${strings.cut}</span>
-                    </div>
                     <div class="dropdown-item" data-action="copy">
                         <span class="item-icon">${icons.copy}</span>
                         <span class="item-label">${strings.copy}</span>
@@ -1067,7 +1039,6 @@ function RemoteFunctions(config = {}) {
                         <span class="item-icon">${icons.paste}</span>
                         <span class="item-label">${strings.paste}</span>
                     </div>
-                    <div class="dropdown-separator"></div>
                     ${handlerItems}
                 </div>
             `;
@@ -1102,14 +1073,9 @@ function RemoteFunctions(config = {}) {
 
                     // Check if any handler wants to handle this dropdown action
                     let handlerHandledIt = false;
-                    for (const handler of getAllNodeMoreOptionsHandlers()) {
-                        if (handler.handleDropdownClick) {
-                            const handled = handler.handleDropdownClick(action, this);
-                            if (handled) {
-                                handlerHandledIt = true;
-                                break; // Handler handled it, keep dropdown open
-                            }
-                        }
+                    const handler = LivePreviewView.getNodeMoreOptionsHandler(action);
+                    if (handler && handler.handleDropdownClick) {
+                        handlerHandledIt = handler.handleDropdownClick(event, this.targetElement, this);
                     }
 
                     if (!handlerHandledIt) {

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

@@ -150,3 +150,54 @@ LivePreviewView.registerNodeMoreOptionsHandler("selectParent", {
     renderToolBoxItem: _renderSelectParentIcon,
     handleClick: _handleSelectParentOptionClick
 });
+
+// cut, copy , paste option
+
+function _renderCutDropdown() {
+    return {
+        listOrder: proConstants.DROPDOWN_ORDERING.CUT_PASTE_SEPARATOR,
+        htmlContent: `<div class="dropdown-item" data-action="cut">
+                        <span class="item-icon">${icons.cut}</span>
+                        <span class="item-label">${strings.cut}</span>
+                    </div>`
+    };
+}
+
+/**
+ * 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`
+ * @param {Event} event
+ * @param {DOMElement} element - the element we need to cut
+ * @param {DOMElement} _dropdown
+ */
+function _handleCutOptionClick(event, element, _dropdown) {
+    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),
+            cut: true
+        });
+    } else {
+        console.error("The TagID might be unavailable or the element tag is directly body or html");
+    }
+    return true;
+}
+
+LivePreviewView.registerNodeMoreOptionsHandler("cut", {
+    renderDropdownItems: _renderCutDropdown,
+    handleDropdownClick: _handleCutOptionClick
+});
+
+
+LivePreviewView.registerNodeMoreOptionsHandler("cutPasteSeparator", {
+    renderDropdownItems: ()=>{
+        return {
+            listOrder: proConstants.DROPDOWN_ORDERING.CUT_PASTE_SEPARATOR,
+            htmlContent: `<div class="dropdown-separator"></div>`
+        };
+    }
+});

src/extensionsIntegrated/phoenix-pro/browser-context/ruler-lines.js

@@ -253,7 +253,7 @@ function handleRulerLinesConfigChange(oldConfig, newConfig) {
 function renderRulerLinesDropdownItems() {
     return {
         listOrder: proConstants.DROPDOWN_ORDERING.SHOW_MEASUREMENTS,
-        htmlContent: `<div class="dropdown-item" data-action="toggle-ruler-lines">
+        htmlContent: `<div class="dropdown-item" data-action="RulerLines">
             <span class="item-icon">${icons.ruler}</span>
             <span class="item-label show-ruler-label">${strings.showRulerLines}</span>
             <span class="item-checkmark" style="visibility: ${_rulerLinesConfig.enabled ? 'visible' : 'hidden'}">${icons.check}</span>
@@ -262,11 +262,7 @@ function renderRulerLinesDropdownItems() {
 }
 
 // Dropdown handler: handle clicks on ruler lines dropdown item
-function handleRulerLinesDropdownClick(action, dropdown) {
-    if (action !== 'toggle-ruler-lines') {
-        return false; // Not our action
-    }
-
+function handleRulerLinesDropdownClick(_event, _targetElement, dropdown) {
     _rulerLinesConfig.enabled = !_rulerLinesConfig.enabled;
 
     window._Brackets_MessageBroker.send({
@@ -276,7 +272,7 @@ function handleRulerLinesDropdownClick(action, dropdown) {
     });
 
     // Update checkmark
-    const checkmark = dropdown._shadow.querySelector('[data-action="toggle-ruler-lines"] .item-checkmark');
+    const checkmark = dropdown._shadow.querySelector('[data-action="RulerLines"] .item-checkmark');
     if (checkmark) {
         checkmark.style.visibility = _rulerLinesConfig.enabled ? 'visible' : 'hidden';
     }
@@ -290,7 +286,7 @@ function handleRulerLinesDropdownClick(action, dropdown) {
         dismissRulerLines();
     }
 
-    return true; // We handled it, keep dropdown open
+    return true; // We handled it
 }
 
 // Register scroll listener

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

@@ -57,6 +57,10 @@ define(function (require, exports, module) {
 
     // this determines the ordering in which the toolbox items appear in the live preview.
     const DROPDOWN_ORDERING = {
+        CUT: 10,
+        COPY: 20,
+        PASTE: 30,
+        CUT_PASTE_SEPARATOR: 40,
         SHOW_MEASUREMENTS: 100
     };