From f018def803552f99aee45ec904157c2c107179cd Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Wed, 29 Jun 2022 09:39:16 +0530
Subject: [PATCH 1/5] feat(kbd shortcut): added submit keyboard shortcut for
 index page

---
 helpers/driverjsTutorials.ts               | 17 ++++++++++++++++-
 helpers/isSkipSubmitKbdShortcutTutorial.ts | 16 ++++++++++++++++
 pages/index.vue                            | 10 ++++++++++
 plugins/cookie-injector.client.ts          |  3 +++
 styles/global.scss                         |  9 +++++++++
 5 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 helpers/isSkipSubmitKbdShortcutTutorial.ts

diff --git a/helpers/driverjsTutorials.ts b/helpers/driverjsTutorials.ts
index 2853850..40f4539 100644
--- a/helpers/driverjsTutorials.ts
+++ b/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',
+    },
   ],
 }
 
diff --git a/helpers/isSkipSubmitKbdShortcutTutorial.ts b/helpers/isSkipSubmitKbdShortcutTutorial.ts
new file mode 100644
index 0000000..30200dc
--- /dev/null
+++ b/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'
+}
diff --git a/pages/index.vue b/pages/index.vue
index 21f063e..e076459 100644
--- a/pages/index.vue
+++ b/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) {
diff --git a/plugins/cookie-injector.client.ts b/plugins/cookie-injector.client.ts
index dcf63c0..a484fc9 100644
--- a/plugins/cookie-injector.client.ts
+++ b/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(),
   })
 }
 
diff --git a/styles/global.scss b/styles/global.scss
index be59082..3b63469 100644
--- a/styles/global.scss
+++ b/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;

From 41752aa7e0cbb9939de526b7b709c037d8c8ac06 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Wed, 29 Jun 2022 10:11:35 +0530
Subject: [PATCH 2/5] feat(theme): theme changes between page transition

---
 components/navbar.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/navbar.vue b/components/navbar.vue
index 4e1dfe8..c75fbcf 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -156,7 +156,8 @@
   </nav>
 </template>
 
