fix sync height

MrWangJustToDo · Sep 2, 2024 · 7ea4a9c · 7ea4a9c
1 parent d962557
commit 7ea4a9c
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 21 deletions.
diff --git a/packages/react/src/components/DiffSplitExtendLineNormal.tsx b/packages/react/src/components/DiffSplitExtendLineNormal.tsx
@@ -36,7 +36,8 @@ const _DiffSplitExtendLine = ({
   const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
 
   useSyncHeight({
-    selector: `tr[data-line="${lineNumber}-extend"]`,
+    selector: `div[data-line="${lineNumber}-extend-content"]`,
+    wrapper: `tr[data-line="${lineNumber}-extend"]`,
     side: SplitSide[side],
     enable: !!currentExtend?.data && typeof renderExtendLine === "function",
   });
@@ -57,7 +58,12 @@ const _DiffSplitExtendLine = ({
     >
       {currentExtend ? (
         <td className={`diff-line-extend-${SplitSide[side]}-content p-0`} colSpan={2}>
-          <div className="diff-line-extend-wrapper sticky left-0" style={{ width }}>
+          <div
+            data-line={`${lineNumber}-extend-content`}
+            data-side={SplitSide[side]}
+            className="diff-line-extend-wrapper sticky left-0"
+            style={{ width }}
+          >
             {width > 0 &&
               currentExtend?.data &&
               renderExtendLine?.({
@@ -75,7 +81,9 @@ const _DiffSplitExtendLine = ({
           style={{ backgroundColor: `var(${emptyBGName})` }}
           colSpan={2}
         >
-          <span>&ensp;</span>
+          <div data-line={`${lineNumber}-extend-content`} data-side={SplitSide[side]}>
+            &ensp;
+          </div>
         </td>
       )}
     </tr>

diff --git a/packages/react/src/components/DiffSplitWidgetLineNormal.tsx b/packages/react/src/components/DiffSplitWidgetLineNormal.tsx
@@ -30,7 +30,8 @@ const _DiffSplitWidgetLine = ({
   const renderWidgetLine = useDiffContext(React.useCallback((s) => s.renderWidgetLine, []));
 
   useSyncHeight({
-    selector: `tr[data-line="${lineNumber}-widget"]`,
+    selector: `div[data-line="${lineNumber}-widget-content"]`,
+    wrapper: `tr[data-line="${lineNumber}-widget"]`,
     side: SplitSide[side],
     enable: currentWidget && typeof renderWidgetLine === "function",
   });
@@ -51,7 +52,12 @@ const _DiffSplitWidgetLine = ({
     >
       {currentWidget ? (
         <td className={`diff-line-widget-${SplitSide[side]}-content p-0`} colSpan={2}>
-          <div className="diff-line-widget-wrapper sticky left-0" style={{ width }}>
+          <div
+            data-line={`${lineNumber}-widget-content`}
+            data-side={SplitSide[side]}
+            className="diff-line-widget-wrapper sticky left-0"
+            style={{ width }}
+          >
             {width > 0 &&
               renderWidgetLine?.({
                 diffFile,
@@ -67,7 +73,9 @@ const _DiffSplitWidgetLine = ({
           style={{ backgroundColor: `var(${emptyBGName})` }}
           colSpan={2}
         >
-          <span>&ensp;</span>
+          <div data-line={`${lineNumber}-widget-content`} data-side={SplitSide[side]}>
+            &ensp;
+          </div>
         </td>
       )}
     </tr>

diff --git a/packages/react/src/components/v2/DiffSplitExtendLineNormal_v2.tsx b/packages/react/src/components/v2/DiffSplitExtendLineNormal_v2.tsx
@@ -36,7 +36,8 @@ const _DiffSplitExtendLine = ({
   const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
 
   useSyncHeight({
-    selector: `div[data-state="extend"][data-line="${lineNumber}-extend"]`,
+    wrapper: `div[data-state="extend"][data-line="${lineNumber}-extend"]`,
+    selector: `div[data-line="${lineNumber}-extend-content"]`,
     side: SplitSide[side],
     enable: !!currentExtend?.data && typeof renderExtendLine === "function",
   });
@@ -57,7 +58,12 @@ const _DiffSplitExtendLine = ({
     >
       {currentExtend ? (
         <div className={`diff-line-extend-${SplitSide[side]}-content p-0`}>
-          <div className="diff-line-extend-wrapper sticky left-0" style={{ width }}>
+          <div
+            data-line={`${lineNumber}-extend-content`}
+            data-side={SplitSide[side]}
+            className="diff-line-extend-wrapper sticky left-0"
+            style={{ width }}
+          >
             {width > 0 &&
               currentExtend?.data &&
               renderExtendLine?.({
@@ -73,7 +79,9 @@ const _DiffSplitExtendLine = ({
         <div
           className={`diff-line-extend-${SplitSide[side]}-placeholder h-full select-none p-0`}
           style={{ backgroundColor: `var(${emptyBGName})` }}
-        />
+        >
+          <div data-line={`${lineNumber}-extend-content`} data-side={SplitSide[side]} />
+        </div>
       )}
     </div>
   );

diff --git a/packages/react/src/components/v2/DiffSplitWidgetLineNormal_v2.tsx b/packages/react/src/components/v2/DiffSplitWidgetLineNormal_v2.tsx
@@ -30,7 +30,8 @@ const _DiffSplitWidgetLine = ({
   const renderWidgetLine = useDiffContext(React.useCallback((s) => s.renderWidgetLine, []));
 
   useSyncHeight({
-    selector: `div[data-state="widget"][data-line="${lineNumber}-widget"]`,
+    wrapper: `div[data-state="widget"][data-line="${lineNumber}-widget"]`,
+    selector: `div[data-line="${lineNumber}-widget-content"]`,
     side: SplitSide[side],
     enable: currentWidget && typeof renderWidgetLine === "function",
   });
@@ -51,7 +52,12 @@ const _DiffSplitWidgetLine = ({
     >
       {currentWidget ? (
         <div className={`diff-line-widget-${SplitSide[side]}-content p-0`}>
-          <div className="diff-line-widget-wrapper sticky left-0" style={{ width }}>
+          <div
+            data-line={`${lineNumber}-widget-content`}
+            data-side={SplitSide[side]}
+            className="diff-line-widget-wrapper sticky left-0"
+            style={{ width }}
+          >
             {width > 0 &&
               renderWidgetLine?.({
                 diffFile,
@@ -65,7 +71,9 @@ const _DiffSplitWidgetLine = ({
         <div
           className={`diff-line-widget-${SplitSide[side]}-placeholder h-full select-none p-0`}
           style={{ backgroundColor: `var(${emptyBGName})` }}
-        />
+        >
+          <div data-line={`${lineNumber}-widget-content`} data-side={SplitSide[side]} />
+        </div>
       )}
     </div>
   );

diff --git a/packages/react/src/hooks/useSyncHeight.ts b/packages/react/src/hooks/useSyncHeight.ts
@@ -5,7 +5,17 @@ import { useDiffViewContext } from "../components/DiffViewContext";
 import { useSafeLayout } from "./useSafeLayout";
 
 // TODO
-export const useSyncHeight = ({ selector, side, enable }: { selector: string; side: string; enable: boolean }) => {
+export const useSyncHeight = ({
+  selector,
+  wrapper,
+  side,
+  enable,
+}: {
+  selector: string;
+  wrapper?: string;
+  side: string;
+  enable: boolean;
+}) => {
   const { useDiffContext } = useDiffViewContext();
 
   const id = useDiffContext(useCallback((s) => s.id, []));
@@ -16,10 +26,15 @@ export const useSyncHeight = ({ selector, side, enable }: { selector: string; si
 
       const elements = Array.from(container?.querySelectorAll(selector) || []);
 
-      if (elements.length === 2) {
+      const wrappers = wrapper ? Array.from(container?.querySelectorAll(wrapper) || []) : elements;
+
+      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 ? ele1 : ele2;
 
         const cb = () => {
@@ -29,13 +44,13 @@ export const useSyncHeight = ({ selector, side, enable }: { selector: string; si
           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");
           }
         };
 
@@ -53,5 +68,5 @@ export const useSyncHeight = ({ selector, side, enable }: { selector: string; si
         };
       }
     }
-  }, [selector, enable, side, id]);
+  }, [selector, enable, side, id, wrapper]);
 };