fix vue

packages/core/package.json

@@ -54,10 +54,10 @@
   "dependencies": {
     "@git-diff-view/lowlight": "^0.0.16",
     "highlight.js": "^11.9.0",
-    "lowlight": "^3.1.0"
+    "lowlight": "^3.1.0",
+    "fast-diff": "^1.3.0"
   },
   "devDependencies": {
-    "@types/hast": "^3.0.0",
-    "fast-diff": "^1.3.0"
+    "@types/hast": "^3.0.0"
   }
 }

packages/file/package.json

@@ -55,7 +55,8 @@
     "@git-diff-view/core": "^0.0.16",
     "diff": "^5.2.0",
     "highlight.js": "^11.9.0",
-    "lowlight": "^3.1.0"
+    "lowlight": "^3.1.0",
+    "fast-diff": "^1.3.0"
   },
   "devDependencies": {
     "@types/diff": "^5.2.2",

packages/react/package.json

@@ -64,6 +64,7 @@
     "@types/hast": "^3.0.0",
     "highlight.js": "^11.9.0",
     "lowlight": "^3.1.0",
+    "fast-diff": "^1.3.0",
     "reactivity-store": "^0.3.5",
     "use-sync-external-store": "^1.2.2"
   },

packages/vue/package.json

@@ -52,7 +52,8 @@
     "@git-diff-view/core": "^0.0.16",
     "@types/hast": "^3.0.0",
     "highlight.js": "^11.9.0",
-    "lowlight": "^3.1.0"
+    "lowlight": "^3.1.0",
+    "fast-diff": "^1.3.0"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.6",

packages/vue/src/components/DiffSplitExtendLineNormal.tsx

