@git-diff-view/react 0.0.26 → 0.0.28

package/dist/cjs/index.development.js

@@ -4,7 +4,6 @@
 var core = require('@git-diff-view/core');
 var React = require('react');
 var index_js = require('use-sync-external-store/shim/index.js');
-var reactDom = require('react-dom');
 var reactivityStore = require('reactivity-store');
 
 function _interopNamespaceDefault(e) {
@@ -145,7 +144,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--";
@@ -170,7 +171,7 @@ const getLineNumberBG = (isAdded, isDelete, hasDiff) => {
             ? `var(${delLineNumberBGName})`
             : hasDiff
                 ? `var(${plainLineNumberBGName})`
-                : `var(${expandContentBGName})`;
+                : `var(${expandLineNumberBGName})`;
 };
 
 const removeAllSelection = () => {
@@ -220,13 +221,22 @@ const memoFunc = (func) => {
     });
 };
 
+var NewLineSymbol;
+(function (NewLineSymbol) {
+    NewLineSymbol[NewLineSymbol["CRLF"] = 1] = "CRLF";
+    NewLineSymbol[NewLineSymbol["CR"] = 2] = "CR";
+    NewLineSymbol[NewLineSymbol["LF"] = 3] = "LF";
+    NewLineSymbol[NewLineSymbol["NEWLINE"] = 4] = "NEWLINE";
+    NewLineSymbol[NewLineSymbol["NORMAL"] = 5] = "NORMAL";
+    NewLineSymbol[NewLineSymbol["NULL"] = 6] = "NULL";
+})(NewLineSymbol || (NewLineSymbol = {}));
 const getSymbol = (symbol) => {
     switch (symbol) {
-        case core.NewLineSymbol.LF:
+        case NewLineSymbol.LF:
             return "␊";
-        case core.NewLineSymbol.CR:
+        case NewLineSymbol.CR:
             return "␍";
-        case core.NewLineSymbol.CRLF:
+        case NewLineSymbol.CRLF:
             return "␍␊";
         default:
             return "";
@@ -299,6 +309,7 @@ const DiffNoNewLine = () => {
         React__namespace.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("--"))
@@ -325,30 +336,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 core.getPlainDiffTemplate === "function") {
+            core.getPlainDiffTemplate({ diffLine, rawLine, operator });
+        }
+        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) {
+            return (React__namespace.createElement("span", { className: "diff-line-content-raw" },
+                React__namespace.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.plainTemplate } }),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React__namespace.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__namespace.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__namespace.createElement("span", { className: "diff-line-content-raw" },
+                React__namespace.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
+                    str1,
+                    React__namespace.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
+                            backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
+                        } }, isLast ? (React__namespace.createElement(React__namespace.Fragment, null,
+                        _str2,
+                        React__namespace.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
+                    str3),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React__namespace.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__namespace.createElement(DiffNoNewLine, null)))));
+        }
+    }
+    if (plainLine && !(plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
+        plainLine.template = core.getPlainLineTemplate(plainLine.value);
+    }
+    if (plainLine === null || plainLine === void 0 ? void 0 : plainLine.template) {
         return (React__namespace.createElement("span", { className: "diff-line-content-raw" },
-            React__namespace.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
-                str1,
-                React__namespace.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
-                        backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                    } }, isLast ? (React__namespace.createElement(React__namespace.Fragment, null,
-                    _str2,
-                    React__namespace.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
-                str3),
-            isNewLineSymbolChanged === core.NewLineSymbol.NEWLINE && (React__namespace.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__namespace.createElement(DiffNoNewLine, null)))));
+            React__namespace.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: plainLine.template } })));
     }
     return React__namespace.createElement("span", { className: "diff-line-content-raw" }, rawLine);
 };
@@ -360,49 +393,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 core.getSyntaxDiffTemplate === "function") {
+            core.getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
+        }
+        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) {
+            return (React__namespace.createElement("span", { className: "diff-line-syntax-raw" },
+                React__namespace.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.syntaxTemplate } }),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React__namespace.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__namespace.createElement(DiffNoNewLine, null)))));
+        }
+        else {
+            // TODO remove
+            const range = changes.range;
+            return (React__namespace.createElement("span", { className: "diff-line-syntax-raw" },
+                React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement(React__namespace.Fragment, null,
+                                _str2,
+                                React__namespace.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
+                            str3));
+                    }
+                })),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React__namespace.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__namespace.createElement(DiffNoNewLine, null)))));
+        }
+    }
+    if (!syntaxLine.template) {
+        syntaxLine.template = core.getSyntaxLineTemplate(syntaxLine);
+    }
+    if (syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.template) {
         return (React__namespace.createElement("span", { className: "diff-line-syntax-raw" },
-            React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement(React__namespace.Fragment, null,
-                            _str2,
-                            React__namespace.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
-                        str3));
-                }
-            })),
-            isNewLineSymbolChanged === core.NewLineSymbol.NEWLINE && (React__namespace.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__namespace.createElement(DiffNoNewLine, null)))));
+            React__namespace.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: syntaxLine.template } })));
     }
     return (React__namespace.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__namespace.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) === core.DiffLineType.Add;
     const isDelete = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === core.DiffLineType.Delete;
@@ -414,7 +471,7 @@ const DiffContent = ({ diffLine, rawLine, syntaxLine, enableWrap, enableHighligh
             wordBreak: enableWrap ? "break-all" : "initial",
         } },
         React__namespace.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__namespace.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React__namespace.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, enableWrap: enableWrap }))));
+        enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React__namespace.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React__namespace.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, enableWrap: enableWrap }))));
 };
 
 const DiffViewContext = React.createContext(null);
@@ -425,48 +482,46 @@ const DiffWidgetContext = React.createContext(null);
 DiffWidgetContext.displayName = "DiffWidgetContext";
 const useDiffWidgetContext = () => React.useContext(DiffWidgetContext);
 
