@matrixreq/htmldiff 1.5.0 → 2.0.0

package/js/core/rendering.js

@@ -0,0 +1,212 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderOperations = exports.renderInnerDiff = exports.splitAtomicTokenString = exports.findOpeningTagEnd = exports.isInnerDiffToken = exports.wrap = exports.TokenWrapper = void 0;
+const atomicTags_1 = require("./atomicTags");
+const tokens_1 = require("./tokens");
+let innerDiffDepth = 0;
+const maxInnerDiffDepth = 10;
+class TokenWrapper {
+    tokens;
+    notes;
+    constructor(tokens) {
+        this.tokens = tokens;
+        this.notes = tokens.reduce((data, token, index) => {
+            data.notes.push({
+                isWrappable: (0, tokens_1.isWrappable)(token),
+                insertedTag: false,
+            });
+            const tag = !(0, tokens_1.isVoidTag)(token) && (0, tokens_1.isTag)(token);
+            const lastEntry = data.tagStack[data.tagStack.length - 1];
+            if (tag) {
+                if (lastEntry && "/" + lastEntry.tag === tag) {
+                    data.notes[lastEntry.position].insertedTag = true;
+                    data.tagStack.pop();
+                }
+                else {
+                    data.tagStack.push({ tag, position: index });
+                }
+            }
+            return data;
+        }, { notes: [], tagStack: [] }).notes;
+    }
+    combine(mapFn, tagFn) {
+        const notes = this.notes;
+        const tokens = this.tokens.slice();
+        const segments = tokens.reduce((data, token, index) => {
+            if (notes[index].insertedTag) {
+                tokens[index] = tagFn(tokens[index]);
+            }
+            if (data.status === null) {
+                data.status = notes[index].isWrappable;
+            }
+            const status = notes[index].isWrappable;
+            const isAtomic = !!(0, atomicTags_1.isStartOfAtomicTag)(token);
+            if (status !== data.status || (isAtomic && index > data.lastIndex) || data.lastWasAtomic) {
+                data.list.push({
+                    isWrappable: data.status,
+                    tokens: tokens.slice(data.lastIndex, index),
+                });
+                data.lastIndex = index;
+                data.status = status;
+            }
+            data.lastWasAtomic = isAtomic;
+            if (index === tokens.length - 1) {
+                data.list.push({
+                    isWrappable: data.status,
+                    tokens: tokens.slice(data.lastIndex, index + 1),
+                });
+            }
+            return data;
+        }, { list: [], status: null, lastIndex: 0, lastWasAtomic: false }).list;
+        return segments.map(mapFn).join("");
+    }
+}
+exports.TokenWrapper = TokenWrapper;
+function wrap(tag, content, opIndex, dataPrefix, className) {
+    const wrapper = new TokenWrapper(content);
+    const prefix = dataPrefix ? dataPrefix + "-" : "";
+    let attrs = ` data-${prefix}operation-index="${opIndex}"`;
+    if (className) {
+        attrs += ' class="' + className + '"';
+    }
+    return wrapper.combine((segment) => {
+        if (segment.isWrappable) {
+            const val = segment.tokens.join("");
+            if (val.trim()) {
+                return "<" + tag + attrs + ">" + val + "</" + tag + ">";
+            }
+        }
+        else {
+            return segment.tokens.join("");
+        }
+        return "";
+    }, (openingTag) => {
+        let dataAttrs = ' data-diff-node="' + tag + '"';
+        dataAttrs += ` data-${prefix}operation-index="${opIndex}"`;
+        return openingTag.replace(/>\s*$/, dataAttrs + "$&");
+    });
+}
+exports.wrap = wrap;
+function isInnerDiffToken(tokenString) {
+    if (innerDiffDepth >= maxInnerDiffDepth || !(0, atomicTags_1.isStartOfAtomicTag)(tokenString)) {
+        return false;
+    }
+    const attr = atomicTags_1.dataHtmlDiffInnerDiffRegExp.exec(tokenString);
+    return !!attr && attr[1] !== "false";
+}
+exports.isInnerDiffToken = isInnerDiffToken;
+function findOpeningTagEnd(tokenString) {
+    let quote = null;
+    for (let i = 0; i < tokenString.length; i++) {
+        const char = tokenString[i];
+        if (char === quote) {
+            quote = null;
+            continue;
+        }
+        if (quote) {
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            continue;
+        }
+        if (char === ">") {
+            return i;
+        }
+    }
+    return -1;
+}
+exports.findOpeningTagEnd = findOpeningTagEnd;
+function splitAtomicTokenString(tokenString) {
+    const openingTagEnd = findOpeningTagEnd(tokenString);
+    if (openingTagEnd === -1) {
+        return null;
+    }
+    if (openingTagEnd === tokenString.length - 1) {
+        return {
+            openingTag: tokenString,
+            innerHtml: "",
+            closingTag: "",
+        };
+    }
+    const closingTagStart = tokenString.lastIndexOf("<");
+    if (closingTagStart <= openingTagEnd || tokenString[closingTagStart + 1] !== "/") {
+        return null;
+    }
+    return {
+        openingTag: tokenString.slice(0, openingTagEnd + 1),
+        innerHtml: tokenString.slice(openingTagEnd + 1, closingTagStart),
+        closingTag: tokenString.slice(closingTagStart),
+    };
+}
+exports.splitAtomicTokenString = splitAtomicTokenString;
+function renderInnerDiff(beforeString, afterString, diffContent, dataPrefix, className) {
+    const before = splitAtomicTokenString(beforeString);
+    const after = splitAtomicTokenString(afterString);
+    if (!before || !after) {
+        return afterString;
+    }
+    const atomicTagsOverride = atomicTags_1.dataHtmlDiffInnerDiffAtomicTagsRegExp.exec(afterString);
+    const outerAtomicTagsRegExp = (0, atomicTags_1.getAtomicTagsRegExp)();
+    innerDiffDepth++;
+    let innerDiff;
+    try {
+        (0, atomicTags_1.setAtomicTagsRegExp)(atomicTags_1.defaultInnerDiffAtomicTagsRegExp);
+        if (atomicTagsOverride) {
+            (0, atomicTags_1.setAtomicTagsRegExp)(atomicTagsOverride[1] ? (0, atomicTags_1.buildAtomicTagsRegExp)(atomicTagsOverride[1]) : atomicTags_1.noAtomicTagsRegExp);
+        }
+        innerDiff = diffContent(before.innerHtml, after.innerHtml, className, dataPrefix);
+    }
+    finally {
+        innerDiffDepth--;
+        (0, atomicTags_1.setAtomicTagsRegExp)(outerAtomicTagsRegExp);
+    }
+    return after.openingTag + innerDiff + after.closingTag;
+}
+exports.renderInnerDiff = renderInnerDiff;
+function renderEqual(op, beforeTokens, afterTokens, _opIndex, diffContent, dataPrefix, className) {
+    let result = "";
+    for (let i = 0; op.startInAfter + i <= op.endInAfter; i++) {
+        const afterToken = afterTokens[op.startInAfter + i];
+        const beforeToken = beforeTokens[op.startInBefore + i];
+        if (beforeToken && beforeToken.string !== afterToken.string && isInnerDiffToken(afterToken.string)) {
+            result += renderInnerDiff(beforeToken.string, afterToken.string, diffContent, dataPrefix, className);
+        }
+        else {
+            result += afterToken.string;
+        }
+    }
+    return result;
+}
+function renderInsert(op, _beforeTokens, afterTokens, opIndex, _diffContent, dataPrefix, className) {
+    const tokens = afterTokens.slice(op.startInAfter, op.endInAfter + 1);
+    const val = tokens.map((token) => token.string);
+    const res = wrap("ins", val, opIndex, dataPrefix, className);
+    if (/^<[^./]+?>$/.exec(res)) {
+        return `${res.slice(0, res.length - 1)} data-inserted="true">`;
+    }
+    return res;
+}
+function renderDelete(op, beforeTokens, _afterTokens, opIndex, _diffContent, dataPrefix, className) {
+    const tokens = beforeTokens.slice(op.startInBefore, op.endInBefore + 1);
+    const val = tokens.map((token) => token.string);
+    const res = wrap("del", val, opIndex, dataPrefix, className);
+    if (/^<\/.+?><.+?>$/.exec(res) && !res.includes("del")) {
+        return `<del>${val.slice(1, val.length - 1).join("")}</del>`;
+    }
+    return res;
+}
+function renderReplace(op, beforeTokens, afterTokens, opIndex, diffContent, dataPrefix, className) {
+    return (renderDelete(op, beforeTokens, afterTokens, opIndex, diffContent, dataPrefix, className) +
+        renderInsert(op, beforeTokens, afterTokens, opIndex, diffContent, dataPrefix, className));
+}
+const OPS = {
+    equal: renderEqual,
+    insert: renderInsert,
+    delete: renderDelete,
+    replace: renderReplace,
+};
+function renderOperations(beforeTokens, afterTokens, operations, diffContent, dataPrefix, className) {
+    return operations.reduce((rendering, op, index) => rendering + OPS[op.action](op, beforeTokens, afterTokens, index, diffContent, dataPrefix, className), "");
+}
+exports.renderOperations = renderOperations;

