feat: improve editor components with common extensions and submit handling

Author: JulianFun123

packages/frontend/src/App.vue

@@ -391,7 +391,7 @@ const openManageProjectUsersDialog = () => {
                 @click="selectProject(project.id)"
                 @contextmenu.prevent="showProjectMenu($event, project)"
               >
-                <span>{{ project.name.slice(0, 2).toUpperCase() }}</span>
+                <span class="select-none">{{ project.name.slice(0, 2).toUpperCase() }}</span>
               </button>
 
               <Button

packages/frontend/src/components/SourcesSidebar.vue

@@ -92,7 +92,7 @@ const updateDataSource = async (
   <div class="border-r app-border px-0.5 relative h-full min-h-0 flex flex-col sidenav-elements">
     <div class="flex w-full justify-between items-center gap-2 p-2 pb-1 pt-0.5 pr-0">
       <div class="flex flex-col min-w-0 flex-1 region-drag">
-        <span class="text-sm opacity-45 truncate max-w-[14rem]">
+        <span class="text-sm opacity-45 truncate max-w-[14rem] select-none">
           {{ workspaceStore.currentProject?.name || 'No project selected' }}
         </span>
       </div>

packages/frontend/src/components/editors/JsonEditor.vue

@@ -5,6 +5,7 @@ import { autocompletion } from '@codemirror/autocomplete'
 import { json } from '@codemirror/lang-json'
 import { EditorView } from '@codemirror/view'
 import { Codemirror } from 'vue-codemirror'
+import { commonEditorExtensions, createEditorSubmitExtension } from './editor-extensions.ts'
 import { starQueryTheme } from './theme-starquery.ts'
 
 const code = defineModel<string>({
@@ -22,25 +23,14 @@ const emit = defineEmits<{
   submit: []
 }>()
 
-const submitShortcut = EditorView.domEventHandlers({
-  keydown(event) {
-    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-      event.preventDefault()
-      emit('submit')
-      return true
-    }
-
-    return false
-  },
-})
-
 const extensions = computed(() => [
   json(),
+  ...commonEditorExtensions,
   autocompletion(),
   EditorState.tabSize.of(2),
   EditorView.lineWrapping,
   starQueryTheme,
-  submitShortcut,
+  createEditorSubmitExtension(() => emit('submit')),
 ])
 
 const view = shallowRef<EditorView>()

packages/frontend/src/components/editors/SQLEditor.vue

@@ -5,8 +5,13 @@ import { EditorState } from '@codemirror/state'
 import { autocompletion } from '@codemirror/autocomplete'
 import type { SQLNamespace } from '@codemirror/lang-sql'
 import { sql } from '@codemirror/lang-sql'
+import { EditorView } from '@codemirror/view'
+import {
+  commonEditorExtensions,
+  createEditorSubmitExtension,
+  createSingleLineEnterExtension,
+} from './editor-extensions.ts'
 import { starQueryTheme } from './theme-starquery.ts'
-import { EditorView } from 'codemirror'
 import type { DataSourceType } from '@/types/sql'
 import { getSqlEditorDialect } from '@/datasources/shared-sql/dialect'
 
@@ -52,18 +57,6 @@ const dialect = computed(() => {
   return getSqlEditorDialect(props.sourceType)
 })
 
-const extensions = computed(() => [
-  sql({
-    dialect: dialect.value,
-    schema: props.schema,
-    defaultTable: props.defaultTable,
-    defaultSchema: props.defaultSchema,
-  }),
-  autocompletion(),
-  ...(props.multiline ? [] : [singleLineExtension, preventNewline]),
-  starQueryTheme,
-])
-
 const view = shallowRef<EditorView>()
 const handleReady = (payload: {
   view: EditorView
@@ -73,13 +66,30 @@ const handleReady = (payload: {
   view.value = payload.view
 }
 
-const emit = defineEmits(['enter'])
+const emit = defineEmits<{
+  enter: []
+  submit: []
+}>()
 
-const keydownEvent = (e: KeyboardEvent) => {
-  if (e.code === 'Enter') {
-    emit('enter')
-  }
-}
+const singleLineExtensions = computed(() => [
+  singleLineExtension,
+  preventNewline,
+  createSingleLineEnterExtension(() => emit('enter')),
+])
+
+const extensions = computed(() => [
+  sql({
+    dialect: dialect.value,
+    schema: props.schema,
+    defaultTable: props.defaultTable,
+    defaultSchema: props.defaultSchema,
+  }),
+  ...commonEditorExtensions,
+  autocompletion(),
+  createEditorSubmitExtension(() => emit('submit')),
+  ...(props.multiline ? [] : singleLineExtensions.value),
+  starQueryTheme,
+])
 
 const focusEditor = () => {
   view.value?.focus()
@@ -99,6 +109,5 @@ defineExpose({
     :tab-size="2"
     :extensions="extensions"
     @ready="handleReady"
-    @keydown="keydownEvent"
   />
 </template>

packages/frontend/src/components/editors/editor-extensions.ts

@@ -0,0 +1,73 @@
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { EditorView, keymap } from '@codemirror/view'
+
+export const commonEditorExtensions = [
+  history(),
+  keymap.of([indentWithTab, ...defaultKeymap, ...historyKeymap]),
+]
+
+function isMacPlatform() {
+  if (typeof navigator === 'undefined') {
+    return false
+  }
+
+  const browserNavigator = navigator as Navigator & {
+    userAgentData?: {
+      platform?: string
+    }
+  }
+
+  const platform =
+    browserNavigator.userAgentData?.platform ||
+    navigator.platform ||
+    navigator.userAgent
+
+  return /mac/i.test(platform)
+}
+
+export function createEditorSubmitExtension(onSubmit: () => void) {
+  const runSubmit = () => {
+    onSubmit()
+    return true
+  }
+
+  return [
+    keymap.of([
+      {
+        key: 'Mod-Enter',
+        run: runSubmit,
+      },
+      {
+        key: 'Cmd-Enter',
+        run: runSubmit,
+      },
+    ]),
+    EditorView.domEventHandlers({
+      keydown(event) {
+        const isSubmitShortcut = isMacPlatform()
+          ? event.metaKey && !event.ctrlKey && (event.key === 'Enter' || event.code === 'NumpadEnter')
+          : event.ctrlKey && !event.metaKey && (event.key === 'Enter' || event.code === 'NumpadEnter')
+
+        if (!isSubmitShortcut) {
+          return false
+        }
+
+        event.preventDefault()
+        onSubmit()
+        return true
+      },
+    }),
+  ]
+}
+
+export function createSingleLineEnterExtension(onEnter: () => void) {
+  return keymap.of([
+    {
+      key: 'Enter',
+      run: () => {
+        onEnter()
+        return true
+      },
+    },
+  ])
+}

packages/frontend/src/components/workspace/WorkspaceTabsBar.vue

@@ -177,7 +177,7 @@ const logout = async () => {
           v-for="(tab, index) of props.tabs"
           :key="tab.id ?? `${tab.type}:${index}`"
           :data-tab-index="index"
-          class="group flex flex-none min-w-[11rem] max-w-[18rem] items-center gap-1 border-r border-neutral-200 px-2 py-1.5 transition-colors dark:border-neutral-800 region-no-drag"
+          class="group flex flex-none min-w-[11rem] max-w-[18rem] items-center gap-1 border-r border-neutral-200 px-2 py-1.5 transition-colors dark:border-neutral-800 region-no-drag select-none"
           :class="
             currentTab === index
               ? 'bg-primary-500/10 text-primary-700 dark:text-primary-300'

packages/frontend/src/datasources/shared-sql/views/SQLQueryView.vue

@@ -229,6 +229,7 @@ watch(sourceRecord, async (nextSource) => {
           :schema="completionSchema"
           :default-schema="completionDefaultSchema"
           class="w-full"
+          @submit="runQuery"
         />
       </template>
     </CollapsiblePanel>

packages/frontend/src/datasources/shared-sql/views/SQLTableView.vue

@@ -727,6 +727,7 @@ onMounted(async () => {
             :default-schema="completionDefaultSchema"
             :default-table="props.data.tableName"
             @enter="applyWhereClause"
+            @submit="applyWhereClause"
           />
         </div>
         <Button
@@ -753,6 +754,7 @@ onMounted(async () => {
             :default-schema="completionDefaultSchema"
             :default-table="props.data.tableName"
             @enter="applySortClause"
+            @submit="applySortClause"
           />
         </div>
         <Button