-const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
+const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, enableAddWidget, enableHighlight, }) => {
     var _a, _b;
-    const getCurrentSyntaxLine = side === exports.SplitSide.old ? diffFile.getOldSyntaxLine : diffFile.getNewSyntaxLine;
+    const getCurrentSyntaxLine = side === core.SplitSide.old ? diffFile.getOldSyntaxLine : diffFile.getNewSyntaxLine;
+    const getCurrentPlainLine = side === core.SplitSide.old ? diffFile.getOldPlainLine : diffFile.getNewPlainLine;
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
-    const currentLine = side === exports.SplitSide.old ? oldLine : newLine;
+    const currentLine = side === core.SplitSide.old ? oldLine : newLine;
     const hasDiff = !!(currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff);
     const hasContent = !!currentLine.lineNumber;
     const hasChange = core.checkDiffLineIncludeChange(currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff);
     const isAdded = ((_a = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _a === void 0 ? void 0 : _a.type) === core.DiffLineType.Add;
     const isDelete = ((_b = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _b === void 0 ? void 0 : _b.type) === core.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);
-    return (React__namespace.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff || !hasContent ? "diff" : "plain", "data-side": exports.SplitSide[side], className: "diff-line" + (hasContent ? " group" : "") }, hasContent ? (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("td", { className: `diff-line-${exports.SplitSide[side]}-num sticky left-0 w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`, style: {
+    const plainLine = getCurrentPlainLine(currentLine.lineNumber);
+    return (React__namespace.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff || !hasContent ? "diff" : "plain", "data-side": core.SplitSide[side], className: "diff-line" + (hasContent ? " group" : "") }, hasContent ? (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement("td", { className: `diff-line-${core.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})`,
             } },
             hasDiff && enableAddWidget && (React__namespace.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__namespace.createElement("span", { "data-line-num": currentLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, currentLine.lineNumber)),
-        React__namespace.createElement("td", { className: `diff-line-${exports.SplitSide[side]}-content pr-[10px] align-top`, style: { backgroundColor: contentBG } },
-            React__namespace.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: currentLine.value, diffLine: currentLine.diff, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: `diff-line-${exports.SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+        React__namespace.createElement("td", { className: `diff-line-${core.SplitSide[side]}-content pr-[10px] align-top`, style: { backgroundColor: contentBG } },
+            React__namespace.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: currentLine.value, diffLine: currentLine.diff, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: `diff-line-${core.SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React__namespace.createElement("span", null, "\u2002")))));
 };
-const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, }) => {
-    const getCurrentLine = side === exports.SplitSide.old ? diffFile.getSplitLeftLine : diffFile.getSplitRightLine;
+const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, enableAddWidget, enableHighlight, }) => {
+    const getCurrentLine = side === core.SplitSide.old ? diffFile.getSplitLeftLine : diffFile.getSplitRightLine;
     const currentLine = getCurrentLine(index);
     if (currentLine === null || currentLine === void 0 ? void 0 : currentLine.isHidden)
         return null;
-    return React__namespace.createElement(InternalDiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side });
+    return (React__namespace.createElement(InternalDiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
 };
 
 const useDomWidth = ({ selector, enable }) => {
@@ -570,9 +625,9 @@ const InternalDiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLine
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
-    const currentExtend = side === exports.SplitSide.old ? oldLineExtend : newLineExtend;
-    const otherSide = side === exports.SplitSide.old ? exports.SplitSide.new : exports.SplitSide.old;
-    const currentLineNumber = side === exports.SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
+    const currentExtend = side === core.SplitSide.old ? oldLineExtend : newLineExtend;
+    const otherSide = side === core.SplitSide.old ? core.SplitSide.new : core.SplitSide.old;
+    const currentLineNumber = side === core.SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
     const currentSideHasExtend = (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== undefined && (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== null;
     const hasExtend = ((oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== undefined && (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== null) ||
         ((newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== undefined && (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== null);
@@ -587,18 +642,18 @@ const InternalDiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLine
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-extend-content"]`,
         wrapper: `tr[data-line="${lineNumber}-extend"]`,
-        side: exports.SplitSide[currentSideHasExtend ? side : otherSide],
+        side: core.SplitSide[currentSideHasExtend ? side : otherSide],
         enable: hasExtend && typeof renderExtendLine === "function",
     });
     const width = useDomWidth({
-        selector: side === exports.SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
+        selector: side === core.SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
         enable: currentSideHasExtend && typeof renderExtendLine === "function",
     });
     if (!renderExtendLine)
         return null;
-    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": exports.SplitSide[side], className: "diff-line diff-line-extend" }, currentSideHasExtend ? (React__namespace.createElement("td", { className: `diff-line-extend-${exports.SplitSide[side]}-content p-0`, colSpan: 2 },
-        React__namespace.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": exports.SplitSide[side], className: "diff-line-extend-wrapper sticky left-0", style: { width } }, width > 0 && currentExtendRendered))) : (React__namespace.createElement("td", { className: `diff-line-extend-${exports.SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
-        React__namespace.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": exports.SplitSide[side] })))));
+    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": core.SplitSide[side], className: "diff-line diff-line-extend" }, currentSideHasExtend ? (React__namespace.createElement("td", { className: `diff-line-extend-${core.SplitSide[side]}-content p-0`, colSpan: 2 },
+        React__namespace.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": core.SplitSide[side], className: "diff-line-extend-wrapper sticky left-0 z-[1]", style: { width } }, width > 0 && currentExtendRendered))) : (React__namespace.createElement("td", { className: `diff-line-extend-${core.SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+        React__namespace.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": core.SplitSide[side] })))));
 };
 const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -614,7 +669,7 @@ const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
     // if the expand action not enabled, the `isHidden` property will never change
     const enableExpand = diffFile.getExpandEnabled();
-    const currentLine = side === exports.SplitSide.old ? oldLine : newLine;
+    const currentLine = side === core.SplitSide.old ? oldLine : newLine;
     const currentIsShow = hasExtend && (!currentLine.isHidden || !enableExpand);
     if (!currentIsShow)
         return null;
@@ -640,17 +695,17 @@ const InternalDiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, })
     const expandEnabled = diffFile.getExpandEnabled();
     useSyncHeight({
         selector: `tr[data-line="${lineNumber}-hunk"]`,
-        side: exports.SplitSide[exports.SplitSide.old],
-        enable: side === exports.SplitSide.new,
+        side: core.SplitSide[core.SplitSide.old],
+        enable: side === core.SplitSide.new,
     });
