feat(kbd shortcut): added submit keyboard shortcut for index page

Author: technikhil314

helpers/driverjsTutorials.ts

@@ -30,6 +30,17 @@ const labelsTutorial: Tutorial[] = [
   },
 ]
 
+const submitShortcutTutorial: Tutorial[] = [
+  {
+    element: '#submitButton',
+    popover: {
+      title: 'New keyboard shortcut',
+      description:
+        'Now you can press <kbd>Cmd</kbd> + <kbd>Enter</kbd>/<kbd>Ctrl</kbd> + <kbd>Enter</kbd> to go to compare screen.',
+    },
+  },
+]
+
 const actionBarTutorial: Tutorial[] = [
   {
     element: '#toggleScrollInSyncSection',
@@ -60,7 +71,7 @@ const backButtonTutorial: Tutorial[] = [
     popover: {
       title: 'Go back to edit screen',
       description:
-        'Now your data persists between the page navigation. Only if you have clicked on "Compare" button',
+        'Now your data persists between the page navigation. <br/> PS: Works only if you have clicked on "Compare" button',
     },
   },
 ]
@@ -81,6 +92,10 @@ const tutorialsMetadata: TutorialsMetadata = {
       tutorial: labelsTutorial,
       cookieName: 'isSkipTutorial',
     },
+    {
+      tutorial: submitShortcutTutorial,
+      cookieName: 'isSkipSubmitKbdShortcutTutorial',
+    },
   ],
 }
 

helpers/isSkipSubmitKbdShortcutTutorial.ts

@@ -0,0 +1,16 @@
+export default function () {
+  const cookies = document.cookie.split(';')
+  const cookieMap: {
+    isSkipSubmitKbdShortcutTutorial?: string
+  } = {
+    isSkipSubmitKbdShortcutTutorial: 'false',
+  }
+  cookies.forEach((element) => {
+    const [name, val] = element.split('=')
+    const trimmedName = name.trim()
+    if (trimmedName === 'isSkipSubmitKbdShortcutTutorial') {
+      cookieMap[trimmedName] = val
+    }
+  })
+  return cookieMap.isSkipSubmitKbdShortcutTutorial === 'true'
+}

pages/index.vue

@@ -60,6 +60,7 @@
           <button
             class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
             aria-label="Click here to compare the inputted text blocks"
+            id="submitButton"
           >
             Compare
           </button>
@@ -85,6 +86,15 @@ export default Vue.extend({
   },
   mounted() {
     showTutorials(this.$cookies, this.$route.path, this.$cookies.isDarkMode)
+    document.addEventListener('keydown', (event) => {
+      const { metaKey, ctrlKey, key } = event
+      if ((metaKey || ctrlKey) && key === 'Enter') {
+        const button: HTMLButtonElement = document.getElementById(
+          'submitButton'
+        ) as HTMLButtonElement
+        button.click()
+      }
+    })
   },
   methods: {
     checkForm(e: Event) {

plugins/cookie-injector.client.ts

@@ -3,12 +3,14 @@ import isDarkModeCookie from '~/helpers/isDarkModeCookie'
 import isSkipTutorialCookie from '~/helpers/isSkipTutorialCookie'
 import isSkipScrollInSyncTutorial from '~/helpers/isSkipScrollInSyncTutorial'
 import isSkipBackButtonPersistsDataTutorial from '~/helpers/isSkipBackButtonPersistsDataTutorial'
+import isSkipSubmitKbdShortcutTutorial from '~/helpers/isSkipSubmitKbdShortcutTutorial'
 
 interface Cookies {
   isDarkMode: boolean
   isSkipTutorial: boolean
   isSkipScrollInSyncTutorial: boolean
   isSkipBackButtonPersistsDataTutorial: boolean
+  isSkipSubmitKbdShortcutTutorial: boolean
 }
 declare module 'vue/types/vue' {
   interface Vue {
@@ -41,6 +43,7 @@ const cookieInjectorPlugin: Plugin = (_context, inject) => {
     isSkipScrollInSyncTutorial: isSkipScrollInSyncTutorial(),
     isSkipBackButtonPersistsDataTutorial:
       isSkipBackButtonPersistsDataTutorial(),
+    isSkipSubmitKbdShortcutTutorial: isSkipSubmitKbdShortcutTutorial(),
   })
 }
 

styles/global.scss

@@ -43,6 +43,15 @@ main {
   margin-top: 2rem;
 }
 
+kbd {
+  @apply bg-gray-100 dark:bg-gray-800 border bottom-1 dark:border-gray-600 border-gray-300 shadow rounded-sm text-gray-700 dark:text-gray-50 inline-block;
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
 /* custom scrollbar */
 ::-webkit-scrollbar {
   width: 10px;