@git-diff-view/react 0.0.30 → 0.0.32

package/dist/css/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%;
 }
@@ -155,6 +152,9 @@
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.diff-tailwindcss-wrapper .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .diff-tailwindcss-wrapper .cursor-pointer {
   cursor: pointer;
 }
@@ -247,9 +247,6 @@
 .diff-tailwindcss-wrapper .text-\[1\.2em\] {
   font-size: 1.2em;
 }
-.diff-tailwindcss-wrapper .leading-\[1\.4\] {
-  line-height: 1.4;
-}
 .diff-tailwindcss-wrapper .leading-\[1\.6\] {
   line-height: 1.6;
 }
@@ -260,9 +257,6 @@
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;
 }
-.diff-tailwindcss-wrapper .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .diff-tailwindcss-wrapper .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -335,6 +329,9 @@
   border-width: 0px;
   text-align: left;
 }
+.diff-tailwindcss-wrapper td {
+  padding: 0;
+}
 .diff-tailwindcss-wrapper .diff-line-old-num,
 .diff-tailwindcss-wrapper .diff-line-new-num,
 .diff-tailwindcss-wrapper .diff-line-num {

package/dist/css/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%;
 }
@@ -661,6 +658,9 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.diff-tailwindcss-wrapper .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .diff-tailwindcss-wrapper .cursor-pointer {
   cursor: pointer;
 }
@@ -753,9 +753,6 @@ video {
 .diff-tailwindcss-wrapper .text-\[1\.2em\] {
   font-size: 1.2em;
 }
-.diff-tailwindcss-wrapper .leading-\[1\.4\] {
-  line-height: 1.4;
-}
 .diff-tailwindcss-wrapper .leading-\[1\.6\] {
   line-height: 1.6;
 }
@@ -766,9 +763,6 @@ video {
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;
 }
-.diff-tailwindcss-wrapper .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .diff-tailwindcss-wrapper .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -841,6 +835,9 @@ video {
   border-width: 0px;
   text-align: left;
 }
+.diff-tailwindcss-wrapper td {
+  padding: 0;
+}
 .diff-tailwindcss-wrapper .diff-line-old-num,
 .diff-tailwindcss-wrapper .diff-line-new-num,
 .diff-tailwindcss-wrapper .diff-line-num {

package/dist/esm/index.mjs

@@ -186,6 +186,16 @@ const syncScroll = (left, right) => {
         right.onscroll = null;
     };
 };
+const getElementRoot = (element) => {
+    if (element) {
+        const root = element.getRootNode();
+        if (root instanceof ShadowRoot) {
+            return root;
+        }
+        return element.ownerDocument;
+    }
+    return document;
+};
 
 const diffFontSizeName = "--diff-font-size--";
 const diffAsideWidthName = "--diff-aside-width--";
@@ -271,6 +281,7 @@ const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpen
             (className ? " " + className : ""), style: {
             width: `calc(var(${diffFontSizeName}) * 1.4)`,
             height: `calc(var(${diffFontSizeName}) * 1.4)`,
+            top: `calc(var(${diffFontSizeName}) * 0.1)`,
         } },
         React.createElement("button", { className: "diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]", style: {
                 color: `var(${addWidgetColorName})`,
@@ -281,9 +292,10 @@ const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpen
             } }, "+")));
 };
 const DiffUnifiedAddWidget = ({ lineNumber, side, onWidgetClick, onOpenAddWidget, }) => {
-    return (React.createElement("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", style: {
+    return (React.createElement("div", { 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)`,
         } },
         React.createElement("button", { className: "diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]", style: {
                 color: `var(${addWidgetColorName})`,
@@ -519,10 +531,15 @@ const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, enableAddWi
 const useDomWidth = ({ selector, enable }) => {
     const [width, setWidth] = useState(0);
     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);
+            const container = rootDocument.querySelector(`#diff-root${id}`);
             const wrapper = container === null || container === void 0 ? void 0 : container.querySelector(selector);
             if (!wrapper)
                 return;
@@ -555,16 +572,21 @@ const useDomWidth = ({ selector, enable }) => {
             typedWrapper.setAttribute("data-observe", "height");
             return () => cleanCb();
         }
-    }, [selector, enable, id, mounted]);
+    }, [selector, enable, id, mounted, dom]);
     return width;
 };
 
 const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
     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);