-    const enableHunkAction = side === exports.SplitSide.old;
+    const enableHunkAction = side === core.SplitSide.old;
     const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
     const isExpandAll = currentHunk &&
         currentHunk.splitInfo &&
         currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < core.composeLen;
     const isFirstLine = currentHunk && currentHunk.isFirst;
     const isLastLine = currentHunk && currentHunk.isLast;
-    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": exports.SplitSide[side], className: "diff-line diff-line-hunk" }, enableHunkAction ? (React__namespace.createElement(React__namespace.Fragment, null,
+    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": core.SplitSide[side], className: "diff-line diff-line-hunk" }, enableHunkAction ? (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
@@ -677,7 +732,7 @@ const InternalDiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, })
     const expandEnabled = diffFile.getExpandEnabled();
     useSyncHeight({
         selector: `tr[data-line="${lineNumber}-hunk"]`,
-        side: exports.SplitSide[side],
+        side: core.SplitSide[side],
         enable: true,
     });
     const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
@@ -686,7 +741,7 @@ const InternalDiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, })
         currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < core.composeLen;
     const isFirstLine = currentHunk && currentHunk.isFirst;
     const isLastLine = currentHunk && currentHunk.isLast;
-    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": exports.SplitSide[side], className: "diff-line diff-line-hunk" },
+    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": core.SplitSide[side], className: "diff-line diff-line-hunk" },
         React__namespace.createElement("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
@@ -737,11 +792,11 @@ const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) =
     const widgetSide = useWidget.getReadonlyState().widgetSide;
     const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
     const setWidget = useWidget.getReadonlyState().setWidget;
-    const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
-    const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
-    const currentLine = side === exports.SplitSide.old ? oldLine : newLine;
-    const otherSide = side === exports.SplitSide.old ? exports.SplitSide.new : exports.SplitSide.old;
-    const currentHasWidget = side === exports.SplitSide.old ? oldLineWidget : newLineWidget;
+    const oldLineWidget = oldLine.lineNumber && widgetSide === core.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+    const newLineWidget = newLine.lineNumber && widgetSide === core.SplitSide.new && widgetLineNumber === newLine.lineNumber;
+    const currentLine = side === core.SplitSide.old ? oldLine : newLine;
+    const otherSide = side === core.SplitSide.old ? core.SplitSide.new : core.SplitSide.old;
+    const currentHasWidget = side === core.SplitSide.old ? oldLineWidget : newLineWidget;
     const hasWidget = oldLineWidget || newLineWidget;
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
     const currentWidgetRendered = currentHasWidget &&
@@ -754,18 +809,18 @@ const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) =
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-widget-content"]`,
         wrapper: `tr[data-line="${lineNumber}-widget"]`,
-        side: exports.SplitSide[currentHasWidget ? side : otherSide],
+        side: core.SplitSide[currentHasWidget ? side : otherSide],
         enable: hasWidget && typeof renderWidgetLine === "function",
     });
     const width = useDomWidth({
-        selector: side === exports.SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
+        selector: side === core.SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
         enable: !!currentHasWidget && typeof renderWidgetLine === "function",
     });
     if (!renderWidgetLine)
         return null;
-    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": exports.SplitSide[side], className: "diff-line diff-line-widget" }, currentHasWidget ? (React__namespace.createElement("td", { className: `diff-line-widget-${exports.SplitSide[side]}-content p-0`, colSpan: 2 },
-        React__namespace.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": exports.SplitSide[side], className: "diff-line-widget-wrapper sticky left-0", style: { width } }, width > 0 && currentWidgetRendered))) : (React__namespace.createElement("td", { className: `diff-line-widget-${exports.SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
-        React__namespace.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": exports.SplitSide[side] })))));
+    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": core.SplitSide[side], className: "diff-line diff-line-widget" }, currentHasWidget ? (React__namespace.createElement("td", { className: `diff-line-widget-${core.SplitSide[side]}-content p-0`, colSpan: 2 },
+        React__namespace.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": core.SplitSide[side], className: "diff-line-widget-wrapper sticky left-0 z-[1]", style: { width } }, width > 0 && currentWidgetRendered))) : (React__namespace.createElement("td", { className: `diff-line-widget-${core.SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+        React__namespace.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": core.SplitSide[side] })))));
 };
 // TODO! improve performance
 const DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
@@ -775,8 +830,8 @@ const DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
         const widgetSide = s.widgetSide;
         const oldLine = diffFile.getSplitLeftLine(index);
         const newLine = diffFile.getSplitRightLine(index);
-        const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
-        const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
+        const oldLineWidget = oldLine.lineNumber && widgetSide === core.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+        const newLineWidget = newLine.lineNumber && widgetSide === core.SplitSide.new && widgetLineNumber === newLine.lineNumber;
         const currentIsShow = oldLineWidget || newLineWidget;
         return currentIsShow;
     }, [diffFile, index]), (p, c) => p === c);
