@git-diff-view/react 0.1.3 → 0.1.4

package/src/components/v2/DiffSplitWidgetLineNormal_v2.tsx

@@ -1,5 +1,4 @@
 import { emptyBGName } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { useDomWidth } from "../../hooks/useDomWidth";
 import { useSyncHeight } from "../../hooks/useSyncHeight";
@@ -52,7 +51,7 @@ const InternalDiffSplitWidgetLine = ({
     wrapper: `div[data-state="widget"][data-line="${lineNumber}-widget"]`,
     selector: `div[data-line="${lineNumber}-widget-content"]`,
     side: SplitSide[currentHasWidget ? side : otherSide],
-    enable: hasWidget && typeof renderWidgetLine === "function",
+    enable: !!hasWidget && typeof renderWidgetLine === "function",
   });
 
   const width = useDomWidth({
@@ -81,7 +80,7 @@ const InternalDiffSplitWidgetLine = ({
               renderWidgetLine?.({
                 diffFile,
                 side,
-                lineNumber: currentLine.lineNumber,
+                lineNumber: currentLine.lineNumber ?? -1,
                 onClose: () => setWidget({}),
               })}
           </div>

package/src/components/v2/DiffSplitWidgetLineWrap_v2.tsx

@@ -1,5 +1,4 @@
 import { borderColorName, emptyBGName } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { SplitSide } from "../DiffView";
 import { useDiffViewContext } from "../DiffViewContext";
@@ -39,7 +38,7 @@ const InternalDiffSplitWidgetLine = ({
     renderWidgetLine?.({
       diffFile,
       side: SplitSide.old,
-      lineNumber: oldLine.lineNumber,
+      lineNumber: oldLine.lineNumber ?? -1,
       onClose: () => setWidget({}),
     });
 
@@ -48,7 +47,7 @@ const InternalDiffSplitWidgetLine = ({
     renderWidgetLine?.({
       diffFile,
       side: SplitSide.new,
-      lineNumber: newLine.lineNumber,
+      lineNumber: newLine.lineNumber ?? -1,
       onClose: () => setWidget({}),
     });
 
@@ -112,8 +111,8 @@ export const DiffSplitWidgetLine = ({
       index={index}
       diffFile={diffFile}
       lineNumber={lineNumber}
-      oldLineWidget={oldLineWidget}
-      newLineWidget={newLineWidget}
+      oldLineWidget={!!oldLineWidget}
+      newLineWidget={!!newLineWidget}
     />
   );
 };

package/src/hooks/useCallbackRef.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+import { useCallback, useRef } from "react";
+
+export const useCallbackRef = <T extends Function>(cb?: T) => {
+  const cbRef = useRef(cb);
+
+  // eslint-disable-next-line react-hooks/refs
+  cbRef.current = cb;
+
+  return useCallback((...args: any[]) => {
+    return cbRef.current?.(...args);
+  }, []) as unknown as T;
+};

package/src/hooks/useDomWidth.ts

@@ -4,8 +4,8 @@ import { useEffect, useState } from "react";
 import { useDiffViewContext } from "../components/DiffViewContext";
 
 export type ObserveElement = HTMLElement & {
-  __observeCallback: Set<() => void>;
-  __observeInstance: ResizeObserver;
+  __observeCallback?: Set<() => void>;
+  __observeInstance?: ResizeObserver;
 };
 
 export const useDomWidth = ({ selector, enable }: { selector: string; enable: boolean }) => {
@@ -39,8 +39,8 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
       cb();
 
       const cleanCb = () => {
-        typedWrapper.__observeCallback.delete(cb);
-        if (typedWrapper.__observeCallback.size === 0) {
+        typedWrapper?.__observeCallback?.delete(cb);
+        if (typedWrapper?.__observeCallback?.size === 0) {
           typedWrapper.__observeInstance?.disconnect();
           typedWrapper.removeAttribute("data-observe");
           delete typedWrapper.__observeCallback;
@@ -58,7 +58,7 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
 
       typedWrapper.__observeCallback.add(cb);
 
-      const observer = new ResizeObserver(() => typedWrapper.__observeCallback.forEach((cb) => cb()));
+      const observer = new ResizeObserver(() => typedWrapper?.__observeCallback?.forEach((cb) => cb()));
 
       typedWrapper.__observeInstance = observer;
 

package/src/hooks/useIsMounted.ts

@@ -4,6 +4,7 @@ export const useIsMounted = () => {
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsMounted(true);
   }, []);
 

package/src/hooks/useSyncHeight.ts

@@ -60,8 +60,8 @@ export const useSyncHeight = ({
         cb();
 
         const cleanCb = () => {
-          typedTarget.__observeCallback.delete(cb);
-          if (typedTarget.__observeCallback.size === 0) {
+          typedTarget?.__observeCallback?.delete(cb);
+          if (typedTarget?.__observeCallback?.size === 0) {
             typedTarget.__observeInstance?.disconnect();
             typedTarget.removeAttribute("data-observe");
             delete typedTarget.__observeCallback;
@@ -79,7 +79,7 @@ export const useSyncHeight = ({
 
         typedTarget.__observeCallback.add(cb);
 
-        const observer = new ResizeObserver(() => typedTarget.__observeCallback.forEach((cb) => cb()));
+        const observer = new ResizeObserver(() => typedTarget?.__observeCallback?.forEach((cb) => cb()));
 
         typedTarget.__observeInstance = observer;
 

package/src/hooks/useTextWidth.ts

@@ -11,7 +11,7 @@ export const useTextWidth = ({
   font: { fontFamily?: string; fontStyle?: string; fontSize?: string };
 }) => {
   const [width, setWidth] = useState(() => {
-    const fontSize = parseInt(font.fontSize);
+    const fontSize = parseInt(font.fontSize || "13");
     let baseSize = 6;
     baseSize += fontSize > 10 ? (fontSize - 10) * 0.6 : 0;
     return baseSize * text.length;

package/src/hooks/useUnmount.ts

@@ -3,6 +3,7 @@ import { useEffect, useRef } from "react";
 export const useUnmount = (cb: () => void, deps: any[]) => {
   const ref = useRef(cb);
 
+  // eslint-disable-next-line react-hooks/refs
   ref.current = cb;
 
   // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/hooks/useUpdateEffect.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+
+import type { DependencyList, EffectCallback } from "react";
+
+export const useUpdateEffect = (effect: EffectCallback, deps: DependencyList) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    }
+    isMounted.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+};

package/src/index.ts

@@ -1,5 +1,4 @@
-/* eslint-disable import/export */
-
 export * from "./components/DiffView";
+export * from "./components/DiffViewWithMultiSelect";
 
 export * from "@git-diff-view/core";

package/styles/diff-view-pure.css

@@ -1,27 +1,45 @@
+.diff-tailwindcss-wrapper .\!container {
+  width: 100% !important;
+}
 .diff-tailwindcss-wrapper .container {
   width: 100%;
 }
 @media (min-width: 640px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 640px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 640px;
   }
 }
 @media (min-width: 768px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 768px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 768px;
   }
 }
 @media (min-width: 1024px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 1024px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 1024px;
   }
 }
 @media (min-width: 1280px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 1280px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 1280px;
   }
 }
 @media (min-width: 1536px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 1536px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 1536px;
   }
@@ -408,12 +426,105 @@
 .diff-tailwindcss-wrapper .diff-widget-tooltip:hover::after {
   display: block;
 }
+.diff-line-extend-wrapper,
+.diff-line-widget-wrapper {
+  display: flow-root;
+}
 .diff-line-extend-wrapper * {
   color: initial;
 }
 .diff-line-widget-wrapper * {
   color: initial;
 }
+/* Multi-select styles for line range selection */
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num {
+  z-index: 2;
+}
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content {
+  position: relative;
+}
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::after,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::after,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  opacity: 0.15;
+  background-color: var(--diff-multi-select-bg, #f0c000);
+  pointer-events: none;
+}
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::before,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::before,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::before {
+  content: "";
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -2px;
+  width: 4px;
+  background-color: var(--diff-multi-select-border, #2588fa);
+}
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content::after,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content::after,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  opacity: 0.15;
+  background-color: var(--diff-multi-select-bg, #f0c000);
+  pointer-events: none;
+}
+/* Multi-select: ensure proper positioning for line number cells */
+.diff-multi-selecting .diff-line-old-num,
+.diff-multi-selecting .diff-line-new-num,
+.diff-multi-selecting .diff-line-num {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.diff-multi-selecting .diff-line-old-content,
+.diff-multi-selecting .diff-line-new-content,
+.diff-multi-selecting .diff-line-content {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+/* Prevent text selection during multi-line selection */
+.diff-multi-selecting {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.diff-multi-selecting * {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+/* Hide addWidget button during active dragging selection */
+.diff-multi-selecting .diff-add-widget-wrapper {
+  display: none;
+}
+/* Ensure addWidget button is above selection overlay */
+.diff-multiselect-wrapper .diff-add-widget-wrapper {
+  z-index: 10 !important;
+}
+/* Line number span should not interfere with click events */
+.diff-tailwindcss-wrapper .diff-line-new-num span[data-line-num],
+.diff-tailwindcss-wrapper .diff-line-old-num span[data-line-num] {
+  pointer-events: none;
+}
+.diff-multiselect-wrapper .diff-line-old-num,
+.diff-multiselect-wrapper .diff-line-new-num,
+.diff-multiselect-wrapper .diff-line-num {
+  cursor: pointer;
+}
 .diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw pre code.hljs {
   display: block;
   overflow-x: auto;

package/styles/diff-view.css

@@ -1,27 +1,45 @@
+.diff-tailwindcss-wrapper .\!container {
+  width: 100% !important;
+}
 .diff-tailwindcss-wrapper .container {
   width: 100%;
 }
 @media (min-width: 640px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 640px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 640px;
   }
 }
 @media (min-width: 768px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 768px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 768px;
   }
 }
 @media (min-width: 1024px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 1024px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 1024px;
   }
 }
 @media (min-width: 1280px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 1280px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 1280px;
   }
 }
 @media (min-width: 1536px) {
+  .diff-tailwindcss-wrapper .\!container {
+    max-width: 1536px !important;
+  }
   .diff-tailwindcss-wrapper .container {
     max-width: 1536px;
   }
@@ -408,12 +426,105 @@
 .diff-tailwindcss-wrapper .diff-widget-tooltip:hover::after {
   display: block;
 }
+.diff-line-extend-wrapper,
+.diff-line-widget-wrapper {
+  display: flow-root;
+}
 .diff-line-extend-wrapper * {
   color: initial;
 }
 .diff-line-widget-wrapper * {
   color: initial;
 }
+/* Multi-select styles for line range selection */
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num {
+  z-index: 2;
+}
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content {
+  position: relative;
+}
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::after,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::after,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  opacity: 0.15;
+  background-color: var(--diff-multi-select-bg, #f0c000);
+  pointer-events: none;
+}
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::before,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::before,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::before {
+  content: "";
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -2px;
+  width: 4px;
+  background-color: var(--diff-multi-select-border, #2588fa);
+}
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content::after,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content::after,
+.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  opacity: 0.15;
+  background-color: var(--diff-multi-select-bg, #f0c000);
+  pointer-events: none;
+}
+/* Multi-select: ensure proper positioning for line number cells */
+.diff-multi-selecting .diff-line-old-num,
+.diff-multi-selecting .diff-line-new-num,
+.diff-multi-selecting .diff-line-num {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.diff-multi-selecting .diff-line-old-content,
+.diff-multi-selecting .diff-line-new-content,
+.diff-multi-selecting .diff-line-content {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+/* Prevent text selection during multi-line selection */
+.diff-multi-selecting {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.diff-multi-selecting * {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+/* Hide addWidget button during active dragging selection */
+.diff-multi-selecting .diff-add-widget-wrapper {
+  display: none;
+}
+/* Ensure addWidget button is above selection overlay */
+.diff-multiselect-wrapper .diff-add-widget-wrapper {
+  z-index: 10 !important;
+}
+/* Line number span should not interfere with click events */
+.diff-tailwindcss-wrapper .diff-line-new-num span[data-line-num],
+.diff-tailwindcss-wrapper .diff-line-old-num span[data-line-num] {
+  pointer-events: none;
+}
+.diff-multiselect-wrapper .diff-line-old-num,
+.diff-multiselect-wrapper .diff-line-new-num,
+.diff-multiselect-wrapper .diff-line-num {
+  cursor: pointer;
+}
 .diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw pre code.hljs {
   display: block;
   overflow-x: auto;