From 67e4b1c5a03f73be9d8f31f4ce9eee721dd39fa1 Mon Sep 17 00:00:00 2001
From: Lucas Pagliari <lucas.alex.pagliari@gmail.com>
Date: Wed, 16 Feb 2022 01:49:41 -0300
Subject: [PATCH] Add HotKey for switching between options and composition API

---
 .../theme/components/PreferenceSwitch.vue     | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/.vitepress/theme/components/PreferenceSwitch.vue b/.vitepress/theme/components/PreferenceSwitch.vue
index 2ab592cfe1..73f4289a7c 100644
--- a/.vitepress/theme/components/PreferenceSwitch.vue
+++ b/.vitepress/theme/components/PreferenceSwitch.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VTSwitch, VTIconChevronDown } from '@vue/theme'
 import { useRoute } from 'vitepress'
-import { ref, computed, inject, Ref } from 'vue'
+import { ref, computed, onMounted, onUnmounted, inject, Ref } from 'vue'
 import {
   preferCompositionKey,
   preferComposition,
@@ -19,6 +19,26 @@ const isOpen = ref(
     !localStorage.getItem(preferCompositionKey)
 )
 
+onMounted(() => {
+  window.addEventListener('keydown', handleToggleCompositionHotKey)
+  onUnmounted(removeToggleHotKey)
+})
+
+const handleToggleCompositionHotKey = (e: KeyboardEvent) => {
+  if (e.key === ' ' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault()
+    if (preferComposition.value) {
+      toggleCompositionAPI(false)
+    } else {
+      toggleCompositionAPI(true)
+    }
+  }
+}
+
+const removeToggleHotKey = () => {
+  window.removeEventListener('keydown', handleToggleCompositionHotKey)
+}
+
 const toggleOpen = () => {
   isOpen.value = !isOpen.value
 }