fix: decouple drag and drop from remote fucntions with direct api calls

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -900,10 +900,10 @@ function RemoteFunctions(config = {}) {
             // Render handler options with ordering support
             const handlerOptions = LivePreviewView.getAllNodeMoreOptionsHandlers()
                 .map((handler, index) => {
-                    if (!handler.renderMoreOptions) {
+                    if (!handler.renderMoreOptionsDropdown) {
                         return null;
                     }
-                    const result = handler.renderMoreOptions(this.element);
+                    const result = handler.renderMoreOptionsDropdown(this.element);
                     if (!result) {
                         return null;
                     }
@@ -1001,8 +1001,6 @@ function RemoteFunctions(config = {}) {
                     }
                 });
             });
-
-            customReturns.registerDragDropForElement(this.element);
         },
 
         remove: function() {
@@ -4262,7 +4260,6 @@ function RemoteFunctions(config = {}) {
         window.document.removeEventListener("mouseover", onElementHover);
         window.document.removeEventListener("mouseout", onElementHoverOut);
         window.document.removeEventListener("keydown", onKeyDown);
-        customReturns.unregisterDragDropListeners();
         unregisterInteractionBlocker();
 
         if (config.mode === 'edit') {
@@ -4276,7 +4273,6 @@ function RemoteFunctions(config = {}) {
             window.document.addEventListener("mouseover", onElementHover);
             window.document.addEventListener("mouseout", onElementHoverOut);
             window.document.addEventListener("keydown", onKeyDown);
-            customReturns.registerDragDropListeners();
 
             // this is to block all the interactions of the user created elements
             // so that lets say user created link doesn't redirect in edit mode
@@ -4285,6 +4281,11 @@ function RemoteFunctions(config = {}) {
             // Clean up any existing UI when edit features are disabled
             dismissUIAndCleanupState();
         }
+        getAllNodeMoreOptionsHandlers().forEach(handler => {
+            if (handler.reRegisterEventHandlers) {
+                handler.reRegisterEventHandlers();
+            }
+        });
     }
 
     function _requestConfigRefresh() {
@@ -4338,5 +4339,11 @@ function RemoteFunctions(config = {}) {
     // DONT_STRIP_MINIFY:REPLACE_WITH_ADDED_REMOTE_SCRIPTS
 
     registerHandlers();
+    // Notify handlers about config initialization
+    getAllNodeMoreOptionsHandlers().forEach(handler => {
+        if (handler.handleConfigChange) {
+            handler.handleConfigChange({}, config);
+        }
+    });
     return customReturns;
 }

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: LicenseRef-Proprietary
  */
 
-/*global GLOBALS, LivePreviewView, customReturns, dismissUIAndCleanupState, SHARED_STATE*/
+/*global GLOBALS, LivePreviewView, dismissUIAndCleanupState, SHARED_STATE, config*/
 
 
 // =========================== VARIABLE DECLARATION ============================
@@ -1349,10 +1349,20 @@ function registerDragDropForElement(element) {
     }
 }
 
+function _reRegisterEventHandlers() {
+    unregisterDragDropListeners();
+    if (config.mode === 'edit') {
+        registerDragDropListeners();
+    }
+}
 
+function _onElementSelected(element) {
+    registerDragDropForElement(element);
+}
 
-// ============================ EXPORTS ============================
-customReturns.cancelSVGDragIfActive = cancelSVGDragIfActive;
-customReturns.unregisterDragDropListeners = unregisterDragDropListeners;
-customReturns.registerDragDropListeners = registerDragDropListeners;
-customReturns.registerDragDropForElement = registerDragDropForElement;
+LivePreviewView.registerNodeMoreOptionsHandler("DragAndDrop", {
+    dismiss: ()=>{},
+    reRegisterEventHandlers: _reRegisterEventHandlers,
+    onElementSelected: _onElementSelected,
+    _proExtnDismissLivePreviewEditBoxes: cancelSVGDragIfActive
+});

src/extensionsIntegrated/phoenix-pro/browser-context/hyperlink-editor.js

@@ -156,5 +156,5 @@ function renderHyperlinkOptions(element, shadow) {
 LivePreviewView.registerNodeMoreOptionsHandler("HyperlinkEditor", {
     dismiss: dismissHyperlinkEditor,
     handleClick: _handleEditHyperlinkOptionClick,
-    renderMoreOptions: renderHyperlinkOptions
+    renderMoreOptionsDropdown: renderHyperlinkOptions
 });

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

@@ -3,12 +3,20 @@
  * SPDX-License-Identifier: LicenseRef-Proprietary
  */
 
-/*global customReturns, enableHoverListeners, dismissUIAndCleanupState */
+/*global customReturns, enableHoverListeners, dismissUIAndCleanupState, getAllNodeMoreOptionsHandlers */
 
 function dismissLivePreviewEditBoxes() {
     enableHoverListeners(); // so that if hover lock is there it will get cleared
     dismissUIAndCleanupState();
-    customReturns.cancelSVGDragIfActive(); // read this function's jsdoc to understand why its here
+    getAllNodeMoreOptionsHandlers().forEach(handler => {
+        if (handler._proExtnDismissLivePreviewEditBoxes) {
+            handler._proExtnDismissLivePreviewEditBoxes();
+        }
+    });
 }
 
+
+// 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.dismissLivePreviewEditBoxes = dismissLivePreviewEditBoxes;

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

@@ -299,7 +299,7 @@ window.addEventListener("scroll", _rulerLinesScrollHandler, true);
 // Register with LivePreviewView
 LivePreviewView.registerNodeMoreOptionsHandler("RulerLines", {
     dismiss: dismissRulerLines,
-    renderMoreOptions: () => '', // No options box button
+    renderMoreOptionsDropdown: () => '', // No options box button
     redraw: redrawRulerLines,
     onElementSelected: onRulerLinesElementSelected,
     onElementCleanup: onRulerLinesElementCleanup,