Merge branch 'formatters2' into dev

Author: jrosengrant

package.json

@@ -173,7 +173,7 @@
     "html-react-parser": "^5.0.11",
     "intro.js": "^7.2.0",
     "intro.js-react": "^1.0.0",
-    "jsondiffpatch": "^0.6.0",
+    "jsondiffpatch": "^0.5.0",
     "lodash": "^4.17.21",
     "node": "^18.12.1",
     "rc-slider": "^10.5.0",

src/app/components/StateRoute/History.tsx

@@ -3,12 +3,7 @@
 // @ts-nocheck
 import React, { useEffect } from 'react';
 // formatting findDiff return data to show the changes with colors, aligns with actions.tsx
-import { diff } from 'jsondiffpatch';
-const jsondiffpatch = require('jsondiffpatch');
-// import * as jsondiffpatch from 'jsondiffpatch';
-// import { diff } from 'jsondiffpatch';
-// import jsondiffpatch from 'jsondiffpatch/formatters';
-// const jsondiffpatch = require('jsondiffpatch');
+import { diff, formatters } from 'jsondiffpatch';
 import * as d3 from 'd3';
 import { DefaultMargin } from '../../FrontendTypes';
 import { useDispatch } from 'react-redux';
@@ -159,7 +154,7 @@ function History(props: Record<string, unknown>): JSX.Element {
       statelessCleaning(snapshots[index]),
     );
     const changedState = findStateChangeObj(delta); // determines if delta had any stateful changes
-    const html = jsondiffpatch.formatters(changedState[0]); // formats the difference into html string
+    const html = formatters.html.format(changedState[0]); // formats the difference into html string
     return html; // return html string
   }