+            const container = rootDocument.querySelector(`#diff-root${id}`);
             const elements = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(selector)) || []);
             const wrappers = wrapper ? Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(wrapper)) || []) : elements;
             if (elements.length === 2 && wrappers.length === 2) {
@@ -609,7 +631,7 @@ const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
                 return () => cleanCb();
             }
         }
-    }, [selector, enable, side, id, wrapper, mounted]);
+    }, [selector, enable, side, id, wrapper, mounted, dom]);
 };
 
 const InternalDiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend, side, lineNumber, }) => {
@@ -848,7 +870,7 @@ const DiffSplitViewTable = ({ side, diffFile, enableAddWidget, enableHighlight,
                 React.createElement("th", { scope: "col" },
                     SplitSide[side],
                     " line content"))),
-        React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
+        React.createElement("tbody", { className: "diff-table-body leading-[1.6]", onMouseDownCapture: onMouseDown },
             lines.map((line) => (React.createElement(Fragment, { key: line.index },
                 React.createElement(DiffSplitHunkLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
                 React.createElement(DiffSplitContentLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }),
@@ -972,7 +994,10 @@ const InternalDiffSplitLine = ({ index, diffFile, lineNumber, enableAddWidget, e
     const newLineNumberBG = getLineNumberBG(newLineIsAdded, false, hasDiff);
     return (React.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff ? "diff" : "plain", className: "diff-line" },
         hasOldLine ? (React.createElement(React.Fragment, null,
-            React.createElement("td", { className: "diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` } },
+            React.createElement("td", { className: "diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.old], style: {
+                    backgroundColor: oldLineNumberBG,
+                    color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+                } },
                 hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] z-[1] translate-x-[-50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
                 React.createElement("span", { "data-line-num": oldLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, oldLine.lineNumber)),
             React.createElement("td", { className: "diff-line-old-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: oldLineContentBG } },
@@ -1282,7 +1307,7 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
                         React.createElement("th", { scope: "col" }, "old line content"),
                         React.createElement("th", { scope: "col" }, "new line number"),
                         React.createElement("th", { scope: "col" }, "new line content"))),
-                React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
+                React.createElement("tbody", { className: "diff-table-body leading-[1.6]", onMouseDownCapture: onMouseDown },
                     lines.map((line) => (React.createElement(Fragment, { key: line.index },
                         React.createElement(DiffSplitHunkLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
                         React.createElement(DiffSplitContentLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }),
@@ -1295,6 +1320,8 @@ DiffSplitViewWrap.displayName = "DiffSplitViewWrap";
 const createDiffConfigStore = (props, diffFileId) => {
     return createStore(() => {
         var _a, _b;
+        const dom = ref();
+        const setDom = (_dom) => (dom.value = _dom);
         const id = ref(diffFileId);
         const setId = (_id) => (id.value = _id);
         const mode = ref(props.diffViewMode);
@@ -1347,6 +1374,8 @@ const createDiffConfigStore = (props, diffFileId) => {
         return {
             id,
             setId,
+            dom,
+            setDom,
             mode,
             setMode,
             mounted,
@@ -1502,20 +1531,21 @@ const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, enableWrap, enabl
     return (React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }));
 };
 
-const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
+const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, enableWrap, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     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;
     return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
         React.createElement("td", { className: "diff-line-extend-content p-0 align-top", colSpan: 2 },
             React.createElement("div", { className: "diff-line-extend-wrapper sticky left-0 z-[1]", style: { width } },
-                width > 0 &&
+                (enableWrap ? true : width > 0) &&
                     (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== undefined &&
                     (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== null &&
                     (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
@@ -1525,7 +1555,7 @@ const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExt
                         data: oldLineExtend.data,
                         onUpdate: diffFile.notifyAll,
                     })),
-                width > 0 &&
+                (enableWrap ? true : width > 0) &&
                     (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== undefined &&
                     (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== null &&
                     (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
@@ -1536,7 +1566,7 @@ const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExt
                         onUpdate: diffFile.notifyAll,
                     }))))));
 };
-const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, }) => {
+const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, enableWrap, }) => {
     const { useDiffContext } = useDiffViewContext();
     const unifiedItem = diffFile.getUnifiedLine(index);
     const { oldLineExtend, newLineExtend } = useDiffContext(useCallback((s) => {
@@ -1549,7 +1579,7 @@ const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, }) => {
     const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
     if (!hasExtend || !unifiedItem || unifiedItem.isHidden)
         return null;
-    return (React.createElement(InternalDiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (React.createElement(InternalDiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const InternalDiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
@@ -1597,7 +1627,7 @@ const DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     return React.createElement(InternalDiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, enableWrap, }) => {
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const unifiedItem = diffFile.getUnifiedLine(index);
@@ -1611,21 +1641,21 @@ const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
     const width = useDomWidth({
         selector: ".unified-diff-table-wrapper",
-        enable: typeof renderWidgetLine === "function",
+        enable: typeof renderWidgetLine === "function" && !enableWrap,
     });
     if (!renderWidgetLine)
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
         React.createElement("td", { className: "diff-line-widget-content p-0", colSpan: 2 },
             React.createElement("div", { className: "diff-line-widget-wrapper sticky left-0 z-[1]", style: { width } },
-                width > 0 &&
+                (enableWrap ? true : width > 0) &&
                     oldWidget &&
                     (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })),
-                width > 0 &&
+                (enableWrap ? true : width > 0) &&
                     newWidget &&
                     (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.new, lineNumber: unifiedItem.newLineNumber, onClose }))))));
 };
-const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
+const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, enableWrap, }) => {
     const { useWidget } = useDiffWidgetContext();
     const currentIsShow = useWidget.useShallowSelector(React.useCallback((s) => {
         const widgetLineNumber = s.widgetLineNumber;
@@ -1638,7 +1668,7 @@ const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(InternalDiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React.createElement(InternalDiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap }));
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -1731,12 +1761,12 @@ const DiffUnifiedView = memo(({ diffFile }) => {
                         React.createElement("tr", null,
                             React.createElement("th", { scope: "col" }, "line number"),
                             React.createElement("th", { scope: "col" }, "line content"))),
-                    React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
+                    React.createElement("tbody", { className: "diff-table-body leading-[1.6]", onMouseDownCapture: onMouseDown },
                         lines.map((item) => (React.createElement(Fragment, { key: item.index },
                             React.createElement(DiffUnifiedHunkLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
                             React.createElement(DiffUnifiedContentLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }),
-                            React.createElement(DiffUnifiedWidgetLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
-                            React.createElement(DiffUnifiedExtendLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile })))),
+                            React.createElement(DiffUnifiedWidgetLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: enableWrap }),
+                            React.createElement(DiffUnifiedExtendLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: enableWrap })))),
                         React.createElement(DiffUnifiedHunkLine, { index: diffFile.unifiedLineLength, lineNumber: diffFile.unifiedLineLength, diffFile: diffFile })))))));
 });
 DiffUnifiedView.displayName = "DiffUnifiedView";
@@ -1802,9 +1832,12 @@ const InternalDiffView = (props) => {
         onAddWidgetClick,
         onCreateUseWidgetHook,
     ]);
