use jsoneditor instead of react-json-tree

Author: andriyor

packages/redux-devtools-inspector-monitor/demo/package.json

@@ -51,6 +51,8 @@
     "typescript": "~5.3.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.1",
+    "css-loader": "^6.8.1",
+    "style-loader": "^3.3.3"
   }
 }

packages/redux-devtools-inspector-monitor/demo/webpack.config.ts

@@ -39,6 +39,10 @@ const config: webpack.Configuration = {
           },
         },
       },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
   resolve: {

packages/redux-devtools-inspector-monitor/package.json

@@ -50,7 +50,8 @@
     "lodash.debounce": "^4.0.8",
     "react-base16-styling": "^0.9.1",
     "react-json-tree": "^0.18.0",
-    "redux-devtools-themes": "^1.0.0"
+    "redux-devtools-themes": "^1.0.0",
+    "vanilla-jsoneditor": "^0.21.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",

packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx

@@ -4,6 +4,7 @@ import { Action } from 'redux';
 import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
 import { TabComponentProps } from '../ActionPreview';
+import { VanillaJSONEditor } from './VanillaJSONEditor';
 
 const StateTab: React.FunctionComponent<
   TabComponentProps<any, Action<string>>
@@ -16,19 +17,15 @@ const StateTab: React.FunctionComponent<
   isWideLayout,
   sortStateTreeAlphabetically,
   disableStateTreeCollection,
-}) => (
-  <JSONTree
-    labelRenderer={labelRenderer}
-    theme={getJsonTreeTheme(base16Theme)}
-    data={nextState}
-    getItemString={(type, data) =>
-      getItemString(type, data, dataTypeKey, isWideLayout)
-    }
-    invertTheme={invertTheme}
-    hideRoot
-    sortObjectKeys={sortStateTreeAlphabetically}
-    {...(disableStateTreeCollection ? { collectionLimit: 0 } : {})}
-  />
-);
+}) => {
+  return (
+      <VanillaJSONEditor
+        content={{
+          json: nextState
+        }}
+        readOnly={true}
+      />
+  );
+}
 
 export default StateTab;

packages/redux-devtools-inspector-monitor/src/tabs/VanillaJSONEditor.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef } from "react";
+import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
+
+import { JSONEditor } from "vanilla-jsoneditor";
+
+export const VanillaJSONEditor = (props: any)  => {
+  const refContainer = useRef(null);
+  const refEditor = useRef(null);
+
+  useEffect(() => {
+    // create editor
+    console.log("create editor", refContainer.current);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    refEditor.current = new JSONEditor({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      target: refContainer.current,
+      props: {}
+    });
+
+    return () => {
+      // destroy editor
+      if (refEditor.current) {
+        console.log("destroy editor");
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        refEditor.current.destroy();
+        refEditor.current = null;
+      }
+    };
+  }, []);
+
+  // update props
+  useEffect(() => {
+    if (refEditor.current) {
+      console.log("update props", props);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      refEditor.current.updateProps(props);
+    }
+  }, [props]);
+
+  return <div style={{height: '100%'}} className="jse-theme-dark" ref={refContainer}></div>;
+}