@bochenw/react-diff-viewer-continued 4.3.0

package/lib/esm/src/diff-row.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cn from "classnames";
+import * as React from "react";
+import { DiffType, } from "./compute-lines.js";
+import { LineNumberPrefix } from "./line-number-prefix.js";
+import { renderWordDiff } from "./render-word-diff.js";
+/**
+ * Custom equality function for React.memo — compares only data props, skips functions.
+ */
+function diffRowPropsAreEqual(prev, next) {
+    return (prev.leftLineNumber === next.leftLineNumber &&
+        prev.leftType === next.leftType &&
+        prev.leftValue === next.leftValue &&
+        prev.rightLineNumber === next.rightLineNumber &&
+        prev.rightType === next.rightType &&
+        prev.rightValue === next.rightValue &&
+        prev.highlightLeft === next.highlightLeft &&
+        prev.highlightRight === next.highlightRight &&
+        prev.splitView === next.splitView &&
+        prev.hideLineNumbers === next.hideLineNumbers &&
+        prev.styles === next.styles &&
+        prev.contentColumnRef === next.contentColumnRef &&
+        prev.hasCumulativeOffsets === next.hasCumulativeOffsets);
+}
+/**
+ * Renders a single line (one side of split view, or one line in inline view).
+ * This produces the <td> cells for gutter, marker, and content.
+ */
+function renderLine(lineNumber, type, prefix, value, highlightLine, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets, additionalLineNumber, additionalPrefix) {
+    const lineNumberTemplate = `${prefix}-${lineNumber}`;
+    const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`;
+    const added = type === DiffType.ADDED;
+    const removed = type === DiffType.REMOVED;
+    const changed = type === DiffType.CHANGED;
+    let content;
+    const hasWordDiff = Array.isArray(value);
+    if (hasWordDiff) {
+        content = renderWordDiff(value, styles, compareMethod, renderContent);
+    }
+    else if (renderContent) {
+        content = renderContent(value);
+    }
+    else {
+        content = value;
+    }
+    let ElementType = "div";
+    if (added && !hasWordDiff) {
+        ElementType = "ins";
+    }
+    else if (removed && !hasWordDiff) {
+        ElementType = "del";
+    }
+    const handleLineNumberClick = lineNumber && onLineNumberClick
+        ? (e) => onLineNumberClick(lineNumberTemplate, e)
+        : undefined;
+    const handleAdditionalLineNumberClick = additionalLineNumber && onLineNumberClick
+        ? (e) => onLineNumberClick(additionalLineNumberTemplate, e)
+        : undefined;
+    // Determine if this content cell should get the measurement ref
+    const shouldSetRef = prefix === LineNumberPrefix.LEFT && !hasCumulativeOffsets;
+    return (_jsxs(_Fragment, { children: [!hideLineNumbers && (_jsx("td", { onClick: handleLineNumberClick, className: cn(styles.gutter, {
+                    [styles.emptyGutter]: !lineNumber,
+                    [styles.diffAdded]: added,
+                    [styles.diffRemoved]: removed,
+                    [styles.diffChanged]: changed,
+                    [styles.highlightedGutter]: highlightLine,
+                }), children: _jsx("pre", { className: styles.lineNumber, children: lineNumber }) })), !splitView && !hideLineNumbers && (_jsx("td", { onClick: handleAdditionalLineNumberClick, className: cn(styles.gutter, {
+                    [styles.emptyGutter]: !additionalLineNumber,
+                    [styles.diffAdded]: added,
+                    [styles.diffRemoved]: removed,
+                    [styles.diffChanged]: changed,
+                    [styles.highlightedGutter]: highlightLine,
+                }), children: _jsx("pre", { className: styles.lineNumber, children: additionalLineNumber }) })), renderGutter
+                ? renderGutter({
+                    lineNumber,
+                    type,
+                    prefix,
+                    value,
+                    additionalLineNumber,
+                    additionalPrefix,
+                    styles,
+                })
+                : null, _jsx("td", { className: cn(styles.marker, {
+                    [styles.emptyLine]: !content,
+                    [styles.diffAdded]: added,
+                    [styles.diffRemoved]: removed,
+                    [styles.diffChanged]: changed,
+                    [styles.highlightedLine]: highlightLine,
+                }), children: _jsxs("pre", { children: [added && "+", removed && "-"] }) }), _jsx("td", { ref: shouldSetRef ? contentColumnRef : undefined, className: cn(styles.content, {
+                    [styles.emptyLine]: !content,
+                    [styles.diffAdded]: added,
+                    [styles.diffRemoved]: removed,
+                    [styles.diffChanged]: changed,
+                    [styles.highlightedLine]: highlightLine,
+                    left: prefix === LineNumberPrefix.LEFT,
+                    right: prefix === LineNumberPrefix.RIGHT,
+                }), onMouseDown: () => {
+                    const elements = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? "right" : "left");
+                    for (let i = 0; i < elements.length; i++) {
+                        const element = elements.item(i);
+                        element.classList.add(styles.noSelect);
+                    }
+                }, title: added && !hasWordDiff
+                    ? "Added line"
+                    : removed && !hasWordDiff
+                        ? "Removed line"
+                        : undefined, children: _jsx(ElementType, { className: styles.contentText, children: content }) })] }));
+}
+/**
+ * Memoized component that renders a single diff row (split or inline view).
+ * Only re-renders when the line data, highlight state, or display config changes.
+ * Function props (callbacks, renderers) are excluded from the equality check.
+ */
+export const DiffRow = React.memo(function DiffRow(props) {
+    const { leftLineNumber, leftType, leftValue, rightLineNumber, rightType, rightValue, highlightLeft, highlightRight, splitView, hideLineNumbers, styles, onLineNumberClick, renderContent, renderGutter, compareMethod, contentColumnRef, hasCumulativeOffsets, index, } = props;
+    if (splitView) {
+        // Split view: one <tr> with left and right cells
+        return (_jsxs("tr", { className: styles.line, children: [renderLine(leftLineNumber, leftType, LineNumberPrefix.LEFT, leftValue, highlightLeft, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets), renderLine(rightLineNumber, rightType, LineNumberPrefix.RIGHT, rightValue, highlightRight, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter)] }, index));
+    }
+    // Inline view
+    if (leftType === DiffType.REMOVED && rightType === DiffType.ADDED) {
+        // Changed line: render two <tr> rows (removed then added)
+        return (_jsxs(React.Fragment, { children: [_jsx("tr", { className: styles.line, children: renderLine(leftLineNumber, leftType, LineNumberPrefix.LEFT, leftValue, highlightLeft, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets, null) }), _jsx("tr", { className: styles.line, children: renderLine(null, rightType, LineNumberPrefix.RIGHT, rightValue, highlightRight, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, undefined, undefined, rightLineNumber, LineNumberPrefix.RIGHT) })] }, index));
+    }
+    let content;
+    if (leftType === DiffType.REMOVED) {
+        content = renderLine(leftLineNumber, leftType, LineNumberPrefix.LEFT, leftValue, highlightLeft, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets, null);
+    }
+    if (leftType === DiffType.DEFAULT) {
+        content = renderLine(leftLineNumber, leftType, LineNumberPrefix.LEFT, leftValue, highlightLeft, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets, rightLineNumber, LineNumberPrefix.RIGHT);
+    }
+    if (rightType === DiffType.ADDED) {
+        content = renderLine(null, rightType, LineNumberPrefix.RIGHT, rightValue, highlightRight, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, undefined, undefined, rightLineNumber);
+    }
+    return (_jsx("tr", { className: styles.line, children: content }, index));
+}, diffRowPropsAreEqual);

package/lib/esm/src/expand.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Expand() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [_jsx("title", { children: "expand" }), _jsx("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" })] }));
+}

package/lib/esm/src/fold.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Fold() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [_jsx("title", { children: "fold" }), _jsx("path", { d: "M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.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" })] }));
+}