@git-diff-view/react 0.0.25 → 0.0.27

package/dist/esm/index.mjs

@@ -1,10 +1,10 @@
 'use client';
-import { NewLineSymbol, DiffLineType, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile } from '@git-diff-view/core';
+import { NewLineSymbol, DiffLineType, getSyntaxDiffTemplate, getSyntaxLineTemplate, getPlainDiffTemplate, getPlainLineTemplate, SplitSide, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile } from '@git-diff-view/core';
 export * from '@git-diff-view/core';
+export { SplitSide } from '@git-diff-view/core';
 import * as React from 'react';
-import { useState, useEffect, useRef, useLayoutEffect, createContext, useContext, useCallback, memo, Fragment, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { useState, useEffect, useRef, useLayoutEffect, createContext, useContext, memo, Fragment, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
-import { flushSync } from 'react-dom';
 import { createStore, ref } from 'reactivity-store';
 
 /******************************************************************************
@@ -65,7 +65,7 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
 }
 
 function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    if (typeof state === "function" ? receiver !== state || true : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (state.set(receiver, value)), value;
 }
 
@@ -126,7 +126,9 @@ const delLineNumberBGName = "--diff-del-lineNumber--";
 const plainContentBGName = "--diff-plain-content--";
 const expandContentBGName = "--diff-expand-content--";
 const plainLineNumberColorName = "--diff-plain-lineNumber-color--";
+const expandLineNumberColorName = "--diff-expand-lineNumber-color--";
 const plainLineNumberBGName = "--diff-plain-lineNumber--";
+const expandLineNumberBGName = "--diff-expand-lineNumber--";
 const hunkContentBGName = "--diff-hunk-content--";
 const hunkContentColorName = "--diff-hunk-content-color--";
 const hunkLineNumberBGName = "--diff-hunk-lineNumber--";
@@ -151,7 +153,7 @@ const getLineNumberBG = (isAdded, isDelete, hasDiff) => {
             ? `var(${delLineNumberBGName})`
             : hasDiff
                 ? `var(${plainLineNumberBGName})`
-                : `var(${expandContentBGName})`;
+                : `var(${expandLineNumberBGName})`;
 };
 
 const removeAllSelection = () => {
@@ -188,7 +190,7 @@ const syncScroll = (left, right) => {
 const diffFontSizeName = "--diff-font-size--";
 const diffAsideWidthName = "--diff-aside-width--";
 
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 const memoFunc = (func) => {
     const cache = {};
     return ((key) => {
@@ -280,6 +282,7 @@ const DiffNoNewLine = () => {
         React.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z" })));
 };
 
+/* eslint-disable max-lines */
 const temp = {};
 const formatStringToCamelCase = (str) => {
     if (str.startsWith("--"))
@@ -306,30 +309,52 @@ const getStyleObjectFromString = memoFunc((str) => {
     });
     return style;
 });
-const DiffString = ({ rawLine, diffLine, operator, enableWrap, }) => {
+const DiffString = ({ rawLine, diffLine, operator, plainLine, enableWrap, }) => {
     const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
-        const range = changes.range;
-        const str1 = rawLine.slice(0, range.location);
-        const str2 = rawLine.slice(range.location, range.location + range.length);
-        const str3 = rawLine.slice(range.location + range.length);
-        const isLast = str2.includes("\n");
-        const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
         const isNewLineSymbolChanged = changes.newLineSymbol;
+        if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) && typeof getPlainDiffTemplate === "function") {
+            getPlainDiffTemplate({ diffLine, rawLine, operator });
+        }
+        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) {
+            return (React.createElement("span", { className: "diff-line-content-raw" },
+                React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.plainTemplate } }),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
+                        width: `var(${diffFontSizeName})`,
+                        height: `var(${diffFontSizeName})`,
+                    } },
+                    React.createElement(DiffNoNewLine, null)))));
+        }
+        else {
+            // TODO remove
+            const range = changes.range;
+            const str1 = rawLine.slice(0, range.location);
+            const str2 = rawLine.slice(range.location, range.location + range.length);
+            const str3 = rawLine.slice(range.location + range.length);
+            const isLast = str2.includes("\n");
+            const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
+            return (React.createElement("span", { className: "diff-line-content-raw" },
+                React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
+                    str1,
+                    React.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
+                            backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
+                        } }, isLast ? (React.createElement(React.Fragment, null,
+                        _str2,
+                        React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
+                    str3),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
+                        width: `var(${diffFontSizeName})`,
+                        height: `var(${diffFontSizeName})`,
+                    } },
+                    React.createElement(DiffNoNewLine, null)))));
+        }
+    }
+    if (plainLine && !(plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
+        plainLine.template = getPlainLineTemplate(plainLine.value);
+    }
+    if (plainLine === null || plainLine === void 0 ? void 0 : plainLine.template) {
         return (React.createElement("span", { className: "diff-line-content-raw" },
-            React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
-                str1,
-                React.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
-                        backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                    } }, isLast ? (React.createElement(React.Fragment, null,
-                    _str2,
-                    React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
-                str3),
-            isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
-                    width: `var(${diffFontSizeName})`,
-                    height: `var(${diffFontSizeName})`,
-                } },
-                React.createElement(DiffNoNewLine, null)))));
+            React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: plainLine.template } })));
     }
     return React.createElement("span", { className: "diff-line-content-raw" }, rawLine);
 };
@@ -341,49 +366,73 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, }) =>
     const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
         const isNewLineSymbolChanged = changes.newLineSymbol;
