Fix some errors thrown on the JS console when dragging text in the Query Tool. Fixes #4552

docs/en_US/release_notes_4_12.rst

@@ -33,3 +33,4 @@ Bug fixes
 | `Issue #4520 <https://redmine.postgresql.org/issues/4520>`_ -  Ensure the query tool will work with older versions of psycopg2 than we officially support, albeit without updatable resultsets.
 | `Issue #4525 <https://redmine.postgresql.org/issues/4525>`_ -  Ensure command tags are shown in the messages tab of the Query Tool.
 | `Issue #4536 <https://redmine.postgresql.org/issues/4536>`_ -  Fix load on demand in View/Edit data mode.
+| `Issue #4552 <https://redmine.postgresql.org/issues/4552>`_ -  Fix some errors thrown on the JS console when dragging text in the Query Tool.

web/pgadmin/static/js/tree/tree.js

@@ -134,11 +134,15 @@ export class Tree {
     let dropDetailsFunc = this.getDraggable(data._type);
 
     if(dropDetailsFunc != null) {
+
+      /* addEventListener is used here because import jquery.drag.event
+       * overrides the dragstart event set using element.on('dragstart')
+       * This will avoid conflict.
+       */
       item.find('.aciTreeItem')
-        .attr('draggable', true)
+        .attr('draggable', true)[0]
-        .on('dragstart', (e)=> {
+        .addEventListener('dragstart', (e)=> {
           let dropDetails = dropDetailsFunc(data, item);
-          let origEvent = e.originalEvent;
 
           if(typeof dropDetails == 'string') {
             dropDetails = {
@@ -160,16 +164,16 @@ export class Tree {
             }
           }
 
-          origEvent.dataTransfer.setData('text', JSON.stringify(dropDetails));
+          e.dataTransfer.setData('text', JSON.stringify(dropDetails));
           /* Required by Firefox */
-          if(origEvent.dataTransfer.dropEffect) {
+          if(e.dataTransfer.dropEffect) {
-            origEvent.dataTransfer.dropEffect = 'move';
+            e.dataTransfer.dropEffect = 'move';
           }
 
           /* setDragImage is not supported in IE. We leave it to
            * its default look and feel
            */
-          if(origEvent.dataTransfer.setDragImage) {
+          if(e.dataTransfer.setDragImage) {
             let dragItem = $(`
               <div class="drag-tree-node">
                 <span>${_.escape(dropDetails.text)}</span>
@@ -179,7 +183,7 @@ export class Tree {
             $('body .drag-tree-node').remove();
             $('body').append(dragItem);
 
-            origEvent.dataTransfer.setDragImage(dragItem[0], 0, 0);
+            e.dataTransfer.setDragImage(dragItem[0], 0, 0);
           }
         });
     }

web/pgadmin/tools/sqleditor/static/js/sqleditor.js

@@ -367,19 +367,27 @@ define('tools.querytool', [
       if(self.handler.is_query_tool) {
         self.query_tool_obj.setOption('dragDrop', true);
         self.query_tool_obj.on('drop', (editor, e) => {
+          var dropDetails = null;
+          try {
+            JSON.parse(e.dataTransfer.getData('text'));
+
             /* Stop firefox from redirecting */
+
             if(e.preventDefault) {
               e.preventDefault();
             }
             if (e.stopPropagation) {
               e.stopPropagation();
             }
+          } catch(error) {
+            /* if parsing fails, it must be the drag internal of codemirror text */
+            return;
+          }
+
           var cursor = editor.coordsChar({
             left: e.x,
             top: e.y,
           });
-          var dropDetails = JSON.parse(e.dataTransfer.getData('text'));
-          e.codemirrorIgnore = true;
           editor.replaceRange(dropDetails.text, cursor);
           editor.focus();
           editor.setSelection({