feat: add query editor view data context action

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, onActivated, onDeactivated, watch, shallowRef, computed, nextTick } from "vue";
-import { Play, Copy, TextSelect } from "@lucide/vue";
+import { Play, Copy, Table2, TextSelect } from "@lucide/vue";
 import { useI18n } from "vue-i18n";
 import type { CompletionContext } from "@codemirror/autocomplete";
 import type { EditorView as EditorViewType } from "@codemirror/view";
@@ -35,6 +35,7 @@ import { normalizeShortcutSettings, shortcutToCodeMirrorKey } from "@/lib/shortc
 import { trimmedSelectionLayer } from "@/lib/codemirrorTrimmedSelectionLayer";
 import { selectionMatchOccurrences } from "@/lib/codemirrorSelectionMatches";
 import { isSchemaAware, isSingleDatabase } from "@/lib/databaseFeatureSupport";
+import { qualifiedTableNameAtSqlPosition } from "@/lib/queryCursorTableTarget";
 import * as api from "@/lib/api";
 import { areSqlSemanticDiagnosticsEqual, buildSqlParserErrorDiagnostic, buildSqlSemanticDiagnostics, shouldRunSqlSemanticDiagnostics, type SqlSemanticDiagnostic } from "@/lib/sqlSemanticDiagnostics";
 import { buildRedisSyntaxDiagnostics, shouldRunRedisDiagnostics } from "@/lib/redisSyntaxDiagnostics";
@@ -66,6 +67,7 @@ const emit = defineEmits<{
   execute: [sql: string];
   save: [];
   clickTable: [tableName: string];
+  viewTableData: [tableName: string];
   clickColumn: [columns: Array<{ name: string; table: string; schema?: string }>, error?: string | undefined];
   closeColumnPanel: [];
   viewportChange: [viewport: { scrollTop: number; scrollLeft: number }];
@@ -141,6 +143,7 @@ const isGestureZooming = ref(false);
 const searchPanelRef = ref<InstanceType<typeof EditorSearchPanel>>();
 const selectedSql = ref("");
 const executableSql = ref("");
+const contextTableName = ref<string | null>(null);
 
 const hasSelectedSql = computed(() => selectedSql.value.trim().length > 0);
 const canCopySelectedSql = computed(() => selectedSql.value.length > 0);
@@ -294,6 +297,12 @@ function syncContextMenuState(currentView: EditorViewType) {
   executableSql.value = executableSqlFromView(currentView);
 }
 
+function syncContextMenuStateAtEvent(currentView: EditorViewType, event: MouseEvent) {
+  syncContextMenuState(currentView);
+  const pos = currentView.posAtCoords({ x: event.clientX, y: event.clientY });
+  contextTableName.value = pos == null ? null : qualifiedTableNameAtSqlPosition(currentView.state.doc.toString(), pos);
+}
+
 function focusEditor() {
   view.value?.focus();
 }
@@ -352,6 +361,12 @@ function selectAllSqlFromContextMenu() {
   focusEditor();
 }
 
+function openTableFromContextMenu() {
+  if (!contextTableName.value) return;
+  emit("viewTableData", contextTableName.value);
+  focusEditor();
+}
+
 function selectSqlLineFromGutter(currentView: EditorViewType, line: { from: number; to: number }, event: Event): boolean {
   if (!(event instanceof MouseEvent) || event.button !== 0) return false;
   event.preventDefault();
@@ -371,6 +386,12 @@ const contextMenuItems = computed<ContextMenuItem[]>(() => [
     disabled: !canExecuteContextSql.value,
     icon: Play,
   },
+  {
+    label: t("contextMenu.viewData"),
+    action: openTableFromContextMenu,
+    disabled: !contextTableName.value,
+    icon: Table2,
+  },
   { label: "", separator: true },
   {
     label: t("editor.contextMenu.copySelection"),
@@ -2205,7 +2226,7 @@ defineExpose({ openSearch, openReplace, scrollCursorIntoView });
         class="h-full w-full overflow-hidden"
         @contextmenu="
           (e: MouseEvent) => {
-            if (view) syncContextMenuState(view);
+            if (view) syncContextMenuStateAtEvent(view, e);
             onContextMenu(e);
           }
         "

apps/desktop/src/components/layout/ContentArea.vue

@@ -116,6 +116,7 @@ const emit = defineEmits<{
   sort: [column: string, columnIndex: number, direction: "asc" | "desc" | null, whereInput?: string];
   executeSql: [sql: string];
   clickTable: [tableName: string];
+  viewTableData: [tableName: string];
   openObjectTable: [target: { tableName: string; schema?: string }];
   objectSchemaChange: [schema: string | undefined];
   structureEditorSaved: [commentChanged: boolean];
@@ -428,6 +429,10 @@ function onHandleClickTable(tableName: string) {
   emit("clickTable", tableName);
 }
 
+function onHandleViewTableData(tableName: string) {
+  emit("viewTableData", tableName);
+}
+
 function onHandleCloseColumnPanel() {
   showColumnInfo.value = false;
   columnInfoColumns.value = [];
@@ -520,6 +525,7 @@ defineExpose({ focusSearch, refreshData, handleModRTarget });
               @execute="emit('execute')"
               @save="emit('saveSql')"
               @click-table="onHandleClickTable"
+              @view-table-data="onHandleViewTableData"
               @click-column="onHandleClickColumn"
               @close-column-panel="onHandleCloseColumnPanel"
             />