+    useEffect(() => {
+        useDiffContext.getReadonlyState().setDom(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    }, [useDiffContext, wrapperRef]);
     const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
     return (React.createElement(DiffViewContext.Provider, { value: value },
-        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.30", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
+        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.32", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -1858,9 +1891,9 @@ const DiffViewWithRef = (props, ref) => {
             return;
         if (props.diffViewHighlight) {
             diffFile.initSyntax({ registerHighlighter });
-            diffFile.notifyAll();
         }
-    }, [diffFile, props.diffViewHighlight, registerHighlighter]);
+        diffFile.notifyAll();
+    }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
     useEffect(() => {
         if (!diffFile)
             return;
@@ -1872,7 +1905,7 @@ const DiffViewWithRef = (props, ref) => {
         init();
         const cb = diffFile.subscribe(init);
         return cb;
-    }, [diffFile, diffViewTheme]);
+    }, [diffFile]);
     // fix react strict mode error
     useUnmount(() => { var _a, _b; return (process.env.NODE_ENV === "development" ? (_a = diffFile === null || diffFile === void 0 ? void 0 : diffFile._destroy) === null || _a === void 0 ? void 0 : _a.call(diffFile) : (_b = diffFile === null || diffFile === void 0 ? void 0 : diffFile.clear) === null || _b === void 0 ? void 0 : _b.call(diffFile)); }, [diffFile]);
     useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
@@ -1883,7 +1916,7 @@ const DiffViewWithRef = (props, ref) => {
 const InnerDiffView = forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.30";
+const version = "0.0.32";
 
 export { DiffModeEnum, DiffView, version };
 //# sourceMappingURL=index.mjs.map