@git-diff-view/react 0.0.35 → 0.0.37

package/dist/esm/index.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { DiffLineType, getSyntaxDiffTemplate, getSyntaxLineTemplate, getPlainDiffTemplate, getPlainLineTemplate, SplitSide, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile } from '@git-diff-view/core';
+import { SplitSide, DiffLineType, getSyntaxDiffTemplate, getSyntaxLineTemplate, getPlainDiffTemplate, getPlainLineTemplate, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile, highlighter } from '@git-diff-view/core';
 export * from '@git-diff-view/core';
 export { SplitSide } from '@git-diff-view/core';
 import * as React from 'react';
@@ -132,8 +132,6 @@ const expandLineNumberBGName = "--diff-expand-lineNumber--";
 const hunkContentBGName = "--diff-hunk-content--";
 const hunkContentColorName = "--diff-hunk-content-color--";
 const hunkLineNumberBGName = "--diff-hunk-lineNumber--";
-const addContentHighlightBGName = "--diff-add-content-highlight--";
-const delContentHighlightBGName = "--diff-del-content-highlight--";
 const addWidgetBGName = "--diff-add-widget--";
 const addWidgetColorName = "--diff-add-widget-color--";
 const emptyBGName = "--diff-empty-content--";
@@ -157,10 +155,8 @@ const getLineNumberBG = (isAdded, isDelete, hasDiff) => {
 };
 
 const removeAllSelection = () => {
-    const selection = window.getSelection();
-    for (let i = 0; i < selection.rangeCount; i++) {
-        selection.removeRange(selection.getRangeAt(i));
-    }
+    var _a;
+    (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
 };
 const syncScroll = (left, right) => {
     const onScroll = function (event) {
@@ -242,18 +238,6 @@ var NewLineSymbol;
     NewLineSymbol[NewLineSymbol["NORMAL"] = 5] = "NORMAL";
     NewLineSymbol[NewLineSymbol["NULL"] = 6] = "NULL";
 })(NewLineSymbol || (NewLineSymbol = {}));
-const getSymbol = (symbol) => {
-    switch (symbol) {
-        case NewLineSymbol.LF:
-            return "␊";
-        case NewLineSymbol.CR:
-            return "␍";
-        case NewLineSymbol.CRLF:
-            return "␍␊";
-        default:
-            return "";
-    }
-};
 var DiffModeEnum;
 (function (DiffModeEnum) {
     // github like
@@ -297,7 +281,7 @@ const useTextWidth = ({ text, font, }) => {
 };
 
 const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpenAddWidget, }) => {
-    return (React.createElement("div", { className: "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
+    return (React.createElement("div", { "data-add-widget": SplitSide[side], className: "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
             (className ? " " + className : ""), style: {
             width: `calc(var(${diffFontSizeName}) * 1.4)`,
             height: `calc(var(${diffFontSizeName}) * 1.4)`,
@@ -312,7 +296,7 @@ const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpen
             } }, "+")));
 };
 const DiffUnifiedAddWidget = ({ lineNumber, side, onWidgetClick, onOpenAddWidget, }) => {
-    return (React.createElement("div", { className: "diff-add-widget-wrapper invisible absolute left-[100%] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible", style: {
+    return (React.createElement("div", { "data-add-widget": SplitSide[side], className: "diff-add-widget-wrapper invisible absolute left-[100%] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible", style: {
             width: `calc(var(${diffFontSizeName}) * 1.4)`,
             height: `calc(var(${diffFontSizeName}) * 1.4)`,
             top: `calc(var(${diffFontSizeName}) * 0.1)`,
@@ -359,14 +343,14 @@ const getStyleObjectFromString = memoFunc((str) => {
     });
     return style;
 });
-const DiffString = ({ rawLine, diffLine, operator, plainLine, enableWrap, enableTemplate, }) => {
+const DiffString = ({ rawLine, diffLine, operator, plainLine, enableWrap, }) => {
     const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
         const isNewLineSymbolChanged = changes.newLineSymbol;
-        if (enableTemplate && !(diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) && typeof getPlainDiffTemplate === "function") {
+        if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) && typeof getPlainDiffTemplate === "function") {
             getPlainDiffTemplate({ diffLine, rawLine, operator });
         }
-        if (enableTemplate && (diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate)) {
+        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) {
             return (React.createElement("span", { className: "diff-line-content-raw" },
                 React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.plainTemplate } }),
                 isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
@@ -375,51 +359,28 @@ const DiffString = ({ rawLine, diffLine, operator, plainLine, enableWrap, enable
                     } },
                     React.createElement(DiffNoNewLine, null)))));
         }
-        else {
-            // TODO remove
-            const range = changes.range;
-            const str1 = rawLine.slice(0, range.location);
-            const str2 = rawLine.slice(range.location, range.location + range.length);
-            const str3 = rawLine.slice(range.location + range.length);
-            const isLast = str2.includes("\n");
-            const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
-            return (React.createElement("span", { className: "diff-line-content-raw" },
-                React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
-                    str1,
-                    React.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
-                            backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                        } }, isLast ? (React.createElement(React.Fragment, null,
-                        _str2,
-                        React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
-                    str3),
-                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
-                        width: `var(${diffFontSizeName})`,
-                        height: `var(${diffFontSizeName})`,
-                    } },
-                    React.createElement(DiffNoNewLine, null)))));
-        }
     }
