@git-diff-view/react 0.0.26 → 0.0.27

package/dist/esm/index.mjs

@@ -1,10 +1,10 @@
 'use client';
-import { NewLineSymbol, DiffLineType, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile } from '@git-diff-view/core';
+import { NewLineSymbol, DiffLineType, getSyntaxDiffTemplate, getSyntaxLineTemplate, getPlainDiffTemplate, getPlainLineTemplate, SplitSide, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile } from '@git-diff-view/core';
 export * from '@git-diff-view/core';
+export { SplitSide } from '@git-diff-view/core';
 import * as React from 'react';
 import { useState, useEffect, useRef, useLayoutEffect, createContext, useContext, memo, Fragment, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
-import { flushSync } from 'react-dom';
 import { createStore, ref } from 'reactivity-store';
 
 /******************************************************************************
@@ -126,7 +126,9 @@ const delLineNumberBGName = "--diff-del-lineNumber--";
 const plainContentBGName = "--diff-plain-content--";
 const expandContentBGName = "--diff-expand-content--";
 const plainLineNumberColorName = "--diff-plain-lineNumber-color--";
+const expandLineNumberColorName = "--diff-expand-lineNumber-color--";
 const plainLineNumberBGName = "--diff-plain-lineNumber--";
+const expandLineNumberBGName = "--diff-expand-lineNumber--";
 const hunkContentBGName = "--diff-hunk-content--";
 const hunkContentColorName = "--diff-hunk-content-color--";
 const hunkLineNumberBGName = "--diff-hunk-lineNumber--";
@@ -151,7 +153,7 @@ const getLineNumberBG = (isAdded, isDelete, hasDiff) => {
             ? `var(${delLineNumberBGName})`
             : hasDiff
                 ? `var(${plainLineNumberBGName})`
-                : `var(${expandContentBGName})`;
+                : `var(${expandLineNumberBGName})`;
 };
 
 const removeAllSelection = () => {
@@ -280,6 +282,7 @@ const DiffNoNewLine = () => {
         React.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z" })));
 };
 
+/* eslint-disable max-lines */
 const temp = {};
 const formatStringToCamelCase = (str) => {
     if (str.startsWith("--"))
@@ -306,30 +309,52 @@ const getStyleObjectFromString = memoFunc((str) => {
     });
     return style;
 });
-const DiffString = ({ rawLine, diffLine, operator, enableWrap, }) => {
+const DiffString = ({ rawLine, diffLine, operator, plainLine, enableWrap, }) => {
     const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
-        const range = changes.range;
-        const str1 = rawLine.slice(0, range.location);
-        const str2 = rawLine.slice(range.location, range.location + range.length);
-        const str3 = rawLine.slice(range.location + range.length);
-        const isLast = str2.includes("\n");
-        const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
         const isNewLineSymbolChanged = changes.newLineSymbol;
+        if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) && typeof getPlainDiffTemplate === "function") {
+            getPlainDiffTemplate({ diffLine, rawLine, operator });
+        }
+        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) {
+            return (React.createElement("span", { className: "diff-line-content-raw" },
+                React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.plainTemplate } }),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
+                        width: `var(${diffFontSizeName})`,
+                        height: `var(${diffFontSizeName})`,
+                    } },
+                    React.createElement(DiffNoNewLine, null)))));
+        }
+        else {
+            // TODO remove
+            const range = changes.range;
+            const str1 = rawLine.slice(0, range.location);
+            const str2 = rawLine.slice(range.location, range.location + range.length);
+            const str3 = rawLine.slice(range.location + range.length);
+            const isLast = str2.includes("\n");
+            const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
+            return (React.createElement("span", { className: "diff-line-content-raw" },
+                React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
+                    str1,
+                    React.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
+                            backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
+                        } }, isLast ? (React.createElement(React.Fragment, null,
+                        _str2,
+                        React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
+                    str3),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
+                        width: `var(${diffFontSizeName})`,
+                        height: `var(${diffFontSizeName})`,
+                    } },
+                    React.createElement(DiffNoNewLine, null)))));
+        }
+    }
+    if (plainLine && !(plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
+        plainLine.template = getPlainLineTemplate(plainLine.value);
+    }
+    if (plainLine === null || plainLine === void 0 ? void 0 : plainLine.template) {
         return (React.createElement("span", { className: "diff-line-content-raw" },
-            React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
-                str1,
-                React.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
-                        backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                    } }, isLast ? (React.createElement(React.Fragment, null,
-                    _str2,
-                    React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
-                str3),
-            isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
-                    width: `var(${diffFontSizeName})`,
-                    height: `var(${diffFontSizeName})`,
-                } },
-                React.createElement(DiffNoNewLine, null)))));
+            React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: plainLine.template } })));
     }
     return React.createElement("span", { className: "diff-line-content-raw" }, rawLine);
 };
@@ -341,49 +366,73 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, }) =>
     const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
         const isNewLineSymbolChanged = changes.newLineSymbol;
