@git-diff-view/react 0.0.7 → 0.0.9

package/dist/cjs/index.development.js

@@ -107,34 +107,83 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var _Cache_keyArray, _Cache_maxLength;
-class Cache extends Map {
-    constructor() {
-        super(...arguments);
-        _Cache_keyArray.set(this, []);
-        _Cache_maxLength.set(this, 30);
-    }
-    setMaxLength(length) {
-        __classPrivateFieldSet(this, _Cache_maxLength, length, "f");
-        this._checkLength();
-    }
-    set(key, value) {
-        if (this.has(key))
-            return this;
-        __classPrivateFieldGet(this, _Cache_keyArray, "f").push(key);
-        this._checkLength();
-        return super.set(key, value);
-    }
-    _checkLength() {
-        while (__classPrivateFieldGet(this, _Cache_keyArray, "f").length > __classPrivateFieldGet(this, _Cache_maxLength, "f")) {
-            const key = __classPrivateFieldGet(this, _Cache_keyArray, "f").shift();
-            this.delete(key);
-        }
-    }
-}
-_Cache_keyArray = new WeakMap(), _Cache_maxLength = new WeakMap();
+const processAST = (ast) => {
+    let lineNumber = 1;
+    const syntaxObj = {};
+    const loopAST = (nodes, wrapper) => {
+        nodes.forEach((node) => {
+            if (node.type === "text") {
+                if (node.value.indexOf("\n") === -1) {
+                    const valueLength = node.value.length;
+                    if (!syntaxObj[lineNumber]) {
+                        node.startIndex = 0;
+                        node.endIndex = valueLength - 1;
+                        const item = {
+                            value: node.value,
+                            lineNumber,
+                            valueLength,
+                            nodeList: [{ node, wrapper }],
+                        };
+                        syntaxObj[lineNumber] = item;
+                    }
+                    else {
+                        node.startIndex = syntaxObj[lineNumber].valueLength;
+                        node.endIndex = node.startIndex + valueLength - 1;
+                        syntaxObj[lineNumber].value += node.value;
+                        syntaxObj[lineNumber].valueLength += valueLength;
+                        syntaxObj[lineNumber].nodeList.push({ node, wrapper });
+                    }
+                    node.lineNumber = lineNumber;
+                    return;
+                }
+                const lines = node.value.split("\n");
+                node.children = node.children || [];
+                for (let i = 0; i < lines.length; i++) {
+                    const _value = i === lines.length - 1 ? lines[i] : lines[i] + "\n";
+                    const _lineNumber = i === 0 ? lineNumber : ++lineNumber;
+                    const _valueLength = _value.length;
+                    const _node = {
+                        type: "text",
+                        value: _value,
+                        startIndex: Infinity,
+                        endIndex: Infinity,
+                        lineNumber: _lineNumber,
+                    };
+                    if (!syntaxObj[_lineNumber]) {
+                        _node.startIndex = 0;
+                        _node.endIndex = _valueLength - 1;
+                        const item = {
+                            value: _value,
+                            lineNumber: _lineNumber,
+                            valueLength: _valueLength,
+                            nodeList: [{ node: _node, wrapper }],
+                        };
+                        syntaxObj[_lineNumber] = item;
+                    }
+                    else {
+                        _node.startIndex = syntaxObj[_lineNumber].valueLength;
+                        _node.endIndex = _node.startIndex + _valueLength - 1;
+                        syntaxObj[_lineNumber].value += _value;
+                        syntaxObj[_lineNumber].valueLength += _valueLength;
+                        syntaxObj[_lineNumber].nodeList.push({ node: _node, wrapper });
+                    }
+                    node.children.push(_node);
+                }
+                node.lineNumber = lineNumber;
+                return;
+            }
+            if (node.children) {
+                loopAST(node.children, node);
+                node.lineNumber = lineNumber;
+            }
+        });
+    };
+    loopAST(ast.children);
+    return { syntaxFileObject: syntaxObj, syntaxFileLineNumber: lineNumber };
+};
 
 const lowlight = lowlight$1.createLowlight(lowlight$1.all);
