From a8acfa4fb167ce3ef3ed2546d1ecbdedd7b3654a Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 13 Jul 2023 18:22:39 +0200
Subject: [PATCH] Add JsonEditor component

---
 components/inputs/JsonEditor.tsx | 65 ++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 components/inputs/JsonEditor.tsx

diff --git a/components/inputs/JsonEditor.tsx b/components/inputs/JsonEditor.tsx
new file mode 100644
index 0000000..a171671
--- /dev/null
+++ b/components/inputs/JsonEditor.tsx
@@ -0,0 +1,65 @@
+import { CSSProperties, useEffect, useRef } from "react";
+import { JSONEditorPropsOptional, JSONEditor as VanillaJsonEditor } from "vanilla-jsoneditor";
+
+const editorStyle: { [key: string]: string } & CSSProperties = {
+  "--jse-a-color": "white",
+  "--jse-delimiter-color": "white",
+  "--jse-key-color": "white",
+  "--jse-text-color": "white",
+  "--jse-value-color": "white",
+  "--jse-value-color-boolean": "white",
+  "--jse-value-color-null": "white",
+  "--jse-value-color-number": "white",
+  "--jse-value-color-string": "white",
+  "--jse-value-color-url": "white",
+  "--jse-background-color": "transparent",
+  "--jse-panel-background": "transparent",
+  "--jse-selection-background-color": "rgba(255, 255, 255, 0.5)",
+  "--jse-main-border": "2px solid rgba(255, 255, 255, 0.5)",
+  "--jse-panel-border": "2px solid rgba(255, 255, 255, 0.5)",
+};
+
+interface JsonEditorProps extends JSONEditorPropsOptional {
+  readonly label?: string;
+}
+
+export default function JsonEditor({ label, ...editorProps }: JsonEditorProps) {
+  const refContainer = useRef<HTMLDivElement>(null);
+  const refEditor = useRef<any>(null);
+
+  useEffect(() => {
+    if (!refContainer.current) return;
+
+    refEditor.current = new VanillaJsonEditor({ target: refContainer.current, props: {} });
+
+    return () => {
+      if (refEditor.current) {
+        refEditor.current.destroy();
+        refEditor.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (refEditor.current) {
+      refEditor.current.updateProps({ mode: "text", mainMenuBar: false, ...editorProps });
+    }
+  }, [editorProps]);
+
+  return (
+    <div className="container" style={editorStyle} ref={refContainer}>
+      {label ? <label>{label}</label> : null}
+      <style jsx>{`
+        .container {
+          display: flex;
+          flex-direction: column;
+          gap: 0.8em;
+        }
+        label {
+          font-style: italic;
+          font-size: 12px;
+        }
+      `}</style>
+    </div>
+  );
+}