-        const range = changes.range;
+        if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) && typeof getSyntaxDiffTemplate === "function") {
+            getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
+        }
+        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) {
+            return (React.createElement("span", { className: "diff-line-syntax-raw" },
+                React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.syntaxTemplate } }),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
+                        width: `var(${diffFontSizeName})`,
+                        height: `var(${diffFontSizeName})`,
+                    } },
+                    React.createElement(DiffNoNewLine, null)))));
+        }
+        else {
+            // TODO remove
+            const range = changes.range;
+            return (React.createElement("span", { className: "diff-line-syntax-raw" },
+                React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length }, (_a = syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    if (node.endIndex < range.location || range.location + range.length < node.startIndex) {
+                        return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
+                    }
+                    else {
+                        const index1 = range.location - node.startIndex;
+                        const index2 = index1 < 0 ? 0 : index1;
+                        const str1 = node.value.slice(0, index2);
+                        const str2 = node.value.slice(index2, index1 + range.length);
+                        const str3 = node.value.slice(index1 + range.length);
+                        const isStart = str1.length || range.location === node.startIndex;
+                        const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
+                        const isLast = str2.includes("\n");
+                        const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
+                        return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_e = (_d = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _d === void 0 ? void 0 : _d.className) === null || _e === void 0 ? void 0 : _e.join(" "), style: getStyleObjectFromString(((_f = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _f === void 0 ? void 0 : _f.style) || "") },
+                            str1,
+                            React.createElement("span", { "data-diff-highlight": true, style: {
+                                    backgroundColor: operator === "add"
+                                        ? `var(${addContentHighlightBGName})`
+                                        : `var(${delContentHighlightBGName})`,
+                                    borderTopLeftRadius: isStart ? "0.2em" : undefined,
+                                    borderBottomLeftRadius: isStart ? "0.2em" : undefined,
+                                    borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
+                                    borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
+                                } }, isLast ? (React.createElement(React.Fragment, null,
+                                _str2,
+                                React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
+                            str3));
+                    }
+                })),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
+                        width: `var(${diffFontSizeName})`,
+                        height: `var(${diffFontSizeName})`,
+                    } },
+                    React.createElement(DiffNoNewLine, null)))));
+        }
+    }
+    if (!syntaxLine.template) {
+        syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
+    }
+    if (syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.template) {
         return (React.createElement("span", { className: "diff-line-syntax-raw" },
-            React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length }, (_a = syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
-                var _a, _b, _c, _d, _e, _f;
-                if (node.endIndex < range.location || range.location + range.length < node.startIndex) {
-                    return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
-                }
-                else {
-                    const index1 = range.location - node.startIndex;
-                    const index2 = index1 < 0 ? 0 : index1;
-                    const str1 = node.value.slice(0, index2);
-                    const str2 = node.value.slice(index2, index1 + range.length);
-                    const str3 = node.value.slice(index1 + range.length);
-                    const isStart = str1.length || range.location === node.startIndex;
-                    const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
-                    const isLast = str2.includes("\n");
-                    const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
-                    return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_e = (_d = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _d === void 0 ? void 0 : _d.className) === null || _e === void 0 ? void 0 : _e.join(" "), style: getStyleObjectFromString(((_f = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _f === void 0 ? void 0 : _f.style) || "") },
-                        str1,
-                        React.createElement("span", { "data-diff-highlight": true, style: {
-                                backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                                borderTopLeftRadius: isStart ? "0.2em" : undefined,
-                                borderBottomLeftRadius: isStart ? "0.2em" : undefined,
-                                borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                                borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                            } }, isLast ? (React.createElement(React.Fragment, null,
-                            _str2,
-                            React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
-                        str3));
-                }
-            })),
-            isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
-                    width: `var(${diffFontSizeName})`,
-                    height: `var(${diffFontSizeName})`,
-                } },
-                React.createElement(DiffNoNewLine, null)))));
+            React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: syntaxLine.template } })));
     }
     return (React.createElement("span", { className: "diff-line-syntax-raw" }, (_b = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _b === void 0 ? void 0 : _b.map(({ node, wrapper }, index) => {
         var _a, _b, _c;
         return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
     })));
 };
-const DiffContent = ({ diffLine, rawLine, syntaxLine, enableWrap, enableHighlight, }) => {
+const DiffContent = ({ diffLine, rawLine, plainLine, syntaxLine, enableWrap, enableHighlight, }) => {
     var _a;
     const isAdded = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Add;
     const isDelete = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Delete;
@@ -395,7 +444,7 @@ const DiffContent = ({ diffLine, rawLine, syntaxLine, enableWrap, enableHighligh
             wordBreak: enableWrap ? "break-all" : "initial",
         } },
         React.createElement("span", { "data-operator": isAdded ? "+" : isDelete ? "-" : undefined, className: "diff-line-content-operator ml-[-1.5em] inline-block w-[1.5em] select-none indent-[0.2em]" }, isAdded ? "+" : isDelete ? "-" : " "),
-        enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, enableWrap: enableWrap }))));
+        enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, enableWrap: enableWrap }))));
 };
 
 const DiffViewContext = createContext(null);
@@ -406,9 +455,10 @@ const DiffWidgetContext = createContext(null);
 DiffWidgetContext.displayName = "DiffWidgetContext";
 const useDiffWidgetContext = () => useContext(DiffWidgetContext);
 
