react-diff-viewer-continued 4.0.0 → 4.0.2

package/lib/cjs/src/styles.js

@@ -0,0 +1,352 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const create_instance_1 = __importDefault(require("@emotion/css/create-instance"));
+// eslint-disable-next-line import/no-anonymous-default-export
+exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
+    const { variables: overrideVariables = {} } = styleOverride, styles = __rest(styleOverride, ["variables"]);
+    const themeVariables = {
+        light: Object.assign({
+            diffViewerBackground: '#fff',
+            diffViewerColor: '#212529',
+            addedBackground: '#e6ffed',
+            addedColor: '#24292e',
+            removedBackground: '#ffeef0',
+            removedColor: '#24292e',
+            changedBackground: '#fffbdd',
+            wordAddedBackground: '#acf2bd',
+            wordRemovedBackground: '#fdb8c0',
+            addedGutterBackground: '#cdffd8',
+            removedGutterBackground: '#ffdce0',
+            gutterBackground: '#f7f7f7',
+            gutterBackgroundDark: '#f3f1f1',
+            highlightBackground: '#fffbdd',
+            highlightGutterBackground: '#fff5b1',
+            codeFoldGutterBackground: '#dbedff',
+            codeFoldBackground: '#f1f8ff',
+            emptyLineBackground: '#fafbfc',
+            gutterColor: '#212529',
+            addedGutterColor: '#212529',
+            removedGutterColor: '#212529',
+            codeFoldContentColor: '#212529',
+            diffViewerTitleBackground: '#fafbfc',
+            diffViewerTitleColor: '#212529',
+            diffViewerTitleBorderColor: '#eee',
+        }, (overrideVariables.light || {})),
+        dark: Object.assign({
+            diffViewerBackground: '#2e303c',
+            diffViewerColor: '#FFF',
+            addedBackground: '#044B53',
+            addedColor: 'white',
+            removedBackground: '#632F34',
+            removedColor: 'white',
+            changedBackground: '#3e302c',
+            wordAddedBackground: '#055d67',
+            wordRemovedBackground: '#7d383f',
+            addedGutterBackground: '#034148',
+            removedGutterBackground: '#632b30',
+            gutterBackground: '#2c2f3a',
+            gutterBackgroundDark: '#262933',
+            highlightBackground: '#2a3967',
+            highlightGutterBackground: '#2d4077',
+            codeFoldGutterBackground: '#262831',
+            codeFoldBackground: '#262831',
+            emptyLineBackground: '#363946',
+            gutterColor: '#666c87',
+            addedGutterColor: '#8c8c8c',
+            removedGutterColor: '#8c8c8c',
+            codeFoldContentColor: '#656a8b',
+            diffViewerTitleBackground: '#2f323e',
+            diffViewerTitleColor: '#757a9b',
+            diffViewerTitleBorderColor: '#353846',
+        }, (overrideVariables.dark || {})),
+    };
+    const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
+    const { css, cx } = (0, create_instance_1.default)({ key: 'react-diff', nonce });
+    const content = css({
+        width: 'auto',
+        label: 'content',
+    });
+    const splitView = css({
+        label: 'split-view',
+    });
+    const summary = css({
+        background: variables.diffViewerTitleBackground,
+        color: variables.diffViewerTitleColor,
+        padding: '0.5em 1em',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5em',
+        fontFamily: "monospace",
+        fill: variables.diffViewerTitleColor,
+    });
+    const diffContainer = css({
+        width: '100%',
+        minWidth: '1000px',
+        overflowX: 'auto',
+        tableLayout: 'fixed',
+        background: variables.diffViewerBackground,
+        pre: {
+            margin: 0,
+            whiteSpace: 'pre-wrap',
+            lineHeight: '1.6em',
+            width: 'fit-content'
+        },
+        label: 'diff-container',
+        borderCollapse: 'collapse',
+    });
+    const lineContent = css({
+        overflow: 'hidden',
+        width: '100%'
+    });
+    const contentText = css({
+        color: variables.diffViewerColor,
+        whiteSpace: 'pre-wrap',
+        fontFamily: 'monospace',
+        textDecoration: 'none',
+        label: 'content-text',
+    });
+    const unselectable = css({
+        userSelect: 'none',
+        label: 'unselectable',
+    });
+    const titleBlock = css({
+        background: variables.diffViewerTitleBackground,
+        padding: '0.5em',
+        lineHeight: '1.4em',
+        height: "2.4em",
+        overflow: 'hidden',
+        width: '50%',
+        borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        label: 'title-block',
+        ':last-child': {
+            borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        },
+        [`.${contentText}`]: {
+            color: variables.diffViewerTitleColor,
+        },
+    });
+    const lineNumber = css({
+        color: variables.gutterColor,
+        label: 'line-number',
+    });
+    const diffRemoved = css({
+        background: variables.removedBackground,
+        color: variables.removedColor,
+        pre: {
+            color: variables.removedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.removedGutterColor,
+        },
+        label: 'diff-removed',
+    });
+    const diffAdded = css({
+        background: variables.addedBackground,
+        color: variables.addedColor,
+        pre: {
+            color: variables.addedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.addedGutterColor,
+        },
+        label: 'diff-added',
+    });
+    const diffChanged = css({
+        background: variables.changedBackground,
+        [`.${lineNumber}`]: {
+            color: variables.gutterColor,
+        },
+        label: 'diff-changed',
+    });
+    const wordDiff = css({
+        padding: 2,
+        display: 'inline-flex',
+        borderRadius: 4,
+        wordBreak: 'break-all',
+        label: 'word-diff',
+    });
+    const wordAdded = css({
+        background: variables.wordAddedBackground,
+        textDecoration: 'none',
+        label: 'word-added',
+    });
+    const wordRemoved = css({
+        background: variables.wordRemovedBackground,
+        textDecoration: 'none',
+        label: 'word-removed',
+    });
+    const codeFoldGutter = css({
+        backgroundColor: variables.codeFoldGutterBackground,
+        label: 'code-fold-gutter',
+        minWidth: '50px',
+        width: '50px'
+    });
+    const codeFoldContentContainer = css({
+        padding: '8px 16px'
+    });
+    const codeFoldContent = css({
+        color: variables.codeFoldContentColor,
+        label: 'code-fold-content',
+    });
+    const block = css({
+        display: 'block',
+        width: '10px',
+        height: '10px',
+        backgroundColor: '#ddd',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: variables.diffViewerTitleBorderColor
+    });
+    const blockAddition = css({
+        backgroundColor: variables.wordAddedBackground
+    });
+    const blockDeletion = css({
+        backgroundColor: variables.wordRemovedBackground
+    });
+    const codeFold = css({
+        backgroundColor: variables.codeFoldBackground,
+        height: 40,
+        fontSize: 14,
+        alignItems: 'center',
+        userSelect: 'none',
+        fontWeight: 700,
+        label: 'code-fold',
+        a: {
+            textDecoration: 'underline !important',
+            cursor: 'pointer',
+            pre: {
+                display: 'inline',
+            },
+        },
+    });
+    const emptyLine = css({
+        backgroundColor: variables.emptyLineBackground,
+        label: 'empty-line',
+    });
+    const marker = css({
+        width: 28,
+        paddingLeft: 10,
+        paddingRight: 10,
+        userSelect: 'none',
+        label: 'marker',
+        [`&.${diffAdded}`]: {
+            pre: {
+                color: variables.addedColor,
+            },
+        },
+        [`&.${diffRemoved}`]: {
+            pre: {
+                color: variables.removedColor,
+            },
+        },
+    });
+    const highlightedLine = css({
+        background: variables.highlightBackground,
+        label: 'highlighted-line',
+        [`.${wordAdded}, .${wordRemoved}`]: {
+            backgroundColor: 'initial',
+        },
+    });
+    const highlightedGutter = css({
+        label: 'highlighted-gutter',
+    });
+    const gutter = css({
+        userSelect: 'none',
+        minWidth: 50,
+        width: '50px',
+        padding: '0 10px',
+        whiteSpace: 'nowrap',
+        label: 'gutter',
+        textAlign: 'right',
+        background: variables.gutterBackground,
+        '&:hover': {
+            cursor: 'pointer',
+            background: variables.gutterBackgroundDark,
+            pre: {
+                opacity: 1,
+            },
+        },
+        pre: {
+            opacity: 0.5,
+        },
+        [`&.${diffAdded}`]: {
+            background: variables.addedGutterBackground,
+        },
+        [`&.${diffRemoved}`]: {
+            background: variables.removedGutterBackground,
+        },
+        [`&.${highlightedGutter}`]: {
+            background: variables.highlightGutterBackground,
+            '&:hover': {
+                background: variables.highlightGutterBackground,
+            },
+        },
+    });
+    const emptyGutter = css({
+        '&:hover': {
+            background: variables.gutterBackground,
+            cursor: 'initial',
+        },
+        label: 'empty-gutter',
+    });
+    const line = css({
+        verticalAlign: 'baseline',
+        label: 'line',
+        textDecoration: 'none'
+    });
+    const column = css({});
+    const defaultStyles = {
+        diffContainer,
+        diffRemoved,
+        diffAdded,
+        diffChanged,
+        splitView,
+        marker,
+        highlightedGutter,
+        highlightedLine,
+        gutter,
+        line,
+        lineContent,
+        wordDiff,
+        wordAdded,
+        summary,
+        block,
+        blockAddition,
+        blockDeletion,
+        wordRemoved,
+        noSelect: unselectable,
+        codeFoldGutter,
+        codeFoldContentContainer,
+        codeFold,
+        emptyGutter,
+        emptyLine,
+        lineNumber,
+        contentText,
+        content,
+        column,
+        codeFoldContent,
+        titleBlock,
+    };
+    const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
+        [key]: css(styles[key]),
+    })), {});
+    return Object.keys(defaultStyles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
+        [key]: computerOverrideStyles[key]
+            ? cx(defaultStyles[key], computerOverrideStyles[key])
+            : defaultStyles[key],
+    })), {});
+};

