feat(export): replace diff library to diff-match-patch

    - new DiffTextOutput components

Author: shreeyash07

app/package.json

@@ -51,8 +51,9 @@
         "@togglecorp/toggle-request": "^1.0.0-beta.3",
         "@turf/bbox": "^6.5.0",
         "@turf/buffer": "^6.5.0",
+        "@types/diff-match-patch": "^1.0.36",
+        "diff-match-patch": "^1.0.5",
         "exceljs": "^4.4.0",
-        "diff": "^8.0.2",
         "file-saver": "^2.0.5",
         "html-to-image": "^1.11.11",
         "mapbox-gl": "^1.13.0",

app/src/components/printable/DiffTextOutput/index.tsx

@@ -0,0 +1,91 @@
+import {
+    Fragment,
+    useMemo,
+} from 'react';
+import {
+    _cs,
+    isNotDefined,
+} from '@togglecorp/fujs';
+import DiffMatchPatch from 'diff-match-patch';
+
+import styles from './styles.module.css';
+
+const ADDED = 1;
+const REMOVED = -1;
+
+interface Props {
+    value?: string | null;
+    className?: string;
+    withDiff?: boolean;
+    prevValue?: string | null;
+}
+
+function DiffTextOutput(props: Props) {
+    const {
+        className,
+        value,
+        prevValue,
+        withDiff = false,
+    } = props;
+
+    const diff = useMemo(() => {
+        if (!withDiff) {
+            return undefined;
+        }
+        const diffMatch = new DiffMatchPatch();
+        return diffMatch.diff_main(prevValue ?? '', value ?? '');
+    }, [withDiff, value, prevValue]);
+
+    if (isNotDefined(diff)) {
+        return (
+            <div className={_cs(styles.diffTextOutput, className)}>
+                {value}
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={_cs(
+                styles.diffTextOutput,
+                styles.withDiffView,
+                className,
+            )}
+        >
+            {diff.map(([changeType, content], index) => {
+                if (changeType === ADDED) {
+                    return (
+                        <span
+                            className={styles.added}
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={index}
+                        >
+                            {content}
+                        </span>
+                    );
+                }
+
+                if (changeType === REMOVED) {
+                    return (
+                        <span
+                            className={styles.removed}
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={index}
+                        >
+                            {content}
+                        </span>
+                    );
+                }
+
+                return (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <Fragment key={index}>
+                        {content}
+                    </Fragment>
+                );
+            })}
+        </div>
+    );
+}
+
+export default DiffTextOutput;

app/src/components/printable/DiffTextOutput/styles.module.css

@@ -0,0 +1,18 @@
+.diff-text-output {
+    text-align: justify;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+
+    &.with-diff-view {
+        .added {
+            background-color: color-mix(in srgb, var(--go-ui-color-green) 10%, transparent);
+            color: var(--go-ui-color-green);
+        }
+
+        .removed {
+            background-color: color-mix(in srgb, var(--go-ui-color-red) 10%, transparent);
+            text-decoration: line-through;
+            color: var(--go-ui-color-red);
+        }
+    }
+}