feat: delete and backspace key support to delete live preview elements

Author: abose

src/LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js

@@ -497,6 +497,13 @@
             }
         }
 
+        if (e.key.toLowerCase() === 'delete' || e.key.toLowerCase() === 'backspace') {
+            if (!isEditingText && isInEditMode && window._LD.handleDeleteElement) {
+                e.preventDefault();
+                window._LD.handleDeleteElement();
+            }
+        }
+
         // for save
         if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
             e.preventDefault();

src/editor/EditorHelper/ChangeHelper.js

@@ -28,6 +28,7 @@ define(function (require, exports, module) {
     let _cutInterceptor = null;
     let _copyInterceptor = null;
     let _pasteInterceptor = null;
+    let _keyEventInterceptor = null;
 
     const CodeMirror = require("thirdparty/CodeMirror/lib/codemirror"),
         Menus = require("command/Menus");
@@ -174,6 +175,10 @@ define(function (require, exports, module) {
 
         // Redispatch these CodeMirror key events as Editor events
         function _onKeyEvent(instance, event) {
+            if(_keyEventInterceptor && _keyEventInterceptor(self, self._codeMirror, event)){
+                // the interceptor processed it, so don't pass it along to CodeMirror'
+                return;
+            }
             self.trigger("keyEvent", self, event);  // deprecated
             self.trigger(event.type, self, event);
             return event.defaultPrevented;   // false tells CodeMirror we didn't eat the event
@@ -310,7 +315,7 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Sets the cut interceptor function
+     * Sets the cut interceptor function in codemirror
      * @param {Function} interceptor - Function(editor, cm, event) that returns true to
      preventDefault
      */
@@ -319,7 +324,7 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Sets the copy interceptor function
+     * Sets the copy interceptor function in codemirror
      * @param {Function} interceptor - Function(editor, cm, event) that returns true to
      preventDefault
      */
@@ -328,16 +333,26 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Sets the paste interceptor function
+     * Sets the paste interceptor function in codemirror
      * @param {Function} interceptor - Function(editor, cm, event) that returns true to
      preventDefault
      */
     function setPasteInterceptor(interceptor) {
         _pasteInterceptor = interceptor;
     }
 
+    /**
+     * Sets the key down/up/press interceptor function in codemirror
+     * @param {Function} interceptor - Function(editor, cm, event) that returns true to
+     preventDefault
+     */
+    function setKeyEventInterceptor(interceptor) {
+        _keyEventInterceptor = interceptor;
+    }
+
     exports.addHelpers =addHelpers;
     exports.setCutInterceptor = setCutInterceptor;
     exports.setCopyInterceptor = setCopyInterceptor;
     exports.setPasteInterceptor = setPasteInterceptor;
+    exports.setKeyEventInterceptor = setKeyEventInterceptor;
 });

src/extensionsIntegrated/phoenix-pro/LivePreviewEdit.js

@@ -716,6 +716,7 @@ define(function (require, exports, module) {
                 editor.replaceRange("", {line: startPos.line - 1, ch: chPrevLine}, startPos);
             }
         });
+        _isInLivePreviewSelectionContext = true;
     }
 
     /**
@@ -1964,6 +1965,21 @@ define(function (require, exports, module) {
         }
     });
 
+    ChangeHelper.setKeyEventInterceptor(function(editor, cm, event) {
+        if(event.type !== "keydown" || (event.key.toLowerCase() !== "delete"
+            && event.key.toLowerCase() !== "backspace")) {
+            return;
+        }
+        if (_isInLivePreviewSelectionContext && LiveDevelopment.getCurrentMode() === CONSTANTS.LIVE_EDIT_MODE) {
+            const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
+            if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) {
+                event.preventDefault();
+                currLiveDoc.protocol.evaluate(`_LD.handleDeleteElement()`);
+                return true;
+            }
+        }
+    });
+
     function _cursorActivity() {
         if(_isInLivePreviewSelectionContext) {
             window.logger.livePreview.log("unlocked cut/copy/paste from live preview");

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

@@ -48,27 +48,29 @@ LivePreviewView.registerNodeMoreOptionsHandler("duplicate", {
 });
 
 // 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) {
+function _handleDelete(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 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) {
+    _handleDelete(element);
+}
 
 function _renderDeleteIcon(element, shadow) {
     if (element) {
@@ -310,3 +312,8 @@ customReturns.handlePasteElement = ()=> {
         _handlePaste(selectedElement);
     }
 };
+customReturns.handleDeleteElement = ()=> {
+    if(selectedElement){
+        _handleDelete(selectedElement);
+    }
+};