|
@@ -1,7 +1,6 @@
|
|
import React from "react";
|
|
import React from "react";
|
|
import styled from "styled-components";
|
|
import styled from "styled-components";
|
|
import JSONInput from "react-json-editor-ajrm";
|
|
import JSONInput from "react-json-editor-ajrm";
|
|
-import { useLocalStorage } from "usehooks-ts";
|
|
|
|
import locale from "react-json-editor-ajrm/locale/en";
|
|
import locale from "react-json-editor-ajrm/locale/en";
|
|
|
|
|
|
interface JsonData {
|
|
interface JsonData {
|
|
@@ -62,13 +61,7 @@ export const JsonEditor: React.FC<{
|
|
React.useEffect(() => {
|
|
React.useEffect(() => {
|
|
const jsonStored = localStorage.getItem("json");
|
|
const jsonStored = localStorage.getItem("json");
|
|
if (jsonStored) setInitialJson(jsonStored);
|
|
if (jsonStored) setInitialJson(jsonStored);
|
|
- }, []);
|
|
|
|
-
|
|
|
|
- React.useEffect(() => {
|
|
|
|
- if (json === "[]") setInitialJson(json);
|
|
|
|
- }, [json]);
|
|
|
|
|
|
|
|
- React.useEffect(() => {
|
|
|
|
const element = document.querySelector(
|
|
const element = document.querySelector(
|
|
'[name="outer-box"] > div'
|
|
'[name="outer-box"] > div'
|
|
) as HTMLDivElement;
|
|
) as HTMLDivElement;
|
|
@@ -77,6 +70,10 @@ export const JsonEditor: React.FC<{
|
|
}
|
|
}
|
|
}, []);
|
|
}, []);
|
|
|
|
|
|
|
|
+ React.useEffect(() => {
|
|
|
|
+ if (json === "[]") setInitialJson(json);
|
|
|
|
+ }, [json]);
|
|
|
|
+
|
|
const handleChange = (data: JsonData) => {
|
|
const handleChange = (data: JsonData) => {
|
|
if (!data.error) {
|
|
if (!data.error) {
|
|
if (data.json === "") return setJson("[]");
|
|
if (data.json === "") return setJson("[]");
|
|
@@ -91,6 +88,11 @@ export const JsonEditor: React.FC<{
|
|
locale={locale}
|
|
locale={locale}
|
|
height="100%"
|
|
height="100%"
|
|
width="auto"
|
|
width="auto"
|
|
|
|
+ style={{
|
|
|
|
+ outerBox: {
|
|
|
|
+ background: "blue",
|
|
|
|
+ },
|
|
|
|
+ }}
|
|
/>
|
|
/>
|
|
);
|
|
);
|
|
};
|
|
};
|