@@ -786,33 +841,25 @@ 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 className = side === exports.SplitSide.new ? "new-diff-table" : "old-diff-table";
+const DiffSplitViewTable = ({ side, diffFile, enableAddWidget, enableHighlight, onMouseDown, }) => {
+    const className = side === core.SplitSide.new ? "new-diff-table" : "old-diff-table";
     const lines = core.getSplitContentLines(diffFile);
-    return (React__namespace.createElement("table", { className: className + " w-full border-collapse border-spacing-0", "data-mode": exports.SplitSide[side] },
+    return (React__namespace.createElement("table", { className: className + " w-full border-collapse border-spacing-0", "data-mode": core.SplitSide[side] },
         React__namespace.createElement("colgroup", null,
-            React__namespace.createElement("col", { className: `diff-table-${exports.SplitSide[side]}-num-col` }),
-            React__namespace.createElement("col", { className: `diff-table-${exports.SplitSide[side]}-content-col` })),
+            React__namespace.createElement("col", { className: `diff-table-${core.SplitSide[side]}-num-col` }),
+            React__namespace.createElement("col", { className: `diff-table-${core.SplitSide[side]}-content-col` })),
         React__namespace.createElement("thead", { className: "hidden" },
             React__namespace.createElement("tr", null,
                 React__namespace.createElement("th", { scope: "col" },
-                    exports.SplitSide[side],
+                    core.SplitSide[side],
                     " line number"),
                 React__namespace.createElement("th", { scope: "col" },
-                    exports.SplitSide[side],
+                    core.SplitSide[side],
                     " line content"))),
-        React__namespace.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown$1 },
+        React__namespace.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
             lines.map((line) => (React__namespace.createElement(React.Fragment, { key: line.index },
                 React__namespace.createElement(DiffSplitHunkLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
-                React__namespace.createElement(DiffSplitContentLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
+                React__namespace.createElement(DiffSplitContentLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }),
                 React__namespace.createElement(DiffSplitWidgetLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
                 React__namespace.createElement(DiffSplitExtendLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile })))),
             React__namespace.createElement(DiffSplitHunkLine$1, { side: side, index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))));
@@ -820,9 +867,14 @@ const DiffSplitViewTable = ({ side, diffFile }) => {
 const DiffSplitViewNormal = React.memo(({ diffFile }) => {
     const ref1 = React.useRef(null);
     const ref2 = React.useRef(null);
+    const ref = React.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,
+    }));
     index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
     React.useEffect(() => {
         const left = ref1.current;
@@ -837,7 +889,46 @@ const DiffSplitViewNormal = React.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(core.SplitSide[side]);
+                removeAllSelection();
+            }
+            if (state) {
+                if (state === "extend" || state === "hunk" || state === "widget") {
+                    setStyle(undefined);
+                    removeAllSelection();
+                    return;
+                }
+                else {
+                    return;
+                }
+            }
+            ele = ele.parentElement;
+        }
+    };
     return (React__namespace.createElement("div", { className: "split-diff-view split-diff-view-normal flex w-full basis-[50%]" },
+        React__namespace.createElement("style", { "data-select-style": true, ref: ref }),
         React__namespace.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`,
@@ -845,7 +936,7 @@ const DiffSplitViewNormal = React.memo(({ diffFile }) => {
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: `var(${diffFontSizeName})`,
             } },
-            React__namespace.createElement(DiffSplitViewTable, { side: exports.SplitSide.old, diffFile: diffFile })),
+            React__namespace.createElement(DiffSplitViewTable, { side: core.SplitSide.old, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight, onMouseDown: onMouseDown })),
         React__namespace.createElement("div", { className: "diff-split-line w-[1.5px]", style: { backgroundColor: `var(${borderColorName})` } }),
         React__namespace.createElement("div", { className: "new-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref2, style: {
                 // @ts-ignore
@@ -854,26 +945,24 @@ const DiffSplitViewNormal = React.memo(({ diffFile }) => {
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: `var(${diffFontSizeName})`,
             } },
-            React__namespace.createElement(DiffSplitViewTable, { side: exports.SplitSide.new, diffFile: diffFile }))));
+            React__namespace.createElement(DiffSplitViewTable, { side: core.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 = core.checkDiffLineIncludeChange(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || core.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) === core.DiffLineType.Delete;
     const newLineIsAdded = ((_b = newLine === null || newLine === void 0 ? void 0 : newLine.diff) === null || _b === void 0 ? void 0 : _b.type) === core.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;
@@ -884,37 +973,37 @@ const InternalDiffSplitLine = ({ index, diffFile, lineNumber, }) => {
     const newLineNumberBG = getLineNumberBG(newLineIsAdded, false, hasDiff);
     return (React__namespace.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff ? "diff" : "plain", className: "diff-line" },
         hasOldLine ? (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.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": exports.SplitSide[exports.SplitSide.old], style: { backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` } },
-                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: exports.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__namespace.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": core.SplitSide[core.SplitSide.old], style: { backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` } },
+                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: core.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__namespace.createElement("span", { "data-line-num": oldLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, oldLine.lineNumber)),
-            React__namespace.createElement("td", { className: "diff-line-old-content group relative pr-[10px] align-top", "data-side": exports.SplitSide[exports.SplitSide.old], style: { backgroundColor: oldLineContentBG } },
-                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: exports.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__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": exports.SplitSide[exports.SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            React__namespace.createElement("td", { className: "diff-line-old-content group relative pr-[10px] align-top", "data-side": core.SplitSide[core.SplitSide.old], style: { backgroundColor: oldLineContentBG } },
+                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: core.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__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, plainLine: oldPlainLine, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": core.SplitSide[core.SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002"))),
         hasNewLine ? (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.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": exports.SplitSide[exports.SplitSide.new], style: {
+            React__namespace.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": core.SplitSide[core.SplitSide.new], style: {
                     backgroundColor: newLineNumberBG,
-                    color: `var(${plainLineNumberColorName})`,
+                    color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
                     borderLeftColor: `var(${borderColorName})`,
                     borderLeftStyle: "solid",
                 } },