-const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
+const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, enableAddWidget, enableHighlight, }) => {
     var _a, _b;
     const getCurrentSyntaxLine = side === SplitSide.old ? diffFile.getOldSyntaxLine : diffFile.getNewSyntaxLine;
+    const getCurrentPlainLine = side === SplitSide.old ? diffFile.getOldPlainLine : diffFile.getNewPlainLine;
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const currentLine = side === SplitSide.old ? oldLine : newLine;
@@ -418,20 +468,17 @@ const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     const isAdded = ((_a = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _a === void 0 ? void 0 : _a.type) === DiffLineType.Add;
     const isDelete = ((_b = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _b === void 0 ? void 0 : _b.type) === DiffLineType.Delete;
     const { useDiffContext } = useDiffViewContext();
-    const { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
-        enableHighlight: s.enableHighlight,
-        enableAddWidget: s.enableAddWidget,
-        onAddWidgetClick: s.onAddWidgetClick,
-    }));
+    const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const contentBG = getContentBG(isAdded, isDelete, hasDiff);
     const lineNumberBG = getLineNumberBG(isAdded, isDelete, hasDiff);
     const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
+    const plainLine = getCurrentPlainLine(currentLine.lineNumber);
     return (React.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff || !hasContent ? "diff" : "plain", "data-side": SplitSide[side], className: "diff-line" + (hasContent ? " group" : "") }, hasContent ? (React.createElement(React.Fragment, null,
         React.createElement("td", { className: `diff-line-${SplitSide[side]}-num sticky left-0 w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`, style: {
                 backgroundColor: lineNumberBG,
-                color: `var(${plainLineNumberColorName})`,
+                color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
                 width: `var(${diffAsideWidthName})`,
                 minWidth: `var(${diffAsideWidthName})`,
                 maxWidth: `var(${diffAsideWidthName})`,
@@ -439,15 +486,15 @@ const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
             hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: currentLine.lineNumber, side: side, 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": currentLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, currentLine.lineNumber)),
         React.createElement("td", { className: `diff-line-${SplitSide[side]}-content pr-[10px] align-top`, style: { backgroundColor: contentBG } },
-            React.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: currentLine.value, diffLine: currentLine.diff, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: `diff-line-${SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            React.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: currentLine.value, diffLine: currentLine.diff, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: `diff-line-${SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("span", null, "\u2002")))));
 };
-const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, }) => {
+const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, enableAddWidget, enableHighlight, }) => {
     const getCurrentLine = side === SplitSide.old ? diffFile.getSplitLeftLine : diffFile.getSplitRightLine;
     const currentLine = getCurrentLine(index);
     if (currentLine === null || currentLine === void 0 ? void 0 : currentLine.isHidden)
         return null;
-    return React.createElement(InternalDiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side });
+    return (React.createElement(InternalDiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
 };
 
 const useDomWidth = ({ selector, enable }) => {
@@ -578,7 +625,7 @@ const InternalDiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLine
     if (!renderExtendLine)
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": SplitSide[side], className: "diff-line diff-line-extend" }, currentSideHasExtend ? (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-content p-0`, colSpan: 2 },
-        React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side], className: "diff-line-extend-wrapper sticky left-0", style: { width } }, width > 0 && currentExtendRendered))) : (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+        React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side], className: "diff-line-extend-wrapper sticky left-0 z-[1]", style: { width } }, width > 0 && currentExtendRendered))) : (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side] })))));
 };
 const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
@@ -745,7 +792,7 @@ const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) =
     if (!renderWidgetLine)
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": SplitSide[side], className: "diff-line diff-line-widget" }, currentHasWidget ? (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-content p-0`, colSpan: 2 },
-        React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side], className: "diff-line-widget-wrapper sticky left-0", style: { width } }, width > 0 && currentWidgetRendered))) : (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+        React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side], className: "diff-line-widget-wrapper sticky left-0 z-[1]", style: { width } }, width > 0 && currentWidgetRendered))) : (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side] })))));
 };
 // TODO! improve performance
@@ -767,15 +814,7 @@ const DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-const onMouseDown$1 = (e) => {
-    const ele = e.target;
-    // need remove all the selection
-    if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
-        removeAllSelection();
-        return;
-    }
-};
-const DiffSplitViewTable = ({ side, diffFile }) => {
+const DiffSplitViewTable = ({ side, diffFile, enableAddWidget, enableHighlight, onMouseDown, }) => {
     const className = side === SplitSide.new ? "new-diff-table" : "old-diff-table";
     const lines = getSplitContentLines(diffFile);
     return (React.createElement("table", { className: className + " w-full border-collapse border-spacing-0", "data-mode": SplitSide[side] },
@@ -790,10 +829,10 @@ const DiffSplitViewTable = ({ side, diffFile }) => {
                 React.createElement("th", { scope: "col" },
                     SplitSide[side],
                     " line content"))),
-        React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown$1 },
+        React.createElement("tbody", { className: "diff-table-body leading-[1.4]", 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 }),
+                React.createElement(DiffSplitContentLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }),
                 React.createElement(DiffSplitWidgetLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
                 React.createElement(DiffSplitExtendLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile })))),
             React.createElement(DiffSplitHunkLine$1, { side: side, index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))));
@@ -801,9 +840,14 @@ const DiffSplitViewTable = ({ side, diffFile }) => {
 const DiffSplitViewNormal = memo(({ diffFile }) => {
     const ref1 = useRef(null);
     const ref2 = useRef(null);
+    const ref = useRef();
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
-    const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
+    const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
+        fontSize: s.fontSize,
+        enableAddWidget: s.enableAddWidget,
+        enableHighlight: s.enableHighlight,
+    }));
     useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
     useEffect(() => {
         const left = ref1.current;
@@ -818,7 +862,46 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
         font,
     });
     const width = Math.max(40, _width + 25);