-        const range = changes.range;
+        if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) && typeof getSyntaxDiffTemplate === "function") {
+            getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
+        }
+        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) {
+            return (React.createElement("span", { className: "diff-line-syntax-raw" },
+                React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.syntaxTemplate } }),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
+                        width: `var(${diffFontSizeName})`,
+                        height: `var(${diffFontSizeName})`,
+                    } },
+                    React.createElement(DiffNoNewLine, null)))));
+        }
+        else {
+            // TODO remove
+            const range = changes.range;
+            return (React.createElement("span", { className: "diff-line-syntax-raw" },
+                React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length }, (_a = syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    if (node.endIndex < range.location || range.location + range.length < node.startIndex) {
+                        return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
+                    }
+                    else {
+                        const index1 = range.location - node.startIndex;
+                        const index2 = index1 < 0 ? 0 : index1;
+                        const str1 = node.value.slice(0, index2);
+                        const str2 = node.value.slice(index2, index1 + range.length);
+                        const str3 = node.value.slice(index1 + range.length);
+                        const isStart = str1.length || range.location === node.startIndex;
+                        const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
+                        const isLast = str2.includes("\n");
+                        const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
+                        return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_e = (_d = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _d === void 0 ? void 0 : _d.className) === null || _e === void 0 ? void 0 : _e.join(" "), style: getStyleObjectFromString(((_f = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _f === void 0 ? void 0 : _f.style) || "") },
+                            str1,
+                            React.createElement("span", { "data-diff-highlight": true, style: {
+                                    backgroundColor: operator === "add"
+                                        ? `var(${addContentHighlightBGName})`
+                                        : `var(${delContentHighlightBGName})`,
+                                    borderTopLeftRadius: isStart ? "0.2em" : undefined,
+                                    borderBottomLeftRadius: isStart ? "0.2em" : undefined,
+                                    borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
+                                    borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
+                                } }, isLast ? (React.createElement(React.Fragment, null,
+                                _str2,
+                                React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
+                            str3));
+                    }
+                })),
+                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
+                        width: `var(${diffFontSizeName})`,
+                        height: `var(${diffFontSizeName})`,
+                    } },
+                    React.createElement(DiffNoNewLine, null)))));
+        }
+    }
+    if (!syntaxLine.template) {
+        syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
+    }
+    if (syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.template) {
         return (React.createElement("span", { className: "diff-line-syntax-raw" },
-            React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length }, (_a = syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
-                var _a, _b, _c, _d, _e, _f;
-                if (node.endIndex < range.location || range.location + range.length < node.startIndex) {
-                    return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
-                }
-                else {
-                    const index1 = range.location - node.startIndex;
-                    const index2 = index1 < 0 ? 0 : index1;
-                    const str1 = node.value.slice(0, index2);
-                    const str2 = node.value.slice(index2, index1 + range.length);
-                    const str3 = node.value.slice(index1 + range.length);
-                    const isStart = str1.length || range.location === node.startIndex;
-                    const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
-                    const isLast = str2.includes("\n");
-                    const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
-                    return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_e = (_d = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _d === void 0 ? void 0 : _d.className) === null || _e === void 0 ? void 0 : _e.join(" "), style: getStyleObjectFromString(((_f = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _f === void 0 ? void 0 : _f.style) || "") },
-                        str1,
-                        React.createElement("span", { "data-diff-highlight": true, style: {
-                                backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                                borderTopLeftRadius: isStart ? "0.2em" : undefined,
-                                borderBottomLeftRadius: isStart ? "0.2em" : undefined,
-                                borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                                borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                            } }, isLast ? (React.createElement(React.Fragment, null,
-                            _str2,
-                            React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
-                        str3));
-                }
-            })),
-            isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
-                    width: `var(${diffFontSizeName})`,
-                    height: `var(${diffFontSizeName})`,
-                } },
-                React.createElement(DiffNoNewLine, null)))));
+            React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: syntaxLine.template } })));
     }
     return (React.createElement("span", { className: "diff-line-syntax-raw" }, (_b = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _b === void 0 ? void 0 : _b.map(({ node, wrapper }, index) => {
         var _a, _b, _c;
         return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
     })));
 };
-const DiffContent = ({ diffLine, rawLine, syntaxLine, enableWrap, enableHighlight, }) => {
+const DiffContent = ({ diffLine, rawLine, plainLine, syntaxLine, enableWrap, enableHighlight, }) => {
     var _a;
     const isAdded = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Add;
     const isDelete = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Delete;
@@ -395,7 +444,7 @@ const DiffContent = ({ diffLine, rawLine, syntaxLine, enableWrap, enableHighligh
             wordBreak: enableWrap ? "break-all" : "initial",
         } },
         React.createElement("span", { "data-operator": isAdded ? "+" : isDelete ? "-" : undefined, className: "diff-line-content-operator ml-[-1.5em] inline-block w-[1.5em] select-none indent-[0.2em]" }, isAdded ? "+" : isDelete ? "-" : " "),
-        enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, enableWrap: enableWrap }))));
+        enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, enableWrap: enableWrap }))));
 };
 
 const DiffViewContext = createContext(null);
@@ -406,9 +455,10 @@ const DiffWidgetContext = createContext(null);
 DiffWidgetContext.displayName = "DiffWidgetContext";
 const useDiffWidgetContext = () => useContext(DiffWidgetContext);
 
-const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
+const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, enableAddWidget, enableHighlight, }) => {
     var _a, _b;
     const getCurrentSyntaxLine = side === SplitSide.old ? diffFile.getOldSyntaxLine : diffFile.getNewSyntaxLine;
+    const getCurrentPlainLine = side === SplitSide.old ? diffFile.getOldPlainLine : diffFile.getNewPlainLine;
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const currentLine = side === SplitSide.old ? oldLine : newLine;
@@ -418,20 +468,17 @@ const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     const isAdded = ((_a = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _a === void 0 ? void 0 : _a.type) === DiffLineType.Add;
     const isDelete = ((_b = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _b === void 0 ? void 0 : _b.type) === DiffLineType.Delete;
     const { useDiffContext } = useDiffViewContext();
-    const { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
-        enableHighlight: s.enableHighlight,
-        enableAddWidget: s.enableAddWidget,
-        onAddWidgetClick: s.onAddWidgetClick,
-    }));
+    const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const contentBG = getContentBG(isAdded, isDelete, hasDiff);
     const lineNumberBG = getLineNumberBG(isAdded, isDelete, hasDiff);
     const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
+    const plainLine = getCurrentPlainLine(currentLine.lineNumber);
     return (React.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff || !hasContent ? "diff" : "plain", "data-side": SplitSide[side], className: "diff-line" + (hasContent ? " group" : "") }, hasContent ? (React.createElement(React.Fragment, null,
         React.createElement("td", { className: `diff-line-${SplitSide[side]}-num sticky left-0 w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`, style: {
                 backgroundColor: lineNumberBG,
-                color: `var(${plainLineNumberColorName})`,
+                color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
                 width: `var(${diffAsideWidthName})`,
                 minWidth: `var(${diffAsideWidthName})`,
                 maxWidth: `var(${diffAsideWidthName})`,
@@ -439,21 +486,21 @@ const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
             hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: currentLine.lineNumber, side: side, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] z-[1] translate-x-[-50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
             React.createElement("span", { "data-line-num": currentLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, currentLine.lineNumber)),
         React.createElement("td", { className: `diff-line-${SplitSide[side]}-content pr-[10px] align-top`, style: { backgroundColor: contentBG } },
-            React.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: currentLine.value, diffLine: currentLine.diff, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: `diff-line-${SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            React.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: currentLine.value, diffLine: currentLine.diff, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: `diff-line-${SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("span", null, "\u2002")))));
 };
-const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, }) => {
+const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, enableAddWidget, enableHighlight, }) => {
     const getCurrentLine = side === SplitSide.old ? diffFile.getSplitLeftLine : diffFile.getSplitRightLine;
     const currentLine = getCurrentLine(index);
     if (currentLine === null || currentLine === void 0 ? void 0 : currentLine.isHidden)
         return null;
-    return React.createElement(_DiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side });
+    return (React.createElement(InternalDiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
 };
 
 const useDomWidth = ({ selector, enable }) => {
     const [width, setWidth] = useState(0);
     const { useDiffContext } = useDiffViewContext();
-    const id = useDiffContext(useCallback((s) => s.id, []));
+    const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
     useEffect(() => {
         if (enable) {
             const container = document.querySelector(`#diff-root${id}`);
@@ -489,87 +536,96 @@ const useDomWidth = ({ selector, enable }) => {
             typedWrapper.setAttribute("data-observe", "height");
             return () => cleanCb();
         }
-    }, [selector, enable, id]);
+    }, [selector, enable, id, mounted]);
     return width;
 };
 
-// TODO
 const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
     const { useDiffContext } = useDiffViewContext();
