fix: several fixes (#134)

* feat(tutorial): added tutorial for copy link shortcut

* fix: copy link short cut tutorial cookie was not injested

* chore: added accessibility related changed

* fix: removing sticky copy for now to fix hydration issue

* fix: not handelling ctrl + c if user has some text selected

Author: technikhil314

components/buttons/copyLink.vue

@@ -2,24 +2,7 @@
   <div>
     <button
       type="button"
-      class="
-        inline-flex
-        items-center
-        justify-center
-        gap-1
-        p-2
-        text-sm
-        transition-transform
-        transform
-        rounded-md
-        shadow
-        outline-none
-        justify-self-end
-        focus:ring-4
-        active:scale-y-75
-        hover:scale-105 hover:shadow-lg
-        copy-uri-button
-      "
+      class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow outline-none justify-self-end focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
       aria-label="Click here to copy url to clipboard"
       id="copyLinkButton"
       :class="{

components/buttons/prevDiff.vue

@@ -2,7 +2,7 @@
   <div id="prevDiffSection" class="inline-flex items-center gap-1">
     <button
       id="prevDiff"
-      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
+      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
       aria-label="Go to previous diff"
       type="button"
       @click="clickHandler"

components/diffActionBar.vue

@@ -1,25 +1,6 @@
 <template>
   <section
-    class="
-      flex
-      items-center
-      justify-between
-      px-4
-      py-2
-      mb-4
-      sticky
-      top-[70px]
-      dark:bg-gray-700
-      bg-gray-300
-      dark:bg-opacity-50
-      bg-opacity-50
-      backdrop-blur-sm
-      rounded-md
-      shadow-lg
-      border border-gray-500
-      w-full
-      z-10
-    "
+    class="flex items-center justify-between px-4 py-2 mb-4 sticky top-[70px] dark:bg-gray-700 bg-gray-300 dark:bg-opacity-50 bg-opacity-50 backdrop-blur-sm rounded-md shadow-lg border border-gray-500 w-full z-10"
   >
     <div class="flex gap-4">
       <ToggleInSync />
@@ -92,7 +73,11 @@ export default Vue.extend({
   methods: {
     handleCtrlC(event: KeyboardEvent) {
       const { metaKey, ctrlKey, key } = event
-      if ((metaKey || ctrlKey) && key === 'c') {
+      if (
+        (metaKey || ctrlKey) &&
+        key === 'c' &&
+        !window?.getSelection()?.toString()
+      ) {
         const button: HTMLButtonElement = document.getElementById(
           'copyLinkButton'
         ) as HTMLButtonElement

components/singleDiff.vue

@@ -5,15 +5,11 @@
     </p>
     <div
       :id="id"
-      class="relative flex-1 px-4 py-2 border-2 rounded-md  dark:border-gray-500 line-number-gutter min-h-80"
+      class="relative flex-1 px-4 py-2 border-2 rounded-md dark:border-gray-500 line-number-gutter min-h-80"
       :class="{
         'overflow-y-auto max-h-screen--nav': !isSrollInSyncEnabled,
       }"
     >
-      <StickyCopy
-        :aria-label="'Copy the content to clipboard'"
-        :click-handler="copyTextToClipboard"
-      />
       <div
         v-for="(lineDiff, index) in diff"
         :key="index"
@@ -30,10 +26,8 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import StickyCopy from './buttons/stickyCopy.vue'
 import { putToClipboard } from '~/helpers/utils'
 export default Vue.extend({
-  components: { StickyCopy },
   props: {
     diff: {
       type: Array,