diff --git a/apps/desktop/src/App.vue b/apps/desktop/src/App.vue index db2905874b..34322c3bcb 100644 --- a/apps/desktop/src/App.vue +++ b/apps/desktop/src/App.vue @@ -281,6 +281,7 @@ const contentAreaRef = ref | null>(null); const selectedSql = ref(""); const cursorPos = ref(0); +const previewChangesAvailable = ref(false); const formatSqlRequest = ref<{ id: number; tabId: string } | null>(null); const compressSqlRequest = ref<{ id: number; tabId: string } | null>(null); const activeOutputView = ref<"result" | "summary" | "explain" | "chart" | "messages">("result"); @@ -490,6 +491,10 @@ function requestActiveEditorExecuteInNewResultTab() { void tryExecuteInNewResultTab(); } +function requestActiveEditorPreviewChanges() { + void contentAreaRef.value?.requestQueryEditorPreviewChanges?.(); +} + const multiExecuteDatabaseType = ref(); const multiExecuteInitialTargets = ref>([]); const multiExecuteLaunchId = ref(0); @@ -3102,6 +3107,7 @@ onUnmounted(() => { :active-tab="activeTab" :active-connection="activeConnection" :executable-sql="executableSql" + :can-preview-changes="previewChangesAvailable" :explain-mode="explainMode" :block-dangerous-redis-commands="blockDangerousRedisCommands" :sql-keyword-case="settingsStore.editorSettings.sqlFormatter.keywordCase" @@ -3123,6 +3129,7 @@ onUnmounted(() => { @dismiss-txn-rolled-back="activeTab && (activeTab.txnAutoRolledBack = false)" @execute-pointer-down="captureActiveEditorExecutionSnapshot()" @execute="requestActiveEditorExecute($event)" + @preview-changes="requestActiveEditorPreviewChanges()" @multi-execute="requestMultiDbExecute()" @cancel="cancelActiveExecution()" @explain="tryExplain()" @@ -3163,6 +3170,7 @@ onUnmounted(() => { @editor-update="(tabId: string, v: string) => queryStore.updateSql(tabId, v)" @editor-selection-change="(v: string) => (selectedSql = v)" @editor-cursor-change="(p: number) => (cursorPos = p)" + @preview-changes-available="(v: boolean) => (previewChangesAvailable = v)" @editor-viewport-change="(tabId: string, viewport: { scrollTop: number; scrollLeft: number }) => queryStore.updateEditorViewport(tabId, viewport)" @editor-selection-state-change="(tabId: string, selection: { anchor: number; head: number }) => queryStore.updateEditorSelection(tabId, selection)" @format-error="toast(t('toolbar.formatSqlFailed'))" diff --git a/apps/desktop/src/components/editor/QueryEditor.vue b/apps/desktop/src/components/editor/QueryEditor.vue index 28fc03fd10..41e34a9280 100644 --- a/apps/desktop/src/components/editor/QueryEditor.vue +++ b/apps/desktop/src/components/editor/QueryEditor.vue @@ -1,6 +1,6 @@