JSON EDitor

webapp/config-overrides.js

@@ -14,6 +14,7 @@ module.exports = function override(config, env) {
     os: require.resolve("os-browserify/browser"),
     buffer: require.resolve("buffer"),
     stream: require.resolve("stream-browserify"),
+    "process/browser": require.resolve("process/browser"),
   };
   config.plugins.push(
     new webpack.ProvidePlugin({

webapp/package.json

@@ -41,7 +41,6 @@
     "i18next-xhr-backend": "3.2.2",
     "immer": "10.0.3",
     "js-cookie": "3.0.5",
-    "jsoneditor": "^9.10.4",
     "jwt-decode": "3.1.2",
     "lodash": "4.17.21",
     "material-react-table": "2.0.5",
@@ -78,6 +77,7 @@
     "url": "0.11.3",
     "use-undo": "1.1.1",
     "uuid": "9.0.1",
+    "vanilla-jsoneditor": "0.21.1",
     "xml-js": "1.6.11"
   },
   "scripts": {
@@ -106,7 +106,6 @@
     "@total-typescript/ts-reset": "0.5.1",
     "@types/debug": "4.1.9",
     "@types/js-cookie": "3.0.4",
-    "@types/jsoneditor": "^9.9.5",
     "@types/lodash": "4.14.199",
     "@types/ramda": "0.29.5",
     "@types/react-beautiful-dnd": "13.1.5",

webapp/src/components/common/JSONEditor.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from "react";
+import { useMount } from "react-use";
+import {
+  JSONEditor as JSONEditorLib,
+  type JSONEditorPropsOptional,
+} from "vanilla-jsoneditor";
+import "vanilla-jsoneditor/themes/jse-theme-dark.css";
+
+export type JSONEditorProps = JSONEditorPropsOptional;
+
+function JSONEditor(props: JSONEditorProps) {
+  const targetRef = useRef<HTMLDivElement>(null!);
+  const editorRef = useRef<JSONEditorLib | null>(null);
+
+  useMount(() => {
+    const editor = new JSONEditorLib({ target: targetRef.current, props });
+    editorRef.current = editor;
+    return () => editor.destroy();
+  });
+
+  useEffect(() => {
+    editorRef.current?.updateProps(props);
+  }, [props]);
+
+  return <div ref={targetRef} className="jse-theme-dark" />;
+}
+
+export default JSONEditor;