-                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.SplitSide.new, 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 }) })),
+                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: core.SplitSide.new, 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__namespace.createElement("span", { "data-line-num": newLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, newLine.lineNumber)),
-            React__namespace.createElement("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": exports.SplitSide[exports.SplitSide.new], style: { backgroundColor: newLineContentBG } },
-                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.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__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: {
+            React__namespace.createElement("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": core.SplitSide[core.SplitSide.new], style: { backgroundColor: newLineContentBG } },
+                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: core.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__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, plainLine: newPlainLine, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: {
                 backgroundColor: `var(${emptyBGName})`,
                 borderLeftColor: `var(${borderColorName})`,
                 borderLeftStyle: "solid",
-            }, "data-side": exports.SplitSide[exports.SplitSide.new], colSpan: 2 },
+            }, "data-side": core.SplitSide[core.SplitSide.new], colSpan: 2 },
             React__namespace.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__namespace.createElement(InternalDiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React__namespace.createElement(InternalDiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
 };
 
 const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
@@ -928,7 +1017,7 @@ const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExten
     const oldExtendRendered = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) &&
         (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
             diffFile,
-            side: exports.SplitSide.old,
+            side: core.SplitSide.old,
             lineNumber: oldLine.lineNumber,
             data: oldLineExtend.data,
             onUpdate: diffFile.notifyAll,
@@ -936,20 +1025,20 @@ const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExten
     const newExtendRendered = (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) &&
         (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
             diffFile,
-            side: exports.SplitSide.new,
+            side: core.SplitSide.new,
             lineNumber: newLine.lineNumber,
             data: newLineExtend.data,
             onUpdate: diffFile.notifyAll,
         }));
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
         oldExtendRendered ? (React__namespace.createElement("td", { className: "diff-line-extend-old-content p-0", colSpan: 2 },
-            React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, oldExtendRendered))) : (React__namespace.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newExtendRendered && React__namespace.createElement("span", null, "\u2002"))),
+            React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, oldExtendRendered))) : (React__namespace.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 })),
         newExtendRendered ? (React__namespace.createElement("td", { className: "diff-line-extend-new-content border-l-[1px] p-0", style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" }, colSpan: 2 },
             React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, newExtendRendered))) : (React__namespace.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__namespace.createElement("span", null, "\u2002")))));
+            }, colSpan: 2 }))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -1074,23 +1163,23 @@ const InternalDiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const newLine = diffFile.getSplitRightLine(index);
     const widgetSide = useWidget.getReadonlyState().widgetSide;
     const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
-    const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
-    const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
+    const oldLineWidget = oldLine.lineNumber && widgetSide === core.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+    const newLineWidget = newLine.lineNumber && widgetSide === core.SplitSide.new && widgetLineNumber === newLine.lineNumber;
     const oldWidgetRendered = oldLineWidget &&
-        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: exports.SplitSide.old, lineNumber: oldLine.lineNumber, onClose: () => setWidget({}) }));
+        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: core.SplitSide.old, lineNumber: oldLine.lineNumber, onClose: () => setWidget({}) }));
     const newWidgetRendered = newLineWidget &&
-        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: exports.SplitSide.new, lineNumber: newLine.lineNumber, onClose: () => setWidget({}) }));
+        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: core.SplitSide.new, lineNumber: newLine.lineNumber, onClose: () => setWidget({}) }));
     if (!renderWidgetLine)
         return null;
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
         oldWidgetRendered ? (React__namespace.createElement("td", { className: "diff-line-widget-old-content p-0", colSpan: 2 },
-            React__namespace.createElement("div", { className: "diff-line-widget-wrapper" }, oldWidgetRendered))) : (React__namespace.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newWidgetRendered && React__namespace.createElement("span", null, "\u2002"))),
+            React__namespace.createElement("div", { className: "diff-line-widget-wrapper" }, oldWidgetRendered))) : (React__namespace.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 })),
         newWidgetRendered ? (React__namespace.createElement("td", { className: "diff-line-widget-new-content border-l-[1px] p-0", colSpan: 2, style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" } },
             React__namespace.createElement("div", { className: "diff-line-widget-wrapper" }, newWidgetRendered))) : (React__namespace.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__namespace.createElement("span", null, "\u2002")))));
+            }, colSpan: 2 }))));
 };
 // TODO! improve performance
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
@@ -1100,8 +1189,8 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
         const widgetSide = s.widgetSide;
         const oldLine = diffFile.getSplitLeftLine(index);
         const newLine = diffFile.getSplitRightLine(index);
-        const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
-        const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
+        const oldLineWidget = oldLine.lineNumber && widgetSide === core.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+        const newLineWidget = newLine.lineNumber && widgetSide === core.SplitSide.new && widgetLineNumber === newLine.lineNumber;
         const currentIsShow = oldLineWidget || newLineWidget;
         return currentIsShow;
     }, [diffFile, index]), (p, c) => p === c);