@@ -18,7 +18,9 @@ export const DiffSplitExtendLine = defineComponent(
 
     const currentSide = computed(() => SplitSide[props.side]);
 
-    const lineSelector = computed(() => `tr[data-line="${props.lineNumber}-extend"]`);
+    const lineSelector = computed(() => `div[data-line="${props.lineNumber}-extend-content"]`);
+
+    const lineWrapperSelector = computed(() => `tr[data-line="${props.lineNumber}-extend"]`);
 
     const wrapperSelector = computed(() =>
       props.side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper"
@@ -68,6 +70,7 @@ export const DiffSplitExtendLine = defineComponent(
 
     useSyncHeight({
       selector: lineSelector,
+      wrapper: lineWrapperSelector,
       side: currentSide,
       enable: currentIsShow,
     });
@@ -89,7 +92,12 @@ export const DiffSplitExtendLine = defineComponent(
         >
           {currentExtend.value ? (
             <td class={`diff-line-extend-${SplitSide[props.side]}-content p-0`} colspan={2}>
-              <div class="diff-line-extend-wrapper sticky left-0" style={{ width: width.value + "px" }}>
+              <div
+                data-line={`${props.lineNumber}-extend-content`}
+                data-side={SplitSide[props.side]}
+                class="diff-line-extend-wrapper sticky left-0"
+                style={{ width: width.value + "px" }}
+              >
                 {width.value > 0 &&
                   slots.extend?.({
                     diffFile: props.diffFile,
@@ -106,7 +114,9 @@ export const DiffSplitExtendLine = defineComponent(
               style={{ backgroundColor: `var(${emptyBGName})` }}
               colspan={2}
             >
-              <span>&ensp;</span>
+              <div data-line={`${props.lineNumber}-extend-content`} data-side={SplitSide[props.side]}>
+                &ensp;
+              </div>
             </td>
           )}
         </tr>

packages/vue/src/components/DiffSplitHunkLineNormal.tsx

@@ -68,6 +68,7 @@ const DiffSplitHunkLineGitHub = defineComponent(
 
     useSyncHeight({
       selector: lineSelector,
+      wrapper: lineSelector,
       side: currentSyncHeightSide,
       enable: currentEnableSyncHeight,
     });
@@ -211,6 +212,7 @@ const DiffSplitHunkLineGitLab = defineComponent(
 
     useSyncHeight({
       selector: lineSelector,
+      wrapper: lineSelector,
       side: currentSyncHeightSide,
       enable: currentEnableSyncHeight,
     });

packages/vue/src/components/DiffSplitWidgetLineNormal.tsx

@@ -44,7 +44,9 @@ export const DiffSplitWidgetLine = defineComponent(
 
     const currentLine = computed(() => (props.side === SplitSide.old ? oldLine.value : newLine.value));
 
-    const lineSelector = computed(() => `tr[data-line="${props.lineNumber}-widget"]`);
+    const lineSelector = computed(() => `div[data-line="${props.lineNumber}-widget-content"]`);
+
+    const lineWrapperSelector = computed(() => `tr[data-line="${props.lineNumber}-widget"]`);
 
     const wrapperSelector = computed(() =>
       props.side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper"
@@ -64,6 +66,7 @@ export const DiffSplitWidgetLine = defineComponent(
 
     useSyncHeight({
       selector: lineSelector,
+      wrapper: lineWrapperSelector,
       side: observeSide,
       enable: currentIsShow,
     });
@@ -85,7 +88,12 @@ export const DiffSplitWidgetLine = defineComponent(
         >
           {currentWidget.value ? (
             <td class={`diff-line-widget-${SplitSide[props.side]}-content p-0`} colspan={2}>
-              <div class="diff-line-widget-wrapper sticky left-0" style={{ width: width.value + "px" }}>
+              <div
+                data-line={`${props.lineNumber}-widget-content`}
+                data-side={SplitSide[props.side]}
+                class="diff-line-widget-wrapper sticky left-0"
+                style={{ width: width.value + "px" }}
+              >
                 {width.value > 0 &&
                   slots.widget?.({
                     diffFile: props.diffFile,
@@ -101,7 +109,9 @@ export const DiffSplitWidgetLine = defineComponent(
               style={{ backgroundColor: `var(${emptyBGName})` }}
               colspan={2}
             >
-              <span>&ensp;</span>
+              <div data-line={`${props.lineNumber}-widget-content`} data-side={SplitSide[props.side]}>
+                &ensp;
+              </div>
             </td>
           )}
         </tr>

packages/vue/src/hooks/useSyncHeight.ts

@@ -7,10 +7,12 @@ import { useIsMounted } from "./useIsMounted";
 // TODO
 export const useSyncHeight = ({
   selector,
+  wrapper,
   side,
   enable,
 }: {
   selector: Ref<string>;
+  wrapper: Ref<string>;
   side: Ref<string>;
   enable: Ref<boolean>;
 }) => {
@@ -26,10 +28,15 @@ export const useSyncHeight = ({
 
       const elements = Array.from(container?.querySelectorAll(selector.value));
 
-      if (elements.length === 2) {
+      const wrappers = Array.from(container?.querySelectorAll(wrapper?.value) || []);
+
+      if (elements.length === 2 && wrappers.length === 2) {
         const ele1 = elements[0] as HTMLElement;
         const ele2 = elements[1] as HTMLElement;
 
+        const wrapper1 = wrappers[0] as HTMLElement;
+        const wrapper2 = wrappers[1] as HTMLElement;
+
         const target = ele1.getAttribute("data-side") === side.value ? ele1 : ele2;
 
         const cb = () => {
@@ -39,13 +46,13 @@ export const useSyncHeight = ({
           const rect2 = ele2.getBoundingClientRect();
           if (rect1.height !== rect2.height) {
             const maxHeight = Math.max(rect1.height, rect2.height);
-            ele1.style.height = maxHeight + "px";
-            ele2.style.height = maxHeight + "px";
-            ele1.setAttribute("data-sync-height", String(maxHeight));
-            ele2.setAttribute("data-sync-height", String(maxHeight));
+            wrapper1.style.height = maxHeight + "px";
+            wrapper2.style.height = maxHeight + "px";
+            wrapper1.setAttribute("data-sync-height", String(maxHeight));
+            wrapper2.setAttribute("data-sync-height", String(maxHeight));
           } else {
-            ele1.removeAttribute("data-sync-height");
-            ele2.removeAttribute("data-sync-height");
+            wrapper1.removeAttribute("data-sync-height");
+            wrapper2.removeAttribute("data-sync-height");
           }
         };