@git-diff-view/react 0.0.31 → 0.0.32

package/index.d.ts

@@ -821,6 +821,8 @@ declare const createDiffConfigStore: (props: DiffViewProps<any> & {
 }, diffFileId: string) => import("reactivity-store").UseSelectorWithStore<{
 	id: import("reactivity-store").Ref<string, string>;
 	setId: (_id: string) => string;
+	dom: import("reactivity-store").Ref<HTMLElement, HTMLElement>;
+	setDom: (_dom: HTMLElement) => HTMLElement;
 	mode: import("reactivity-store").Ref<DiffModeEnum, DiffModeEnum>;
 	setMode: (_mode: DiffModeEnum) => DiffModeEnum;
 	mounted: import("reactivity-store").Ref<boolean, boolean>;

package/package.json

@@ -3,7 +3,7 @@
   "description": "@git-diff-view/react",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -61,7 +61,7 @@
     "react diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.31",
+    "@git-diff-view/core": "^0.0.32",
     "@types/hast": "^3.0.0",
     "fast-diff": "^1.3.0",
     "highlight.js": "^11.11.0",

package/src/components/DiffAddWidget.tsx

@@ -28,6 +28,7 @@ export const DiffSplitAddWidget = ({
       style={{
         width: `calc(var(${diffFontSizeName}) * 1.4)`,
         height: `calc(var(${diffFontSizeName}) * 1.4)`,
+        top: `calc(var(${diffFontSizeName}) * 0.1)`,
       }}
     >
       <button
@@ -62,10 +63,11 @@ export const DiffUnifiedAddWidget = ({
 }) => {
   return (
     <div
-      className="diff-add-widget-wrapper invisible absolute left-[100%] top-[1px] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
+      className="diff-add-widget-wrapper invisible absolute left-[100%] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
       style={{
         width: `calc(var(${diffFontSizeName}) * 1.4)`,
         height: `calc(var(${diffFontSizeName}) * 1.4)`,
+        top: `calc(var(${diffFontSizeName}) * 0.1)`,
       }}
     >
       <button

package/src/components/DiffUnifiedExtendLine.tsx

@@ -12,12 +12,14 @@ const InternalDiffUnifiedExtendLine = ({
   index,
   diffFile,
   lineNumber,
+  enableWrap,
   oldLineExtend,
   newLineExtend,
 }: {
   index: number;
   diffFile: DiffFile;
   lineNumber: number;
+  enableWrap: boolean;
   oldLineExtend: { data: any };
   newLineExtend: { data: any };
 }) => {
@@ -27,9 +29,10 @@ const InternalDiffUnifiedExtendLine = ({
 
   const unifiedItem = diffFile.getUnifiedLine(index);
 
+  // TODO use css variable to get width
   const width = useDomWidth({
     selector: ".unified-diff-table-wrapper",
-    enable: typeof renderExtendLine === "function",
+    enable: typeof renderExtendLine === "function" && !enableWrap,
   });
 
   if (!renderExtendLine) return null;
@@ -38,7 +41,7 @@ const InternalDiffUnifiedExtendLine = ({
     <tr data-line={`${lineNumber}-extend`} data-state="extend" className="diff-line diff-line-extend">
       <td className="diff-line-extend-content p-0 align-top" colSpan={2}>
         <div className="diff-line-extend-wrapper sticky left-0 z-[1]" style={{ width }}>
-          {width > 0 &&
+          {(enableWrap ? true : width > 0) &&
             oldLineExtend?.data !== undefined &&
             oldLineExtend?.data !== null &&
             renderExtendLine?.({
@@ -48,7 +51,7 @@ const InternalDiffUnifiedExtendLine = ({
               data: oldLineExtend.data,
               onUpdate: diffFile.notifyAll,
             })}
-          {width > 0 &&
+          {(enableWrap ? true : width > 0) &&
             newLineExtend?.data !== undefined &&
             newLineExtend?.data !== null &&
             renderExtendLine?.({
@@ -68,10 +71,12 @@ export const DiffUnifiedExtendLine = ({
   index,
   diffFile,
   lineNumber,
+  enableWrap,
 }: {
   index: number;
   diffFile: DiffFile;
   lineNumber: number;
+  enableWrap: boolean;
 }) => {
   const { useDiffContext } = useDiffViewContext();
 
@@ -96,6 +101,7 @@ export const DiffUnifiedExtendLine = ({
       index={index}
       diffFile={diffFile}
       lineNumber={lineNumber}
+      enableWrap={enableWrap}
       oldLineExtend={oldLineExtend}
       newLineExtend={newLineExtend}
     />

package/src/components/DiffUnifiedView.tsx

@@ -147,8 +147,18 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
                     enableHighlight={enableHighlight}
                     enableAddWidget={enableAddWidget}
                   />
-                  <DiffUnifiedWidgetLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
-                  <DiffUnifiedExtendLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
+                  <DiffUnifiedWidgetLine
+                    index={item.index}
+                    lineNumber={item.lineNumber}
+                    diffFile={diffFile}
+                    enableWrap={enableWrap}
+                  />
+                  <DiffUnifiedExtendLine
+                    index={item.index}
+                    lineNumber={item.lineNumber}
+                    diffFile={diffFile}
+                    enableWrap={enableWrap}
+                  />
                 </Fragment>
               ))}
               <DiffUnifiedHunkLine

package/src/components/DiffUnifiedWidgetLine.tsx

@@ -12,10 +12,12 @@ const InternalDiffUnifiedWidgetLine = ({
   index,
   diffFile,
   lineNumber,
+  enableWrap,
 }: {
   index: number;
   diffFile: DiffFile;
   lineNumber: number;
+  enableWrap: boolean;
 }) => {
   const { useWidget } = useDiffWidgetContext();
 
@@ -42,7 +44,7 @@ const InternalDiffUnifiedWidgetLine = ({
 
   const width = useDomWidth({
     selector: ".unified-diff-table-wrapper",
-    enable: typeof renderWidgetLine === "function",
+    enable: typeof renderWidgetLine === "function" && !enableWrap,
   });
 
   if (!renderWidgetLine) return null;
@@ -51,10 +53,10 @@ const InternalDiffUnifiedWidgetLine = ({
     <tr data-line={`${lineNumber}-widget`} data-state="widget" className="diff-line diff-line-widget">
       <td className="diff-line-widget-content p-0" colSpan={2}>
         <div className="diff-line-widget-wrapper sticky left-0 z-[1]" style={{ width }}>
-          {width > 0 &&
+          {(enableWrap ? true : width > 0) &&
             oldWidget &&
             renderWidgetLine?.({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })}
-          {width > 0 &&
+          {(enableWrap ? true : width > 0) &&
             newWidget &&
             renderWidgetLine?.({ diffFile, side: SplitSide.new, lineNumber: unifiedItem.newLineNumber, onClose })}
         </div>
@@ -67,10 +69,12 @@ export const DiffUnifiedWidgetLine = ({
   index,
   diffFile,
   lineNumber,
+  enableWrap,
 }: {
   index: number;
   diffFile: DiffFile;
   lineNumber: number;
+  enableWrap: boolean;
 }) => {
   const { useWidget } = useDiffWidgetContext();
 
@@ -100,5 +104,7 @@ export const DiffUnifiedWidgetLine = ({
 
   if (!currentIsShow) return null;
 
-  return <InternalDiffUnifiedWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
+  return (
+    <InternalDiffUnifiedWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} enableWrap={enableWrap} />
+  );
 };

package/src/components/DiffView.tsx

@@ -210,6 +210,10 @@ const InternalDiffView = <T extends unknown>(
     onCreateUseWidgetHook,
   ]);
 
+  useEffect(() => {
+    useDiffContext.getReadonlyState().setDom(wrapperRef?.current);
+  }, [useDiffContext, wrapperRef]);
+
   const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
 
   return (

package/src/components/tools.ts

@@ -5,6 +5,10 @@ import type { RefObject } from "react";
 
 export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: boolean }, diffFileId: string) => {
   return createStore(() => {
+    const dom = ref<HTMLElement>();
+
+    const setDom = (_dom: HTMLElement) => (dom.value = _dom);
+
     const id = ref(diffFileId);
 
     const setId = (_id: string) => (id.value = _id);
@@ -85,6 +89,8 @@ export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: b
     return {
       id,
       setId,
+      dom,
+      setDom,
       mode,
       setMode,
       mounted,

package/src/hooks/useDomWidth.ts

@@ -1,3 +1,4 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { useEffect, useState } from "react";
 
 import { useDiffViewContext } from "../components/DiffViewContext";
@@ -12,11 +13,17 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
 
   const { useDiffContext } = useDiffViewContext();
 
-  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
+  const { id, mounted, dom } = useDiffContext.useShallowStableSelector((s) => ({
+    id: s.id,
+    mounted: s.mounted,
+    dom: s.dom,
+  }));
 
   useEffect(() => {
     if (enable) {
-      const container = document.querySelector(`#diff-root${id}`);
+      const rootDocument = getElementRoot(dom as HTMLDivElement);
+
+      const container = rootDocument.querySelector(`#diff-root${id}`);
 
       const wrapper = container?.querySelector(selector);
 
@@ -61,7 +68,7 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
 
       return () => cleanCb();
     }
-  }, [selector, enable, id, mounted]);
+  }, [selector, enable, id, mounted, dom]);
 
   return width;
 };

package/src/hooks/useSyncHeight.ts

@@ -1,3 +1,4 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { useEffect } from "react";
 
 import { useDiffViewContext } from "../components/DiffViewContext";
@@ -17,11 +18,17 @@ export const useSyncHeight = ({
 }) => {
   const { useDiffContext } = useDiffViewContext();
 
-  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
+  const { id, mounted, dom } = useDiffContext.useShallowStableSelector((s) => ({
+    id: s.id,
+    mounted: s.mounted,
+    dom: s.dom,
+  }));
 
   useEffect(() => {
     if (enable) {
-      const container = document.querySelector(`#diff-root${id}`);
+      const rootDocument = getElementRoot(dom as HTMLDivElement);
+
+      const container = rootDocument.querySelector(`#diff-root${id}`);
 
       const elements = Array.from(container?.querySelectorAll(selector) || []);
 
@@ -83,5 +90,5 @@ export const useSyncHeight = ({
         return () => cleanCb();
       }
     }
-  }, [selector, enable, side, id, wrapper, mounted]);
+  }, [selector, enable, side, id, wrapper, mounted, dom]);
 };

package/styles/diff-view-pure.css

@@ -50,9 +50,6 @@
 .diff-tailwindcss-wrapper .top-0 {
   top: 0px;
 }
-.diff-tailwindcss-wrapper .top-\[1px\] {
-  top: 1px;
-}
 .diff-tailwindcss-wrapper .top-\[50\%\] {
   top: 50%;
 }

package/styles/diff-view.css

@@ -556,9 +556,6 @@ video {
 .diff-tailwindcss-wrapper .top-0 {
   top: 0px;
 }
-.diff-tailwindcss-wrapper .top-\[1px\] {
-  top: 1px;
-}
 .diff-tailwindcss-wrapper .top-\[50\%\] {
   top: 50%;
 }