package/lib/esm/src/compute-hidden-blocks.js

@@ -0,0 +1,35 @@
+export function computeHiddenBlocks(lineInformation, diffLines, extraLines) {
+    let newBlockIndex = 0;
+    let currentBlock;
+    let lineBlocks = {};
+    let blocks = [];
+    lineInformation.forEach((line, lineIndex) => {
+        const isDiffLine = diffLines.some(diffLine => diffLine >= lineIndex - extraLines && diffLine <= lineIndex + extraLines);
+        if (!isDiffLine && currentBlock == undefined) {
+            // block begins
+            currentBlock = {
+                index: newBlockIndex,
+                startLine: lineIndex,
+                endLine: lineIndex,
+                lines: 1
+            };
+            blocks.push(currentBlock);
+            lineBlocks[lineIndex] = currentBlock.index;
+            newBlockIndex++;
+        }
+        else if (!isDiffLine) {
+            // block continues
+            currentBlock.endLine = lineIndex;
+            currentBlock.lines++;
+            lineBlocks[lineIndex] = currentBlock.index;
+        }
+        else {
+            // not a block anymore
+            currentBlock = undefined;
+        }
+    });
+    return {
+        lineBlocks,
+        blocks: blocks
+    };
+}

package/lib/esm/src/compute-lines.js