-    if (enableTemplate && plainLine && !(plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
+    if (plainLine && !(plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
         plainLine.template = getPlainLineTemplate(plainLine.value);
     }
-    if (enableTemplate && (plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
+    if (plainLine === null || plainLine === void 0 ? void 0 : plainLine.template) {
         return (React.createElement("span", { className: "diff-line-content-raw" },
             React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: plainLine.template } })));
     }
     return React.createElement("span", { className: "diff-line-content-raw" }, rawLine);
 };
-const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, enableTemplate, }) => {
-    var _a, _b;
+const DiffSyntax = ({ rawLine, diffFile, diffLine, operator, syntaxLine, enableWrap, }) => {
+    var _a;
     if (!syntaxLine) {
-        return (React.createElement(DiffString, { rawLine: rawLine, diffLine: diffLine, operator: operator, enableWrap: enableWrap, enableTemplate: enableTemplate }));
+        return React.createElement(DiffString, { rawLine: rawLine, diffLine: diffLine, operator: operator, enableWrap: enableWrap });
     }
     const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
         const isNewLineSymbolChanged = changes.newLineSymbol;
-        if (enableTemplate && !(diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) && typeof getSyntaxDiffTemplate === "function") {
-            getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
+        if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) && typeof getSyntaxDiffTemplate === "function") {
+            getSyntaxDiffTemplate({ diffFile, diffLine, syntaxLine, operator });
         }
-        if (enableTemplate && (diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate)) {
+        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) {
             return (React.createElement("span", { className: "diff-line-syntax-raw" },
                 React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.syntaxTemplate } }),
                 isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
@@ -428,66 +389,24 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, enabl
                     } },
                     React.createElement(DiffNoNewLine, null)))));
         }
-        else {
-            // TODO remove
-            const range = changes.range;
-            return (React.createElement("span", { className: "diff-line-syntax-raw" },
-                React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length }, (_a = syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
-                    var _a, _b, _c, _d, _e, _f;
-                    if (node.endIndex < range.location || range.location + range.length < node.startIndex) {
-                        return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
-                    }
-                    else {
-                        const index1 = range.location - node.startIndex;
-                        const index2 = index1 < 0 ? 0 : index1;
-                        const str1 = node.value.slice(0, index2);
-                        const str2 = node.value.slice(index2, index1 + range.length);
-                        const str3 = node.value.slice(index1 + range.length);
-                        const isStart = str1.length || range.location === node.startIndex;
-                        const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
-                        const isLast = str2.includes("\n");
-                        const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
-                        return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_e = (_d = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _d === void 0 ? void 0 : _d.className) === null || _e === void 0 ? void 0 : _e.join(" "), style: getStyleObjectFromString(((_f = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _f === void 0 ? void 0 : _f.style) || "") },
-                            str1,
-                            React.createElement("span", { "data-diff-highlight": true, style: {
-                                    backgroundColor: operator === "add"
-                                        ? `var(${addContentHighlightBGName})`
-                                        : `var(${delContentHighlightBGName})`,
-                                    borderTopLeftRadius: isStart ? "0.2em" : undefined,
-                                    borderBottomLeftRadius: isStart ? "0.2em" : undefined,
-                                    borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                                    borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                                } }, isLast ? (React.createElement(React.Fragment, null,
-                                _str2,
-                                React.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
-                            str3));
-                    }
-                })),
-                isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
-                        width: `var(${diffFontSizeName})`,
-                        height: `var(${diffFontSizeName})`,
-                    } },
-                    React.createElement(DiffNoNewLine, null)))));
-        }
     }
-    if (enableTemplate && !syntaxLine.template) {
+    if (!syntaxLine.template) {
         syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
     }
-    if (enableTemplate && (syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.template)) {
+    if (syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.template) {
         return (React.createElement("span", { className: "diff-line-syntax-raw" },
             React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: syntaxLine.template } })));
     }