-    const id = useDiffContext(useCallback((s) => s.id, []));
+    const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
     useEffect(() => {
         if (enable) {
-            let clean = () => { };
-            // fix the dom delay update
-            const timer = setTimeout(() => {
-                const container = document.querySelector(`#diff-root${id}`);
-                const elements = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(selector)) || []);
-                const wrappers = wrapper ? Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(wrapper)) || []) : elements;
-                if (elements.length === 2 && wrappers.length === 2) {
-                    const ele1 = elements[0];
-                    const ele2 = elements[1];
-                    const wrapper1 = wrappers[0];
-                    const wrapper2 = wrappers[1];
-                    const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
-                    const cb = () => {
-                        ele1.style.height = "auto";
-                        ele2.style.height = "auto";
-                        const rect1 = ele1.getBoundingClientRect();
-                        const rect2 = ele2.getBoundingClientRect();
-                        const maxHeight = Math.max(rect1.height, rect2.height);
-                        wrapper1.style.height = maxHeight + "px";
-                        wrapper2.style.height = maxHeight + "px";
-                        wrapper1.setAttribute("data-sync-height", String(maxHeight));
-                        wrapper2.setAttribute("data-sync-height", String(maxHeight));
-                    };
-                    cb();
-                    const observer = new ResizeObserver(cb);
-                    observer.observe(target);
-                    target.setAttribute("data-observe", "height");
-                    clean = () => {
-                        observer.disconnect();
-                        target === null || target === void 0 ? void 0 : target.removeAttribute("data-observe");
-                    };
+            const container = document.querySelector(`#diff-root${id}`);
+            const elements = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(selector)) || []);
+            const wrappers = wrapper ? Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(wrapper)) || []) : elements;
+            if (elements.length === 2 && wrappers.length === 2) {
+                const ele1 = elements[0];
+                const ele2 = elements[1];
+                const wrapper1 = wrappers[0];
+                const wrapper2 = wrappers[1];
+                const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
+                const typedTarget = target;
+                const cb = () => {
+                    ele1.style.height = "auto";
+                    ele2.style.height = "auto";
+                    const rect1 = ele1.getBoundingClientRect();
+                    const rect2 = ele2.getBoundingClientRect();
+                    const maxHeight = Math.max(rect1.height, rect2.height);
+                    wrapper1.style.height = maxHeight + "px";
+                    wrapper2.style.height = maxHeight + "px";
+                    wrapper1.setAttribute("data-sync-height", String(maxHeight));
+                    wrapper2.setAttribute("data-sync-height", String(maxHeight));
+                };
+                cb();
+                const cleanCb = () => {
+                    var _a;
+                    typedTarget.__observeCallback.delete(cb);
+                    if (typedTarget.__observeCallback.size === 0) {
+                        (_a = typedTarget.__observeInstance) === null || _a === void 0 ? void 0 : _a.disconnect();
+                        typedTarget.removeAttribute("data-observe");
+                        delete typedTarget.__observeCallback;
+                        delete typedTarget.__observeInstance;
+                    }
+                };
+                if (typedTarget.__observeCallback) {
+                    typedTarget.__observeCallback.add(cb);
+                    return () => cleanCb();
                 }
-            });
-            return () => {
-                clean();
-                clearTimeout(timer);
-            };
+                typedTarget.__observeCallback = new Set();
+                typedTarget.__observeCallback.add(cb);
+                const observer = new ResizeObserver(() => typedTarget.__observeCallback.forEach((cb) => cb()));
+                typedTarget.__observeInstance = observer;
+                observer.observe(target);
+                target.setAttribute("data-observe", "height");
+                return () => cleanCb();
+            }
         }
-    }, [selector, enable, side, id, wrapper]);
+    }, [selector, enable, side, id, wrapper, mounted]);
 };
 
-const _DiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend, side, lineNumber, }) => {
+const InternalDiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend, side, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     const currentExtend = side === SplitSide.old ? oldLineExtend : newLineExtend;
+    const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
     const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
-    const hasExtend = (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== undefined && (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== null;
+    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);
     const currentExtendRendered = hasExtend &&
         (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
             diffFile,
             side,
             lineNumber: currentLineNumber,
-            data: currentExtend.data,
+            data: currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data,
             onUpdate: diffFile.notifyAll,
         }));
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-extend-content"]`,
         wrapper: `tr[data-line="${lineNumber}-extend"]`,
-        side: SplitSide[side],
+        side: SplitSide[currentSideHasExtend ? side : otherSide],
         enable: hasExtend && typeof renderExtendLine === "function",
     });
     const width = useDomWidth({
         selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
-        enable: hasExtend && typeof renderExtendLine === "function",
+        enable: currentSideHasExtend && typeof renderExtendLine === "function",
     });
     if (!renderExtendLine)
         return null;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": SplitSide[side], className: "diff-line diff-line-extend" }, hasExtend ? (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-content p-0`, colSpan: 2 },
-        React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side], className: "diff-line-extend-wrapper sticky left-0", style: { width } }, width > 0 && currentExtendRendered))) : (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+    return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": SplitSide[side], className: "diff-line diff-line-extend" }, currentSideHasExtend ? (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-content p-0`, colSpan: 2 },
+        React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side], className: "diff-line-extend-wrapper sticky left-0 z-[1]", style: { width } }, width > 0 && currentExtendRendered))) : (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side] })))));
 };
 const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
@@ -590,7 +646,7 @@ const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const currentIsShow = hasExtend && (!currentLine.isHidden || !enableExpand);
     if (!currentIsShow)
         return null;
-    return (React.createElement(_DiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (React.createElement(InternalDiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const ExpandDown = ({ className }) => {
@@ -606,7 +662,7 @@ const ExpandAll = ({ className }) => {
         React.createElement("path", { d: "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })));
 };
 
-const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
+const InternalDiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getSplitHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -630,9 +686,7 @@ const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
                 minWidth: `var(${diffAsideWidthName})`,
                 maxWidth: `var(${diffAsideWidthName})`,
             } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
-                diffFile.onSplitHunkExpand("down", index);
-            } },
+            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
             React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
             React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
@@ -645,7 +699,7 @@ const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
                 } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)))) : (React.createElement("td", { className: "diff-line-hunk-placeholder select-none", colSpan: 2, style: { backgroundColor: `var(${hunkContentBGName})` } },
         React.createElement("div", { className: "min-h-[28px]" }, "\u2002")))));
 };
-const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
+const InternalDiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getSplitHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -668,9 +722,7 @@ const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
                 minWidth: `var(${diffAsideWidthName})`,
                 maxWidth: `var(${diffAsideWidthName})`,
             } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
-                diffFile.onSplitHunkExpand("down", index);
-            } },
+            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
             React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
             React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
@@ -682,16 +734,16 @@ const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
 };