+    const setStyle = (side) => {
+        if (!ref.current)
+            return;
+        if (!side) {
+            ref.current.textContent = "";
+        }
+        else {
+            const id = `diff-root${diffFile.getId()}`;
+            ref.current.textContent = `#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+        }
+    };
+    const onMouseDown = (e) => {
+        let ele = e.target;
+        // need remove all the selection
+        if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
+            removeAllSelection();
+            return;
+        }
+        while (ele && ele instanceof HTMLElement) {
+            const state = ele.getAttribute("data-state");
+            const side = ele.getAttribute("data-side");
+            if (side) {
+                setStyle(SplitSide[side]);
+                removeAllSelection();
+            }
+            if (state) {
+                if (state === "extend" || state === "hunk" || state === "widget") {
+                    setStyle(undefined);
+                    removeAllSelection();
+                    return;
+                }
+                else {
+                    return;
+                }
+            }
+            ele = ele.parentElement;
+        }
+    };
     return (React.createElement("div", { className: "split-diff-view split-diff-view-normal flex w-full basis-[50%]" },
+        React.createElement("style", { "data-select-style": true, ref: ref }),
         React.createElement("div", { className: "old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref1, style: {
                 // @ts-ignore
                 [diffAsideWidthName]: `${Math.round(width)}px`,
@@ -826,7 +909,7 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: `var(${diffFontSizeName})`,
             } },
-            React.createElement(DiffSplitViewTable, { side: SplitSide.old, diffFile: diffFile })),
+            React.createElement(DiffSplitViewTable, { side: SplitSide.old, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight, onMouseDown: onMouseDown })),
         React.createElement("div", { className: "diff-split-line w-[1.5px]", style: { backgroundColor: `var(${borderColorName})` } }),
         React.createElement("div", { className: "new-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref2, style: {
                 // @ts-ignore
@@ -835,26 +918,24 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: `var(${diffFontSizeName})`,
             } },
-            React.createElement(DiffSplitViewTable, { side: SplitSide.new, diffFile: diffFile }))));
+            React.createElement(DiffSplitViewTable, { side: SplitSide.new, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight, onMouseDown: onMouseDown }))));
 });
 DiffSplitViewNormal.displayName = "DiffSplitViewNormal";
 
-const InternalDiffSplitLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffSplitLine = ({ index, diffFile, lineNumber, enableAddWidget, enableHighlight, }) => {
     var _a, _b;
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber);
+    const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber);
     const newSyntaxLine = diffFile.getNewSyntaxLine(newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber);
+    const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber);
     const hasDiff = !!(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || !!(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
     const hasChange = checkDiffLineIncludeChange(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || checkDiffLineIncludeChange(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
     const oldLineIsDelete = ((_a = oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) === null || _a === void 0 ? void 0 : _a.type) === DiffLineType.Delete;
     const newLineIsAdded = ((_b = newLine === null || newLine === void 0 ? void 0 : newLine.diff) === null || _b === void 0 ? void 0 : _b.type) === DiffLineType.Add;
     const { useDiffContext } = useDiffViewContext();
-    const { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
-        enableHighlight: s.enableHighlight,
-        enableAddWidget: s.enableAddWidget,
-        onAddWidgetClick: s.onAddWidgetClick,
-    }));
+    const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const hasOldLine = !!oldLine.lineNumber;
@@ -870,12 +951,12 @@ const InternalDiffSplitLine = ({ index, diffFile, lineNumber, }) => {
                 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 } },
                 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 right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, plainLine: oldPlainLine, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React.createElement("span", null, "\u2002"))),
         hasNewLine ? (React.createElement(React.Fragment, null,
             React.createElement("td", { className: "diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.new], style: {
                     backgroundColor: newLineNumberBG,
-                    color: `var(${plainLineNumberColorName})`,
+                    color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
                     borderLeftColor: `var(${borderColorName})`,
                     borderLeftStyle: "solid",
                 } },
@@ -883,19 +964,19 @@ const InternalDiffSplitLine = ({ index, diffFile, lineNumber, }) => {
                 React.createElement("span", { "data-line-num": newLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, newLine.lineNumber)),
             React.createElement("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.new], style: { backgroundColor: newLineContentBG } },
                 hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: {
+                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, plainLine: newPlainLine, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: {
                 backgroundColor: `var(${emptyBGName})`,
                 borderLeftColor: `var(${borderColorName})`,
                 borderLeftStyle: "solid",
             }, "data-side": SplitSide[SplitSide.new], colSpan: 2 },
             React.createElement("span", null, "\u2002")))));
 };
-const DiffSplitContentLine = ({ index, diffFile, lineNumber, }) => {
+const DiffSplitContentLine = ({ index, diffFile, lineNumber, enableAddWidget, enableHighlight, }) => {
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     if ((oldLine === null || oldLine === void 0 ? void 0 : oldLine.isHidden) && (newLine === null || newLine === void 0 ? void 0 : newLine.isHidden))
         return null;
-    return React.createElement(InternalDiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React.createElement(InternalDiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
 };
 
 const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
@@ -924,13 +1005,13 @@ const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExten
         }));
     return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
         oldExtendRendered ? (React.createElement("td", { className: "diff-line-extend-old-content p-0", colSpan: 2 },
-            React.createElement("div", { className: "diff-line-extend-wrapper" }, oldExtendRendered))) : (React.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newExtendRendered && React.createElement("span", null, "\u2002"))),
+            React.createElement("div", { className: "diff-line-extend-wrapper" }, oldExtendRendered))) : (React.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 })),
         newExtendRendered ? (React.createElement("td", { className: "diff-line-extend-new-content border-l-[1px] p-0", style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" }, colSpan: 2 },
             React.createElement("div", { className: "diff-line-extend-wrapper" }, newExtendRendered))) : (React.createElement("td", { className: "diff-line-extend-new-placeholder select-none border-l-[1px] p-0", style: {
                 backgroundColor: `var(${emptyBGName})`,
                 borderLeftColor: `var(${borderColorName})`,
                 borderLeftStyle: "solid",
-            }, colSpan: 2 }, oldExtendRendered && React.createElement("span", null, "\u2002")))));
+            }, colSpan: 2 }))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -1065,13 +1146,13 @@ const InternalDiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
         oldWidgetRendered ? (React.createElement("td", { className: "diff-line-widget-old-content p-0", colSpan: 2 },
-            React.createElement("div", { className: "diff-line-widget-wrapper" }, oldWidgetRendered))) : (React.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newWidgetRendered && React.createElement("span", null, "\u2002"))),
+            React.createElement("div", { className: "diff-line-widget-wrapper" }, oldWidgetRendered))) : (React.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 })),
         newWidgetRendered ? (React.createElement("td", { className: "diff-line-widget-new-content border-l-[1px] p-0", colSpan: 2, style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" } },
             React.createElement("div", { className: "diff-line-widget-wrapper" }, newWidgetRendered))) : (React.createElement("td", { className: "diff-line-widget-new-placeholder select-none border-l-[1px] p-0", style: {
                 backgroundColor: `var(${emptyBGName})`,
                 borderLeftColor: `var(${borderColorName})`,
                 borderLeftStyle: "solid",
-            }, colSpan: 2 }, oldWidgetRendered && React.createElement("span", null, "\u2002")))));
+            }, colSpan: 2 }))));
 };
 // TODO! improve performance
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
@@ -1091,6 +1172,93 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     return React.createElement(InternalDiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const DiffSplitViewWrap = memo(({ diffFile }) => {
+    const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
+    const { useDiffContext } = useDiffViewContext();
+    const ref = useRef(null);
+    const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
+        fontSize: s.fontSize,
+        enableAddWidget: s.enableAddWidget,
+        enableHighlight: s.enableHighlight,
+    }));
+    useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
+    const font = useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]);
+    const _width = useTextWidth({
+        text: splitLineLength.toString(),
+        font,
+    });
+    const width = Math.max(40, _width + 25);
+    const lines = getSplitContentLines(diffFile);
+    const setStyle = (side) => {
+        if (!ref.current)
+            return;
+        if (!side) {
+            ref.current.textContent = "";
+        }
+        else {
+            const id = `diff-root${diffFile.getId()}`;
+            const targetSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
+            ref.current.textContent = `#${id} [data-side="${SplitSide[targetSide]}"] {user-select: none} \n#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+        }
+    };
+    const onMouseDown = (e) => {
+        let ele = e.target;
+        // need remove all the selection
+        if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
+            removeAllSelection();
+            return;
+        }
+        while (ele && ele instanceof HTMLElement) {
+            const state = ele.getAttribute("data-state");
+            const side = ele.getAttribute("data-side");
+            if (side) {
+                setStyle(SplitSide[side]);
+                removeAllSelection();
+            }
+            if (state) {
+                if (state === "extend" || state === "hunk" || state === "widget") {
+                    setStyle(undefined);
+                    removeAllSelection();
+                    return;
+                }
+                else {
+                    return;
+                }
+            }
+            ele = ele.parentElement;
+        }
+    };
+    return (React.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full" },
+        React.createElement("div", { className: "diff-table-wrapper w-full", style: {
+                // @ts-ignore
+                [diffAsideWidthName]: `${Math.round(width)}px`,
+                fontFamily: "Menlo, Consolas, monospace",
+                fontSize: `var(${diffFontSizeName})`,
+            } },
+            React.createElement("style", { "data-select-style": true, ref: ref }),
+            React.createElement("table", { className: "diff-table w-full table-fixed border-collapse border-spacing-0" },
+                React.createElement("colgroup", null,
+                    React.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) }),
+                    React.createElement("col", { className: "diff-table-old-content-col" }),
+                    React.createElement("col", { className: "diff-table-new-num-col", width: Math.round(width) }),
+                    React.createElement("col", { className: "diff-table-new-content-col" })),
+                React.createElement("thead", { className: "hidden" },
+                    React.createElement("tr", null,
+                        React.createElement("th", { scope: "col" }, "old line number"),
+                        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 },
+                    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 }),
+                        React.createElement(DiffSplitWidgetLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
+                        React.createElement(DiffSplitExtendLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile })))),
+                    React.createElement(DiffSplitHunkLine, { index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))))));
+});
+DiffSplitViewWrap.displayName = "DiffSplitViewWrap";
+
 const createDiffConfigStore = (props, diffFileId) => {
     return createStore(() => {
         var _a, _b;
@@ -1138,6 +1306,8 @@ const createDiffConfigStore = (props, diffFileId) => {
         const setRenderWidgetLine = (_renderWidgetLine) => (renderWidgetLine.value = _renderWidgetLine);
         const renderExtendLine = ref(props.renderExtendLine);
         const setRenderExtendLine = (_renderExtendLine) => (renderExtendLine.value = _renderExtendLine);
+        const onCreateUseWidgetHook = ref(props.onCreateUseWidgetHook);
+        const setOnCreateUseWidgetHook = (_onCreateUseWidgetHook) => (onCreateUseWidgetHook.value = _onCreateUseWidgetHook);
         // 避免无意义的订阅
         const onAddWidgetClick = { current: props.onAddWidgetClick };
         const setOnAddWidgetClick = (_onAddWidgetClick) => (onAddWidgetClick.current = _onAddWidgetClick.current);
@@ -1164,6 +1334,8 @@ const createDiffConfigStore = (props, diffFileId) => {
             setRenderExtendLine,
             onAddWidgetClick,
             setOnAddWidgetClick,
+            onCreateUseWidgetHook,
+            setOnCreateUseWidgetHook,
         };
     });
 };
@@ -1182,95 +1354,15 @@ const createDiffWidgetStore = (useDiffContextRef) => {
         return { widgetSide, widgetLineNumber, setWidget };
     });
 };