@@ -1110,6 +1199,93 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     return React__namespace.createElement(InternalDiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const DiffSplitViewWrap = React.memo(({ diffFile }) => {
+    const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
+    const { useDiffContext } = useDiffViewContext();
+    const ref = React.useRef(null);
+    const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
+        fontSize: s.fontSize,
+        enableAddWidget: s.enableAddWidget,
+        enableHighlight: s.enableHighlight,
+    }));
+    index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
+    const font = React.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 = core.getSplitContentLines(diffFile);
+    const setStyle = (side) => {
+        if (!ref.current)
+            return;
+        if (!side) {
+            ref.current.textContent = "";
+        }
+        else {
+            const id = `diff-root${diffFile.getId()}`;
+            const targetSide = side === core.SplitSide.old ? core.SplitSide.new : core.SplitSide.old;
+            ref.current.textContent = `#${id} [data-side="${core.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(core.SplitSide[side]);
+                removeAllSelection();
+            }
+            if (state) {
+                if (state === "extend" || state === "hunk" || state === "widget") {
+                    setStyle(undefined);
+                    removeAllSelection();
+                    return;
+                }
+                else {
+                    return;
+                }
+            }
+            ele = ele.parentElement;
+        }
+    };
+    return (React__namespace.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full" },
+        React__namespace.createElement("div", { className: "diff-table-wrapper w-full", style: {
+                // @ts-ignore
+                [diffAsideWidthName]: `${Math.round(width)}px`,
+                fontFamily: "Menlo, Consolas, monospace",
+                fontSize: `var(${diffFontSizeName})`,
+            } },
+            React__namespace.createElement("style", { "data-select-style": true, ref: ref }),
+            React__namespace.createElement("table", { className: "diff-table w-full table-fixed border-collapse border-spacing-0" },
+                React__namespace.createElement("colgroup", null,
+                    React__namespace.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) }),
+                    React__namespace.createElement("col", { className: "diff-table-old-content-col" }),
+                    React__namespace.createElement("col", { className: "diff-table-new-num-col", width: Math.round(width) }),
+                    React__namespace.createElement("col", { className: "diff-table-new-content-col" })),
+                React__namespace.createElement("thead", { className: "hidden" },
+                    React__namespace.createElement("tr", null,
+                        React__namespace.createElement("th", { scope: "col" }, "old line number"),
+                        React__namespace.createElement("th", { scope: "col" }, "old line content"),
+                        React__namespace.createElement("th", { scope: "col" }, "new line number"),
+                        React__namespace.createElement("th", { scope: "col" }, "new line content"))),
+                React__namespace.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
+                    lines.map((line) => (React__namespace.createElement(React.Fragment, { key: line.index },
+                        React__namespace.createElement(DiffSplitHunkLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
+                        React__namespace.createElement(DiffSplitContentLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }),
+                        React__namespace.createElement(DiffSplitWidgetLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
+                        React__namespace.createElement(DiffSplitExtendLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile })))),
+                    React__namespace.createElement(DiffSplitHunkLine, { index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))))));
+});
+DiffSplitViewWrap.displayName = "DiffSplitViewWrap";
+
 const createDiffConfigStore = (props, diffFileId) => {
     return reactivityStore.createStore(() => {
         var _a, _b;
@@ -1157,6 +1333,8 @@ const createDiffConfigStore = (props, diffFileId) => {
         const setRenderWidgetLine = (_renderWidgetLine) => (renderWidgetLine.value = _renderWidgetLine);
         const renderExtendLine = reactivityStore.ref(props.renderExtendLine);
         const setRenderExtendLine = (_renderExtendLine) => (renderExtendLine.value = _renderExtendLine);
+        const onCreateUseWidgetHook = reactivityStore.ref(props.onCreateUseWidgetHook);
+        const setOnCreateUseWidgetHook = (_onCreateUseWidgetHook) => (onCreateUseWidgetHook.value = _onCreateUseWidgetHook);
         // 避免无意义的订阅
         const onAddWidgetClick = { current: props.onAddWidgetClick };
         const setOnAddWidgetClick = (_onAddWidgetClick) => (onAddWidgetClick.current = _onAddWidgetClick.current);
@@ -1183,6 +1361,8 @@ const createDiffConfigStore = (props, diffFileId) => {
             setRenderExtendLine,
             onAddWidgetClick,
             setOnAddWidgetClick,
+            onCreateUseWidgetHook,
+            setOnCreateUseWidgetHook,
         };
     });
 };
@@ -1201,95 +1381,15 @@ const createDiffWidgetStore = (useDiffContextRef) => {
         return { widgetSide, widgetLineNumber, setWidget };
     });
 };
-const createDiffSplitConfigStore = () => {
-    return reactivityStore.createStore(() => {
-        const splitRef = reactivityStore.ref(undefined);
-        const setSplit = (side) => {
-            reactDom.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__namespace.createElement("style", { "data-select-style": true }, splitRef === exports.SplitSide.old
-        ? `#${id} td[data-side="${exports.SplitSide[exports.SplitSide.new]}"] {user-select: none}`
-        : splitRef === exports.SplitSide.new
-            ? `#${id} td[data-side="${exports.SplitSide[exports.SplitSide.old]}"] {user-select: none}`
-            : ""));
-};
-const DiffSplitViewWrap = React.memo(({ diffFile }) => {
-    const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
-    const { useDiffContext } = useDiffViewContext();
-    const useSplitConfig = React.useMemo(() => createDiffSplitConfigStore(), []);
-    const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
-    index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
-    const onMouseDown = React.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(exports.SplitSide[side]);
-                removeAllSelection();
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const font = React.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 = core.getSplitContentLines(diffFile);
-    return (React__namespace.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full" },
-        React__namespace.createElement("div", { className: "diff-table-wrapper w-full", style: {
-                // @ts-ignore
-                [diffAsideWidthName]: `${Math.round(width)}px`,
-                fontFamily: "Menlo, Consolas, monospace",
-                fontSize: `var(${diffFontSizeName})`,
-            } },
-            React__namespace.createElement(Style, { useSelector: useSplitConfig, id: `diff-root${diffFile.getId()}` }),
-            React__namespace.createElement("table", { className: "diff-table w-full table-fixed border-collapse border-spacing-0" },
-                React__namespace.createElement("colgroup", null,
-                    React__namespace.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) }),
-                    React__namespace.createElement("col", { className: "diff-table-old-content-col" }),
-                    React__namespace.createElement("col", { className: "diff-table-new-num-col", width: Math.round(width) }),
-                    React__namespace.createElement("col", { className: "diff-table-new-content-col" })),
-                React__namespace.createElement("thead", { className: "hidden" },
-                    React__namespace.createElement("tr", null,
-                        React__namespace.createElement("th", { scope: "col" }, "old line number"),
-                        React__namespace.createElement("th", { scope: "col" }, "old line content"),
-                        React__namespace.createElement("th", { scope: "col" }, "new line number"),
-                        React__namespace.createElement("th", { scope: "col" }, "new line content"))),
-                React__namespace.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
-                    lines.map((line) => (React__namespace.createElement(React.Fragment, { key: line.index },
-                        React__namespace.createElement(DiffSplitHunkLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React__namespace.createElement(DiffSplitContentLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React__namespace.createElement(DiffSplitWidgetLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React__namespace.createElement(DiffSplitExtendLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile })))),
-                    React__namespace.createElement(DiffSplitHunkLine, { index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))))));
-});
-DiffSplitViewWrap.displayName = "DiffSplitViewWrap";
 
 const DiffSplitView = React.memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
     const useDiffContextRef = React.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 = React.useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = React.useMemo(() => ({ useWidget }), [useWidget]);
