feat(parseJson): added the ability to include json parse in the editor (#120)

Author: NasgulNexus

src/stories/components/Editor/Editor.scss

@@ -24,13 +24,23 @@
         overflow-y: auto;
     }
 
+    &__parse-json {
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+    }
+
+    &__switch {
+        margin-left: 20px;
+    }
+
     &__toggler {
         margin-bottom: 20px;
     }
 
     &__monaco {
         width: 640px;
-        height: 100%;
+        height: calc(100% - 40px);
 
         .df-monaco-input {
             width: 100%;

src/stories/components/Editor/Editor.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {RadioButton} from '@gravity-ui/uikit';
+import {RadioButton, Switch, Text} from '@gravity-ui/uikit';
 import _ from 'lodash';
 import {Form} from 'react-final-form';
 import MonacoEditor from 'react-monaco-editor';
@@ -31,6 +31,7 @@ export const Editor: React.FC<EditorProps> = ({spec: externalSpec, value, viewMo
     const [spec, setSpec] = React.useState(externalSpec);
     const [ready, setReady] = React.useState(true);
     const [toggler, setToggler] = React.useState<'form' | 'view' | 'json'>('form');
+    const [parseJson, setParseJson] = React.useState(false);
 
     const togglerItems = React.useMemo(
         () => [
@@ -113,6 +114,10 @@ export const Editor: React.FC<EditorProps> = ({spec: externalSpec, value, viewMo
     return (
         <div className={b({docs: viewMode === 'docs'})}>
             <div className={b('options')}>
+                <div className={b('parse-json')}>
+                    <Text variant="body-2">Parse default values like json</Text>
+                    <Switch onChange={() => setParseJson((v) => !v)} className={b('switch')} />
+                </div>
                 <div className={b('monaco')}>
                     <MonacoInput {...specEditorProps} />
                 </div>
@@ -137,7 +142,7 @@ export const Editor: React.FC<EditorProps> = ({spec: externalSpec, value, viewMo
                                     <DynamicField
                                         name="input"
                                         spec={spec}
-                                        parseJsonDefaultValue={false}
+                                        parseJsonDefaultValue={parseJson}
                                     />
                                 </div>
                             ) : null}