@@ -0,0 +1,202 @@
+import * as diff from 'diff';
+const jsDiff = diff;
+export var DiffType;
+(function (DiffType) {
+    DiffType[DiffType["DEFAULT"] = 0] = "DEFAULT";
+    DiffType[DiffType["ADDED"] = 1] = "ADDED";
+    DiffType[DiffType["REMOVED"] = 2] = "REMOVED";
+    DiffType[DiffType["CHANGED"] = 3] = "CHANGED";
+})(DiffType || (DiffType = {}));
+// See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
+export var DiffMethod;
+(function (DiffMethod) {
+    DiffMethod["CHARS"] = "diffChars";
+    DiffMethod["WORDS"] = "diffWords";
+    DiffMethod["WORDS_WITH_SPACE"] = "diffWordsWithSpace";
+    DiffMethod["LINES"] = "diffLines";
+    DiffMethod["TRIMMED_LINES"] = "diffTrimmedLines";
+    DiffMethod["SENTENCES"] = "diffSentences";
+    DiffMethod["CSS"] = "diffCss";
+    DiffMethod["JSON"] = "diffJson";
+})(DiffMethod || (DiffMethod = {}));
+/**
+ * Splits diff text by new line and computes final list of diff lines based on
+ * conditions.
+ *
+ * @param value Diff text from the js diff module.
+ */
+const constructLines = (value) => {
+    if (value === '')
+        return [];
+    const lines = value.replace(/\n$/, '').split('\n');
+    return lines;
+};
+/**
+ * Computes word diff information in the line.
+ * [TODO]: Consider adding options argument for JsDiff text block comparison
+ *
+ * @param oldValue Old word in the line.
+ * @param newValue New word in the line.
+ * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ */
+const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
+    const diffArray = jsDiff[compareMethod](oldValue, newValue);
+    const computedDiff = {
+        left: [],
+        right: [],
+    };
+    diffArray.forEach(({ added, removed, value }) => {
+        const diffInformation = {};
+        if (added) {
+            diffInformation.type = DiffType.ADDED;
+            diffInformation.value = value;
+            computedDiff.right.push(diffInformation);
+        }
+        if (removed) {
+            diffInformation.type = DiffType.REMOVED;
+            diffInformation.value = value;
+            computedDiff.left.push(diffInformation);
+        }
+        if (!removed && !added) {
+            diffInformation.type = DiffType.DEFAULT;
+            diffInformation.value = value;
+            computedDiff.right.push(diffInformation);
+            computedDiff.left.push(diffInformation);
+        }
+        return diffInformation;
+    });
+    return computedDiff;
+};
+/**
+ * [TODO]: Think about moving common left and right value assignment to a
+ * common place. Better readability?
+ *
+ * Computes line wise information based in the js diff information passed. Each
+ * line contains information about left and right section. Left side denotes
+ * deletion and right side denotes addition.
+ *
+ * @param oldString Old string to compare.
+ * @param newString New string to compare with old string.
+ * @param disableWordDiff Flag to enable/disable word diff.
+ * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param linesOffset line number to start counting from
+ * @param showLines lines that are always shown, regardless of diff
+ */
+const computeLineInformation = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = []) => {
+    let diffArray = [];
+    // Use diffLines for strings, and diffJson for objects...
+    if (typeof oldString === 'string' && typeof newString === 'string') {
+        diffArray = diff.diffLines(oldString, newString, {
+            newlineIsToken: false,
+            ignoreWhitespace: false,
+            ignoreCase: false,
+        });
+    }
+    else {
+        diffArray = diff.diffJson(oldString, newString);
+    }
+    let rightLineNumber = linesOffset;
+    let leftLineNumber = linesOffset;
+    let lineInformation = [];
+    let counter = 0;
+    const diffLines = [];
+    const ignoreDiffIndexes = [];
+    const getLineInformation = (value, diffIndex, added, removed, evaluateOnlyFirstLine) => {
+        const lines = constructLines(value);
+        return lines
+            .map((line, lineIndex) => {
+            const left = {};
+            const right = {};
+            if (ignoreDiffIndexes.includes(`${diffIndex}-${lineIndex}`) ||
+                (evaluateOnlyFirstLine && lineIndex !== 0)) {
+                return undefined;
+            }
+            if (added || removed) {
+                let countAsChange = true;
+                if (removed) {
+                    leftLineNumber += 1;
+                    left.lineNumber = leftLineNumber;
+                    left.type = DiffType.REMOVED;
+                    left.value = line || ' ';
+                    // When the current line is of type REMOVED, check the next item in
+                    // the diff array whether it is of type ADDED. If true, the current
+                    // diff will be marked as both REMOVED and ADDED. Meaning, the
+                    // current line is a modification.
+                    const nextDiff = diffArray[diffIndex + 1];
+                    if (nextDiff && nextDiff.added) {
+                        const nextDiffLines = constructLines(nextDiff.value)[lineIndex];
+                        if (nextDiffLines) {
+                            const nextDiffLineInfo = getLineInformation(nextDiffLines, diffIndex, true, false, true);
+                            const { value: rightValue, lineNumber, type, } = nextDiffLineInfo[0].right;
+                            // When identified as modification, push the next diff to ignore
+                            // list as the next value will be added in this line computation as
+                            // right and left values.
+                            ignoreDiffIndexes.push(`${diffIndex + 1}-${lineIndex}`);
+                            right.lineNumber = lineNumber;
+                            if (left.value === rightValue) {
+                                // The new value is exactly the same as the old
+                                countAsChange = false;
+                                right.type = 0;
+                                left.type = 0;
+                                right.value = rightValue;
+                            }
+                            else {
+                                right.type = type;
+                                // Do char level diff and assign the corresponding values to the
+                                // left and right diff information object.
+                                if (disableWordDiff) {
+                                    right.value = rightValue;
+                                }
+                                else {
+                                    const computedDiff = computeDiff(line, rightValue, lineCompareMethod);
+                                    right.value = computedDiff.right;
+                                    left.value = computedDiff.left;
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    rightLineNumber += 1;
+                    right.lineNumber = rightLineNumber;
+                    right.type = DiffType.ADDED;
+                    right.value = line;
+                }
+                if (countAsChange && !evaluateOnlyFirstLine) {
+                    if (!diffLines.includes(counter)) {
+                        diffLines.push(counter);
+                    }
+                }
+            }
+            else {
+                leftLineNumber += 1;
+                rightLineNumber += 1;
+                left.lineNumber = leftLineNumber;
+                left.type = DiffType.DEFAULT;
+                left.value = line;
+                right.lineNumber = rightLineNumber;
+                right.type = DiffType.DEFAULT;
+                right.value = line;
+            }
+            if (showLines?.includes(`L-${left.lineNumber}`) || showLines?.includes(`R-${right.lineNumber}`) && !diffLines.includes(counter)) {
+                diffLines.push(counter);
+            }
+            if (!evaluateOnlyFirstLine) {
+                counter += 1;
+            }
+            return { right, left };
+        })
+            .filter(Boolean);
+    };
+    diffArray.forEach(({ added, removed, value }, index) => {
+        lineInformation = [
+            ...lineInformation,
+            ...getLineInformation(value, index, added, removed),
+        ];
+    });
+    return {
+        lineInformation,
+        diffLines,
+    };
+};
+export { computeLineInformation };

package/lib/esm/src/expand.js

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