@@ -1297,11 +1397,14 @@ const DiffSplitView = React.memo(({ diffFile }) => {
         const { setWidget } = useWidget.getReadonlyState();
         setWidget({});
     }, [diffFile, useWidget]);
+    React.useEffect(() => {
+        onCreateUseWidgetHook === null || onCreateUseWidgetHook === void 0 ? void 0 : onCreateUseWidgetHook(useWidget);
+    }, [useWidget, onCreateUseWidgetHook]);
     return (React__namespace.createElement(DiffWidgetContext.Provider, { value: contextValue }, enableWrap ? React__namespace.createElement(DiffSplitViewWrap, { diffFile: diffFile }) : React__namespace.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__namespace.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
         React__namespace.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})`,
@@ -1310,15 +1413,15 @@ const DiffUnifiedOldLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber,
                 maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                 minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
             } },
-            enableAddWidget && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: exports.SplitSide.old, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
+            enableAddWidget && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: core.SplitSide.old, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
             React__namespace.createElement("div", { className: "flex" },
                 React__namespace.createElement("span", { "data-line-old-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber),
                 React__namespace.createElement("span", { className: "w-[10px] shrink-0" }),
                 React__namespace.createElement("span", { className: "inline-block w-[50%]" }))),
         React__namespace.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${delContentBGName})` } },
-            React__namespace.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+            React__namespace.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__namespace.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
         React__namespace.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})`,
@@ -1327,23 +1430,18 @@ const DiffUnifiedNewLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber,
                 maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                 minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
             } },
-            enableAddWidget && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: exports.SplitSide.new, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
+            enableAddWidget && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: core.SplitSide.new, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
             React__namespace.createElement("div", { className: "flex" },
                 React__namespace.createElement("span", { className: "inline-block w-[50%]" }),
                 React__namespace.createElement("span", { className: "w-[10px] shrink-0" }),
                 React__namespace.createElement("span", { "data-line-new-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber))),
         React__namespace.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${addContentBGName})` } },
-            React__namespace.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+            React__namespace.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
 };