+// !SEE https://github.com/highlightjs/highlightjs-vue
 lowlight.register("vue", function hljsDefineVue(hljs) {
     return {
         subLanguage: "xml",
@@ -180,50 +229,95 @@ lowlight.register("vue", function hljsDefineVue(hljs) {
         ],
     };
 });
-const highlighter = lowlight;
-let _autoDetectLang = true;
+const instance = { name: "lowlight" };
 let _maxLineToIgnoreSyntax = 2000;
 const _ignoreSyntaxHighlightList = [];
-Object.defineProperty(highlighter, "maxLineToIgnoreSyntax", {
+Object.defineProperty(instance, "maxLineToIgnoreSyntax", {
     get: () => _maxLineToIgnoreSyntax,
 });
-Object.defineProperty(highlighter, "setMaxLineToIgnoreSyntax", {
+Object.defineProperty(instance, "setMaxLineToIgnoreSyntax", {
     value: (v) => {
         _maxLineToIgnoreSyntax = v;
     },
 });
-Object.defineProperty(highlighter, "autoDetectLang", {
-    get: () => _autoDetectLang,
-});
-Object.defineProperty(highlighter, "setAutoDetectLang", {
-    value: (v) => {
-        _autoDetectLang = v;
-    },
-});
-Object.defineProperty(highlighter, "ignoreSyntaxHighlightList", {
+Object.defineProperty(instance, "ignoreSyntaxHighlightList", {
     get: () => _ignoreSyntaxHighlightList,
 });
-Object.defineProperty(highlighter, "setIgnoreSyntaxHighlightList", {
+Object.defineProperty(instance, "setIgnoreSyntaxHighlightList", {
     value: (v) => {
         _ignoreSyntaxHighlightList.length = 0;
         _ignoreSyntaxHighlightList.push(...v);
     },
 });
+Object.defineProperty(instance, "getAST", {
+    value: (raw, fileName, lang) => {
+        let hasRegisteredLang = true;
+        if (!lowlight.registered(lang)) {
+            console.warn(`not support current lang: ${lang} yet`);
+            hasRegisteredLang = false;
+        }
+        if (fileName &&
+            highlighter.ignoreSyntaxHighlightList.some((item) => item instanceof RegExp ? item.test(fileName) : fileName === item)) {
+            console.warn(`ignore syntax for current file, because the fileName is in the ignoreSyntaxHighlightList: ${fileName}`);
+            return;
+        }
+        if (hasRegisteredLang) {
+            return lowlight.highlight(lang, raw);
+        }
+        else {
+            return lowlight.highlightAuto(raw);
+        }
+    },
+});
+Object.defineProperty(instance, "processAST", {
+    value: (ast) => {
+        return processAST(ast);
+    },
+});
+const highlighter = instance;
 
-var _File_instances, _File_doAST, _File_doCheck;
+var _Cache_keyArray, _Cache_maxLength;
+class Cache extends Map {
+    constructor() {
+        super(...arguments);
+        _Cache_keyArray.set(this, []);
+        _Cache_maxLength.set(this, 30);
+    }
+    setMaxLength(length) {
+        __classPrivateFieldSet(this, _Cache_maxLength, length, "f");
+        this._checkLength();
+    }
+    set(key, value) {
+        if (this.has(key))
+            return this;
+        __classPrivateFieldGet(this, _Cache_keyArray, "f").push(key);
+        this._checkLength();
+        return super.set(key, value);
+    }
+    _checkLength() {
+        while (__classPrivateFieldGet(this, _Cache_keyArray, "f").length > __classPrivateFieldGet(this, _Cache_maxLength, "f")) {
+            const key = __classPrivateFieldGet(this, _Cache_keyArray, "f").shift();
+            this.delete(key);
+        }
+    }
+}
+_Cache_keyArray = new WeakMap(), _Cache_maxLength = new WeakMap();
+
+var _File_instances, _File_doCheck;
 const map = new Cache();
+const devKey = "@git-diff-cache";
 map.setMaxLength(50);
 map.name = "@git-diff-view/core";
 if (typeof globalThis !== "undefined") {
-    if (Array.isArray(globalThis.__diff_cache__)) {
-        globalThis.__diff_cache__ = globalThis.__diff_cache__.filter((i) => i !== map);
-        if (globalThis.__diff_cache__.length > 0) {
+    if (Array.isArray(globalThis[devKey])) {
+        globalThis[devKey] = globalThis[devKey].filter((i) => i !== map);
+        if (globalThis[devKey].length > 0) {
             console.warn("there are multiple instance of @git-diff-view/core in the one environment!");
         }
-        globalThis.__diff_cache__.push(map);
+        globalThis[devKey].push(map);
     }
     else {
-        globalThis.__diff_cache__ = [map];
+        globalThis[devKey] = [map];
     }
 }
 class File {
@@ -239,38 +333,25 @@ class File {
         this.maxLineNumber = 0;
         Object.defineProperty(this, "__v_skip", { value: true });
     }
-    doSyntax({ autoDetectLang, registerHighlighter, }) {
+    doSyntax({ registerHighlighter }) {
         if (!this.raw || this.hasDoSyntax)
             return;
-        let hasRegisteredLang = true;
         const _highlighter = registerHighlighter || highlighter;
         if (this.syntaxLength) {
             console.error("current file already doSyntax before!");
             return;
         }
-        if (!_highlighter.registered(this.lang)) {
-            hasRegisteredLang = false;
-            if (!autoDetectLang) {
-                console.warn(`not support current lang: ${this.lang} yet`);
-                return;
-            }
-        }
         if (this.rawLength > _highlighter.maxLineToIgnoreSyntax) {
             console.warn(`ignore syntax for current file, because the rawLength is too long: ${this.rawLength}`);
             return;
         }
-        if (this.fileName &&
-            _highlighter.ignoreSyntaxHighlightList.some((item) => item instanceof RegExp ? item.test(this.fileName) : this.fileName === item)) {
-            console.warn(`ignore syntax for current file, because the fileName is in the ignoreSyntaxHighlightList: ${this.fileName}`);
+        this.ast = _highlighter.getAST(this.raw, this.fileName, this.lang);
+        if (!this.ast)
             return;
-        }
-        if (hasRegisteredLang) {
-            this.ast = _highlighter.highlight(this.lang, this.raw);
-        }
-        else {
-            this.ast = _highlighter.highlightAuto(this.raw);
-        }
-        __classPrivateFieldGet(this, _File_instances, "m", _File_doAST).call(this);
+        const { syntaxFileObject, syntaxFileLineNumber } = _highlighter.processAST(this.ast);
+        this.syntaxFile = syntaxFileObject;
+        this.syntaxLength = syntaxFileLineNumber;
+        this.highlighterName = _highlighter.name;
         {
             __classPrivateFieldGet(this, _File_instances, "m", _File_doCheck).call(this);
         }
@@ -298,81 +379,7 @@ class File {
         this.hasDoRaw = true;
     }
 }
-_File_instances = new WeakSet(), _File_doAST = function _File_doAST() {
-    const ast = this.ast;
-    let lineNumber = 1;
-    const syntaxObj = this.syntaxFile;
-    const loopAST = (nodes, wrapper) => {
-        nodes.forEach((node) => {
-            if (node.type === "text") {
-                if (node.value.indexOf("\n") === -1) {
-                    const valueLength = node.value.length;
-                    if (!syntaxObj[lineNumber]) {
-                        node.startIndex = 0;
-                        node.endIndex = valueLength - 1;
-                        const item = {
-                            value: node.value,
-                            lineNumber,
-                            valueLength,
-                            nodeList: [{ node, wrapper }],
-                        };
-                        syntaxObj[lineNumber] = item;
-                    }
-                    else {
-                        node.startIndex = syntaxObj[lineNumber].valueLength;
-                        node.endIndex = node.startIndex + valueLength - 1;
-                        syntaxObj[lineNumber].value += node.value;
-                        syntaxObj[lineNumber].valueLength += valueLength;
-                        syntaxObj[lineNumber].nodeList.push({ node, wrapper });
-                    }
-                    node.lineNumber = lineNumber;
-                    return;
-                }
-                const lines = node.value.split("\n");
-                node.children = node.children || [];
-                for (let i = 0; i < lines.length; i++) {
-                    const _value = i === lines.length - 1 ? lines[i] : lines[i] + "\n";
-                    const _lineNumber = i === 0 ? lineNumber : ++lineNumber;
-                    const _valueLength = _value.length;
-                    const _node = {
-                        type: "text",
-                        value: _value,
-                        startIndex: Infinity,
-                        endIndex: Infinity,
-                        lineNumber: _lineNumber,
-                    };
-                    if (!syntaxObj[_lineNumber]) {
-                        _node.startIndex = 0;
-                        _node.endIndex = _valueLength - 1;
-                        const item = {
-                            value: _value,
-                            lineNumber: _lineNumber,
-                            valueLength: _valueLength,
-                            nodeList: [{ node: _node, wrapper }],
-                        };
-                        syntaxObj[_lineNumber] = item;
-                    }
-                    else {
-                        _node.startIndex = syntaxObj[_lineNumber].valueLength;
-                        _node.endIndex = _node.startIndex + _valueLength - 1;
-                        syntaxObj[_lineNumber].value += _value;
-                        syntaxObj[_lineNumber].valueLength += _valueLength;
-                        syntaxObj[_lineNumber].nodeList.push({ node: _node, wrapper });
-                    }
-                    node.children.push(_node);
-                }
-                node.lineNumber = lineNumber;
-                return;
-            }
-            if (node.children) {
-                loopAST(node.children, node);
-                node.lineNumber = lineNumber;
-            }
-        });
-    };
-    loopAST(ast.children);
-    this.syntaxLength = lineNumber;
-}, _File_doCheck = function _File_doCheck() {
+_File_instances = new WeakSet(), _File_doCheck = function _File_doCheck() {
     if (this.rawLength && this.syntaxLength) {
         if (this.rawLength !== this.syntaxLength) {
             console.warn("the rawLength not match for the syntaxLength");
@@ -385,7 +392,7 @@ _File_instances = new WeakSet(), _File_doAST = function _File_doAST() {
     }
 };
 const getFile = (raw, lang, fileName) => {
-    const key = raw + "--" + "0.0.7" + "--" + lang;
+    const key = raw + "--" + "0.0.9" + "--" + lang;
     if (map.has(key))
         return map.get(key);
     const file = new File(raw, lang, fileName);
@@ -683,7 +690,7 @@ const getDiffRange = (additions, deletions) => {
 };
 
 /* eslint-disable max-lines */
-// NODE: ALL of the Diff parse logic from desktop, SEE https://github.com/desktop/desktop
+// !NOTE: ALL of the diff parse logic copy from desktop, SEE https://github.com/desktop/desktop
 // https://en.wikipedia.org/wiki/Diff_utility
 //
 // @@ -l,s +l,s @@ optional section heading
@@ -1013,7 +1020,9 @@ class DiffParser {
 }
 const parseInstance = new DiffParser();
 
-var _DiffFile_instances, _DiffFile_oldFileResult, _DiffFile_newFileResult, _DiffFile_diffListResults, _DiffFile_diffLines, _DiffFile_oldFileDiffLines, _DiffFile_newFileDiffLines, _DiffFile_oldFileLines, _DiffFile_newFileLines, _DiffFile_oldFileSyntaxLines, _DiffFile_newFileSyntaxLines, _DiffFile_oldFilePlaceholderLines, _DiffFile_newFilePlaceholderLines, _DiffFile_splitLeftLines, _DiffFile_splitRightLines, _DiffFile_splitHunksLines, _DiffFile_unifiedLines, _DiffFile_unifiedHunksLines, _DiffFile_listeners, _DiffFile_hasInitRaw, _DiffFile_hasInitSyntax, _DiffFile_hasBuildSplit, _DiffFile_hasBuildUnified, _DiffFile_updateCount, _DiffFile_composeByDiff, _DiffFile_id, _DiffFile_clonedInstance, _DiffFile_doDiff, _DiffFile_doFile, _DiffFile_composeRaw, _DiffFile_composeFile, _DiffFile_composeDiff, _DiffFile_composeSyntax, _DiffFile_getOldDiffLine, _DiffFile_getNewDiffLine, _DiffFile_getOldRawLine, _DiffFile_getNewRawLine;
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable max-lines */
+var _DiffFile_instances, _DiffFile_oldFileResult, _DiffFile_newFileResult, _DiffFile_diffListResults, _DiffFile_diffLines, _DiffFile_oldFileDiffLines, _DiffFile_newFileDiffLines, _DiffFile_oldFileLines, _DiffFile_newFileLines, _DiffFile_oldFileSyntaxLines, _DiffFile_newFileSyntaxLines, _DiffFile_oldFilePlaceholderLines, _DiffFile_newFilePlaceholderLines, _DiffFile_splitLeftLines, _DiffFile_splitRightLines, _DiffFile_splitHunksLines, _DiffFile_unifiedLines, _DiffFile_unifiedHunksLines, _DiffFile_listeners, _DiffFile_hasInitRaw, _DiffFile_hasInitSyntax, _DiffFile_hasBuildSplit, _DiffFile_hasBuildUnified, _DiffFile_updateCount, _DiffFile_composeByDiff, _DiffFile_highlighterName, _DiffFile_id, _DiffFile_clonedInstance, _DiffFile_doDiff, _DiffFile_doFile, _DiffFile_composeRaw, _DiffFile_composeFile, _DiffFile_composeDiff, _DiffFile_composeSyntax, _DiffFile_getOldDiffLine, _DiffFile_getNewDiffLine, _DiffFile_getOldRawLine, _DiffFile_getNewRawLine;
 const composeLen = 40;
 const idSet = new Set();
 class DiffFile {
@@ -1054,7 +1063,8 @@ class DiffFile {
         _DiffFile_hasBuildUnified.set(this, false);
         _DiffFile_updateCount.set(this, 0);
         _DiffFile_composeByDiff.set(this, false);
-        this._version_ = "0.0.7";
+        _DiffFile_highlighterName.set(this, void 0);
+        this._version_ = "0.0.9";
         this._oldFileContent = "";
         this._oldFileLang = "";
         this._newFileContent = "";
@@ -1062,6 +1072,9 @@ class DiffFile {
         this.diffLineLength = 0;
         this.splitLineLength = 0;
         this.unifiedLineLength = 0;
+        this.expandSplitAll = false;
+        this.expandUnifiedAll = false;
+        this.hasCollapsed = false;
         _DiffFile_id.set(this, "");
         _DiffFile_clonedInstance.set(this, new Map());
         this.getSplitLeftLine = (index) => {
@@ -1200,11 +1213,13 @@ class DiffFile {
                 Object.keys(__classPrivateFieldGet(this, _DiffFile_splitHunksLines, "f") || {}).forEach((key) => {
                     this.onSplitHunkExpand("all", +key, false);
                 });
+                this.expandSplitAll = true;
             }
             else {
                 Object.keys(__classPrivateFieldGet(this, _DiffFile_unifiedHunksLines, "f") || {}).forEach((key) => {
                     this.onUnifiedHunkExpand("all", +key, false);
                 });
+                this.expandUnifiedAll = true;
             }
             this.notifyAll();
         };
@@ -1236,6 +1251,7 @@ class DiffFile {
                         __classPrivateFieldGet(this, _DiffFile_splitHunksLines, "f")[item.splitInfo.endHiddenIndex] = item;
                     }
                 });
+                this.expandSplitAll = false;
             }
             else {
                 Object.values(__classPrivateFieldGet(this, _DiffFile_unifiedLines, "f") || {}).forEach((item) => {
@@ -1257,6 +1273,7 @@ class DiffFile {
                         __classPrivateFieldGet(this, _DiffFile_unifiedHunksLines, "f")[item.unifiedInfo.endHiddenIndex] = item;
                     }
                 });
+                this.expandUnifiedAll = false;
             }
             this.notifyAll();
         };
@@ -1283,6 +1300,10 @@ class DiffFile {
                 }
                 f();
             });
+            // support update from outside instance
+            __classPrivateFieldGet(this, _DiffFile_clonedInstance, "f").forEach((_, instance) => {
+                instance.notifyAll(true);
+            });
         };
         this.getUpdateCount = () => __classPrivateFieldGet(this, _DiffFile_updateCount, "f");
         this.getExpandEnabled = () => !__classPrivateFieldGet(this, _DiffFile_composeByDiff, "f");
@@ -1303,6 +1324,8 @@ class DiffFile {
             const splitLineLength = this.splitLineLength;
             const unifiedLineLength = this.unifiedLineLength;
             const composeByDiff = __classPrivateFieldGet(this, _DiffFile_composeByDiff, "f");
+            const highlighterName = __classPrivateFieldGet(this, _DiffFile_highlighterName, "f");
+            const hasCollapsed = this.hasCollapsed;
             // split
             const splitLeftLines = __classPrivateFieldGet(this, _DiffFile_splitLeftLines, "f");
             const splitRightLines = __classPrivateFieldGet(this, _DiffFile_splitRightLines, "f");
@@ -1331,7 +1354,9 @@ class DiffFile {
                 splitHunkLines,
                 unifiedLines,
                 unifiedHunkLines,
+                highlighterName,
                 composeByDiff,
+                hasCollapsed,
                 version,
             };
         };
@@ -1341,6 +1366,7 @@ class DiffFile {
             __classPrivateFieldSet(this, _DiffFile_hasBuildSplit, data.hasBuildSplit, "f");
             __classPrivateFieldSet(this, _DiffFile_hasBuildUnified, data.hasBuildUnified, "f");
             __classPrivateFieldSet(this, _DiffFile_composeByDiff, data.composeByDiff, "f");
+            __classPrivateFieldSet(this, _DiffFile_highlighterName, data.highlighterName, "f");
             __classPrivateFieldSet(this, _DiffFile_oldFileLines, data.oldFileLines, "f");
             __classPrivateFieldSet(this, _DiffFile_oldFileDiffLines, data.oldFileDiffLines, "f");
             __classPrivateFieldSet(this, _DiffFile_oldFileSyntaxLines, data.oldFileSyntaxLines, "f");
@@ -1351,6 +1377,7 @@ class DiffFile {
             __classPrivateFieldSet(this, _DiffFile_newFilePlaceholderLines, data.newFilePlaceholderLines, "f");
             this.splitLineLength = data.splitLineLength;
             this.unifiedLineLength = data.unifiedLineLength;
+            this.hasCollapsed = data.hasCollapsed;
             __classPrivateFieldSet(this, _DiffFile_splitLeftLines, data.splitLeftLines, "f");
             __classPrivateFieldSet(this, _DiffFile_splitRightLines, data.splitRightLines, "f");
             __classPrivateFieldSet(this, _DiffFile_splitHunksLines, data.splitHunkLines, "f");
@@ -1361,6 +1388,7 @@ class DiffFile {
             }
             this.notifyAll();
         };
+        this._getHighlighterName = () => __classPrivateFieldGet(this, _DiffFile_highlighterName, "f");
         this._getIsPureDiffRender = () => __classPrivateFieldGet(this, _DiffFile_composeByDiff, "f");
         this._addClonedInstance = (instance) => {
             const updateFunc = () => {
@@ -1469,10 +1497,12 @@ class DiffFile {
         __classPrivateFieldGet(this, _DiffFile_instances, "m", _DiffFile_composeFile).call(this);
         __classPrivateFieldSet(this, _DiffFile_hasInitRaw, true, "f");
     }
-    initSyntax({ autoDetectLang, registerHighlighter, } = {}) {
+    initSyntax({ registerHighlighter } = {}) {
+        var _a, _b;
         if (__classPrivateFieldGet(this, _DiffFile_hasInitSyntax, "f"))
             return;
-        __classPrivateFieldGet(this, _DiffFile_instances, "m", _DiffFile_composeSyntax).call(this, { registerHighlighter, autoDetectLang });
+        __classPrivateFieldGet(this, _DiffFile_instances, "m", _DiffFile_composeSyntax).call(this, { registerHighlighter });
+        __classPrivateFieldSet(this, _DiffFile_highlighterName, ((_a = __classPrivateFieldGet(this, _DiffFile_oldFileResult, "f")) === null || _a === void 0 ? void 0 : _a.highlighterName) || ((_b = __classPrivateFieldGet(this, _DiffFile_newFileResult, "f")) === null || _b === void 0 ? void 0 : _b.highlighterName) || __classPrivateFieldGet(this, _DiffFile_highlighterName, "f"), "f");
         __classPrivateFieldSet(this, _DiffFile_hasInitSyntax, true, "f");
     }
     init() {
@@ -1572,6 +1602,9 @@ class DiffFile {
             if (!prevIsHidden && isHidden) {
                 hideStart = len;
             }
+            if (isHidden) {
+                this.hasCollapsed = true;
+            }
             prevIsHidden = isHidden;
             if (oldDiffLine && newDiffLine && !oldLineHasChange && !newLineHasChange) {
                 const current = newDiffLine;
@@ -1700,6 +1733,9 @@ class DiffFile {
             if (!prevIsHidden && isHidden) {
                 hideStart = len;
             }
+            if (isHidden) {
+                this.hasCollapsed = true;
+            }
             prevIsHidden = isHidden;
             if (oldDiffLine && newDiffLine && !oldLineHasChange && !newLineHasChange) {
                 const current = newDiffLine;
@@ -1744,7 +1780,7 @@ class DiffFile {
         this.notifyAll();
     }
 }
-_DiffFile_oldFileResult = new WeakMap(), _DiffFile_newFileResult = new WeakMap(), _DiffFile_diffListResults = new WeakMap(), _DiffFile_diffLines = new WeakMap(), _DiffFile_oldFileDiffLines = new WeakMap(), _DiffFile_newFileDiffLines = new WeakMap(), _DiffFile_oldFileLines = new WeakMap(), _DiffFile_newFileLines = new WeakMap(), _DiffFile_oldFileSyntaxLines = new WeakMap(), _DiffFile_newFileSyntaxLines = new WeakMap(), _DiffFile_oldFilePlaceholderLines = new WeakMap(), _DiffFile_newFilePlaceholderLines = new WeakMap(), _DiffFile_splitLeftLines = new WeakMap(), _DiffFile_splitRightLines = new WeakMap(), _DiffFile_splitHunksLines = new WeakMap(), _DiffFile_unifiedLines = new WeakMap(), _DiffFile_unifiedHunksLines = new WeakMap(), _DiffFile_listeners = new WeakMap(), _DiffFile_hasInitRaw = new WeakMap(), _DiffFile_hasInitSyntax = new WeakMap(), _DiffFile_hasBuildSplit = new WeakMap(), _DiffFile_hasBuildUnified = new WeakMap(), _DiffFile_updateCount = new WeakMap(), _DiffFile_composeByDiff = new WeakMap(), _DiffFile_id = new WeakMap(), _DiffFile_clonedInstance = new WeakMap(), _DiffFile_instances = new WeakSet(), _DiffFile_doDiff = function _DiffFile_doDiff() {
+_DiffFile_oldFileResult = new WeakMap(), _DiffFile_newFileResult = new WeakMap(), _DiffFile_diffListResults = new WeakMap(), _DiffFile_diffLines = new WeakMap(), _DiffFile_oldFileDiffLines = new WeakMap(), _DiffFile_newFileDiffLines = new WeakMap(), _DiffFile_oldFileLines = new WeakMap(), _DiffFile_newFileLines = new WeakMap(), _DiffFile_oldFileSyntaxLines = new WeakMap(), _DiffFile_newFileSyntaxLines = new WeakMap(), _DiffFile_oldFilePlaceholderLines = new WeakMap(), _DiffFile_newFilePlaceholderLines = new WeakMap(), _DiffFile_splitLeftLines = new WeakMap(), _DiffFile_splitRightLines = new WeakMap(), _DiffFile_splitHunksLines = new WeakMap(), _DiffFile_unifiedLines = new WeakMap(), _DiffFile_unifiedHunksLines = new WeakMap(), _DiffFile_listeners = new WeakMap(), _DiffFile_hasInitRaw = new WeakMap(), _DiffFile_hasInitSyntax = new WeakMap(), _DiffFile_hasBuildSplit = new WeakMap(), _DiffFile_hasBuildUnified = new WeakMap(), _DiffFile_updateCount = new WeakMap(), _DiffFile_composeByDiff = new WeakMap(), _DiffFile_highlighterName = new WeakMap(), _DiffFile_id = new WeakMap(), _DiffFile_clonedInstance = new WeakMap(), _DiffFile_instances = new WeakSet(), _DiffFile_doDiff = function _DiffFile_doDiff() {
     if (!this._diffList)
         return;
     __classPrivateFieldSet(this, _DiffFile_diffListResults, this._diffList.map((s) => parseInstance.parse(s)), "f");
@@ -1939,11 +1975,11 @@ _DiffFile_oldFileResult = new WeakMap(), _DiffFile_newFileResult = new WeakMap()
             __classPrivateFieldGet(this, _DiffFile_newFileDiffLines, "f")[item.newLineNumber] = item;
         }
     });
-}, _DiffFile_composeSyntax = function _DiffFile_composeSyntax({ autoDetectLang, registerHighlighter, }) {
+}, _DiffFile_composeSyntax = function _DiffFile_composeSyntax({ registerHighlighter }) {
     var _a, _b, _c, _d;
-    (_a = __classPrivateFieldGet(this, _DiffFile_oldFileResult, "f")) === null || _a === void 0 ? void 0 : _a.doSyntax({ autoDetectLang, registerHighlighter });
+    (_a = __classPrivateFieldGet(this, _DiffFile_oldFileResult, "f")) === null || _a === void 0 ? void 0 : _a.doSyntax({ registerHighlighter });
     __classPrivateFieldSet(this, _DiffFile_oldFileSyntaxLines, (_b = __classPrivateFieldGet(this, _DiffFile_oldFileResult, "f")) === null || _b === void 0 ? void 0 : _b.syntaxFile, "f");
-    (_c = __classPrivateFieldGet(this, _DiffFile_newFileResult, "f")) === null || _c === void 0 ? void 0 : _c.doSyntax({ autoDetectLang, registerHighlighter });
+    (_c = __classPrivateFieldGet(this, _DiffFile_newFileResult, "f")) === null || _c === void 0 ? void 0 : _c.doSyntax({ registerHighlighter });
     __classPrivateFieldSet(this, _DiffFile_newFileSyntaxLines, (_d = __classPrivateFieldGet(this, _DiffFile_newFileResult, "f")) === null || _d === void 0 ? void 0 : _d.syntaxFile, "f");
 }, _DiffFile_getOldDiffLine = function _DiffFile_getOldDiffLine(lineNumber) {
     var _a;
@@ -2040,7 +2076,7 @@ const getUnifiedContentLine = (diffFile) => {
     return lines.filter((line) => line.type === exports.DiffFileLineType.content);
 };
 
-const versions = "0.0.7";
+const versions = "0.0.9";
 
 const useUnmount = (cb, deps) => {
     const ref = React.useRef(cb);
@@ -2221,14 +2257,11 @@ const getLineNumberBG = (isAdded, isDelete, hasDiff) => {
                 : `var(${expandContentBGName})`;
 };
 
-const _DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
-    var _a, _b;
+const _DiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend, side, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
-    const { extendData, renderExtendLine } = useDiffContext(React__namespace.useCallback((s) => ({ extendData: s.extendData, renderExtendLine: s.renderExtendLine }), []));
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
-    const oldLineExtend = (_a = extendData === null || extendData === void 0 ? void 0 : extendData.oldFile) === null || _a === void 0 ? void 0 : _a[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber];
-    const newLineExtend = (_b = extendData === null || extendData === void 0 ? void 0 : extendData.newFile) === null || _b === void 0 ? void 0 : _b[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber];
+    const renderExtendLine = useDiffContext(React__namespace.useCallback((s) => s.renderExtendLine, []));
     const currentExtend = side === exports.SplitSide.old ? oldLineExtend : newLineExtend;
     const currentLineNumber = side === exports.SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
     const otherSide = side === exports.SplitSide.old ? exports.SplitSide.new : exports.SplitSide.old;
@@ -2245,6 +2278,7 @@ const _DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
         return null;
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": exports.SplitSide[side], className: "diff-line diff-line-extend" }, currentExtend ? (React__namespace.createElement("td", { className: `diff-line-extend-${exports.SplitSide[side]}-content p-0`, colSpan: 2 },
         React__namespace.createElement("div", { className: "diff-line-extend-wrapper sticky left-0", style: { width } }, width > 0 &&
+            (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) &&
             (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
                 diffFile,
                 side,
@@ -2258,14 +2292,21 @@ const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
-    const hasExtend = useDiffContext(React__namespace.useCallback((s) => { var _a, _b, _c, _d; return ((_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber]) || ((_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]); }, [oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber, newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]));
+    const { oldLineExtend, newLineExtend } = useDiffContext(React__namespace.useCallback((s) => {
+        var _a, _b, _c, _d;
+        return ({
+            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber],
+            newLineExtend: (_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber],
+        });
+    }, [oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber, newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]));
+    const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
     // if the expand action not enabled, the `isHidden` property will never change
     const enableExpand = diffFile.getExpandEnabled();
     const currentLine = side === exports.SplitSide.old ? oldLine : newLine;
     const currentIsShow = hasExtend && (!currentLine.isHidden || !enableExpand);
     if (!currentIsShow)
         return null;
-    return React__namespace.createElement(_DiffSplitExtendLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+    return (React__namespace.createElement(_DiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const ExpandDown = ({ className }) => {
@@ -2281,6 +2322,50 @@ const ExpandAll = ({ className }) => {
         React__namespace.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 removeAllSelection = () => {
+    const selection = window.getSelection();
+    for (let i = 0; i < selection.rangeCount; i++) {
+        selection.removeRange(selection.getRangeAt(i));
+    }
+};
+const syncScroll = (left, right) => {
+    const onScroll = function (event) {
+        if (event === null || event.target === null)
+            return;
+        if (event.target === left) {
+            right.scrollTop = left.scrollTop;
+            right.scrollLeft = left.scrollLeft;
+        }
+        else {
+            left.scrollTop = right.scrollTop;
+            left.scrollLeft = right.scrollLeft;
+        }
+    };
+    if (!left.onscroll) {
+        left.onscroll = onScroll;
+    }
+    if (!right.onscroll) {
+        right.onscroll = onScroll;
+    }
+    return () => {
+        left.onscroll = null;
+        right.onscroll = null;
+    };
+};
+// eslint-disable-next-line @typescript-eslint/ban-types
+const memoFunc = (func) => {
+    const cache = {};
+    return ((key) => {
+        if (cache[key]) {
+            return cache[key];
+        }
+        const result = func(key);
+        cache[key] = result;
+        return result;
+    });
+};
+const asideWidth = "--diff-aside-width--";
+
 const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getSplitHunkLine(index);
@@ -2301,6 +2386,9 @@ const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber, }) => {
         React__namespace.createElement("td", { className: "diff-line-hunk-action sticky left-0 p-[1px] w-[1%] min-w-[40px] select-none", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
+                width: `var(${asideWidth})`,
+                minWidth: `var(${asideWidth})`,
+                maxWidth: `var(${asideWidth})`,
             } }, couldExpand ? (isFirstLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
             React__namespace.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px] relative", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
                 diffFile.onSplitHunkExpand("down", index);
@@ -2333,7 +2421,7 @@ const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpen
             width: "calc(var(--diff-font-size--) * 1.4)",
             height: "calc(var(--diff-font-size--) * 1.4)",
         } },
-        React__namespace.createElement("button", { className: "diff-add-widget w-0 h-0 overflow-hidden cursor-pointer rounded-md flex items-center justify-center transition-transform origin-center group-hover:w-full group-hover:h-full hover:scale-110", style: {
+        React__namespace.createElement("button", { className: "diff-add-widget w-full h-full invisible cursor-pointer rounded-md flex items-center justify-center transition-transform origin-center group-hover:visible hover:scale-110", style: {
                 color: `var(${addWidgetColorName})`,
                 zIndex: 1,
                 fontSize: `1.2em`,
@@ -2348,7 +2436,7 @@ const DiffUnifiedAddWidget = ({ lineNumber, side, onWidgetClick, onOpenAddWidget
             width: "calc(var(--diff-font-size--) * 1.4)",
             height: "calc(var(--diff-font-size--) * 1.4)",
         } },
-        React__namespace.createElement("button", { className: "diff-add-widget overflow-hidden cursor-pointer rounded-md w-0 h-0 flex items-center justify-center transition-transform origin-center group-hover:w-full group-hover:h-full hover:scale-110", style: {
+        React__namespace.createElement("button", { className: "diff-add-widget w-full h-full invisible cursor-pointer rounded-md flex items-center justify-center transition-transform origin-center group-hover:visible hover:scale-110", style: {
                 color: `var(${addWidgetColorName})`,
                 zIndex: 1,
                 fontSize: `1.2em`,
@@ -2359,6 +2447,30 @@ const DiffUnifiedAddWidget = ({ lineNumber, side, onWidgetClick, onOpenAddWidget
             } }, "+")));
 };
 
+const temp = {};
+const formatStringToCamelCase = (str) => {
+    const splitted = str.split("-");
+    if (splitted.length === 1)
+        return splitted[0];
+    return (splitted[0] +
+        splitted
+            .slice(1)
+            .map((word) => word[0].toUpperCase() + word.slice(1))
+            .join(""));
+};
+const getStyleObjectFromString = memoFunc((str) => {
+    if (!str)
+        return temp;
+    const style = {};
+    str.split(";").forEach((el) => {
+        const [property, value] = el.split(":");
+        if (!property)
+            return;
+        const formattedProperty = formatStringToCamelCase(property.trim());
+        style[formattedProperty] = value.trim();
+    });
+    return style;
+});
 const DiffString = ({ rawLine, diffLine, operator, }) => {
     const range = diffLine === null || diffLine === void 0 ? void 0 : diffLine.range;
     if (range) {
@@ -2393,9 +2505,9 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, }) => {
     if (range) {
         return (React__namespace.createElement("span", { className: "diff-line-syntax-raw" },
             React__namespace.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length }, (_a = syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e, _f;
                 if (node.endIndex < range.location || range.location + range.length < node.startIndex) {
-                    return (React__namespace.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" ") }, node.value));
+                    return (React__namespace.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
                 }
                 else {
                     const index1 = range.location - node.startIndex;
@@ -2406,7 +2518,7 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, }) => {
                     const isStart = str1.length || range.location === node.startIndex;
                     const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
                     const isNewLineSymbolChanged = range.isNewLineSymbolChanged;
-                    return (React__namespace.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_d = (_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.className) === null || _d === void 0 ? void 0 : _d.join(" ") },
+                    return (React__namespace.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_e = (_d = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _d === void 0 ? void 0 : _d.className) === null || _e === void 0 ? void 0 : _e.join(" "), style: getStyleObjectFromString(((_f = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _f === void 0 ? void 0 : _f.style) || "") },
                         str1,
                         React__namespace.createElement("span", { "data-diff-highlight": true, style: {
                                 backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
@@ -2428,8 +2540,8 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, }) => {
             }))));
     }
     return (React__namespace.createElement("span", { className: "diff-line-syntax-raw" }, (_b = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _b === void 0 ? void 0 : _b.map(({ node, wrapper }, index) => {
-        var _a, _b;
-        return (React__namespace.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" ") }, node.value));
+        var _a, _b, _c;
+        return (React__namespace.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
     })));
 };
 const DiffContent = ({ diffLine, rawLine, syntaxLine, enableWrap, enableHighlight, }) => {
@@ -2467,7 +2579,7 @@ const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
         onAddWidgetClick: s.onAddWidgetClick,
     }), []));
     const { useWidget } = useDiffWidgetContext();
-    const { setWidget } = useWidget.getReadonlyState();
+    const setWidget = useWidget.getReadonlyState().setWidget;
     const contentBG = getContentBG(isAdded, isDelete, hasDiff);
     const lineNumberBG = getLineNumberBG(isAdded, isDelete, hasDiff);
     const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
@@ -2475,8 +2587,11 @@ const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
         React__namespace.createElement("td", { className: `diff-line-${exports.SplitSide[side]}-num sticky left-0 pl-[10px] pr-[10px] text-right align-top select-none w-[1%] min-w-[40px]`, style: {
                 backgroundColor: lineNumberBG,
                 color: `var(${plainLineNumberColorName})`,
+                width: `var(${asideWidth})`,
+                minWidth: `var(${asideWidth})`,
+                maxWidth: `var(${asideWidth})`,
             } },
-            hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: currentLine.lineNumber, side: side, diffFile: diffFile, onWidgetClick: onAddWidgetClick, className: "absolute left-[100%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+            hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: currentLine.lineNumber, side: side, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
             React__namespace.createElement("span", { "data-line-num": currentLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, currentLine.lineNumber)),
         React__namespace.createElement("td", { className: `diff-line-${exports.SplitSide[side]}-content pr-[10px] align-top`, style: { backgroundColor: contentBG } },
             React__namespace.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: currentLine.value, diffLine: currentLine.diff, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: `diff-line-${exports.SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
@@ -2530,37 +2645,7 @@ const DiffSplitWidgetLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     return (React__namespace.createElement(_DiffSplitWidgetLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber, currentLine: currentLine, setWidget: setWidget, currentWidget: currentWidget }));
 };
 
-const removeAllSelection = () => {
-    const selection = window.getSelection();
-    for (let i = 0; i < selection.rangeCount; i++) {
-        selection.removeRange(selection.getRangeAt(i));
-    }
-};
-const syncScroll = (left, right) => {
-    const onScroll = function (event) {
-        if (event === null || event.target === null)
-            return;
-        if (event.target === left) {
-            right.scrollTop = left.scrollTop;
-            right.scrollLeft = left.scrollLeft;
-        }
-        else {
-            left.scrollTop = right.scrollTop;
-            left.scrollLeft = right.scrollLeft;
-        }
-    };
-    if (!left.onscroll) {
-        left.onscroll = onScroll;
-    }
-    if (!right.onscroll) {
-        right.onscroll = onScroll;
-    }
-    return () => {
-        left.onscroll = null;
-        right.onscroll = null;
-    };
-};
-
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 const onMouseDown$1 = (e) => {
     const ele = e.target;
     // need remove all the selection
@@ -2569,12 +2654,12 @@ const onMouseDown$1 = (e) => {
         return;
     }
 };
-const DiffSplitViewTable = ({ side, diffFile, width }) => {
+const DiffSplitViewTable = ({ side, diffFile }) => {
     const className = side === exports.SplitSide.new ? "new-diff-table" : "old-diff-table";
     const lines = getSplitContentLines(diffFile);
     return (React__namespace.createElement("table", { className: className + " border-collapse w-full", "data-mode": exports.SplitSide[side] },
         React__namespace.createElement("colgroup", null,
-            React__namespace.createElement("col", { className: `diff-table-${exports.SplitSide[side]}-num-col`, style: { minWidth: Math.round(width) + 25 } }),
+            React__namespace.createElement("col", { className: `diff-table-${exports.SplitSide[side]}-num-col` }),
             React__namespace.createElement("col", { className: `diff-table-${exports.SplitSide[side]}-content-col` })),
         React__namespace.createElement("thead", { className: "hidden" },
             React__namespace.createElement("tr", null,
@@ -2606,69 +2691,81 @@ const DiffSplitViewNormal = React.memo(({ diffFile }) => {
             return;
         return syncScroll(left, right);
     }, []);
-    const width = useTextWidth({
+    const font = React__namespace.useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]);
+    const _width = useTextWidth({
         text: splitLineLength.toString(),
-        font: { fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" },
+        font,
     });
+    const width = Math.max(40, _width + 25);
     return (React__namespace.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full flex basis-[50%]" },
         React__namespace.createElement("div", { className: "old-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable", ref: ref1, style: {
+                // @ts-ignore
+                [asideWidth]: `${Math.round(width)}px`,
                 overscrollBehaviorX: "none",
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: "var(--diff-font-size--)",
             } },
-            React__namespace.createElement(DiffSplitViewTable, { side: exports.SplitSide.old, diffFile: diffFile, width: width })),
+            React__namespace.createElement(DiffSplitViewTable, { side: exports.SplitSide.old, diffFile: diffFile })),
         React__namespace.createElement("div", { className: "diff-split-line w-[1.5px] bg-[#ccc]" }),
         React__namespace.createElement("div", { className: "new-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable", ref: ref2, style: {
+                // @ts-ignore
+                [asideWidth]: `${Math.round(width)}px`,
                 overscrollBehaviorX: "none",
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: "var(--diff-font-size--)",
             } },
-            React__namespace.createElement(DiffSplitViewTable, { side: exports.SplitSide.new, diffFile: diffFile, width: width }))));
+            React__namespace.createElement(DiffSplitViewTable, { side: exports.SplitSide.new, diffFile: diffFile }))));
 });
 DiffSplitViewNormal.displayName = "DiffSplitViewNormal";
 
-const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
-    var _a, _b;
+const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
-    // 需要显示的时候才进行方法订阅，可以大幅度提高性能
-    const { extendData, renderExtendLine } = useDiffContext(React__namespace.useCallback((s) => ({ extendData: s.extendData, renderExtendLine: s.renderExtendLine }), []));
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
-    const oldLineExtend = (_a = extendData === null || extendData === void 0 ? void 0 : extendData.oldFile) === null || _a === void 0 ? void 0 : _a[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber];
-    const newLineExtend = (_b = extendData === null || extendData === void 0 ? void 0 : extendData.newFile) === null || _b === void 0 ? void 0 : _b[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber];
+    // 需要显示的时候才进行方法订阅，可以大幅度提高性能
+    const renderExtendLine = useDiffContext(React__namespace.useCallback((s) => s.renderExtendLine, []));
     if (!renderExtendLine)
         return null;
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
         oldLineExtend ? (React__namespace.createElement("td", { className: "diff-line-extend-old-content p-0", colSpan: 2 },
-            React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
-                diffFile,
-                side: exports.SplitSide.old,
-                lineNumber: oldLine.lineNumber,
-                data: oldLineExtend.data,
-                onUpdate: diffFile.notifyAll,
-            })))) : (React__namespace.createElement("td", { className: "diff-line-extend-old-placeholder p-0 select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) &&
+                (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
+                    diffFile,
+                    side: exports.SplitSide.old,
+                    lineNumber: oldLine.lineNumber,
+                    data: oldLineExtend.data,
+                    onUpdate: diffFile.notifyAll,
+                }))))) : (React__namespace.createElement("td", { className: "diff-line-extend-old-placeholder p-0 select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002"))),
         newLineExtend ? (React__namespace.createElement("td", { className: "diff-line-extend-new-content p-0 border-l-[1px] border-l-[#ccc]", colSpan: 2 },
-            React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
-                diffFile,
-                side: exports.SplitSide.new,
-                lineNumber: newLine.lineNumber,
-                data: newLineExtend.data,
-                onUpdate: diffFile.notifyAll,
-            })))) : (React__namespace.createElement("td", { className: "diff-line-extend-new-placeholder p-0 border-l-[1px] border-l-[#ccc] select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) &&
+                (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
+                    diffFile,
+                    side: exports.SplitSide.new,
+                    lineNumber: newLine.lineNumber,
+                    data: newLineExtend.data,
+                    onUpdate: diffFile.notifyAll,
+                }))))) : (React__namespace.createElement("td", { className: "diff-line-extend-new-placeholder p-0 border-l-[1px] border-l-[#ccc] select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002")))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
-    const hasExtend = useDiffContext(React__namespace.useCallback((s) => { var _a, _b, _c, _d; return ((_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber]) || ((_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]); }, [oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber, newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]));
+    const { oldLineExtend, newLineExtend } = useDiffContext(React__namespace.useCallback((s) => {
+        var _a, _b, _c, _d;
+        return ({
+            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber],
+            newLineExtend: (_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber],
+        });
+    }, [oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber, newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]));
+    const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
     // if the expand action not enabled, the `isHidden` property will never change
     const enableExpand = diffFile.getExpandEnabled();
     const 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__namespace.createElement(_DiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React__namespace.createElement(_DiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
@@ -2688,7 +2785,7 @@ const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     if (!currentIsShow && !currentIsPureHunk)
         return null;
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", className: "diff-line diff-line-hunk" },
-        React__namespace.createElement("td", { className: "diff-line-hunk-action p-[1px] w-[1%] min-w-[40px] select-none", style: {
+        React__namespace.createElement("td", { className: "diff-line-hunk-action p-[1px] w-[1%] min-w-[40px] select-none relative", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
             } }, couldExpand ? (isFirstLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
@@ -2722,7 +2819,7 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
         onAddWidgetClick: s.onAddWidgetClick,
     }), []));
     const { useWidget } = useDiffWidgetContext();
-    const { setWidget } = useWidget.getReadonlyState();
+    const setWidget = useWidget.getReadonlyState().setWidget;
     const hasOldLine = !!oldLine.lineNumber;
     const hasNewLine = !!newLine.lineNumber;
     const oldLineContentBG = getContentBG(false, oldLineIsDelete, hasDiff);
@@ -2732,18 +2829,18 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
     return (React__namespace.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff ? "diff" : "plain", className: "diff-line" },
         hasOldLine ? (React__namespace.createElement(React__namespace.Fragment, null,
             React__namespace.createElement("td", { className: "diff-line-old-num group relative pl-[10px] pr-[10px] text-right align-top select-none w-[1%] min-w-[40px]", "data-side": exports.SplitSide[exports.SplitSide.old], style: { backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` } },
-                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: exports.SplitSide.old, diffFile: diffFile, onWidgetClick: onAddWidgetClick, className: "absolute left-[100%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: exports.SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
                 React__namespace.createElement("span", { "data-line-num": oldLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, oldLine.lineNumber)),
             React__namespace.createElement("td", { className: "diff-line-old-content group relative pr-[10px] align-top", "data-side": exports.SplitSide[exports.SplitSide.old], style: { backgroundColor: oldLineContentBG } },
-                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: exports.SplitSide.old, diffFile: diffFile, onWidgetClick: onAddWidgetClick, className: "absolute right-[100%] translate-x-[50%] z-[1] select-none", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: exports.SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] translate-x-[50%] z-[1] select-none", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
                 React__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": exports.SplitSide[exports.SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002"))),
         hasNewLine ? (React__namespace.createElement(React__namespace.Fragment, null,
             React__namespace.createElement("td", { className: "diff-line-new-num group relative pl-[10px] pr-[10px] text-right align-top select-none w-[1%] min-w-[40px] border-l-[1px] border-l-[#ccc]", "data-side": exports.SplitSide[exports.SplitSide.new], style: { backgroundColor: newLineNumberBG, color: `var(${plainLineNumberColorName})` } },
-                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.SplitSide.new, diffFile: diffFile, onWidgetClick: onAddWidgetClick, className: "absolute left-[100%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
                 React__namespace.createElement("span", { "data-line-num": newLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, newLine.lineNumber)),
             React__namespace.createElement("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": exports.SplitSide[exports.SplitSide.new], style: { backgroundColor: newLineContentBG } },
-                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.SplitSide.new, diffFile: diffFile, onWidgetClick: onAddWidgetClick, className: "absolute right-[100%] translate-x-[50%] z-[1] select-none", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] translate-x-[50%] z-[1] select-none", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
                 React__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px] border-l-[#ccc]", style: { backgroundColor: `var(${emptyBGName})` }, "data-side": exports.SplitSide[exports.SplitSide.new], colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002")))));
 };
@@ -2755,15 +2852,13 @@ const DiffSplitLine = ({ index, diffFile, lineNumber, }) => {
     return React__namespace.createElement(_DiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
+const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, oldLineWidget, newLineWidget, }) => {
     const { useWidget } = useDiffWidgetContext();
-    const { widgetLineNumber, widgetSide, setWidget } = useWidget(React__namespace.useCallback((s) => ({ widgetLineNumber: s.widgetLineNumber, widgetSide: s.widgetSide, setWidget: s.setWidget }), []));
+    const setWidget = useWidget.getReadonlyState().setWidget;
     const { useDiffContext } = useDiffViewContext();
     const renderWidgetLine = useDiffContext(React__namespace.useCallback((s) => s.renderWidgetLine, []));
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
-    const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
-    const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
     if (!renderWidgetLine)
         return null;
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
@@ -2794,7 +2889,7 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsShow = oldLineWidget || newLineWidget;
     if (!currentIsShow)
         return null;
-    return React__namespace.createElement(_DiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React__namespace.createElement(_DiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineWidget: oldLineWidget, newLineWidget: newLineWidget }));
 };
 
 const Style = ({ useSelector, id, }) => {
@@ -2838,10 +2933,12 @@ const DiffSplitViewWrap = React.memo(({ diffFile }) => {
             }
         }
     }, [setSelectSide]);
-    const width = useTextWidth({
+    const font = React.useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]);
+    const _width = useTextWidth({
         text: splitLineLength.toString(),
-        font: { fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" },
+        font,
     });
+    const width = Math.max(40, _width + 25);
     const lines = getSplitContentLines(diffFile);
     return (React__namespace.createElement("div", { className: "split-diff-view split-diff-view-normal w-full" },
         React__namespace.createElement("div", { className: "diff-table-wrapper w-full", style: {
@@ -2851,9 +2948,9 @@ const DiffSplitViewWrap = React.memo(({ diffFile }) => {
             React__namespace.createElement(Style, { useSelector: splitSideInfo, id: `diff-root${diffFile.getId()}` }),
             React__namespace.createElement("table", { className: "diff-table border-collapse table-fixed w-full" },
                 React__namespace.createElement("colgroup", null,
-                    React__namespace.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) + 25 }),
+                    React__namespace.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) }),
                     React__namespace.createElement("col", { className: "diff-table-old-content-col" }),
-                    React__namespace.createElement("col", { className: "diff-table-new-num-col", width: Math.round(width) + 25 }),
+                    React__namespace.createElement("col", { className: "diff-table-new-num-col", width: Math.round(width) }),
                     React__namespace.createElement("col", { className: "diff-table-new-content-col" })),
                 React__namespace.createElement("thead", { className: "hidden" },
                     React__namespace.createElement("tr", null,
@@ -2888,7 +2985,6 @@ const DiffSplitView = React.memo(({ diffFile }) => {
         return { widgetSide, widgetLineNumber, setWidget };
     }), [useDiffContext]);
     const contextValue = React.useMemo(() => ({ useWidget }), [useWidget]);
-    shim.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
     React.useEffect(() => {
         const { setWidget } = useWidget.getReadonlyState();
         setWidget({});
@@ -2897,12 +2993,10 @@ const DiffSplitView = React.memo(({ diffFile }) => {
 });
 DiffSplitView.displayName = "DiffSplitView";
 
-const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, }) => {
+const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
     const renderExtendLine = useDiffContext(React.useCallback((s) => s.renderExtendLine, []));
     const unifiedItem = diffFile.getUnifiedLine(index);
-    const oldExtend = useDiffContext(React.useCallback((s) => { var _a, _b; return (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.oldLineNumber]; }, [unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.oldLineNumber]));
-    const newExtend = useDiffContext(React.useCallback((s) => { var _a, _b; return (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.newFile) === null || _b === void 0 ? void 0 : _b[unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.newLineNumber]; }, [unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.newLineNumber]));
     const width = useDomWidth({
         selector: ".unified-diff-table-wrapper",
         enable: typeof renderExtendLine === "function",
@@ -2913,31 +3007,38 @@ const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, }) => {
         React__namespace.createElement("td", { className: "diff-line-extend-content align-top p-0", colSpan: 2 },
             React__namespace.createElement("div", { className: "diff-line-extend-wrapper sticky left-0", style: { width } },
                 width > 0 &&
-                    oldExtend &&
+                    (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) &&
                     (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
                         diffFile,
                         side: exports.SplitSide.old,
                         lineNumber: unifiedItem.oldLineNumber,
-                        data: oldExtend.data,
+                        data: oldLineExtend.data,
                         onUpdate: diffFile.notifyAll,
                     })),
                 width > 0 &&
-                    newExtend &&
+                    (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) &&
                     (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
                         diffFile,
                         side: exports.SplitSide.new,
                         lineNumber: unifiedItem.newLineNumber,
-                        data: newExtend.data,
+                        data: newLineExtend.data,
                         onUpdate: diffFile.notifyAll,
                     }))))));
 };
 const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const unifiedItem = diffFile.getUnifiedLine(index);
-    const hasExtend = useDiffContext(React.useCallback((s) => { var _a, _b, _c, _d; return ((_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.oldLineNumber]) || ((_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.newLineNumber]); }, [unifiedItem.oldLineNumber, unifiedItem.newLineNumber]));
+    const { oldLineExtend, newLineExtend } = useDiffContext(React.useCallback((s) => {
+        var _a, _b, _c, _d;
+        return ({
+            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.oldLineNumber],
+            newLineExtend: (_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.newLineNumber],
+        });
+    }, [unifiedItem.oldLineNumber, unifiedItem.newLineNumber]));
+    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 || !unifiedItem.diff)
         return null;
-    return React__namespace.createElement(_DiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return (React__namespace.createElement(_DiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
@@ -2956,6 +3057,9 @@ const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
         React__namespace.createElement("td", { className: "diff-line-hunk-action sticky left-0 p-[1px] w-[1%] min-w-[100px] select-none", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
+                width: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
             } }, couldExpand ? (isFirstLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onUnifiedHunkExpand("up", index) },
             React__namespace.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onUnifiedHunkExpand("down", index) },
             React__namespace.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onUnifiedHunkExpand("all", index) },
@@ -2987,6 +3091,9 @@ const DiffUnifiedOldLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber,
         React__namespace.createElement("td", { className: "diff-line-num sticky left-0 pl-[10px] pr-[10px] text-right select-none w-[1%] min-w-[100px] whitespace-nowrap align-top", style: {
                 color: `var(${plainLineNumberColorName})`,
                 backgroundColor: `var(${delLineNumberBGName})`,
+                width: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
             } },
             enableAddWidget && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: exports.SplitSide.old, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
             React__namespace.createElement("div", { className: "flex" },
@@ -3001,6 +3108,9 @@ const DiffUnifiedNewLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber,
         React__namespace.createElement("td", { className: "diff-line-num sticky left-0 pl-[10px] pr-[10px] text-right select-none w-[1%] min-w-[100px] whitespace-nowrap align-top", style: {
                 color: `var(${plainLineNumberColorName})`,
                 backgroundColor: `var(${addLineNumberBGName})`,
+                width: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
             } },
             enableAddWidget && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: exports.SplitSide.new, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
             React__namespace.createElement("div", { className: "flex" },
@@ -3020,7 +3130,7 @@ const _DiffUnifiedLine = React.memo(({ index, diffFile, lineNumber }) => {
         onAddWidgetClick: s.onAddWidgetClick,
     }), []));
     const { useWidget } = useDiffWidgetContext();
-    const { setWidget } = useWidget.getReadonlyState();
+    const setWidget = useWidget.getReadonlyState().setWidget;
     const hasDiff = unifiedLine.diff;
     const hasChange = checkDiffLineIncludeChange(unifiedLine.diff);
     const rawLine = unifiedLine.value || "";
@@ -3034,19 +3144,22 @@ const _DiffUnifiedLine = React.memo(({ index, diffFile, lineNumber }) => {
             : undefined;
     if (hasChange) {
         if (unifiedLine.oldLineNumber) {
-            return (React__namespace.createElement(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, onAddWidgetClick: onAddWidgetClick, lineNumber: unifiedLine.oldLineNumber }));
+            return (React__namespace.createElement(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.oldLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
         }
         else {
-            return (React__namespace.createElement(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, onAddWidgetClick: onAddWidgetClick, lineNumber: unifiedLine.newLineNumber }));
+            return (React__namespace.createElement(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.newLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
         }
     }
     else {
         return (React__namespace.createElement("tr", { "data-line": lineNumber, "data-state": unifiedLine.diff ? "diff" : "plain", className: "diff-line group" },
             React__namespace.createElement("td", { className: "diff-line-num sticky left-0 pl-[10px] pr-[10px] text-right select-none w-[1%] min-w-[100px] whitespace-nowrap align-top", style: {
                     color: `var(${plainLineNumberColorName})`,
+                    width: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                    maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                    minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
                     backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
                 } },
-                enableAddWidget && hasDiff && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index, diffFile: diffFile, lineNumber: unifiedLine.newLineNumber, side: exports.SplitSide.new, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
+                enableAddWidget && hasDiff && (React__namespace.createElement(DiffUnifiedAddWidget, { index: index, diffFile: diffFile, lineNumber: unifiedLine.newLineNumber, side: exports.SplitSide.new, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
                 React__namespace.createElement("div", { className: "flex opacity-[0.5]" },
                     React__namespace.createElement("span", { "data-line-old-num": unifiedLine.oldLineNumber, className: "inline-block w-[50%]" }, unifiedLine.oldLineNumber),
                     React__namespace.createElement("span", { className: "w-[10px] shrink-0" }),
@@ -3099,6 +3212,7 @@ const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     return (React__namespace.createElement(_DiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldWidget: oldWidget, newWidget: newWidget, setWidget: setWidget }));
 };
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 const onMouseDown = (e) => {
     const ele = e.target;
     // need remove all the selection
@@ -3123,15 +3237,27 @@ const DiffUnifiedView = React.memo(({ diffFile }) => {
         return { widgetSide, widgetLineNumber, setWidget };
     }), [useDiffContext]);
     const contextValue = React.useMemo(() => ({ useWidget }), [useWidget]);
+    const fontSize = useDiffContext(React.useCallback((s) => s.fontSize, []));
     shim.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
     React.useEffect(() => {
         const { setWidget } = useWidget.getReadonlyState();
         setWidget({});
     }, [diffFile, useWidget]);
+    const unifiedLineLength = diffFile.unifiedLineLength;
+    const _width = useTextWidth({
+        text: unifiedLineLength.toString(),
+        font: { fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" },
+    });
+    const width = Math.max(40, _width + 25);
     const lines = getUnifiedContentLine(diffFile);
     return (React__namespace.createElement(DiffWidgetContext.Provider, { value: contextValue },
         React__namespace.createElement("div", { className: "unified-diff-view w-full" },
-            React__namespace.createElement("div", { className: "unified-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable", style: { fontFamily: "Menlo, Consolas, monospace", fontSize: "var(--diff-font-size--)" } },
+            React__namespace.createElement("div", { className: "unified-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable", style: {
+                    // @ts-ignore
+                    [asideWidth]: `${Math.round(width)}px`,
+                    fontFamily: "Menlo, Consolas, monospace",
+                    fontSize: "var(--diff-font-size--)",
+                } },
                 React__namespace.createElement("table", { className: "unified-diff-table border-collapse w-full" },
                     React__namespace.createElement("colgroup", null,
                         React__namespace.createElement("col", { className: "unified-diff-table-num-col" }),
@@ -3140,7 +3266,7 @@ const DiffUnifiedView = React.memo(({ diffFile }) => {
                         React__namespace.createElement("tr", null,
                             React__namespace.createElement("th", { scope: "col" }, "line number"),
                             React__namespace.createElement("th", { scope: "col" }, "line content"))),
-                    React__namespace.createElement("tbody", { className: "diff-table-body  leading-[1.4]", onMouseDownCapture: onMouseDown },
+                    React__namespace.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
                         lines.map((item) => (React__namespace.createElement(React.Fragment, { key: item.index },
                             React__namespace.createElement(DiffUnifiedHunkLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
                             React__namespace.createElement(DiffUnifiedLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
@@ -3205,8 +3331,9 @@ const _InternalDiffView = (props) => {
         const setRenderWidgetLine = (_renderWidgetLine) => (renderWidgetLine.value = _renderWidgetLine);
         const renderExtendLine = reactivityStore.ref(props.renderExtendLine);
         const setRenderExtendLine = (_renderExtendLine) => (renderExtendLine.value = _renderExtendLine);
-        const onAddWidgetClick = reactivityStore.ref(props.onAddWidgetClick);
-        const setOnAddWidgetClick = (_onAddWidgetClick) => (onAddWidgetClick.value = _onAddWidgetClick);
+        // 避免无意义的订阅
+        const onAddWidgetClick = reactivityStore.ref(reactivityStore.markRaw({ current: props.onAddWidgetClick }));
+        const setOnAddWidgetClick = (_onAddWidgetClick) => (onAddWidgetClick.value.current = _onAddWidgetClick.current);
         return {
             id,
             setId,
@@ -3241,7 +3368,7 @@ const _InternalDiffView = (props) => {
         diffViewWrap !== enableWrap && setEnableWrap(diffViewWrap);
         extendData && setExtendData(extendData);
         diffViewFontSize && diffViewFontSize !== fontSize && setFontSize(diffViewFontSize);
-        onAddWidgetClick !== _onAddWidgetClick && setOnAddWidgetClick(onAddWidgetClick);
+        onAddWidgetClick !== _onAddWidgetClick.current && setOnAddWidgetClick({ current: onAddWidgetClick });
         renderExtendLine !== _renderExtendLine && setRenderExtendLine(renderExtendLine);
         renderWidgetLine !== _renderWidgetLine && setRenderWidgetLine(renderWidgetLine);
     }, [
@@ -3259,7 +3386,7 @@ const _InternalDiffView = (props) => {
     ]);
     const value = React.useMemo(() => ({ useDiffContext }), [useDiffContext]);
     return (React__namespace.createElement(DiffViewContext.Provider, { value: value },
-        React__namespace.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-version": `${"0.0.7"}` },
+        React__namespace.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-version": `${"0.0.9"}`, "data-highlighter": diffFile._getHighlighterName() },
             React__namespace.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -3268,7 +3395,7 @@ const _InternalDiffView = (props) => {
 };
 const InternalDiffView = React.memo(_InternalDiffView);
 const DiffViewWithRef = (props, ref) => {
-    const { registerHighlighter, autoDetectLang, data, diffFile: _diffFile } = props, restProps = __rest(props, ["registerHighlighter", "autoDetectLang", "data", "diffFile"]);
+    const { registerHighlighter, data, diffFile: _diffFile } = props, restProps = __rest(props, ["registerHighlighter", "data", "diffFile"]);
     const diffFile = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         if (_diffFile) {
@@ -3292,10 +3419,10 @@ const DiffViewWithRef = (props, ref) => {
         if (!diffFile)
             return;
         if (props.diffViewHighlight) {
-            diffFile.initSyntax({ autoDetectLang, registerHighlighter });
+            diffFile.initSyntax({ registerHighlighter });
             diffFile.notifyAll();
         }
-    }, [diffFile, props.diffViewHighlight, autoDetectLang, registerHighlighter]);
+    }, [diffFile, props.diffViewHighlight, registerHighlighter]);
     React.useEffect(() => {
         if (_diffFile && diffFile) {
             _diffFile._addClonedInstance(diffFile);
@@ -3312,7 +3439,7 @@ const DiffViewWithRef = (props, ref) => {
 };
 const DiffView = React.forwardRef(DiffViewWithRef);
 DiffView.displayName = "DiffView";
-const version = "0.0.7";
+const version = "0.0.9";
 
 exports.DefaultDiffExpansionStep = DefaultDiffExpansionStep;
 exports.DiffFile = DiffFile;
@@ -3336,6 +3463,7 @@ exports.getUnifiedLines = getUnifiedLines;
 exports.hasRelativeChange = hasRelativeChange;
 exports.highlighter = highlighter;
 exports.numIterator = numIterator;
+exports.processAST = processAST;
 exports.relativeChanges = relativeChanges;
 exports.useDiffViewContext = useDiffViewContext;
 exports.version = version;