fix: element getting dragged when trying to select text while editing

Author: devvaannsh

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

@@ -1023,6 +1023,13 @@ function clearDropMarkers() {
 // ============================ DRAG-DROP EVENT HANDLERS FOR HTML ELEMENTS ============================
 
 function onDragStart(event, element) {
+    // if the element is currently being edited then we don't want drag to operate
+    if (SHARED_STATE._currentlyEditingElement === element) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+    }
+
     event.stopPropagation();
     event.dataTransfer.setData("text/plain", element.getAttribute(DATA_BRACKETS_ID_ATTR));
     SHARED_STATE._dragStartX = event.clientX;
@@ -1341,7 +1348,10 @@ function registerDragDropForElement(element) {
             element.removeEventListener("dragend", element._dragEndHandler);
         }
 
-        element.setAttribute("draggable", "true");
+        if (SHARED_STATE._currentlyEditingElement !== element) {
+            element.setAttribute("draggable", "true");
+        }
+
         element._dragStartHandler = (event) => { onDragStart(event, element); };
         element._dragEndHandler = (event) => { onDragEnd(event, element); };
         element.addEventListener("dragstart", element._dragStartHandler);

src/extensionsIntegrated/phoenix-pro/browser-context/text-edit.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2021 - present core.ai
  * SPDX-License-Identifier: LicenseRef-Proprietary
  */
-/*global GLOBALS, LivePreviewView, dismissUIAndCleanupState, customReturns, proConstants, strings, icons*/
+/*global GLOBALS, LivePreviewView, dismissUIAndCleanupState, customReturns, proConstants, strings, icons, SHARED_STATE*/
 
 // we store references to interaction blocker event handlers so we can remove them when switching modes
 let _interactionBlockerHandlers = null;
@@ -97,6 +97,14 @@ function registerInteractionBlocker() {
                 return;
             }
 
+            // allow clicks within the element that user is currently editing
+            // this is done to prevent the interaction blocker from interfering with text editing
+            if (SHARED_STATE._currentlyEditingElement &&
+                (SHARED_STATE._currentlyEditingElement === element ||
+                 SHARED_STATE._currentlyEditingElement.contains(element))) {
+                return;
+            }
+
             // BLOCK: Kill all user page interactions in edit mode
             event.preventDefault();
             event.stopImmediatePropagation();
@@ -232,8 +240,9 @@ function startEditing(element) {
         return;
     }
 
-    // Make the element editable
+    SHARED_STATE._currentlyEditingElement = element;
     element.setAttribute("contenteditable", "true");
+    element.setAttribute("draggable", "false");
     element.focus();
     // to compare with the new text content, if same we don't make any changes in the editor area
     const oldContent = element.textContent;
@@ -321,8 +330,9 @@ function finishEditingCleanup(element) {
         return;
     }
 
-    // Remove contenteditable attribute
+    SHARED_STATE._currentlyEditingElement = null;
     element.removeAttribute("contenteditable");
+    element.removeAttribute("draggable");
     dismissUIAndCleanupState();
 
     // Remove event listeners