-    return (React.createElement("span", { className: "diff-line-syntax-raw" }, (_b = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _b === void 0 ? void 0 : _b.map(({ node, wrapper }, index) => {
+    return (React.createElement("span", { className: "diff-line-syntax-raw" }, (_a = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
         var _a, _b, _c;
         return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
     })));
 };
-const DiffContent = ({ diffLine, diffFile, rawLine, plainLine, syntaxLine, enableWrap, enableHighlight, }) => {
-    var _a, _b, _c;
+const DiffContent = ({ diffFile, diffLine, rawLine, plainLine, syntaxLine, enableWrap, enableHighlight, }) => {
+    var _a;
     const isAdded = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Add;
     const isDelete = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Delete;
     const isMaxLineLengthToIgnoreSyntax = ((_a = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.length) > 150;
-    const isEnableTemplate = (_c = (_b = diffFile.getIsEnableTemplate) === null || _b === void 0 ? void 0 : _b.call(diffFile)) !== null && _c !== void 0 ? _c : true;
     return (React.createElement("div", { className: "diff-line-content-item pl-[2.0em]", 
         // data-val={rawLine}
         style: {
@@ -495,7 +414,7 @@ const DiffContent = ({ diffLine, diffFile, rawLine, plainLine, syntaxLine, enabl
             wordBreak: enableWrap ? "break-all" : "initial",
         } },
         React.createElement("span", { "data-operator": isAdded ? "+" : isDelete ? "-" : undefined, className: "diff-line-content-operator ml-[-1.5em] inline-block w-[1.5em] select-none indent-[0.2em]" }, isAdded ? "+" : isDelete ? "-" : " "),
-        enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap, enableTemplate: isEnableTemplate })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, enableWrap: enableWrap, enableTemplate: isEnableTemplate }))));
+        enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffFile: diffFile, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, enableWrap: enableWrap }))));
 };
 
 const DiffViewContext = createContext(null);
@@ -1501,7 +1420,7 @@ const DiffUnifiedNewLine = ({ index, diffLine, rawLine, plainLine, syntaxLine, l
         React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${addContentBGName})` } },
             React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
 };
-const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber, enableWrap, enableAddWidget, enableHighlight, }) => {
+const InternalDiffUnifiedLine = ({ index, diffFile, lineNumber, enableWrap, enableAddWidget, enableHighlight, }) => {
     const unifiedLine = diffFile.getUnifiedLine(index);
     const { useDiffContext } = useDiffViewContext();
     const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
@@ -1550,13 +1469,12 @@ const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber, enableWrap, enable
                 } },
                 React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
     }
-});
-_DiffUnifiedLine.displayName = "_DiffUnifiedLine";
+};
 const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, enableWrap, enableHighlight, enableAddWidget, }) => {
     const unifiedLine = diffFile.getUnifiedLine(index);
     if (unifiedLine === null || unifiedLine === void 0 ? void 0 : unifiedLine.isHidden)
         return null;
-    return (React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }));
+    return (React.createElement(InternalDiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }));
 };
 
 const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, enableWrap, oldLineExtend, newLineExtend, }) => {
@@ -1869,7 +1787,7 @@ const InternalDiffView = (props) => {
     }, [useDiffContext, wrapperRef]);
     const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
     return (React.createElement(DiffViewContext.Provider, { value: value },
-        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.35", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
+        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.37", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -1922,9 +1840,18 @@ const DiffViewWithRef = (props, ref) => {
         if (!diffFile)
             return;
         if (props.diffViewHighlight) {
-            diffFile.initSyntax({ registerHighlighter });
+            const finalHighlighter = registerHighlighter || highlighter;
+            if (finalHighlighter.name !== diffFile._getHighlighterName() ||
+                finalHighlighter.type !== diffFile._getHighlighterType()) {
+                diffFile.initSyntax({ registerHighlighter: finalHighlighter });
+                diffFile.notifyAll();
+            }
+            else {
+                diffFile.initSyntax({ registerHighlighter: finalHighlighter });
+                if (finalHighlighter.type !== "class")
+                    diffFile.notifyAll();
+            }
         }
-        diffFile.notifyAll();
     }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
     useEffect(() => {
         if (!diffFile)
@@ -1937,7 +1864,7 @@ const DiffViewWithRef = (props, ref) => {
         init();
         const cb = diffFile.subscribe(init);
         return cb;
-    }, [diffFile]);
+    }, [diffFile, diffViewTheme]);
     // fix react strict mode error
     useUnmount(() => { var _a, _b; return (process.env.NODE_ENV === "development" ? (_a = diffFile === null || diffFile === void 0 ? void 0 : diffFile._destroy) === null || _a === void 0 ? void 0 : _a.call(diffFile) : (_b = diffFile === null || diffFile === void 0 ? void 0 : diffFile.clear) === null || _b === void 0 ? void 0 : _b.call(diffFile)); }, [diffFile]);
     useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
@@ -1948,7 +1875,7 @@ const DiffViewWithRef = (props, ref) => {
 const InnerDiffView = forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.35";
+const version = "0.0.37";
 
 export { DiffModeEnum, DiffView, version };
 //# sourceMappingURL=index.mjs.map