chore: better generic event handling for escape key press in editor

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -99,7 +99,9 @@ function RemoteFunctions(config = {}) {
         // called when an item is selected from the more options dropdown
         "handleDropdownClick",
         "reRegisterEventHandlers",
-        "handleClick" // handle click on an icon in the more options box.
+        "handleClick", // handle click on an icon in the more options box.
+        // when escape key is presses in the editor, we may need to dismiss the live edit boxes.
+        "handleEscapePressFromEditor"
     ];
 
     const _moreOptionsHandlers = new Map();
@@ -4312,6 +4314,16 @@ function RemoteFunctions(config = {}) {
         });
     }
 
+    function _escapeKeyPressInEditor() {
+        enableHoverListeners(); // so that if hover lock is there it will get cleared
+        dismissUIAndCleanupState();
+        getAllNodeMoreOptionsHandlers().forEach(handler => {
+            if (handler.handleEscapePressFromEditor) {
+                handler.handleEscapePressFromEditor();
+            }
+        });
+    }
+
     function _requestConfigRefresh() {
         // send image gallery state change message to editor to save preference in state manager
         window._Brackets_MessageBroker.send({
@@ -4342,6 +4354,9 @@ function RemoteFunctions(config = {}) {
     });
 
     let customReturns = {};
+    // only apis that needs to be called from phoenix js layer should be customReturns. APis that are shared within
+    // the remote function context only should not be in customReturns and should be in
+    // either SHARED_STATE for state vars, GLOBALS for global vars, or LivePreviewView for shared functions.
     customReturns = { // we have to do this else the minifier will strip the customReturns variable
         ...customReturns,
         "DOMEditHandler"        : DOMEditHandler,
@@ -4356,7 +4371,8 @@ function RemoteFunctions(config = {}) {
         "finishEditing"         : finishEditing,
         "dismissUIAndCleanupState" : dismissUIAndCleanupState,
         "handleDownloadEvent" : handleDownloadEvent,
-        "showToastMessage" : showToastMessage
+        "showToastMessage" : showToastMessage,
+        "escapeKeyPressInEditor": _escapeKeyPressInEditor
     };
 
     // the below code comment is replaced by added scripts for extensibility

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -87,6 +87,7 @@ define(function (require, exports, module) {
         LivePreviewTransport  = require("LiveDevelopment/MultiBrowserImpl/transports/LivePreviewTransport"),
         LiveDevProtocol      = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol"),
         Metrics              = require("utils/Metrics"),
+        WorkspaceManager    = require("view/WorkspaceManager"),
         PageLoaderWorkerScript = require("text!LiveDevelopment/BrowserScripts/pageLoaderWorker.js");
 
     // Documents
@@ -726,6 +727,23 @@ define(function (require, exports, module) {
         }
     }
 
+
+    /**
+     * this function handles escape key for live preview to hide boxes if they are visible
+     * @param {Event} event
+     */
+    function _handleLivePreviewEscapeKey(event) {
+        const currLiveDoc = getCurrentLiveDoc();
+        if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) {
+            currLiveDoc.protocol.evaluate("_LD.escapeKeyPressInEditor()");
+        }
+        // returning false to let the editor also handle the escape key
+        return false;
+    }
+    // allow live preview to handle escape key event
+    // Escape is mainly to hide boxes if they are visible
+    WorkspaceManager.addEscapeKeyEventHandler("livePreview", _handleLivePreviewEscapeKey);
+
     /**
      * gets configuration used to set in the remote browser
      */

src/extensionsIntegrated/phoenix-pro/browser-context/dragAndDrop.js

@@ -1364,5 +1364,5 @@ LivePreviewView.registerNodeMoreOptionsHandler("DragAndDrop", {
     dismiss: ()=>{},
     reRegisterEventHandlers: _reRegisterEventHandlers,
     onElementSelected: _onElementSelected,
-    _proExtnDismissLivePreviewEditBoxes: cancelSVGDragIfActive
+    handleEscapePressFromEditor: cancelSVGDragIfActive
 });

src/extensionsIntegrated/phoenix-pro/browser-context/remote-utils.js

@@ -15,31 +15,11 @@ define(function (require, exports, module) {
         throw new Error("KernalModeTrust is not defined. Cannot boot without trust ring");
     }
 
-    const WorkspaceManager = require("view/WorkspaceManager"),
-        LiveDevMultiBrowser = require("LiveDevelopment/LiveDevMultiBrowser");
-
-    const remoteUtilsCode = require("text!./browser-context/remote-utils.js");
     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 LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
 
-    /**
-     * this function handles escape key for live preview to hide boxes if they are visible
-     * @param {Event} event
-     */
-    function _handleLivePreviewEscapeKey(event) {
-        const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
-        if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) {
-            currLiveDoc.protocol.evaluate("_LD.dismissLivePreviewEditBoxes()");
-        }
-        // returning false to let the editor also handle the escape key
-        return false;
-    }
-    // allow live preview to handle escape key event
-    // Escape is mainly to hide boxes if they are visible
-    WorkspaceManager.addEscapeKeyEventHandler("livePreview", _handleLivePreviewEscapeKey);
-
     function _addRemoteScripts() {
         // the ordering here is important
         // constants first
@@ -51,7 +31,6 @@ define(function (require, exports, module) {
             `cssStyles = ${JSON.stringify(remoteStyles.cssStyles)};`);
 
         // functions start here
-        LiveDevProtocol.addRemoteFunctionScript("remoteUtilsCode", remoteUtilsCode);
         LiveDevProtocol.addRemoteFunctionScript("HyperlinkEditorCode", HyperlinkEditorCode);
         LiveDevProtocol.addRemoteFunctionScript("RulerLinesCode", RulerLinesCode);
         LiveDevProtocol.addRemoteFunctionScript("DragAndDrop", DragAndDropCode);