build: v0.3.5, support sync scroll when outputFormat is side-by-side

.npmrc

@@ -1 +1 @@
-registry=http://registry.npmjs.org
+registry=https://registry.npmjs.org

package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-code-diff",
   "description": "A diff plugin of vue, support vue2 and vue3",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "scripts": {
     "dev": "vite",
     "build": "npx rimraf dist && rollup --config rollup.config.js",

src/App.vue

@@ -47,6 +47,7 @@
     </a-form-item>
   </a-form>
   <code-diff
+    :highlight="true"
     :old-string="oldString"
     :new-string="newString"
     :context="formState.context"

src/lib/v-code-diff/util.ts

@@ -71,3 +71,23 @@ export async function highlightElements (element: Element, props, ctx: SetupCont
   await Promise.all(promises)
   ctx.emit('after-render')
 }
+
+export function syncScroll (selector) {
+  let active: HTMLElement = document.createElement('div')
+  document.querySelectorAll(selector).forEach(function (element) {
+    element.addEventListener('mouseenter', function (e) {
+      active = e.target
+    })
+
+    element.addEventListener('scroll', function (e) {
+      if (e.target !== active) return
+
+      document.querySelectorAll(selector).forEach(function (target) {
+        if (active === target) return
+
+        target.scrollTop = active.scrollTop
+        target.scrollLeft = active.scrollLeft
+      })
+    })
+  })
+}

src/lib/v-code-diff/v-code-diff.ts

@@ -1,5 +1,5 @@
-import { defineComponent, isVue3, PropType, h, ref, watch } from 'vue-demi'
-import { createHtml, highlightElements, useDebounceFn } from '@/lib/v-code-diff/util'
+import { defineComponent, isVue3, PropType, h, ref, watch, onUpdated, onMounted } from 'vue-demi'
+import { createHtml, highlightElements, syncScroll, useDebounceFn } from '@/lib/v-code-diff/util'
 import './styles'
 
 export default defineComponent({
@@ -63,6 +63,16 @@ export default defineComponent({
       }
     }, 200)
     watch(props, cb, { deep: true, immediate: true })
+    onMounted(() => {
+      if (props.outputFormat === 'side-by-side') {
+        syncScroll('.d2h-file-side-diff')
+      }
+    })
+    onUpdated(() => {
+      if (props.outputFormat === 'side-by-side') {
+        syncScroll('.d2h-file-side-diff')
+      }
+    })
     return {
       html
     }