-<script>
+<script lang="ts">
+let darkMode: Boolean | null = null
 export default {
   props: {
     showBackButton: {
@@ -166,23 +167,24 @@ export default {
   },
   data() {
     return {
-      darkMode: false,
+      darkMode,
     }
   },
   mounted() {
-    if (this.$cookies.isDarkMode) {
-      this.toggleDarkMode(null, false)
+    if (darkMode === null) {
+      darkMode = this.$cookies.isDarkMode
+      if (darkMode) {
+        document.documentElement.classList.add('dark')
+        document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
+      }
     }
     document.documentElement.classList.remove('hidden')
   },
   methods: {
-    toggleDarkMode(e, val) {
-      e && e.preventDefault()
-      this.darkMode = val || !this.darkMode
-      document.documentElement.classList[this.darkMode ? 'add' : 'remove'](
-        'dark'
-      )
-      document.cookie = `darkMode=${this.darkMode}; Secure; max-age=31536000; path=/;`
+    toggleDarkMode() {
+      darkMode = !darkMode
+      document.documentElement.classList[darkMode ? 'add' : 'remove']('dark')
+      document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
     },
   },
 }

From 458c8dd4897b7582044db1c19c31080cd266011c Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Wed, 29 Jun 2022 10:38:01 +0530
Subject: [PATCH 3/5] refactor: using script lang ts all over in project

---
 components/Toast.vue                |  7 ++++---
 components/buttons/copyLink.vue     |  7 ++++---
 components/buttons/nextDiff.vue     |  7 ++++---
 components/buttons/prevDiff.vue     |  5 +++--
 components/buttons/skipToNav.vue    |  7 ++++---
 components/buttons/stickyCopy.vue   |  7 ++++---
 components/buttons/toggleInSync.vue |  7 ++++---
 components/diffActionBar.vue        |  7 ++++---
 components/navbar.vue               |  5 +++--
 components/singleDiff.vue           |  7 ++++---
 layouts/main.vue                    |  7 ++++---
 pages/diff.vue                      |  7 ++++---
 pages/v1/diff.vue                   | 23 ++++++++++++-----------
 13 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/components/Toast.vue b/components/Toast.vue
index f08f27b..8d442e1 100644
--- a/components/Toast.vue
+++ b/components/Toast.vue
@@ -28,12 +28,13 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   computed: {
     toastState() {
       return this.$store.state.toast
     },
   },
-}
+})
 </script>
diff --git a/components/buttons/copyLink.vue b/components/buttons/copyLink.vue
index ee92ac7..eaf8db3 100644
--- a/components/buttons/copyLink.vue
+++ b/components/buttons/copyLink.vue
@@ -47,8 +47,9 @@
     </button>
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
@@ -59,5 +60,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>
diff --git a/components/buttons/nextDiff.vue b/components/buttons/nextDiff.vue
index de48c7d..17118b7 100644
--- a/components/buttons/nextDiff.vue
+++ b/components/buttons/nextDiff.vue
@@ -25,14 +25,15 @@
     </button>
   </div>
   </template>
-  <script>
-    export default {
+  <script lang="ts">
+    import Vue from 'vue'
+    export default Vue.extend({
       props: {
         clickHandler: {
           type: Function,
           required: true,
         },
       },
-    }
+    })
   </script>
 </template>
diff --git a/components/buttons/prevDiff.vue b/components/buttons/prevDiff.vue
index f6b1c09..e96ab6e 100644
--- a/components/buttons/prevDiff.vue
+++ b/components/buttons/prevDiff.vue
@@ -26,12 +26,13 @@
   </div>
 </template>
 <script>
-export default {
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
       required: true,
     },
   },
-}
+})
 </script>
diff --git a/components/buttons/skipToNav.vue b/components/buttons/skipToNav.vue
index d22e3f7..c208d4e 100644
--- a/components/buttons/skipToNav.vue
+++ b/components/buttons/skipToNav.vue
@@ -6,14 +6,15 @@
     Skip to main content
   </button>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   methods: {
     focusOnMain() {
       document.getElementsByTagName('main')[0].focus()
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/buttons/stickyCopy.vue b/components/buttons/stickyCopy.vue
index 2f78d34..44812ca 100644
--- a/components/buttons/stickyCopy.vue
+++ b/components/buttons/stickyCopy.vue
@@ -43,8 +43,9 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
@@ -69,5 +70,5 @@ export default {
       }, 5000)
     },
   },
-}
+})
 </script>
diff --git a/components/buttons/toggleInSync.vue b/components/buttons/toggleInSync.vue
index c4152ea..6b4c7a7 100644
--- a/components/buttons/toggleInSync.vue
+++ b/components/buttons/toggleInSync.vue
@@ -15,13 +15,14 @@
     />
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
       required: true,
     },
   },
-}
+})
 </script>
diff --git a/components/diffActionBar.vue b/components/diffActionBar.vue
index f233058..43c7f3c 100644
--- a/components/diffActionBar.vue
+++ b/components/diffActionBar.vue
@@ -30,13 +30,14 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import PrevDiff from './buttons/prevDiff.vue'
 import ToggleInSync from './buttons/toggleInSync.vue'
 import NextDiff from './buttons/nextDiff.vue'
 import CopyLink from './buttons/copyLink.vue'
 import { putToClipboard } from '~/helpers/utils'