-const _DiffUnifiedLine = React.memo(({ index, diffFile, lineNumber }) => {
+const _DiffUnifiedLine = React.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;
@@ -1357,24 +1455,29 @@ const _DiffUnifiedLine = React.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement("tr", { "data-line": lineNumber, "data-state": unifiedLine.diff ? "diff" : "plain", className: "diff-line group" },
             React__namespace.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)`,
                     backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
                 } },
-                enableAddWidget && hasDiff && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index, diffFile: diffFile, lineNumber: unifiedLine.newLineNumber, side: exports.SplitSide.new, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
+                enableAddWidget && hasDiff && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index, diffFile: diffFile, lineNumber: unifiedLine.newLineNumber, side: core.SplitSide.new, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
                 React__namespace.createElement("div", { className: "flex opacity-[0.5]" },
                     React__namespace.createElement("span", { "data-line-old-num": unifiedLine.oldLineNumber, className: "inline-block w-[50%]" }, unifiedLine.oldLineNumber),
                     React__namespace.createElement("span", { className: "w-[10px] shrink-0" }),
@@ -1382,15 +1485,15 @@ const _DiffUnifiedLine = React.memo(({ index, diffFile, lineNumber }) => {
             React__namespace.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: {
                     backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
                 } },
-                React__namespace.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+                React__namespace.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__namespace.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React__namespace.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }));
 };
 
 const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
@@ -1405,13 +1508,13 @@ const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExt
         return null;
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
         React__namespace.createElement("td", { className: "diff-line-extend-content p-0 align-top", colSpan: 2 },
-            React__namespace.createElement("div", { className: "diff-line-extend-wrapper sticky left-0", style: { width } },
+            React__namespace.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 &&
                     (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
                         diffFile,
-                        side: exports.SplitSide.old,
+                        side: core.SplitSide.old,
                         lineNumber: unifiedItem.oldLineNumber,
                         data: oldLineExtend.data,
                         onUpdate: diffFile.notifyAll,
@@ -1421,7 +1524,7 @@ const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExt
                     (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== null &&
                     (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
                         diffFile,
-                        side: exports.SplitSide.new,
+                        side: core.SplitSide.new,
                         lineNumber: unifiedItem.newLineNumber,
                         data: newLineExtend.data,
                         onUpdate: diffFile.notifyAll,
@@ -1495,8 +1598,8 @@ const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const onClose = () => setWidget({});
     const widgetSide = useWidget.getReadonlyState().widgetSide;
     const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
-    const oldWidget = unifiedItem.oldLineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
-    const newWidget = unifiedItem.newLineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
+    const oldWidget = unifiedItem.oldLineNumber && widgetSide === core.SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
+    const newWidget = unifiedItem.newLineNumber && widgetSide === core.SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
     const { useDiffContext } = useDiffViewContext();
     // 需要显示的时候才进行方法订阅，可以大幅度提高性能
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
@@ -1508,13 +1611,13 @@ const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
         return null;
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
         React__namespace.createElement("td", { className: "diff-line-widget-content p-0", colSpan: 2 },
-            React__namespace.createElement("div", { className: "diff-line-widget-wrapper sticky left-0", style: { width } },
+            React__namespace.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: exports.SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })),
+                    (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: core.SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })),
                 width > 0 &&
                     newWidget &&
-                    (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: exports.SplitSide.new, lineNumber: unifiedItem.newLineNumber, onClose }))))));
+                    (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: core.SplitSide.new, lineNumber: unifiedItem.newLineNumber, onClose }))))));
 };
 const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
@@ -1522,8 +1625,8 @@ const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
         const widgetLineNumber = s.widgetLineNumber;
         const widgetSide = s.widgetSide;
         const unifiedItem = diffFile.getUnifiedLine(index);
-        const oldWidget = unifiedItem.oldLineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
-        const newWidget = unifiedItem.newLineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
+        const oldWidget = unifiedItem.oldLineNumber && widgetSide === core.SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
+        const newWidget = unifiedItem.newLineNumber && widgetSide === core.SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
         const currentIsShow = oldWidget || newWidget;
         return currentIsShow;
     }, [diffFile, index]), (p, c) => p === c);
@@ -1533,30 +1636,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 = React.memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
+    const ref = React.useRef(null);
     const useDiffContextRef = React.useRef(useDiffContext);
     useDiffContextRef.current = useDiffContext;
     // performance optimization
     const useWidget = React.useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = React.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,
     }));
     index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
     React.useEffect(() => {
         const { setWidget } = useWidget.getReadonlyState();
         setWidget({});
     }, [diffFile, useWidget]);
+    React.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(),
@@ -1564,8 +1666,44 @@ const DiffUnifiedView = React.memo(({ diffFile }) => {
     });
     const width = Math.max(40, _width + 10);
     const lines = core.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(core.SplitSide.new);
+                    removeAllSelection();
+                    return;
+                }
+            }
+            ele = ele.parentElement;
+        }
+    };
     return (React__namespace.createElement(DiffWidgetContext.Provider, { value: contextValue },
         React__namespace.createElement("div", { className: `unified-diff-view ${enableWrap ? "unified-diff-view-wrap" : "unified-diff-view-normal"} w-full` },
+            React__namespace.createElement("style", { "data-select-style": true, ref: ref }),
             React__namespace.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`,
@@ -1583,7 +1721,7 @@ const DiffUnifiedView = React.memo(({ diffFile }) => {
                     React__namespace.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
                         lines.map((item) => (React__namespace.createElement(React.Fragment, { key: item.index },
                             React__namespace.createElement(DiffUnifiedHunkLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
-                            React__namespace.createElement(DiffUnifiedContentLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
+                            React__namespace.createElement(DiffUnifiedContentLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }),
                             React__namespace.createElement(DiffUnifiedWidgetLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
                             React__namespace.createElement(DiffUnifiedExtendLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile })))),
                         React__namespace.createElement(DiffUnifiedHunkLine, { index: diffFile.unifiedLineLength, lineNumber: diffFile.unifiedLineLength, diffFile: diffFile })))))));
@@ -1591,11 +1729,6 @@ const DiffUnifiedView = React.memo(({ diffFile }) => {
 DiffUnifiedView.displayName = "DiffUnifiedView";
 
 core._cacheMap.name = "@git-diff-view/react";
-exports.SplitSide = void 0;
-(function (SplitSide) {
-    SplitSide[SplitSide["old"] = 1] = "old";
-    SplitSide[SplitSide["new"] = 2] = "new";
-})(exports.SplitSide || (exports.SplitSide = {}));
 exports.DiffModeEnum = void 0;
 (function (DiffModeEnum) {
     // github like
@@ -1606,7 +1739,7 @@ exports.DiffModeEnum = void 0;
     DiffModeEnum[DiffModeEnum["Unified"] = 4] = "Unified";
 })(exports.DiffModeEnum || (exports.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 = React.useMemo(() => diffFile.getId(), [diffFile]);
     const wrapperRef = React.useRef();
     // performance optimization
@@ -1614,7 +1747,7 @@ const InternalDiffView = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     React.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);
         }
@@ -1642,6 +1775,9 @@ const InternalDiffView = (props) => {
         if (onAddWidgetClick !== _onAddWidgetClick.current) {
             setOnAddWidgetClick({ current: onAddWidgetClick });
         }
+        if (onCreateUseWidgetHook !== _onCreateUseWidgetHook) {
+            setOnCreateUseWidgetHook(onCreateUseWidgetHook);
+        }
         if (renderExtendLine !== _renderExtendLine) {
             setRenderExtendLine(renderExtendLine);
         }
@@ -1661,6 +1797,7 @@ const InternalDiffView = (props) => {
         renderExtendLine,
         extendData,
         onAddWidgetClick,
+        onCreateUseWidgetHook,
     ]);
     React.useEffect(() => {
         const cb = diffFile.subscribe(() => {
@@ -1672,7 +1809,7 @@ const InternalDiffView = (props) => {
     }, [diffFile]);
     const value = React.useMemo(() => ({ useDiffContext }), [useDiffContext]);
     return (React__namespace.createElement(DiffViewContext.Provider, { value: value },
-        React__namespace.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__namespace.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.28", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React__namespace.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -1738,8 +1875,12 @@ const DiffViewWithRef = (props, ref) => {
 const InnerDiffView = React.forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.26";
+const version = "0.0.28";
 
+Object.defineProperty(exports, "SplitSide", {
+    enumerable: true,
+    get: function () { return core.SplitSide; }
+});
 exports.DiffView = DiffView;
 exports.version = version;
 Object.keys(core).forEach(function (k) {