fix(editor): make table drag payload reliable

apps/desktop/src/components/editor/QueryEditor.vue

@@ -26,6 +26,8 @@ import { extractIdentifierAt, isSqlKeyword, matchTable } from "@/lib/sqlNavigati
 import { lineColumnToOffset, parseSqlErrorLocation } from "@/lib/sqlDiagnostics";
 import {
   DBX_TABLE_REFERENCE_MIME,
+  activeTableReferencePayloadValue,
+  clearActiveTableReferencePayload,
   hasTableReferencePayloadType,
   parseTableReferencePayload,
   tableReferenceInsertText,
@@ -723,11 +725,14 @@ async function formatCurrentSql() {
 }
 
 function droppedTableReference(event: DragEvent) {
-  return parseTableReferencePayload(event.dataTransfer?.getData(DBX_TABLE_REFERENCE_MIME));
+  return (
+    activeTableReferencePayloadValue() ??
+    parseTableReferencePayload(event.dataTransfer?.getData(DBX_TABLE_REFERENCE_MIME))
+  );
 }
 
 function hasDroppedTableReference(event: DragEvent) {
-  return hasTableReferencePayloadType(event.dataTransfer?.types);
+  return !!activeTableReferencePayloadValue() || hasTableReferencePayloadType(event.dataTransfer?.types);
 }
 
 function insertDroppedTableReference(currentView: EditorViewType, event: DragEvent): boolean {
@@ -749,6 +754,7 @@ function insertDroppedTableReference(currentView: EditorViewType, event: DragEve
     scrollIntoView: true,
     userEvent: "input.drop",
   });
+  clearActiveTableReferencePayload(payload);
   currentView.focus();
   return true;
 }

apps/desktop/src/components/sidebar/TreeItem.vue

@@ -60,8 +60,10 @@ import { canTreeNodeShowExpander, treeItemPaddingLeft } from "@/lib/sidebarTreeI
 import { buildTableSelectSql } from "@/lib/tableSelectSql";
 import {
   DBX_TABLE_REFERENCE_MIME,
+  clearActiveTableReferencePayload,
   createTableReferencePayload,
   serializeTableReferencePayload,
+  setActiveTableReferencePayload,
   tableReferenceInsertText,
 } from "@/lib/queryEditorTableDrop";
 import { editablePrimaryKeys, usesSyntheticRowIdKey } from "@/lib/tableEditing";
@@ -1803,9 +1805,11 @@ const canDragTableReference = computed(
     !props.dragDisabled &&
     (props.node.type === "table" || props.node.type === "view") &&
     !!props.node.connectionId &&
-    !!props.node.database,
+    props.node.database != null,
 );
 
+let draggingTableReferencePayload: ReturnType<typeof createTableReferencePayload> = null;
+
 function onTableReferenceDragStart(event: DragEvent) {
   if (!canDragTableReference.value) return;
   const payload = createTableReferencePayload({
@@ -1815,11 +1819,20 @@ function onTableReferenceDragStart(event: DragEvent) {
     tableName: props.node.label,
     databaseType: currentDatabaseType(),
   });
-  if (!payload || !event.dataTransfer) return;
+  if (!payload) return;
+  draggingTableReferencePayload = payload;
+  setActiveTableReferencePayload(payload);
   const insertText = tableReferenceInsertText(payload, currentDatabaseType());
-  event.dataTransfer.effectAllowed = "copy";
-  event.dataTransfer.setData(DBX_TABLE_REFERENCE_MIME, serializeTableReferencePayload(payload));
-  event.dataTransfer.setData("text/plain", insertText);
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "copy";
+    event.dataTransfer.setData(DBX_TABLE_REFERENCE_MIME, serializeTableReferencePayload(payload));
+    event.dataTransfer.setData("text/plain", insertText);
+  }
+}
+
+function onTableReferenceDragEnd() {
+  clearActiveTableReferencePayload(draggingTableReferencePayload);
+  draggingTableReferencePayload = null;
 }
 
 // ---- CustomContextMenu ----
@@ -2147,6 +2160,7 @@ function treeItemMenuItems(): ContextMenuItem[] {
         @mousemove="isDropTarget ? updateTarget($event, node.id, node.type) : undefined"
         @mouseleave="clearTarget(node.id)"
         @dragstart="onTableReferenceDragStart"
+        @dragend="onTableReferenceDragEnd"
       >
         <div
           v-if="showDropBefore"