-const createDiffSplitConfigStore = () => {
-    return createStore(() => {
-        const splitRef = ref(undefined);
-        const setSplit = (side) => {
-            flushSync(() => {
-                splitRef.value = side;
-            });
-        };
-        return { splitRef, setSplit };
-    });
-};
-
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-const Style = ({ useSelector, id, }) => {
-    const splitRef = useSelector((s) => s.splitRef);
-    return (React.createElement("style", { "data-select-style": true }, splitRef === SplitSide.old
-        ? `#${id} td[data-side="${SplitSide[SplitSide.new]}"] {user-select: none}`
-        : splitRef === SplitSide.new
-            ? `#${id} td[data-side="${SplitSide[SplitSide.old]}"] {user-select: none}`
-            : ""));
-};
-const DiffSplitViewWrap = memo(({ diffFile }) => {
-    const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
-    const { useDiffContext } = useDiffViewContext();
-    const useSplitConfig = useMemo(() => createDiffSplitConfigStore(), []);
-    const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
-    useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
-    const onMouseDown = useCallback((e) => {
-        let ele = e.target;
-        const setSelectSide = useSplitConfig.getReadonlyState().setSplit;
-        // need remove all the selection
-        if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
-            removeAllSelection();
-            return;
-        }
-        while (ele && ele instanceof HTMLElement && ele.nodeName !== "TD") {
-            ele = ele.parentElement;
-        }
-        if (ele instanceof HTMLElement) {
-            const side = ele.getAttribute("data-side");
-            if (side) {
-                setSelectSide(SplitSide[side]);
-                removeAllSelection();
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const font = useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]);
-    const _width = useTextWidth({
-        text: splitLineLength.toString(),
-        font,
-    });
-    const width = Math.max(40, _width + 25);
-    const lines = getSplitContentLines(diffFile);
-    return (React.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full" },
-        React.createElement("div", { className: "diff-table-wrapper w-full", style: {
-                // @ts-ignore
-                [diffAsideWidthName]: `${Math.round(width)}px`,
-                fontFamily: "Menlo, Consolas, monospace",
-                fontSize: `var(${diffFontSizeName})`,
-            } },
-            React.createElement(Style, { useSelector: useSplitConfig, id: `diff-root${diffFile.getId()}` }),
-            React.createElement("table", { className: "diff-table w-full table-fixed border-collapse border-spacing-0" },
-                React.createElement("colgroup", null,
-                    React.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) }),
-                    React.createElement("col", { className: "diff-table-old-content-col" }),
-                    React.createElement("col", { className: "diff-table-new-num-col", width: Math.round(width) }),
-                    React.createElement("col", { className: "diff-table-new-content-col" })),
-                React.createElement("thead", { className: "hidden" },
-                    React.createElement("tr", null,
-                        React.createElement("th", { scope: "col" }, "old line number"),
-                        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 },
-                    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 }),
-                        React.createElement(DiffSplitWidgetLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React.createElement(DiffSplitExtendLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile })))),
-                    React.createElement(DiffSplitHunkLine, { index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))))));
-});
-DiffSplitViewWrap.displayName = "DiffSplitViewWrap";
 
 const DiffSplitView = memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
     const useDiffContextRef = useRef(useDiffContext);
     useDiffContextRef.current = useDiffContext;
