feat(diff-navigation): added diff navigation to monaco diff editor

Author: technikhil314

components/v2/diffActionBar.vue

@@ -1,9 +1,27 @@
 <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 />
       <NextDiff :click-handler="goToNextDiff" />
       <PrevDiff :click-handler="goToPreviousDiff" />
     </div>
@@ -14,7 +32,6 @@
 <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'
@@ -23,9 +40,14 @@ export default Vue.extend({
   components: {
     PrevDiff,
     NextDiff,
-    ToggleInSync,
     CopyLink,
   },
+  props: {
+    diffNavigator: {
+      type: Object,
+      required: true,
+    },
+  },
   data(): DiffActionBarData {
     return {
       copied: false,
@@ -35,37 +57,7 @@ export default Vue.extend({
     }
   },
   mounted() {
-    const lhsDiffNode = document.getElementById('lhsDiff')
-    const rhsDiffNode = document.getElementById('rhsDiff')
-    if (lhsDiffNode && rhsDiffNode) {
-      const isLHSBigger =
-        lhsDiffNode.children.length > rhsDiffNode.children.length
-      let comparator, comparer
-      if (isLHSBigger) {
-        comparer = lhsDiffNode
-        comparator = rhsDiffNode
-      } else {
-        comparer = rhsDiffNode
-        comparator = lhsDiffNode
-      }
-      this.comparator = comparator
-      this.treeWalker = document.createTreeWalker(
-        comparer,
-        NodeFilter.SHOW_ELEMENT,
-        {
-          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
-          },
-        }
-      )
-      document.addEventListener('keydown', this.handleCtrlC)
-    }
+    document.addEventListener('keydown', this.handleCtrlC)
   },
   beforeDestroy() {
     document.removeEventListener('keydown', this.handleCtrlC)
@@ -96,64 +88,10 @@ export default Vue.extend({
       }, 5000)
     },
     goToNextDiff() {
-      const currentNode = this.treeWalker?.currentNode
-      const nextNode = this.treeWalker?.nextNode()
-      if (nextNode) {
-        const currentNodeIndex = Array.prototype.indexOf.call(
-          currentNode?.parentElement?.children,
-          currentNode
-        )
-        const nextNodeIndex = Array.prototype.indexOf.call(
-          nextNode.parentElement?.children,
-          nextNode
-        )
-        const comparatorCurrentNode =
-          this.comparator?.children[currentNodeIndex]
-        const comparatorNextNode = this.comparator?.children[nextNodeIndex]
-        this.toggleDiffHunkAndScrollIntoView(
-          [
-            currentNode as HTMLDivElement,
-            comparatorCurrentNode as HTMLDivElement,
-          ],
-          [nextNode as HTMLDivElement, comparatorNextNode as HTMLDivElement]
-        )
-      }
+      this.diffNavigator.next()
     },
     goToPreviousDiff() {
-      const currentNode = this.treeWalker?.currentNode
-      const prevNode = this.treeWalker?.previousNode()
-      if (prevNode) {
-        const currentNodeIndex = Array.prototype.indexOf.call(
-          currentNode?.parentElement?.children,
-          currentNode
-        )
-        const prevNodeIndex = Array.prototype.indexOf.call(
-          prevNode.parentElement?.children,
-          prevNode
-        )
-        const comparatorCurrentNode =
-          this.comparator?.children[currentNodeIndex]
-        const comparatorPrevNode = this.comparator?.children[prevNodeIndex]
-        this.toggleDiffHunkAndScrollIntoView(
-          [
-            currentNode as HTMLDivElement,
-            comparatorCurrentNode as HTMLDivElement,
-          ],
-          [prevNode as HTMLDivElement, comparatorPrevNode as HTMLDivElement]
-        )
-      }
-    },
-    toggleDiffHunkAndScrollIntoView(
-      unselectedNodes: Array<HTMLDivElement | undefined> = [],
-      selectedNodes: Array<HTMLDivElement | undefined> = []
-    ) {
-      unselectedNodes.forEach((element) => {
-        element?.querySelector('p')?.classList.remove('selected')
-      })
-      selectedNodes.forEach((element) => {
-        element?.querySelector('p')?.classList.add('selected')
-        element?.scrollIntoView()
-      })
+      this.diffNavigator.previous()
     },
   },
 })

helpers/types.ts

@@ -35,4 +35,5 @@ export interface DiffData {
   rhsLabel: string
   lhsLabel: string
   monacoDiffEditor: any
+  diffNavigator: any
 }

pages/v2/diff.vue

@@ -2,9 +2,9 @@
   <div class="page-contents">
     <Navbar :show-back-button="true" />
     <main class="outline-none" tabindex="0">
-      <DiffActionBar />
+      <DiffActionBar :diff-navigator="diffNavigator" />
       <section
-        class="flex items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
+        class="flex items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
       >
         <div
           id="monaco-diff-viewer"
@@ -32,6 +32,7 @@ export default Vue.extend({
       rhsLabel: '',
       lhsLabel: '',
       monacoDiffEditor: {},
+      diffNavigator: {},
     }
   },
   head() {
@@ -77,6 +78,7 @@ export default Vue.extend({
         enabled: false,
       },
       wordWrap: 'on',
+      contextmenu: false,
     }
     if (monacoDiffViewerEl) {
       this.monacoDiffEditor = monaco.editor.createDiffEditor(
@@ -90,6 +92,14 @@ export default Vue.extend({
           original: monaco.editor.createModel(this.lhs, 'javascript'),
           modified: monaco.editor.createModel(this.rhs, 'javascript'),
         })
+        this.diffNavigator = monaco.editor.createDiffNavigator(
+          this.monacoDiffEditor,
+          {
+            followsCaret: true,
+            ignoreCharChanges: true,
+            alwaysRevealFirst: true,
+          }
+        )
       }
     }
   },

vercel.json

@@ -9,5 +9,12 @@
         ]
       }
     }
+  ],
+  "redirects": [
+    {
+      "source": "/",
+      "destination": "/v2",
+      "permanent": false
+    }
   ]
 }