-const _DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
+const InternalDiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const diffViewMode = useDiffContext.useShallowStableSelector((s) => s.mode);
     if (diffViewMode === DiffModeEnum.SplitGitHub ||
         diffViewMode === DiffModeEnum.Split ||
         diffViewMode === DiffModeEnum.Unified) {
-        return React.createElement(_DiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+        return React.createElement(InternalDiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
     }
     else {
-        return React.createElement(_DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+        return React.createElement(InternalDiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
     }
 };
 const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
@@ -702,10 +754,10 @@ const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(_DiffSplitHunkLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitHunkLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
 };
 
-const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
+const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
@@ -716,9 +768,11 @@ const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
     const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
     const currentLine = side === SplitSide.old ? oldLine : newLine;
-    const currentWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
+    const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
+    const currentHasWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
+    const hasWidget = oldLineWidget || newLineWidget;
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
-    const currentWidgetRendered = currentWidget &&
+    const currentWidgetRendered = currentHasWidget &&
         (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
             diffFile,
             side,
@@ -728,17 +782,17 @@ const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-widget-content"]`,
         wrapper: `tr[data-line="${lineNumber}-widget"]`,
-        side: SplitSide[side],
-        enable: !!currentWidget && typeof renderWidgetLine === "function",
+        side: SplitSide[currentHasWidget ? side : otherSide],
+        enable: hasWidget && typeof renderWidgetLine === "function",
     });
     const width = useDomWidth({
         selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
-        enable: !!currentWidget && typeof renderWidgetLine === "function",
+        enable: !!currentHasWidget && typeof renderWidgetLine === "function",
     });
     if (!renderWidgetLine)
         return null;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": SplitSide[side], className: "diff-line diff-line-widget" }, currentWidget ? (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-content p-0`, colSpan: 2 },
-        React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side], className: "diff-line-widget-wrapper sticky left-0", style: { width } }, width > 0 && currentWidgetRendered))) : (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+    return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": SplitSide[side], className: "diff-line diff-line-widget" }, currentHasWidget ? (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-content p-0`, colSpan: 2 },
+        React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side], className: "diff-line-widget-wrapper sticky left-0 z-[1]", style: { width } }, width > 0 && currentWidgetRendered))) : (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side] })))));
 };
 // TODO! improve performance
