|
@@ -69,6 +69,15 @@ export const MonacoEditor = () => {
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [debouncedSetJson, hasError, value]);
|
|
}, [debouncedSetJson, hasError, value]);
|
|
|
|
|
|
|
|
+ const handleChange = React.useCallback((value?: string) => {
|
|
|
|
+ try {
|
|
|
|
+ const parsedJson = JSON.stringify(JSON.parse(value!), null, 2);
|
|
|
|
+ setValue(parsedJson);
|
|
|
|
+ } catch (error) {
|
|
|
|
+ setValue(value);
|
|
|
|
+ }
|
|
|
|
+ }, []);
|
|
|
|
+
|
|
React.useEffect(() => {
|
|
React.useEffect(() => {
|
|
const beforeunload = (e: BeforeUnloadEvent) => {
|
|
const beforeunload = (e: BeforeUnloadEvent) => {
|
|
if (getHasChanges()) {
|
|
if (getHasChanges()) {
|
|
@@ -93,7 +102,7 @@ export const MonacoEditor = () => {
|
|
value={json}
|
|
value={json}
|
|
theme={lightmode}
|
|
theme={lightmode}
|
|
options={editorOptions}
|
|
options={editorOptions}
|
|
- onChange={setValue}
|
|
|
|
|
|
+ onChange={handleChange}
|
|
loading={<Loading message="Loading Editor..." />}
|
|
loading={<Loading message="Loading Editor..." />}
|
|
beforeMount={handleEditorWillMount}
|
|
beforeMount={handleEditorWillMount}
|
|
defaultLanguage="json"
|
|
defaultLanguage="json"
|