package/js/core/tokens.d.ts

@@ -0,0 +1,11 @@
+export interface Token {
+    string: string;
+    key: string;
+}
+export declare function isTag(token: string): string | false;
+export declare function isVoidTag(token: string): boolean;
+export declare function isVoidTagName(tag: string): boolean;
+export declare function isWrappable(token: string): boolean;
+export declare function createToken(currentWord: string): Token;
+export declare function getKeyForToken(token: string): string;
+export declare function htmlToTokens(html: string): Token[];

package/js/core/tokens.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.htmlToTokens = exports.getKeyForToken = exports.createToken = exports.isWrappable = exports.isVoidTagName = exports.isVoidTag = exports.isTag = void 0;
+const atomicTags_1 = require("./atomicTags");
+function isTag(token) {
+    const match = token.match(/^\s*<([^!>][^>]*)>\s*$/);
+    return !!match && match[1].trim().split(" ")[0];
+}
+exports.isTag = isTag;
+function isVoidTag(token) {
+    return /^\s*<[^>]+\/>\s*$/.test(token);
+}
+exports.isVoidTag = isVoidTag;
+function isVoidTagName(tag) {
+    return /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/.test(tag);
+}
+exports.isVoidTagName = isVoidTagName;
+function isWrappable(token) {
+    const isImage = /^<img[\s>]/.test(token);
+    return isImage || !isTag(token) || !!(0, atomicTags_1.isStartOfAtomicTag)(token) || isVoidTag(token);
+}
+exports.isWrappable = isWrappable;
+function createToken(currentWord) {
+    return {
+        string: currentWord,
+        key: getKeyForToken(currentWord),
+    };
+}
+exports.createToken = createToken;
+function getKeyForToken(token) {
+    const img = /^<img.*src=['"]([^"']*)['"].*>$/.exec(token);
+    if (img) {
+        return '<img src="' + img[1] + '">';
+    }
+    const a = /^<a.*href=['"]([^"']*)['"]/.exec(token);
+    if (a && (0, atomicTags_1.getAtomicTagsRegExp)().test("<a ")) {
+        return '<a href="' + a[1] + '"></a>';
+    }
+    const object = /^<object.*data=['"]([^"']*)['"]/.exec(token);
+    if (object) {
+        return '<object src="' + object[1] + '"></object>';
+    }
+    if (/^<(svg|math|video)[\s>]/.test(token)) {
+        const uuid = token.indexOf('data-uuid="');
+        if (uuid !== -1) {
+            const start = token.slice(0, uuid);
+            const end = token.slice(uuid + 44);
+            return start + end;
+        }
+        return token;
+    }
+    const iframe = /^<iframe.*src=['"]([^"']*)['"].*>/.exec(token);
+    if (iframe) {
+        return '<iframe src="' + iframe[1] + '"></iframe>';
+    }
+    const uuidTag = atomicTags_1.dataHtmlDiffIdRegExp.exec(token);
+    if (uuidTag) {
+        return uuidTag[2];
+    }
+    const tagName = /<([^\s>]+)[\s>]/.exec(token);
+    if (tagName) {
+        return "<" + tagName[1].toLowerCase() + ">";
+    }
+    if (token) {
+        return token.replace(/([^\S\r\n]+|&nbsp;|&#160;)/g, " ");
+    }
+    return token;
+}
+exports.getKeyForToken = getKeyForToken;
+function isEndOfTag(char) {
+    return char === ">";
+}
+function isStartOfTag(char) {
+    return char === "<";
+}
+function isWhitespace(char) {
+    return /^\s+$/.test(char);
+}
+function isStartOfHtmlComment(word) {
+    return /^<!--/.test(word);
+}
+function isEndOfHtmlComment(word) {
+    return /-->$/.test(word);
+}
+function isOpeningTagOf(tagText, tag) {
+    if (tagText.indexOf(">") !== tagText.length - 1) {
+        return false;
+    }
+    return new RegExp("^<" + tag + "(\\s|>)").test(tagText) && !/\/>$/.test(tagText);
+}
+function isClosingTagOf(tagText, tag) {
+    if (tagText.indexOf(">") !== tagText.length - 1) {
+        return false;
+    }
+    return new RegExp("^</" + tag + "(\\s|>)").test(tagText);
+}
+function htmlToTokens(html) {
+    let mode = "char";
+    let currentWord = "";
+    let currentAtomicTag = "";
+    let currentAtomicTagDepth = 0;
+    let currentQuote = null;
+    let inAtomicOpeningTag = false;
+    let lastTagStart = -1;
+    const words = [];
+    function consumeAttributeQuote(char, canOpenQuote) {
+        if (currentQuote) {
+            if (char === currentQuote) {
+                currentQuote = null;
+            }
+            return true;
+        }
+        if (canOpenQuote && (char === '"' || char === "'")) {
+            currentQuote = char;
+            return true;
+        }
+        return false;
+    }
+    for (let i = 0; i < html.length; i++) {
+        const char = html[i];
+        if (isStartOfTag(char)) {
+            lastTagStart = i;
+        }
+        switch (mode) {
+            case "tag": {
+                if (consumeAttributeQuote(char, true)) {
+                    currentWord += char;
+                    break;
+                }
+                const atomicTag = (0, atomicTags_1.isStartOfAtomicTag)(currentWord + char);
+                if (atomicTag && isEndOfTag(char) && (isVoidTagName(atomicTag) || /\/$/.test(currentWord))) {
+                    currentWord += ">";
+                    words.push(createToken(currentWord));
+                    currentWord = "";
+                    mode = "char";
+                }
+                else if (atomicTag) {
+                    mode = "atomic_tag";
+                    currentAtomicTag = atomicTag;
+                    inAtomicOpeningTag = !isEndOfTag(char);
+                    currentAtomicTagDepth = isEndOfTag(char) ? 1 : 0;
+                    currentWord += char;
+                }
+                else if (isStartOfHtmlComment(currentWord)) {
+                    mode = "html_comment";
+                    currentWord += char;
+                }
+                else if (isEndOfTag(char)) {
+                    currentWord += ">";
+                    words.push(createToken(currentWord));
+                    currentWord = "";
+                    if (isWhitespace(char)) {
+                        mode = "whitespace";
+                    }
+                    else {
+                        mode = "char";
+                    }
+                }
+                else {
+                    currentWord += char;
+                }
+                break;
+            }
+            case "atomic_tag":
+                currentWord += char;
+                if (consumeAttributeQuote(char, inAtomicOpeningTag)) {
+                    break;
+                }
+                if (isEndOfTag(char)) {
+                    inAtomicOpeningTag = false;
+                    const tagText = html.slice(lastTagStart, i + 1);
+                    if (isClosingTagOf(tagText, currentAtomicTag)) {
+                        currentAtomicTagDepth--;
+                        if (currentAtomicTagDepth <= 0) {
+                            words.push(createToken(currentWord));
+                            currentWord = "";
+                            currentAtomicTag = "";
+                            currentAtomicTagDepth = 0;
+                            mode = "char";
+                        }
+                    }
+                    else if (currentAtomicTagDepth === 0 && (isVoidTagName(currentAtomicTag) || html[i - 1] === "/")) {
+                        words.push(createToken(currentWord));
+                        currentWord = "";
+                        currentAtomicTag = "";
+                        mode = "char";
+                    }
+                    else if (isOpeningTagOf(tagText, currentAtomicTag)) {
+                        currentAtomicTagDepth++;
+                    }
+                }
+                break;
+            case "html_comment":
+                currentWord += char;
+                if (isEndOfHtmlComment(currentWord)) {
+                    currentWord = "";
+                    mode = "char";
+                }
+                break;
+            case "char":
+                if (isStartOfTag(char)) {
+                    if (currentWord) {
+                        words.push(createToken(currentWord));
+                    }
+                    currentWord = "<";
+                    mode = "tag";
+                }
+                else if (/\s/.test(char)) {
+                    if (currentWord) {
+                        words.push(createToken(currentWord));
+                    }
+                    currentWord = char;
+                    mode = "whitespace";
+                }
+                else if (/[\w\d#@]/.test(char)) {
+                    currentWord += char;
+                }
+                else if (/&/.test(char)) {
+                    if (currentWord) {
+                        words.push(createToken(currentWord));
+                    }
+                    currentWord = char;
+                }
+                else {
+                    currentWord += char;
+                    words.push(createToken(currentWord));
+                    currentWord = "";
+                }
+                break;
+            case "whitespace":
+                if (isStartOfTag(char)) {
+                    if (currentWord) {
+                        words.push(createToken(currentWord));
+                    }
+                    currentWord = "<";
+                    mode = "tag";
+                }
+                else if (isWhitespace(char)) {
+                    currentWord += char;
+                }
+                else {
+                    if (currentWord) {
+                        words.push(createToken(currentWord));
+                    }
+                    currentWord = char;
+                    mode = "char";
+                }
+                break;
+        }
+    }
+    if (currentWord) {
+        words.push(createToken(currentWord));
+    }
+    return words;
+}
+exports.htmlToTokens = htmlToTokens;

package/js/htmldiff.d.ts

@@ -1,17 +1,2 @@
-/**
- * Compares two pieces of HTML content and returns the combined content with differences
- * wrapped in <ins> and <del> tags.
- * @param before The HTML content before the changes.
- * @param after The HTML content after the changes.
- * @param className (Optional) The class attribute to include in `<ins>` and `<del>` tags.
- * @param dataPrefix (Optional) The data prefix to use for data attributes. The operation index data
- * attribute will be named `data-${dataPrefix-}operation-index`.
- * @param atomicTags (Optional) Comma separated list of tag names. The list has to be in the form
- * `tag1,tag2,...` e. g. `head,script,style`. An atomic tag is one whose child nodes should not be
- * compared - the entire tag should be treated as one token. This is useful for tags where it does
- * not make sense to insert `<ins>` and `<del>` tags. If not used, the default list 
- * `iframe,object,math,svg,script,video,head,style` will be used.
- * @return The combined HTML content with differences wrapped in `<ins>` and `<del>` tags.
- */
 declare function diff(before: string, after: string, className?: string | null, dataPrefix?: string | null, atomicTags?: string | null): string;
 export = diff;