@@ -756,19 +810,11 @@ const DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(_DiffSplitWidgetLine$1, { index: index, side: side, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitWidgetLine$1, { index: index, side: side, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-const onMouseDown$1 = (e) => {
-    const ele = e.target;
-    // need remove all the selection
-    if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
-        removeAllSelection();
-        return;
-    }
-};
-const DiffSplitViewTable = ({ side, diffFile }) => {
+const DiffSplitViewTable = ({ side, diffFile, enableAddWidget, enableHighlight, onMouseDown, }) => {
     const className = side === SplitSide.new ? "new-diff-table" : "old-diff-table";
     const lines = getSplitContentLines(diffFile);
     return (React.createElement("table", { className: className + " w-full border-collapse border-spacing-0", "data-mode": SplitSide[side] },
@@ -783,10 +829,10 @@ const DiffSplitViewTable = ({ side, diffFile }) => {
                 React.createElement("th", { scope: "col" },
                     SplitSide[side],
                     " line content"))),
-        React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown$1 },
+        React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
             lines.map((line) => (React.createElement(Fragment, { key: line.index },
                 React.createElement(DiffSplitHunkLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
-                React.createElement(DiffSplitContentLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
+                React.createElement(DiffSplitContentLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }),
                 React.createElement(DiffSplitWidgetLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
                 React.createElement(DiffSplitExtendLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile })))),
             React.createElement(DiffSplitHunkLine$1, { side: side, index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))));
@@ -794,9 +840,14 @@ const DiffSplitViewTable = ({ side, diffFile }) => {
 const DiffSplitViewNormal = memo(({ diffFile }) => {
     const ref1 = useRef(null);
     const ref2 = useRef(null);
+    const ref = useRef();
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
-    const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
+    const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
+        fontSize: s.fontSize,
+        enableAddWidget: s.enableAddWidget,
+        enableHighlight: s.enableHighlight,
+    }));
     useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
     useEffect(() => {
         const left = ref1.current;
@@ -811,7 +862,46 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
         font,
     });
     const width = Math.max(40, _width + 25);
+    const setStyle = (side) => {
+        if (!ref.current)
+            return;
+        if (!side) {
+            ref.current.textContent = "";
+        }
+        else {
+            const id = `diff-root${diffFile.getId()}`;
+            ref.current.textContent = `#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+        }
+    };
+    const onMouseDown = (e) => {
+        let ele = e.target;
+        // need remove all the selection
+        if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
+            removeAllSelection();
+            return;
+        }
+        while (ele && ele instanceof HTMLElement) {
+            const state = ele.getAttribute("data-state");
+            const side = ele.getAttribute("data-side");
+            if (side) {
+                setStyle(SplitSide[side]);
+                removeAllSelection();
+            }
+            if (state) {
+                if (state === "extend" || state === "hunk" || state === "widget") {
+                    setStyle(undefined);
+                    removeAllSelection();
+                    return;
+                }
+                else {
+                    return;
+                }
+            }
+            ele = ele.parentElement;
+        }
+    };
     return (React.createElement("div", { className: "split-diff-view split-diff-view-normal flex w-full basis-[50%]" },
+        React.createElement("style", { "data-select-style": true, ref: ref }),
         React.createElement("div", { className: "old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref1, style: {
                 // @ts-ignore
                 [diffAsideWidthName]: `${Math.round(width)}px`,
@@ -819,7 +909,7 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: `var(${diffFontSizeName})`,
             } },
-            React.createElement(DiffSplitViewTable, { side: SplitSide.old, diffFile: diffFile })),
+            React.createElement(DiffSplitViewTable, { side: SplitSide.old, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight, onMouseDown: onMouseDown })),
         React.createElement("div", { className: "diff-split-line w-[1.5px]", style: { backgroundColor: `var(${borderColorName})` } }),
         React.createElement("div", { className: "new-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref2, style: {
                 // @ts-ignore
@@ -828,26 +918,24 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: `var(${diffFontSizeName})`,
             } },
-            React.createElement(DiffSplitViewTable, { side: SplitSide.new, diffFile: diffFile }))));
+            React.createElement(DiffSplitViewTable, { side: SplitSide.new, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight, onMouseDown: onMouseDown }))));
 });
 DiffSplitViewNormal.displayName = "DiffSplitViewNormal";
 
-const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
+const InternalDiffSplitLine = ({ index, diffFile, lineNumber, enableAddWidget, enableHighlight, }) => {
     var _a, _b;
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber);
+    const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber);
     const newSyntaxLine = diffFile.getNewSyntaxLine(newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber);
+    const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber);
     const hasDiff = !!(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || !!(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
     const hasChange = checkDiffLineIncludeChange(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || checkDiffLineIncludeChange(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
     const oldLineIsDelete = ((_a = oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) === null || _a === void 0 ? void 0 : _a.type) === DiffLineType.Delete;
     const newLineIsAdded = ((_b = newLine === null || newLine === void 0 ? void 0 : newLine.diff) === null || _b === void 0 ? void 0 : _b.type) === DiffLineType.Add;
     const { useDiffContext } = useDiffViewContext();
-    const { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
-        enableHighlight: s.enableHighlight,
-        enableAddWidget: s.enableAddWidget,
-        onAddWidgetClick: s.onAddWidgetClick,
-    }));
+    const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const hasOldLine = !!oldLine.lineNumber;
@@ -863,12 +951,12 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
                 React.createElement("span", { "data-line-num": oldLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, oldLine.lineNumber)),
             React.createElement("td", { className: "diff-line-old-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: oldLineContentBG } },
                 hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, plainLine: oldPlainLine, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React.createElement("span", null, "\u2002"))),
         hasNewLine ? (React.createElement(React.Fragment, null,
             React.createElement("td", { className: "diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.new], style: {
                     backgroundColor: newLineNumberBG,
-                    color: `var(${plainLineNumberColorName})`,
+                    color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
                     borderLeftColor: `var(${borderColorName})`,
                     borderLeftStyle: "solid",
                 } },
@@ -876,22 +964,22 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
                 React.createElement("span", { "data-line-num": newLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, newLine.lineNumber)),
             React.createElement("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.new], style: { backgroundColor: newLineContentBG } },
                 hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: {
+                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, plainLine: newPlainLine, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: {
                 backgroundColor: `var(${emptyBGName})`,
                 borderLeftColor: `var(${borderColorName})`,
                 borderLeftStyle: "solid",
             }, "data-side": SplitSide[SplitSide.new], colSpan: 2 },
             React.createElement("span", null, "\u2002")))));
 };
-const DiffSplitContentLine = ({ index, diffFile, lineNumber, }) => {
+const DiffSplitContentLine = ({ index, diffFile, lineNumber, enableAddWidget, enableHighlight, }) => {
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     if ((oldLine === null || oldLine === void 0 ? void 0 : oldLine.isHidden) && (newLine === null || newLine === void 0 ? void 0 : newLine.isHidden))
         return null;
-    return React.createElement(_DiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React.createElement(InternalDiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
 };
 
-const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
+const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
@@ -917,13 +1005,13 @@ const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newL
         }));
     return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
         oldExtendRendered ? (React.createElement("td", { className: "diff-line-extend-old-content p-0", colSpan: 2 },
-            React.createElement("div", { className: "diff-line-extend-wrapper" }, oldExtendRendered))) : (React.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newExtendRendered && React.createElement("span", null, "\u2002"))),
+            React.createElement("div", { className: "diff-line-extend-wrapper" }, oldExtendRendered))) : (React.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 })),
         newExtendRendered ? (React.createElement("td", { className: "diff-line-extend-new-content border-l-[1px] p-0", style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" }, colSpan: 2 },
             React.createElement("div", { className: "diff-line-extend-wrapper" }, newExtendRendered))) : (React.createElement("td", { className: "diff-line-extend-new-placeholder select-none border-l-[1px] p-0", style: {
                 backgroundColor: `var(${emptyBGName})`,
                 borderLeftColor: `var(${borderColorName})`,
                 borderLeftStyle: "solid",
-            }, colSpan: 2 }, oldExtendRendered && React.createElement("span", null, "\u2002")))));
+            }, colSpan: 2 }))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -942,7 +1030,7 @@ const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsShow = hasExtend && ((!(oldLine === null || oldLine === void 0 ? void 0 : oldLine.isHidden) && !(newLine === null || newLine === void 0 ? void 0 : newLine.isHidden)) || !enableExpand);
     if (!currentIsShow)
         return null;
-    return (React.createElement(_DiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (React.createElement(InternalDiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const DiffSplitHunkLineGitHub = ({ index, diffFile, lineNumber, }) => {
@@ -1016,7 +1104,7 @@ const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_b = currentHunk.splitInfo) === null || _b === void 0 ? void 0 : _b.plainText) || currentHunk.text))));
 };
-const _DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const diffViewMode = useDiffContext.useShallowStableSelector((s) => s.mode);
     if (diffViewMode === DiffModeEnum.SplitGitHub ||
@@ -1036,10 +1124,10 @@ const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(_DiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const { useDiffContext } = useDiffViewContext();
@@ -1058,13 +1146,13 @@ const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
         oldWidgetRendered ? (React.createElement("td", { className: "diff-line-widget-old-content p-0", colSpan: 2 },
-            React.createElement("div", { className: "diff-line-widget-wrapper" }, oldWidgetRendered))) : (React.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newWidgetRendered && React.createElement("span", null, "\u2002"))),
+            React.createElement("div", { className: "diff-line-widget-wrapper" }, oldWidgetRendered))) : (React.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 })),
         newWidgetRendered ? (React.createElement("td", { className: "diff-line-widget-new-content border-l-[1px] p-0", colSpan: 2, style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" } },
             React.createElement("div", { className: "diff-line-widget-wrapper" }, newWidgetRendered))) : (React.createElement("td", { className: "diff-line-widget-new-placeholder select-none border-l-[1px] p-0", style: {
                 backgroundColor: `var(${emptyBGName})`,
                 borderLeftColor: `var(${borderColorName})`,
                 borderLeftStyle: "solid",
-            }, colSpan: 2 }, oldWidgetRendered && React.createElement("span", null, "\u2002")))));
+            }, colSpan: 2 }))));
 };
 // TODO! improve performance
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
@@ -1081,9 +1169,96 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(_DiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const DiffSplitViewWrap = memo(({ diffFile }) => {
+    const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
+    const { useDiffContext } = useDiffViewContext();
+    const ref = useRef(null);
+    const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
+        fontSize: s.fontSize,
+        enableAddWidget: s.enableAddWidget,
+        enableHighlight: s.enableHighlight,
+    }));
+    useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
+    const font = useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]);
+    const _width = useTextWidth({
+        text: splitLineLength.toString(),
+        font,
+    });
+    const width = Math.max(40, _width + 25);
+    const lines = getSplitContentLines(diffFile);
+    const setStyle = (side) => {
+        if (!ref.current)
+            return;
+        if (!side) {
+            ref.current.textContent = "";
+        }
+        else {
+            const id = `diff-root${diffFile.getId()}`;
+            const targetSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
+            ref.current.textContent = `#${id} [data-side="${SplitSide[targetSide]}"] {user-select: none} \n#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+        }
+    };
+    const onMouseDown = (e) => {
+        let ele = e.target;
+        // need remove all the selection
+        if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
+            removeAllSelection();
+            return;
+        }
+        while (ele && ele instanceof HTMLElement) {
+            const state = ele.getAttribute("data-state");
+            const side = ele.getAttribute("data-side");
+            if (side) {
+                setStyle(SplitSide[side]);
+                removeAllSelection();
+            }
+            if (state) {
+                if (state === "extend" || state === "hunk" || state === "widget") {
+                    setStyle(undefined);
+                    removeAllSelection();
+                    return;
+                }
+                else {
+                    return;
+                }
+            }
+            ele = ele.parentElement;
+        }
+    };
+    return (React.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full" },
+        React.createElement("div", { className: "diff-table-wrapper w-full", style: {
+                // @ts-ignore
+                [diffAsideWidthName]: `${Math.round(width)}px`,
+                fontFamily: "Menlo, Consolas, monospace",
+                fontSize: `var(${diffFontSizeName})`,
+            } },
+            React.createElement("style", { "data-select-style": true, ref: ref }),
+            React.createElement("table", { className: "diff-table w-full table-fixed border-collapse border-spacing-0" },
+                React.createElement("colgroup", null,
+                    React.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) }),
+                    React.createElement("col", { className: "diff-table-old-content-col" }),
+                    React.createElement("col", { className: "diff-table-new-num-col", width: Math.round(width) }),
+                    React.createElement("col", { className: "diff-table-new-content-col" })),
+                React.createElement("thead", { className: "hidden" },
+                    React.createElement("tr", null,
+                        React.createElement("th", { scope: "col" }, "old line number"),
+                        React.createElement("th", { scope: "col" }, "old line content"),
+                        React.createElement("th", { scope: "col" }, "new line number"),
+                        React.createElement("th", { scope: "col" }, "new line content"))),
+                React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
+                    lines.map((line) => (React.createElement(Fragment, { key: line.index },
+                        React.createElement(DiffSplitHunkLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
+                        React.createElement(DiffSplitContentLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }),
+                        React.createElement(DiffSplitWidgetLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
+                        React.createElement(DiffSplitExtendLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile })))),
+                    React.createElement(DiffSplitHunkLine, { index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))))));
+});
+DiffSplitViewWrap.displayName = "DiffSplitViewWrap";
+
 const createDiffConfigStore = (props, diffFileId) => {
     return createStore(() => {
         var _a, _b;
@@ -1091,6 +1266,8 @@ const createDiffConfigStore = (props, diffFileId) => {
         const setId = (_id) => (id.value = _id);
         const mode = ref(props.diffViewMode);
         const setMode = (_mode) => (mode.value = _mode);
+        const mounted = ref(props.isMounted);
+        const setMounted = (_mounted) => (mounted.value = _mounted);
         const enableWrap = ref(props.diffViewWrap);
         const setEnableWrap = (_enableWrap) => (enableWrap.value = _enableWrap);
         const enableAddWidget = ref(props.diffViewAddWidget);
@@ -1129,6 +1306,8 @@ const createDiffConfigStore = (props, diffFileId) => {
         const setRenderWidgetLine = (_renderWidgetLine) => (renderWidgetLine.value = _renderWidgetLine);
         const renderExtendLine = ref(props.renderExtendLine);
         const setRenderExtendLine = (_renderExtendLine) => (renderExtendLine.value = _renderExtendLine);
+        const onCreateUseWidgetHook = ref(props.onCreateUseWidgetHook);
+        const setOnCreateUseWidgetHook = (_onCreateUseWidgetHook) => (onCreateUseWidgetHook.value = _onCreateUseWidgetHook);
         // 避免无意义的订阅
         const onAddWidgetClick = { current: props.onAddWidgetClick };
         const setOnAddWidgetClick = (_onAddWidgetClick) => (onAddWidgetClick.current = _onAddWidgetClick.current);
@@ -1137,6 +1316,8 @@ const createDiffConfigStore = (props, diffFileId) => {
             setId,
             mode,
             setMode,
+            mounted,
+            setMounted,
             enableWrap,
             setEnableWrap,
             enableAddWidget,
@@ -1153,6 +1334,8 @@ const createDiffConfigStore = (props, diffFileId) => {
             setRenderExtendLine,
             onAddWidgetClick,
             setOnAddWidgetClick,
+            onCreateUseWidgetHook,
+            setOnCreateUseWidgetHook,
         };
     });
 };
@@ -1171,95 +1354,15 @@ const createDiffWidgetStore = (useDiffContextRef) => {
         return { widgetSide, widgetLineNumber, setWidget };
     });
 };
-const createDiffSplitConfigStore = () => {
-    return createStore(() => {
-        const splitRef = ref(undefined);
-        const setSplit = (side) => {
-            flushSync(() => {
-                splitRef.value = side;
-            });
-        };
-        return { splitRef, setSplit };
-    });
-};
-
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-const Style = ({ useSelector, id, }) => {
-    const splitRef = useSelector((s) => s.splitRef);
-    return (React.createElement("style", { "data-select-style": true }, splitRef === SplitSide.old
-        ? `#${id} td[data-side="${SplitSide[SplitSide.new]}"] {user-select: none}`
-        : splitRef === SplitSide.new
-            ? `#${id} td[data-side="${SplitSide[SplitSide.old]}"] {user-select: none}`
-            : ""));
-};
-const DiffSplitViewWrap = memo(({ diffFile }) => {
-    const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
-    const { useDiffContext } = useDiffViewContext();
-    const useSplitConfig = useMemo(() => createDiffSplitConfigStore(), []);
-    const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
-    useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
-    const onMouseDown = useCallback((e) => {
-        let ele = e.target;
-        const setSelectSide = useSplitConfig.getReadonlyState().setSplit;
-        // need remove all the selection
-        if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
-            removeAllSelection();
-            return;
-        }
-        while (ele && ele instanceof HTMLElement && ele.nodeName !== "TD") {
-            ele = ele.parentElement;
-        }
-        if (ele instanceof HTMLElement) {
-            const side = ele.getAttribute("data-side");
-            if (side) {
-                setSelectSide(SplitSide[side]);
-                removeAllSelection();
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const font = useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]);
-    const _width = useTextWidth({
-        text: splitLineLength.toString(),
-        font,
-    });
-    const width = Math.max(40, _width + 25);
-    const lines = getSplitContentLines(diffFile);
-    return (React.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full" },
-        React.createElement("div", { className: "diff-table-wrapper w-full", style: {
-                // @ts-ignore
-                [diffAsideWidthName]: `${Math.round(width)}px`,
-                fontFamily: "Menlo, Consolas, monospace",
-                fontSize: `var(${diffFontSizeName})`,
-            } },
-            React.createElement(Style, { useSelector: useSplitConfig, id: `diff-root${diffFile.getId()}` }),
-            React.createElement("table", { className: "diff-table w-full table-fixed border-collapse border-spacing-0" },
-                React.createElement("colgroup", null,
-                    React.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) }),
-                    React.createElement("col", { className: "diff-table-old-content-col" }),
-                    React.createElement("col", { className: "diff-table-new-num-col", width: Math.round(width) }),
-                    React.createElement("col", { className: "diff-table-new-content-col" })),
-                React.createElement("thead", { className: "hidden" },
-                    React.createElement("tr", null,
-                        React.createElement("th", { scope: "col" }, "old line number"),
-                        React.createElement("th", { scope: "col" }, "old line content"),
-                        React.createElement("th", { scope: "col" }, "new line number"),
-                        React.createElement("th", { scope: "col" }, "new line content"))),
-                React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
-                    lines.map((line) => (React.createElement(Fragment, { key: line.index },
-                        React.createElement(DiffSplitHunkLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React.createElement(DiffSplitContentLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React.createElement(DiffSplitWidgetLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React.createElement(DiffSplitExtendLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile })))),
-                    React.createElement(DiffSplitHunkLine, { index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))))));
-});
-DiffSplitViewWrap.displayName = "DiffSplitViewWrap";
 
 const DiffSplitView = memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
     const useDiffContextRef = useRef(useDiffContext);
     useDiffContextRef.current = useDiffContext;