-export default {
+export default Vue.extend({
   components: { PrevDiff, NextDiff, ToggleInSync, CopyLink },
   data() {
     return {
@@ -140,7 +141,7 @@ export default {
       })
     },
   },
-}
+})
 </script>
 <style lang="scss">
 .copy-uri-button:hover svg {
diff --git a/components/navbar.vue b/components/navbar.vue
index c75fbcf..cac012a 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -157,8 +157,9 @@
 </template>
 
 <script lang="ts">
+import Vue from 'vue'
 let darkMode: Boolean | null = null
-export default {
+export default Vue.extend({
   props: {
     showBackButton: {
       type: Boolean,
@@ -187,5 +188,5 @@ export default {
       document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
     },
   },
-}
+})
 </script>
diff --git a/components/singleDiff.vue b/components/singleDiff.vue
index 8fbbf39..a29b366 100644
--- a/components/singleDiff.vue
+++ b/components/singleDiff.vue
@@ -28,10 +28,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import StickyCopy from './buttons/stickyCopy.vue'
 import { putToClipboard } from '~/helpers/utils'
-export default {
+export default Vue.extend({
   components: { StickyCopy },
   props: {
     diff: {
@@ -67,7 +68,7 @@ export default {
       )
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/layouts/main.vue b/layouts/main.vue
index 6dae469..ad716f5 100644
--- a/layouts/main.vue
+++ b/layouts/main.vue
@@ -6,9 +6,10 @@
     <Footer />
   </div>
 </template>
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import SkipToNav from '~/components/buttons/skipToNav.vue'
-export default {
+export default Vue.extend({
   components: { SkipToNav },
-}
+})
 </script>
diff --git a/pages/diff.vue b/pages/diff.vue
index efca66c..576d7a1 100644
--- a/pages/diff.vue
+++ b/pages/diff.vue
@@ -85,10 +85,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import pako from 'pako'
 import { undoUrlSafeBase64, escapeHtml } from '../helpers/utils'
-export default {
+export default Vue.extend({
   layout: 'main',
   data() {
     return {
@@ -181,7 +182,7 @@ export default {
       )
     },
   },
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/pages/v1/diff.vue b/pages/v1/diff.vue
index 6b0e714..962bb1d 100644
--- a/pages/v1/diff.vue
+++ b/pages/v1/diff.vue
@@ -26,11 +26,21 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import pako from 'pako'
 import { undoUrlSafeBase64, escapeHtml } from '../../helpers/utils'
 import showTutorials from '../../helpers/driverjsTutorials'
-export default {
+export default Vue.extend({
   layout: 'main',
+  data() {
+    return {
+      lhsDiff: this.lhsDiff || [],
+      rhsDiff: this.rhsDiff || [],
+      rhsLabel: this.rhsLabel || '',
+      lhsLabel: this.lhsLabel || '',
+      isSrollInSyncEnabled: this.isSrollInSyncEnabled,
+    }
+  },
   beforeCreate() {
     const _diff = this.$route.hash
     if (_diff) {
@@ -73,15 +83,6 @@ export default {
         .split('\n')
     }
   },
-  data() {
-    return {
-      lhsDiff: this.lhsDiff || [],
-      rhsDiff: this.rhsDiff || [],
-      rhsLabel: this.rhsLabel || '',
-      lhsLabel: this.lhsLabel || '',
-      isSrollInSyncEnabled: this.isSrollInSyncEnabled,
-    }
-  },
   mounted() {
     const isLHSBigger = this.lhsDiff.length > this.rhsDiff.length
     const maxLineCount = isLHSBigger ? this.lhsDiff.length : this.rhsDiff.length
@@ -91,5 +92,5 @@ export default {
     )
     showTutorials(this.$cookies, this.$route.path, this.$cookies.isDarkMode)
   },
-}
+})
 </script>

From 5d5c7c7b71c3413968a906107ec31c9c93259890 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Wed, 29 Jun 2022 12:58:34 +0530
Subject: [PATCH 4/5] refactor: fixed all TS errors

---
 components/buttons/stickyCopy.vue |  4 +-
 components/diffActionBar.vue      | 80 +++++++++++++++++++------------
 components/singleDiff.vue         |  5 +-
 pages/diff.vue                    | 19 ++++----
 4 files changed, 65 insertions(+), 43 deletions(-)

diff --git a/components/buttons/stickyCopy.vue b/components/buttons/stickyCopy.vue
index 44812ca..34f0690 100644
--- a/components/buttons/stickyCopy.vue
+++ b/components/buttons/stickyCopy.vue
@@ -49,7 +49,7 @@ export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
-      default: () => {},
+      required: true,
     },
     ariaLabel: {
       type: String,
@@ -62,7 +62,7 @@ export default Vue.extend({
     }
   },
   methods: {
-    handleClick(e) {
+    handleClick(e: MouseEvent) {
       this.copied = true
       this.clickHandler(e)
       setTimeout(() => {
diff --git a/components/diffActionBar.vue b/components/diffActionBar.vue
index 43c7f3c..6743792 100644
--- a/components/diffActionBar.vue
+++ b/components/diffActionBar.vue
@@ -37,16 +37,22 @@ import ToggleInSync from './buttons/toggleInSync.vue'
 import NextDiff from './buttons/nextDiff.vue'
 import CopyLink from './buttons/copyLink.vue'
 import { putToClipboard } from '~/helpers/utils'
+interface Data {
+  comparator: HTMLElement | null
+  comparer: HTMLElement | null
+  copied: Boolean
+  treeWalker: TreeWalker | null
+}
 export default Vue.extend({
   components: { PrevDiff, NextDiff, ToggleInSync, CopyLink },
-  data() {
+  data(): Data {
     return {
-      copied: this.copied,
+      copied: false,
+      comparator: null,
+      comparer: null,
+      treeWalker: null,
     }
   },
-  beforeCreate() {
-    this.copied = false
-  },
   mounted() {
     const lhsDiffNode = document.getElementById('lhsDiff')
     const rhsDiffNode = document.getElementById('rhsDiff')
@@ -66,11 +72,14 @@ export default Vue.extend({
         comparer,
         NodeFilter.SHOW_ELEMENT,
         {
-          acceptNode: (node) => {
-            return (
-              node.classList.contains('bg-red-200') ||
-              node.classList.contains('bg-green-200')
-            )
+          acceptNode: (node: Node) => {
+            if (
+              (node as HTMLDivElement).classList.contains('bg-red-200') ||
+              (node as HTMLDivElement).classList.contains('bg-green-200')
+            ) {
+              return NodeFilter.FILTER_ACCEPT
+            }
+            return NodeFilter.FILTER_REJECT
           },
         }
       )
@@ -92,52 +101,63 @@ export default Vue.extend({
       this.$store.commit('scrollInSync/toggle')
     },
     goToNextDiff() {
-      const currentNode = this.treeWalker.currentNode
-      const nextNode = this.treeWalker.nextNode()
+      const currentNode = this.treeWalker?.currentNode
+      const nextNode = this.treeWalker?.nextNode()
       if (nextNode) {
         const currentNodeIndex = Array.prototype.indexOf.call(
-          currentNode.parentElement.children,
+          currentNode?.parentElement?.children,
           currentNode
         )
         const nextNodeIndex = Array.prototype.indexOf.call(
-          nextNode.parentElement.children,
+          nextNode.parentElement?.children,
           nextNode
         )
-        const comparatorCurrentNode = this.comparator.children[currentNodeIndex]
-        const comparatorNextNode = this.comparator.children[nextNodeIndex]
+        const comparatorCurrentNode =
+          this.comparator?.children[currentNodeIndex]
+        const comparatorNextNode = this.comparator?.children[nextNodeIndex]
         this.toggleDiffHunkAndScrollIntoView(
-          [currentNode, comparatorCurrentNode],
-          [nextNode, comparatorNextNode]
+          [
+            currentNode as HTMLDivElement,
+            comparatorCurrentNode as HTMLDivElement,
+          ],
+          [nextNode as HTMLDivElement, comparatorNextNode as HTMLDivElement]
         )
       }
     },
     goToPreviousDiff() {
-      const currentNode = this.treeWalker.currentNode
-      const prevNode = this.treeWalker.previousNode()
+      const currentNode = this.treeWalker?.currentNode
+      const prevNode = this.treeWalker?.previousNode()
       if (prevNode) {
         const currentNodeIndex = Array.prototype.indexOf.call(
-          currentNode.parentElement.children,
+          currentNode?.parentElement?.children,
           currentNode
         )
         const prevNodeIndex = Array.prototype.indexOf.call(
-          prevNode.parentElement.children,
+          prevNode.parentElement?.children,
           prevNode
         )
-        const comparatorCurrentNode = this.comparator.children[currentNodeIndex]
-        const comparatorPrevNode = this.comparator.children[prevNodeIndex]
+        const comparatorCurrentNode =
+          this.comparator?.children[currentNodeIndex]
+        const comparatorPrevNode = this.comparator?.children[prevNodeIndex]
         this.toggleDiffHunkAndScrollIntoView(
-          [currentNode, comparatorCurrentNode],
-          [prevNode, comparatorPrevNode]
+          [
+            currentNode as HTMLDivElement,
+            comparatorCurrentNode as HTMLDivElement,
+          ],
+          [prevNode as HTMLDivElement, comparatorPrevNode as HTMLDivElement]
         )
       }
     },
-    toggleDiffHunkAndScrollIntoView(unselectedNodes, selectedNodes) {
+    toggleDiffHunkAndScrollIntoView(
+      unselectedNodes: Array<HTMLDivElement | undefined> = [],
+      selectedNodes: Array<HTMLDivElement | undefined> = []
+    ) {
       unselectedNodes.forEach((element) => {
-        element.querySelector('p').classList.remove('selected')
+        element?.querySelector('p')?.classList.remove('selected')
       })
       selectedNodes.forEach((element) => {
-        element.querySelector('p').classList.add('selected')
-        element.scrollIntoView()
+        element?.querySelector('p')?.classList.add('selected')
+        element?.scrollIntoView()
       })
     },
   },
diff --git a/components/singleDiff.vue b/components/singleDiff.vue
index a29b366..ceb3d49 100644
--- a/components/singleDiff.vue
+++ b/components/singleDiff.vue
@@ -58,9 +58,10 @@ export default Vue.extend({
     },
   },
   methods: {
-    copyTextToClipboard(e) {
+    copyTextToClipboard(e: Event) {
+      const copyTextButton = e.currentTarget as HTMLButtonElement
       putToClipboard(
-        e.currentTarget.parentNode.parentNode.innerText
+        (copyTextButton.parentNode?.parentNode as HTMLElement).innerText
           .split('\n\n')
           .join('\n'),
         'Text copied to your clipboard',
diff --git a/pages/diff.vue b/pages/diff.vue
index 576d7a1..f48cb79 100644
--- a/pages/diff.vue
+++ b/pages/diff.vue
@@ -93,8 +93,8 @@ export default Vue.extend({
   layout: 'main',
   data() {
     return {
-      lhsDiff: this.lhsDiff,
-      rhsDiff: this.rhsDiff,
+      lhsDiff: [],
+      rhsDiff: [],
       copied: false,
     }
   },
@@ -103,13 +103,13 @@ export default Vue.extend({
     const gunzip = pako.ungzip(Buffer.from(undoUrlSafeBase64(_diff), 'base64'))
     const diff = JSON.parse(Buffer.from(gunzip).toString('utf8'))
     this.lhsDiff = diff
-      .map((item) => {
+      .map((item: Array<string | number>) => {
         const hunkState = item[0]
         if (hunkState === -1 || hunkState === 0) {
           const className =
             hunkState === -1 ? 'isModified bg-red-300 dark:bg-red-500' : ''
           return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
-            item[1]
+            item[1] as string
           )}</span>`
         }
         return false
@@ -118,13 +118,13 @@ export default Vue.extend({
       .join('')
       .split('\n')
     this.rhsDiff = diff
-      .map((item) => {
+      .map((item: Array<string | number>) => {
         const hunkState = item[0]
         if (hunkState === 1 || hunkState === 0) {
           const className =
             hunkState === 1 ? 'isModified bg-green-400 dark:bg-green-900' : ''
           return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
-            item[1]
+            item[1] as string
           )}</span>`
         }
         return false
@@ -142,7 +142,7 @@ export default Vue.extend({
     )
   },
   methods: {
-    putToClipboard(textToPut, toastContent) {
+    putToClipboard(textToPut: string, toastContent: string) {
       navigator.clipboard.writeText(textToPut)
       this.$store.commit('toast/show', {
         show: true,
@@ -173,9 +173,10 @@ export default Vue.extend({
         this.copied = false
       }, 5000)
     },
-    copyTextToClipboard(e) {
+    copyTextToClipboard(e: Event) {
+      const copyTextButton = e.currentTarget as HTMLButtonElement
       this.putToClipboard(
-        e.currentTarget.parentNode.parentNode.innerText
+        (copyTextButton.parentNode?.parentNode as HTMLElement).innerText
           .split('\n\n')
           .join('\n'),
         'Text copied to your clipboard'

From d085d84a7881f5e168f1834e5cae83ab635042a1 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Wed, 29 Jun 2022 13:41:02 +0530
Subject: [PATCH 5/5] fix(tutorial): tutorial is shown even after cookie is
 dropped

but since cookie injector does not refresh on cookie value change
---
 components/diffActionBar.vue      |  9 ++-------
 helpers/driverjsTutorials.ts      | 33 +++++++++++--------------------
 helpers/types.ts                  | 29 +++++++++++++++++++++++++++
 plugins/cookie-injector.client.ts |  8 +-------
 4 files changed, 43 insertions(+), 36 deletions(-)
 create mode 100644 helpers/types.ts

diff --git a/components/diffActionBar.vue b/components/diffActionBar.vue
index 6743792..2895ac4 100644
--- a/components/diffActionBar.vue
+++ b/components/diffActionBar.vue
@@ -37,15 +37,10 @@ import ToggleInSync from './buttons/toggleInSync.vue'
 import NextDiff from './buttons/nextDiff.vue'
 import CopyLink from './buttons/copyLink.vue'
 import { putToClipboard } from '~/helpers/utils'
-interface Data {
-  comparator: HTMLElement | null
-  comparer: HTMLElement | null
-  copied: Boolean
-  treeWalker: TreeWalker | null
-}
+import { DiffActionBarData } from '~/helpers/types'
 export default Vue.extend({
   components: { PrevDiff, NextDiff, ToggleInSync, CopyLink },
-  data(): Data {
+  data(): DiffActionBarData {
     return {
       copied: false,
       comparator: null,
diff --git a/helpers/driverjsTutorials.ts b/helpers/driverjsTutorials.ts
index 40f4539..60b067a 100644
--- a/helpers/driverjsTutorials.ts
+++ b/helpers/driverjsTutorials.ts
@@ -1,18 +1,6 @@
-interface Tutorial {
-  element: string
-  popover: {
-    title: string
-    description: string
-  }
-}
-
-interface TutorialMetadata {
-  tutorial: Tutorial[]
-  cookieName: string
-}
-
-type TutorialsMetadata = Record<string, TutorialMetadata[]>
-
+import { Cookies, Tutorial, TutorialsMetadata, TutorialMetadata } from './types'
+// Need this to keep track of latest value of cookie otherwise users sees same tutorial untill they refresh the page after the cookie is dropped
+const _cookies: Partial<Cookies> = {}
 const labelsTutorial: Tutorial[] = [
   {
     element: '#lhsLabel',
@@ -100,28 +88,29 @@ const tutorialsMetadata: TutorialsMetadata = {
 }
 
 export default async function showTutorials(
-  cookies: Record<string, boolean>,
+  cookies: Cookies,
   route: string,
   isDarkMode: boolean
 ) {
   const { default: Driver } = await import('driver.js')
-  const possibleTutorialsToShow = tutorialsMetadata[route]
+  const possibleTutorialsToShow: TutorialMetadata[] = tutorialsMetadata[route]
   let finalTutorial: Tutorial[] = []
-  const cookiesToSet: string[] = []
+  const cookiesToSet: TutorialMetadata[] = []
   const driver = new Driver({
     closeBtnText: 'Skip',
     className: 'dark:filter dark:invert',
     stageBackground: isDarkMode ? 'hsl(221deg 50% 90% / 0.5)' : '#ffffff',
     onReset: () => {
-      cookiesToSet.forEach((x) => {
-        document.cookie = `${x}=true; max-age=31536000; path=/;`
+      cookiesToSet.forEach((x: TutorialMetadata) => {
+        _cookies[x.cookieName] = true
+        document.cookie = `${x.cookieName}=true; max-age=31536000; path=/;`
       })
     },
   })
   possibleTutorialsToShow.forEach((x) => {
-    if (!cookies[x.cookieName]) {
+    if (!cookies[x.cookieName] && !_cookies[x.cookieName]) {
       finalTutorial = finalTutorial.concat(x.tutorial)
-      cookiesToSet.push(x.cookieName)
+      cookiesToSet.push(x)
     }
   })
   if (finalTutorial.length) {
diff --git a/helpers/types.ts b/helpers/types.ts
new file mode 100644
index 0000000..cda8363
--- /dev/null
+++ b/helpers/types.ts
@@ -0,0 +1,29 @@
+export interface Cookies {
+  isDarkMode: boolean
+  isSkipTutorial: boolean
+  isSkipScrollInSyncTutorial: boolean
+  isSkipBackButtonPersistsDataTutorial: boolean
+  isSkipSubmitKbdShortcutTutorial: boolean
+}
+
+export interface Tutorial {
+  element: string
+  popover: {
+    title: string
+    description: string
+  }
+}
+
+export interface TutorialMetadata {
+  tutorial: Tutorial[]
+  cookieName: keyof Cookies
+}
+
+export type TutorialsMetadata = Record<string, TutorialMetadata[]>
+
+export interface DiffActionBarData {
+  comparator: HTMLElement | null
+  comparer: HTMLElement | null
+  copied: Boolean
+  treeWalker: TreeWalker | null
+}
diff --git a/plugins/cookie-injector.client.ts b/plugins/cookie-injector.client.ts
index a484fc9..a8d8546 100644
--- a/plugins/cookie-injector.client.ts
+++ b/plugins/cookie-injector.client.ts
@@ -4,14 +4,8 @@ import isSkipTutorialCookie from '~/helpers/isSkipTutorialCookie'
 import isSkipScrollInSyncTutorial from '~/helpers/isSkipScrollInSyncTutorial'
 import isSkipBackButtonPersistsDataTutorial from '~/helpers/isSkipBackButtonPersistsDataTutorial'
 import isSkipSubmitKbdShortcutTutorial from '~/helpers/isSkipSubmitKbdShortcutTutorial'
+import { Cookies } from '~/helpers/types'
 
-interface Cookies {
-  isDarkMode: boolean
-  isSkipTutorial: boolean
-  isSkipScrollInSyncTutorial: boolean
-  isSkipBackButtonPersistsDataTutorial: boolean
-  isSkipSubmitKbdShortcutTutorial: boolean
-}
 declare module 'vue/types/vue' {
   interface Vue {
     $cookies: Cookies