From 36906ca37ea61c05974a39e5befffec6ba7823a3 Mon Sep 17 00:00:00 2001
From: d9k <d9k@ya.ru>
Date: Wed, 17 Jul 2024 16:19:41 +0500
Subject: [PATCH] #2175 hotkeys: alt-O to open selected component in editor

---
 .../features/components/SelectedComponentPane.vue  | 14 +++++++++++++-
 packages/app-frontend/src/locales/en.js            |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/app-frontend/src/features/components/SelectedComponentPane.vue b/packages/app-frontend/src/features/components/SelectedComponentPane.vue
index ec40bb2e4..9d5df14d1 100644
--- 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
index cff0ebef0..b7515f4e0 100644
--- 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: {