vuejs#2175 hotkeys: alt-O to open selected component in editor

d9k · Jul 17, 2024 · 36906ca · 36906ca
1 parent 65022f7
commit 36906ca
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/app-frontend/src/features/components/SelectedComponentPane.vue b/packages/app-frontend/src/features/components/SelectedComponentPane.vue
@@ -3,7 +3,7 @@ import StateInspector from '@front/features/inspector/StateInspector.vue'
 import EmptyPane from '@front/features/layout/EmptyPane.vue'
 
 import { computed, defineComponent, ref, watch } from 'vue'
-import { SharedData, copyToClipboard, getComponentDisplayName } from '@vue-devtools/shared-utils'
+import { SharedData, copyToClipboard, getComponentDisplayName, openInEditor } from '@vue-devtools/shared-utils'
 import { onKeyDown } from '@front/util/keyboard'
 import RenderCode from './RenderCode.vue'
 import { useSelectedComponent } from './composable'
@@ -16,6 +16,8 @@ export default defineComponent({
   },
 
   setup() {
+    const openInEditorButton = ref()
+
     const selectedComponent = useSelectedComponent()
     const displayName = computed(() => getComponentDisplayName(selectedComponent.data.value?.name ?? '', SharedData.componentNameStyle))
 
@@ -38,6 +40,14 @@ export default defineComponent({
         stateFilterInput.value.focus()
         return false
       }
+
+      if ((['o', 'o', 'щ']).includes(event.key) && event.altKey) {
+        const file = selectedComponent.data.value?.file
+        if (file) {
+          openInEditor(file)
+        }
+        return false
+      }
     }, true)
 
     const sameApp = computed(() => selectedComponent.data.value?.id.split(':')[0] === selectedComponentId.value?.split(':')[0])
@@ -63,6 +73,7 @@ export default defineComponent({
       sameApp,
       copyName,
       showCopiedName,
+      openInEditorButton,
     }
   },
 })
@@ -128,6 +139,7 @@ export default defineComponent({
 
       <VueButton
         v-if="fileIsPath"
+        v-ref="openInEditorButton"
         v-tooltip="{
           content: $t('ComponentInspector.openInEditor.tooltip', { file: data.file }),
           html: true,

diff --git a/packages/app-frontend/src/locales/en.js b/packages/app-frontend/src/locales/en.js
@@ -70,7 +70,7 @@ export default {
   },
   ComponentInspector: {
     openInEditor: {
-      tooltip: 'Open <mono><<insert_drive_file>>{{file}}</mono> in editor',
+      tooltip: '[[{{keys.alt}}]] + [[O]] Open <mono><<insert_drive_file>>{{file}}</mono> in editor',
     },
   },
   EventsHistory: {