incorporate changes from https://github.com/praneshr/react-diff-viewer/pull/137/files and make a few updates on the type information

Author: davidfan168

examples/src/index.tsx

@@ -4,7 +4,7 @@ import {Component, MouseEvent} from 'react';
 import ReactDiff, {DiffMethod} from '../../src/index';
 import logo from '../../logo.png';
 import cn from 'classnames';
-import {render} from "react-dom";
+import {createRoot} from "react-dom/client";
 
 import oldJs from './diff/javascript/old.rjs?raw';
 import newJs from './diff/javascript/new.rjs?raw';
@@ -305,4 +305,5 @@ class Example extends Component<{}, ExampleState> {
   }
 }
 
-render(<Example />, document.getElementById('app'));
+const root = createRoot(document.getElementById('app'));
+root.render(<Example />);

src/compute-lines.ts

@@ -1,4 +1,5 @@
 import * as diff from 'diff';
+import { type } from 'os';
 
 const jsDiff: { [key: string]: any } = diff;
 
@@ -75,12 +76,10 @@ const constructLines = (value: string): string[] => {
 const computeDiff = (
   oldValue: string | Object,
   newValue: string | Object,
-  compareMethod: string = DiffMethod.CHARS,
+  compareMethod: DiffMethod | ((oldStr: string, newStr: string) => diff.Change[]) = DiffMethod.CHARS,
 ): ComputedDiffInformation => {
-  const diffArray: JsDiffChangeObject[] = jsDiff[compareMethod](
-    oldValue,
-    newValue,
-  );
+  const compareFunc = (typeof(compareMethod) === 'string') ? jsDiff[compareMethod] : compareMethod
+  const diffArray: JsDiffChangeObject[] = compareFunc(oldValue, newValue);
   const computedDiff: ComputedDiffInformation = {
     left: [],
     right: [],
@@ -127,7 +126,7 @@ const computeLineInformation = (
   oldString: string | Object,
   newString: string | Object,
   disableWordDiff: boolean = false,
-  lineCompareMethod: string = DiffMethod.CHARS,
+  lineCompareMethod: DiffMethod | ((oldStr: string, newStr: string) => diff.Change[]) = DiffMethod.CHARS,
   linesOffset: number = 0,
   showLines: string[] = [],
 ): ComputedLineInformation => {

src/index.tsx

@@ -3,6 +3,7 @@ import {ReactElement, JSX} from 'react';
 import cn from 'classnames';
 
 import {computeLineInformation, DiffInformation, DiffMethod, DiffType, LineInformation,} from './compute-lines';
+import { Change } from 'diff';
 import computeStyles, {ReactDiffViewerStyles, ReactDiffViewerStylesOverride,} from './styles';
 import {Block, computeHiddenBlocks} from "./compute-hidden-blocks";
 import {Expand} from "./expand";
@@ -29,7 +30,7 @@ export interface ReactDiffViewerProps {
   // Enable/Disable word diff.
   disableWordDiff?: boolean;
   // JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
-  compareMethod?: DiffMethod;
+  compareMethod?: DiffMethod | ((oldStr: string, newStr: string) => Change[]);
   // Number of unmodified lines surrounding each line diff.
   extraLinesSurroundingDiff?: number;
   // Show/hide line number.
@@ -596,11 +597,12 @@ class DiffViewer extends React.Component<
       leftTitle,
       rightTitle,
       splitView,
+      compareMethod,
       hideLineNumbers,
       nonce,
     } = this.props;
 
-    if (this.props.compareMethod !== DiffMethod.JSON) {
+    if (typeof(compareMethod) === 'string' && compareMethod !== DiffMethod.JSON) {
       if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
         throw Error('"oldValue" and "newValue" should be strings');
       }