-    const enableWrap = useDiffContext.useShallowStableSelector((s) => s.enableWrap);
+    const { enableWrap, onCreateUseWidgetHook } = useDiffContext.useShallowStableSelector((s) => ({
+        enableWrap: s.enableWrap,
+        onCreateUseWidgetHook: s.onCreateUseWidgetHook,
+    }));
     // performance optimization
     const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
@@ -1267,11 +1370,14 @@ const DiffSplitView = memo(({ diffFile }) => {
         const { setWidget } = useWidget.getReadonlyState();
         setWidget({});
     }, [diffFile, useWidget]);
+    useEffect(() => {
+        onCreateUseWidgetHook === null || onCreateUseWidgetHook === void 0 ? void 0 : onCreateUseWidgetHook(useWidget);
+    }, [useWidget, onCreateUseWidgetHook]);
     return (React.createElement(DiffWidgetContext.Provider, { value: contextValue }, enableWrap ? React.createElement(DiffSplitViewWrap, { diffFile: diffFile }) : React.createElement(DiffSplitViewNormal, { diffFile: diffFile })));
 });
 DiffSplitView.displayName = "DiffSplitView";
 
-const DiffUnifiedOldLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
+const DiffUnifiedOldLine = ({ index, diffLine, rawLine, plainLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
     return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
         React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
                 color: `var(${plainLineNumberColorName})`,
@@ -1286,9 +1392,9 @@ const DiffUnifiedOldLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber,
                 React.createElement("span", { className: "w-[10px] shrink-0" }),
                 React.createElement("span", { className: "inline-block w-[50%]" }))),
         React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${delContentBGName})` } },
-            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
 };
-const DiffUnifiedNewLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
+const DiffUnifiedNewLine = ({ index, diffLine, rawLine, plainLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
     return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
         React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
                 color: `var(${plainLineNumberColorName})`,
@@ -1303,17 +1409,12 @@ const DiffUnifiedNewLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber,
                 React.createElement("span", { className: "w-[10px] shrink-0" }),
                 React.createElement("span", { "data-line-new-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber))),
         React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${addContentBGName})` } },