-    const enableWrap = useDiffContext.useShallowStableSelector((s) => s.enableWrap);
+    const { enableWrap, onCreateUseWidgetHook } = useDiffContext.useShallowStableSelector((s) => ({
+        enableWrap: s.enableWrap,
+        onCreateUseWidgetHook: s.onCreateUseWidgetHook,
+    }));
     // performance optimization
     const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
@@ -1278,11 +1370,14 @@ const DiffSplitView = memo(({ diffFile }) => {
         const { setWidget } = useWidget.getReadonlyState();
         setWidget({});
     }, [diffFile, useWidget]);
+    useEffect(() => {
+        onCreateUseWidgetHook === null || onCreateUseWidgetHook === void 0 ? void 0 : onCreateUseWidgetHook(useWidget);
+    }, [useWidget, onCreateUseWidgetHook]);
     return (React.createElement(DiffWidgetContext.Provider, { value: contextValue }, enableWrap ? React.createElement(DiffSplitViewWrap, { diffFile: diffFile }) : React.createElement(DiffSplitViewNormal, { diffFile: diffFile })));
 });
 DiffSplitView.displayName = "DiffSplitView";
 
-const DiffUnifiedOldLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
+const DiffUnifiedOldLine = ({ index, diffLine, rawLine, plainLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
     return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
         React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
                 color: `var(${plainLineNumberColorName})`,
@@ -1297,9 +1392,9 @@ const DiffUnifiedOldLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber,
                 React.createElement("span", { className: "w-[10px] shrink-0" }),
                 React.createElement("span", { className: "inline-block w-[50%]" }))),
         React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${delContentBGName})` } },
-            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
 };
-const DiffUnifiedNewLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
+const DiffUnifiedNewLine = ({ index, diffLine, rawLine, plainLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
     return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
         React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
                 color: `var(${plainLineNumberColorName})`,
@@ -1314,17 +1409,12 @@ const DiffUnifiedNewLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber,
                 React.createElement("span", { className: "w-[10px] shrink-0" }),
                 React.createElement("span", { "data-line-new-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber))),
         React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${addContentBGName})` } },
