fix(web-devtools): json-editor

package.json

@@ -75,7 +75,8 @@
     "@openzeppelin/contracts-upgradeable@npm:4.8.3": "npm:4.9.6",
     "@openzeppelin/contracts-upgradeable@npm:4.9.3": "npm:4.9.6",
     "elliptic@npm:6.5.4": "npm:6.6.1",
-    "word-wrap@npm:~1.2.3": "npm:1.2.5"
+    "word-wrap@npm:~1.2.3": "npm:1.2.5",
+    "@codemirror/state": "npm:6.5.2"
   },
   "scripts": {
     "check-prerequisites": "scripts/check-prerequisites.sh",

web-devtools/package.json

@@ -47,6 +47,7 @@
     "typescript": "^5.6.3"
   },
   "dependencies": {
+    "@codemirror/state": "^6.5.2",
     "@coinbase/wallet-sdk": "^4.3.2",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/kleros-v2-contracts": "workspace:^",
@@ -69,7 +70,7 @@
     "react-use": "^17.5.1",
     "styled-components": "^5.3.3",
     "typewriter-effect": "^2.21.0",
-    "vanilla-jsoneditor": "^0.23.0",
+    "vanilla-jsoneditor": "^3.3.1",
     "viem": "^2.24.1",
     "wagmi": "^2.14.15"
   }

web-devtools/src/components/JSONEditor.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect, useRef } from "react";
 import styled, { css } from "styled-components";
 
-import { JSONEditor as Editor } from "vanilla-jsoneditor";
+import {
+  createJSONEditor,
+  type JSONEditorPropsOptional,
+  type JsonEditor as VanillaJsonEditor,
+} from "vanilla-jsoneditor";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
@@ -35,14 +39,13 @@ const Container = styled.div`
 
 const JSONEditor = (props: any) => {
   const refContainer = useRef<HTMLDivElement | null>(null);
-  const refEditor = useRef<Editor | null>(null);
+  const refEditor = useRef<VanillaJsonEditor | null>(null);
+  const refPrevProps = useRef<JSONEditorPropsOptional>(props);
 
   useEffect(() => {
-    refEditor.current = new Editor({
-      target: refContainer.current!,
-      props: {
-        ...props,
-      },
+    refEditor.current = createJSONEditor({
+      target: refContainer.current as HTMLDivElement,
+      props,
     });
 
     return () => {
@@ -53,12 +56,25 @@ const JSONEditor = (props: any) => {
     };
   }, []);
 
+  // update props
   useEffect(() => {
     if (refEditor.current) {
-      refEditor.current.updateProps(props);
+      const changedProps = filterUnchangedProps(props, refPrevProps.current);
+      refEditor.current.updateProps(changedProps);
+      refPrevProps.current = props;
     }
   }, [props]);
 
   return <Container ref={refContainer} className={props.className}></Container>;
 };
+
+function filterUnchangedProps(
+  props: JSONEditorPropsOptional,
+  prevProps: JSONEditorPropsOptional
+): JSONEditorPropsOptional {
+  return Object.fromEntries(
+    Object.entries(props).filter(([key, value]) => value !== prevProps[key as keyof JSONEditorPropsOptional])
+  );
+}
+
 export default JSONEditor;