-            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
 };
-const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber }) => {
+const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber, enableWrap, enableAddWidget, enableHighlight, }) => {
     const unifiedLine = diffFile.getUnifiedLine(index);
     const { useDiffContext } = useDiffViewContext();
-    const { enableWrap, enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
-        enableWrap: s.enableWrap,
-        enableHighlight: s.enableHighlight,
-        enableAddWidget: s.enableAddWidget,
-        onAddWidgetClick: s.onAddWidgetClick,
-    }));
+    const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const hasDiff = unifiedLine.diff;
@@ -1327,18 +1428,23 @@ const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber }) => {
         : oldLinenumber
             ? diffFile.getOldSyntaxLine(oldLinenumber)
             : undefined;
+    const plainLine = newLineNumber
+        ? diffFile.getNewPlainLine(newLineNumber)
+        : oldLinenumber
+            ? diffFile.getOldPlainLine(oldLinenumber)
+            : undefined;
     if (hasChange) {
         if (unifiedLine.oldLineNumber) {
-            return (React.createElement(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.oldLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
+            return (React.createElement(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.oldLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
         }
         else {
-            return (React.createElement(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.newLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
+            return (React.createElement(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.newLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
         }
     }
     else {
         return (React.createElement("tr", { "data-line": lineNumber, "data-state": unifiedLine.diff ? "diff" : "plain", className: "diff-line group" },
             React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
-                    color: `var(${plainLineNumberColorName})`,
+                    color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
                     width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                     maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                     minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
@@ -1352,18 +1458,18 @@ const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber }) => {
             React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: {
                     backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
                 } },
-                React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+                React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
     }
 });
 _DiffUnifiedLine.displayName = "_DiffUnifiedLine";
-const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, }) => {
+const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, enableWrap, enableHighlight, enableAddWidget, }) => {
     const unifiedLine = diffFile.getUnifiedLine(index);
     if (unifiedLine === null || unifiedLine === void 0 ? void 0 : unifiedLine.isHidden)
         return null;
-    return React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }));
 };
 
-const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
+const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     const unifiedItem = diffFile.getUnifiedLine(index);
@@ -1375,7 +1481,7 @@ const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, ne
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
         React.createElement("td", { className: "diff-line-extend-content p-0 align-top", colSpan: 2 },
-            React.createElement("div", { className: "diff-line-extend-wrapper sticky left-0", style: { width } },
+            React.createElement("div", { className: "diff-line-extend-wrapper sticky left-0 z-[1]", style: { width } },
                 width > 0 &&
                     (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== undefined &&
                     (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== null &&
@@ -1410,10 +1516,10 @@ const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, }) => {
     const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
     if (!hasExtend || !unifiedItem || unifiedItem.isHidden)
         return null;
-    return (React.createElement(_DiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (React.createElement(InternalDiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
-const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getUnifiedHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -1455,10 +1561,10 @@ const DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.unifiedInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(_DiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const unifiedItem = diffFile.getUnifiedLine(index);
@@ -1478,7 +1584,7 @@ const _DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
         React.createElement("td", { className: "diff-line-widget-content p-0", colSpan: 2 },
-            React.createElement("div", { className: "diff-line-widget-wrapper sticky left-0", style: { width } },
+            React.createElement("div", { className: "diff-line-widget-wrapper sticky left-0 z-[1]", style: { width } },
                 width > 0 &&
                     oldWidget &&
                     (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })),
@@ -1499,34 +1605,33 @@ const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(_DiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-const onMouseDown = (e) => {
-    const ele = e.target;
-    // need remove all the selection
-    if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
-        removeAllSelection();
-        return;
-    }
-};
 const DiffUnifiedView = memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
+    const ref = useRef(null);
     const useDiffContextRef = useRef(useDiffContext);
     useDiffContextRef.current = useDiffContext;
     // performance optimization
     const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
-    const { fontSize, enableWrap } = useDiffContext.useShallowStableSelector((s) => ({
+    const { fontSize, enableWrap, enableHighlight, enableAddWidget, onCreateUseWidgetHook } = useDiffContext.useShallowStableSelector((s) => ({
         fontSize: s.fontSize,
         enableWrap: s.enableWrap,
+        enableHighlight: s.enableHighlight,
+        enableAddWidget: s.enableAddWidget,
+        onCreateUseWidgetHook: s.onCreateUseWidgetHook,
     }));
     useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
     useEffect(() => {
         const { setWidget } = useWidget.getReadonlyState();
         setWidget({});
     }, [diffFile, useWidget]);
+    useEffect(() => {
+        onCreateUseWidgetHook === null || onCreateUseWidgetHook === void 0 ? void 0 : onCreateUseWidgetHook(useWidget);
+    }, [useWidget, onCreateUseWidgetHook]);
     const unifiedLineLength = Math.max(diffFile.unifiedLineLength, diffFile.fileLineLength);
     const _width = useTextWidth({
         text: unifiedLineLength.toString(),
@@ -1534,8 +1639,44 @@ const DiffUnifiedView = memo(({ diffFile }) => {
     });
     const width = Math.max(40, _width + 10);
     const lines = getUnifiedContentLine(diffFile);
+    const setStyle = (side) => {
+        if (!ref.current)
+            return;
+        if (!side) {
+            ref.current.textContent = "";
+        }
+        else {
+            const id = `diff-root${diffFile.getId()}`;
+            ref.current.textContent = `#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+        }
+    };
+    const onMouseDown = (e) => {
+        let ele = e.target;
+        // need remove all the selection
+        if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
+            removeAllSelection();
+            return;
+        }
+        while (ele && ele instanceof HTMLElement) {
+            const state = ele.getAttribute("data-state");
+            if (state) {
+                if (state === "extend" || state === "hunk" || state === "widget") {
+                    setStyle(undefined);
+                    removeAllSelection();
+                    return;
+                }
+                else {
+                    setStyle(SplitSide.new);
+                    removeAllSelection();
+                    return;
+                }
+            }
+            ele = ele.parentElement;
+        }
+    };
     return (React.createElement(DiffWidgetContext.Provider, { value: contextValue },
         React.createElement("div", { className: `unified-diff-view ${enableWrap ? "unified-diff-view-wrap" : "unified-diff-view-normal"} w-full` },
+            React.createElement("style", { "data-select-style": true, ref: ref }),
             React.createElement("div", { className: "unified-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", style: {
                     // @ts-ignore
                     [diffAsideWidthName]: `${Math.round(width)}px`,
@@ -1553,7 +1694,7 @@ const DiffUnifiedView = memo(({ diffFile }) => {
                     React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
                         lines.map((item) => (React.createElement(Fragment, { key: item.index },
                             React.createElement(DiffUnifiedHunkLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
-                            React.createElement(DiffUnifiedContentLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
+                            React.createElement(DiffUnifiedContentLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }),
                             React.createElement(DiffUnifiedWidgetLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
                             React.createElement(DiffUnifiedExtendLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile })))),
                         React.createElement(DiffUnifiedHunkLine, { index: diffFile.unifiedLineLength, lineNumber: diffFile.unifiedLineLength, diffFile: diffFile })))))));
@@ -1561,11 +1702,6 @@ const DiffUnifiedView = memo(({ diffFile }) => {
 DiffUnifiedView.displayName = "DiffUnifiedView";
 
 _cacheMap.name = "@git-diff-view/react";
-var SplitSide;
-(function (SplitSide) {
-    SplitSide[SplitSide["old"] = 1] = "old";
-    SplitSide[SplitSide["new"] = 2] = "new";
-})(SplitSide || (SplitSide = {}));
 var DiffModeEnum;
 (function (DiffModeEnum) {
     // github like
@@ -1575,27 +1711,52 @@ var DiffModeEnum;
     DiffModeEnum[DiffModeEnum["Split"] = 3] = "Split";
     DiffModeEnum[DiffModeEnum["Unified"] = 4] = "Unified";
 })(DiffModeEnum || (DiffModeEnum = {}));
-const _InternalDiffView = (props) => {
-    const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, } = props;
+const InternalDiffView = (props) => {
+    const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, onCreateUseWidgetHook, isMounted, } = props;
     const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
-    const isMounted = useIsMounted();
     const wrapperRef = useRef();
     // performance optimization
     const useDiffContext = useMemo(() => createDiffConfigStore(props, diffFileId), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     useEffect(() => {
-        const { id, setId, mode, setMode, enableAddWidget, setEnableAddWidget, enableHighlight, setEnableHighlight, enableWrap, setEnableWrap, setExtendData, fontSize, setFontSize, onAddWidgetClick: _onAddWidgetClick, setOnAddWidgetClick, renderExtendLine: _renderExtendLine, setRenderExtendLine, renderWidgetLine: _renderWidgetLine, setRenderWidgetLine, } = useDiffContext.getReadonlyState();
-        diffFileId && diffFileId !== id && setId(diffFileId);
-        diffViewMode && diffViewMode !== mode && setMode(diffViewMode);
-        diffViewAddWidget !== enableAddWidget && setEnableAddWidget(diffViewAddWidget);
-        diffViewHighlight !== enableHighlight && setEnableHighlight(diffViewHighlight);
-        diffViewWrap !== enableWrap && setEnableWrap(diffViewWrap);
-        extendData && setExtendData(extendData);
-        diffViewFontSize && diffViewFontSize !== fontSize && setFontSize(diffViewFontSize);
-        onAddWidgetClick !== _onAddWidgetClick.current && setOnAddWidgetClick({ current: onAddWidgetClick });
-        renderExtendLine !== _renderExtendLine && setRenderExtendLine(renderExtendLine);
-        renderWidgetLine !== _renderWidgetLine && setRenderWidgetLine(renderWidgetLine);
+        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);
+        }
+        if (diffViewMode && diffViewMode !== mode) {
+            setMode(diffViewMode);
+        }
+        if (mounted !== isMounted) {
+            setMounted(isMounted);
+        }
+        if (diffViewAddWidget !== enableAddWidget) {
+            setEnableAddWidget(diffViewAddWidget);
+        }
+        if (diffViewHighlight !== enableHighlight) {
+            setEnableHighlight(diffViewHighlight);
+        }
+        if (diffViewWrap !== enableWrap) {
+            setEnableWrap(diffViewWrap);
+        }
+        if (extendData) {
+            setExtendData(extendData);
+        }
+        if (diffViewFontSize && diffViewFontSize !== fontSize) {
+            setFontSize(diffViewFontSize);
+        }
+        if (onAddWidgetClick !== _onAddWidgetClick.current) {
+            setOnAddWidgetClick({ current: onAddWidgetClick });
+        }
+        if (onCreateUseWidgetHook !== _onCreateUseWidgetHook) {
+            setOnCreateUseWidgetHook(onCreateUseWidgetHook);
+        }
+        if (renderExtendLine !== _renderExtendLine) {
+            setRenderExtendLine(renderExtendLine);
+        }
+        if (renderWidgetLine !== _renderWidgetLine) {
+            setRenderWidgetLine(renderWidgetLine);
+        }
     }, [
         useDiffContext,
         diffViewFontSize,
@@ -1604,10 +1765,12 @@ const _InternalDiffView = (props) => {
         diffViewWrap,
         diffViewAddWidget,
         diffFileId,
+        isMounted,
         renderWidgetLine,
         renderExtendLine,
         extendData,
         onAddWidgetClick,
+        onCreateUseWidgetHook,
     ]);
     useEffect(() => {
         const cb = diffFile.subscribe(() => {
@@ -1619,14 +1782,14 @@ const _InternalDiffView = (props) => {
     }, [diffFile]);
     const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
     return (React.createElement(DiffViewContext.Provider, { value: value },
-        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.25", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
+        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.27", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
                 } },
                 React.createElement("div", { id: isMounted ? `diff-root${diffFileId}` : undefined, className: "diff-view-wrapper" + (className ? ` ${className}` : ""), style: style }, diffViewMode & DiffModeEnum.Split ? (React.createElement(DiffSplitView, { diffFile: diffFile })) : (React.createElement(DiffUnifiedView, { diffFile: diffFile })))))));
 };
-const InternalDiffView = memo(_InternalDiffView);
+const MemoedInternalDiffView = memo(InternalDiffView);
 const DiffViewWithRef = (props, ref) => {
     var _a, _b;
     const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile } = props, restProps = __rest(props, ["registerHighlighter", "data", "diffViewTheme", "diffFile"]);
@@ -1650,6 +1813,7 @@ const DiffViewWithRef = (props, ref) => {
         (_b = (_a = diffFileRef.current).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
         diffFileRef.current = diffFile;
     }
+    const isMounted = useIsMounted();
     useEffect(() => {
         if (_diffFile && diffFile) {
             _diffFile._addClonedInstance(diffFile);
@@ -1679,12 +1843,12 @@ const DiffViewWithRef = (props, ref) => {
     useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
     if (!diffFile)
         return null;
-    return (React.createElement(InternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
+    return (React.createElement(MemoedInternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, isMounted: isMounted, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
 };
 const InnerDiffView = forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.25";
+const version = "0.0.27";
 
-export { DiffModeEnum, DiffView, SplitSide, version };
+export { DiffModeEnum, DiffView, version };
 //# sourceMappingURL=index.mjs.map