-            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
 };
-const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber }) => {
+const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber, enableWrap, enableAddWidget, enableHighlight, }) => {
     const unifiedLine = diffFile.getUnifiedLine(index);
     const { useDiffContext } = useDiffViewContext();
-    const { enableWrap, enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
-        enableWrap: s.enableWrap,
-        enableHighlight: s.enableHighlight,
-        enableAddWidget: s.enableAddWidget,
-        onAddWidgetClick: s.onAddWidgetClick,
-    }));
+    const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const hasDiff = unifiedLine.diff;
@@ -1338,18 +1428,23 @@ const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber }) => {
         : oldLinenumber
             ? diffFile.getOldSyntaxLine(oldLinenumber)
             : undefined;
+    const plainLine = newLineNumber
+        ? diffFile.getNewPlainLine(newLineNumber)
+        : oldLinenumber
+            ? diffFile.getOldPlainLine(oldLinenumber)
+            : undefined;
     if (hasChange) {
         if (unifiedLine.oldLineNumber) {
-            return (React.createElement(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.oldLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
+            return (React.createElement(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.oldLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
         }
         else {
-            return (React.createElement(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.newLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
+            return (React.createElement(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.newLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
         }
     }
     else {
         return (React.createElement("tr", { "data-line": lineNumber, "data-state": unifiedLine.diff ? "diff" : "plain", className: "diff-line group" },
             React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
-                    color: `var(${plainLineNumberColorName})`,
+                    color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
                     width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                     maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                     minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
@@ -1363,15 +1458,15 @@ const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber }) => {
             React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: {
                     backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
                 } },
-                React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+                React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
     }
 });
 _DiffUnifiedLine.displayName = "_DiffUnifiedLine";
-const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, }) => {
+const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, enableWrap, enableHighlight, enableAddWidget, }) => {
     const unifiedLine = diffFile.getUnifiedLine(index);
     if (unifiedLine === null || unifiedLine === void 0 ? void 0 : unifiedLine.isHidden)
         return null;
-    return React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }));
 };
 
 const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
@@ -1386,7 +1481,7 @@ const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExt
         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", style: { width } },
+            React.createElement("div", { className: "diff-line-extend-wrapper sticky left-0 z-[1]", style: { width } },
                 width > 0 &&
                     (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== undefined &&
                     (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== null &&
@@ -1489,7 +1584,7 @@ const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
         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", style: { width } },
+            React.createElement("div", { className: "diff-line-widget-wrapper sticky left-0 z-[1]", style: { width } },
                 width > 0 &&
                     oldWidget &&
                     (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })),
@@ -1514,30 +1609,29 @@ const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-const onMouseDown = (e) => {
-    const ele = e.target;
-    // need remove all the selection
-    if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
-        removeAllSelection();
-        return;
-    }
-};
 const DiffUnifiedView = memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
+    const ref = useRef(null);
     const useDiffContextRef = useRef(useDiffContext);
     useDiffContextRef.current = useDiffContext;
     // performance optimization
     const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
-    const { fontSize, enableWrap } = useDiffContext.useShallowStableSelector((s) => ({
+    const { fontSize, enableWrap, enableHighlight, enableAddWidget, onCreateUseWidgetHook } = useDiffContext.useShallowStableSelector((s) => ({
         fontSize: s.fontSize,
         enableWrap: s.enableWrap,
+        enableHighlight: s.enableHighlight,
+        enableAddWidget: s.enableAddWidget,
+        onCreateUseWidgetHook: s.onCreateUseWidgetHook,
     }));
     useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
     useEffect(() => {
         const { setWidget } = useWidget.getReadonlyState();
         setWidget({});
     }, [diffFile, useWidget]);
+    useEffect(() => {
+        onCreateUseWidgetHook === null || onCreateUseWidgetHook === void 0 ? void 0 : onCreateUseWidgetHook(useWidget);
+    }, [useWidget, onCreateUseWidgetHook]);
     const unifiedLineLength = Math.max(diffFile.unifiedLineLength, diffFile.fileLineLength);
     const _width = useTextWidth({
         text: unifiedLineLength.toString(),
@@ -1545,8 +1639,44 @@ const DiffUnifiedView = memo(({ diffFile }) => {
     });
     const width = Math.max(40, _width + 10);
     const lines = getUnifiedContentLine(diffFile);
+    const setStyle = (side) => {
+        if (!ref.current)
+            return;
+        if (!side) {
+            ref.current.textContent = "";
+        }
+        else {
+            const id = `diff-root${diffFile.getId()}`;
+            ref.current.textContent = `#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+        }
+    };
+    const onMouseDown = (e) => {
+        let ele = e.target;
+        // need remove all the selection
+        if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
+            removeAllSelection();
+            return;
+        }
+        while (ele && ele instanceof HTMLElement) {
+            const state = ele.getAttribute("data-state");
+            if (state) {
+                if (state === "extend" || state === "hunk" || state === "widget") {
+                    setStyle(undefined);
+                    removeAllSelection();
+                    return;
+                }
+                else {
+                    setStyle(SplitSide.new);
+                    removeAllSelection();
+                    return;
+                }
+            }
+            ele = ele.parentElement;
+        }
+    };
     return (React.createElement(DiffWidgetContext.Provider, { value: contextValue },
         React.createElement("div", { className: `unified-diff-view ${enableWrap ? "unified-diff-view-wrap" : "unified-diff-view-normal"} w-full` },
+            React.createElement("style", { "data-select-style": true, ref: ref }),
             React.createElement("div", { className: "unified-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", style: {
                     // @ts-ignore
                     [diffAsideWidthName]: `${Math.round(width)}px`,
@@ -1564,7 +1694,7 @@ const DiffUnifiedView = memo(({ diffFile }) => {
                     React.createElement("tbody", { className: "diff-table-body leading-[1.4]", 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 }),
+                            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(DiffUnifiedHunkLine, { index: diffFile.unifiedLineLength, lineNumber: diffFile.unifiedLineLength, diffFile: diffFile })))))));
@@ -1572,11 +1702,6 @@ const DiffUnifiedView = memo(({ diffFile }) => {
 DiffUnifiedView.displayName = "DiffUnifiedView";
 
 _cacheMap.name = "@git-diff-view/react";
-var SplitSide;
-(function (SplitSide) {
-    SplitSide[SplitSide["old"] = 1] = "old";
-    SplitSide[SplitSide["new"] = 2] = "new";
-})(SplitSide || (SplitSide = {}));
 var DiffModeEnum;
 (function (DiffModeEnum) {
     // github like
@@ -1587,7 +1712,7 @@ var DiffModeEnum;
     DiffModeEnum[DiffModeEnum["Unified"] = 4] = "Unified";
 })(DiffModeEnum || (DiffModeEnum = {}));
 const InternalDiffView = (props) => {
-    const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, isMounted, } = props;
+    const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, onCreateUseWidgetHook, isMounted, } = props;
     const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
     const wrapperRef = useRef();
     // performance optimization
@@ -1595,7 +1720,7 @@ const InternalDiffView = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     useEffect(() => {
-        const { id, setId, mode, setMode, mounted, setMounted, enableAddWidget, setEnableAddWidget, enableHighlight, setEnableHighlight, enableWrap, setEnableWrap, setExtendData, fontSize, setFontSize, onAddWidgetClick: _onAddWidgetClick, setOnAddWidgetClick, renderExtendLine: _renderExtendLine, setRenderExtendLine, renderWidgetLine: _renderWidgetLine, setRenderWidgetLine, } = useDiffContext.getReadonlyState();
+        const { id, setId, mode, setMode, mounted, setMounted, enableAddWidget, setEnableAddWidget, enableHighlight, setEnableHighlight, enableWrap, setEnableWrap, setExtendData, fontSize, setFontSize, onAddWidgetClick: _onAddWidgetClick, setOnAddWidgetClick, renderExtendLine: _renderExtendLine, setRenderExtendLine, renderWidgetLine: _renderWidgetLine, setRenderWidgetLine, onCreateUseWidgetHook: _onCreateUseWidgetHook, setOnCreateUseWidgetHook, } = useDiffContext.getReadonlyState();
         if (diffFileId && diffFileId !== id) {
             setId(diffFileId);
         }
@@ -1623,6 +1748,9 @@ const InternalDiffView = (props) => {
         if (onAddWidgetClick !== _onAddWidgetClick.current) {
             setOnAddWidgetClick({ current: onAddWidgetClick });
         }
+        if (onCreateUseWidgetHook !== _onCreateUseWidgetHook) {
+            setOnCreateUseWidgetHook(onCreateUseWidgetHook);
+        }
         if (renderExtendLine !== _renderExtendLine) {
             setRenderExtendLine(renderExtendLine);
         }
@@ -1642,6 +1770,7 @@ const InternalDiffView = (props) => {
         renderExtendLine,
         extendData,
         onAddWidgetClick,
+        onCreateUseWidgetHook,
     ]);
     useEffect(() => {
         const cb = diffFile.subscribe(() => {
@@ -1653,7 +1782,7 @@ const InternalDiffView = (props) => {
     }, [diffFile]);
     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.26", "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.27", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -1719,7 +1848,7 @@ const DiffViewWithRef = (props, ref) => {
 const InnerDiffView = forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.26";
+const version = "0.0.27";
 
-export { DiffModeEnum, DiffView, SplitSide, version };
+export { DiffModeEnum, DiffView, version };
 //# sourceMappingURL=index.mjs.map