From c49811cf5a52dc8c3a494ca9735a965377aea72f Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Thu, 14 May 2026 22:33:51 +0800
Subject: [PATCH] feat(editor): add middle-mouse-button rectangular selection
 in SQL editor

Closes #266
---
 src/components/editor/QueryEditor.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/editor/QueryEditor.vue b/src/components/editor/QueryEditor.vue
index 0d55651a7f..970a3853bc 100644
--- a/src/components/editor/QueryEditor.vue
+++ b/src/components/editor/QueryEditor.vue
@@ -251,7 +251,7 @@ onMounted(async () => {
   if (!editorRef.value) return;
 
   const [
-    { EditorView, keymap },
+    { EditorView, keymap, rectangularSelection },
     { EditorState, Compartment, Prec },
     { sql, MSSQL, MySQL, PostgreSQL, SQLDialect },
     { basicSetup },
@@ -267,7 +267,7 @@ onMounted(async () => {
     import("@codemirror/commands"),
     import("@codemirror/language"),
   ]);
-  editorViewModule = { EditorView, keymap } as typeof import("@codemirror/view");
+  editorViewModule = { EditorView, keymap, rectangularSelection } as typeof import("@codemirror/view");
   fontThemeComp = new Compartment();
   codeMirrorTheme = new Compartment();
   wordWrapComp = new Compartment();
@@ -339,6 +339,7 @@ onMounted(async () => {
       runKeymap,
       wordWrapComp.of(props.forceWordWrap || ss.wordWrap ? EditorView.lineWrapping : []),
       readOnlyComp.of([EditorState.readOnly.of(!!props.readOnly), EditorView.editable.of(!props.readOnly)]),
+      rectangularSelection({ eventFilter: (e: MouseEvent) => e.altKey || e.button === 1 }),
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           emit("update:modelValue", update.state.doc.toString());