Add support for entering raw JSON

examples/official-storybook/stories/addon-controls.stories.tsx

@@ -33,7 +33,7 @@ export const Action = Template.bind({});
 Action.args = {
   children: 'hmmm',
   type: 'action',
-  json: DEFAULT_NESTED_OBJECT,
+  json: null,
 };
 
 export const ImageFileControl = (args) => <img src={args.imageUrls[0]} alt="Your Example Story" />;

lib/components/src/controls/Object.tsx

@@ -5,6 +5,7 @@ import { styled, useTheme, Theme } from '@storybook/theming';
 // @ts-ignore
 import { JsonTree } from './react-editable-json-tree';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
+import { Form } from '../form';
 import { Icons, IconsProps } from '../icon/icon';
 
 type JsonTreeProps = ComponentProps<typeof JsonTree>;
@@ -197,6 +198,16 @@ export const ObjectControl: React.FC<ObjectProps> = ({ name, value = {}, onChang
     },
     [onChange]
   );
+  const updateRaw = useCallback(
+    (raw) => {
+      try {
+        onChange(JSON.parse(raw));
+      } catch (e) {
+        // ignore
+      }
+    },
+    [onChange]
+  );
 
   const theme = useTheme() as Theme;
 
@@ -221,6 +232,16 @@ export const ObjectControl: React.FC<ObjectProps> = ({ name, value = {}, onChang
         inputElement={(_: any, __: any, ___: any, key: string) =>
           key ? <Input onFocus={selectValue} onBlur={dispatchEnterKey} /> : <Input />
         }
+        fallback={
+          <Form.Textarea
+            id={name}
+            name={name}
+            defaultValue={value}
+            onBlur={(event) => updateRaw(event.target.value)}
+            size="flex"
+            placeholder="JSON string"
+          />
+        }
       />
     </Wrapper>
   );

lib/components/src/controls/react-editable-json-tree/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+
 import JsonNode from './components/JsonNode';
 import { value, object, array } from './utils/styles';
 import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from './types/deltaTypes';
@@ -56,6 +57,7 @@ class JsonTree extends Component {
       beforeUpdateAction,
       logger,
       onSubmitValueParser,
+      fallback,
     } = this.props;
 
     // Node type
@@ -75,36 +77,36 @@ class JsonTree extends Component {
     }
 
     if (dataType === 'Object' || dataType === 'Array') {
-      node = (
-        <JsonNode
-          data={data}
-          name={rootName}
-          collapsed={false}
-          deep={-1}
-          isCollapsed={isCollapsed}
-          onUpdate={this.onUpdate}
-          onDeltaUpdate={onDeltaUpdate}
-          readOnly={readOnlyFunction}
-          getStyle={getStyle}
-          addButtonElement={addButtonElement}
-          cancelButtonElement={cancelButtonElement}
-          editButtonElement={editButtonElement}
-          inputElementGenerator={inputElementFunction}
-          textareaElementGenerator={textareaElementFunction}
-          minusMenuElement={minusMenuElement}
-          plusMenuElement={plusMenuElement}
-          beforeRemoveAction={beforeRemoveAction}
-          beforeAddAction={beforeAddAction}
-          beforeUpdateAction={beforeUpdateAction}
-          logger={logger}
-          onSubmitValueParser={onSubmitValueParser}
-        />
+      return (
+        <div className="rejt-tree">
+          <JsonNode
+            data={data}
+            name={rootName}
+            collapsed={false}
+            deep={-1}
+            isCollapsed={isCollapsed}
+            onUpdate={this.onUpdate}
+            onDeltaUpdate={onDeltaUpdate}
+            readOnly={readOnlyFunction}
+            getStyle={getStyle}
+            addButtonElement={addButtonElement}
+            cancelButtonElement={cancelButtonElement}
+            editButtonElement={editButtonElement}
+            inputElementGenerator={inputElementFunction}
+            textareaElementGenerator={textareaElementFunction}
+            minusMenuElement={minusMenuElement}
+            plusMenuElement={plusMenuElement}
+            beforeRemoveAction={beforeRemoveAction}
+            beforeAddAction={beforeAddAction}
+            beforeUpdateAction={beforeUpdateAction}
+            logger={logger}
+            onSubmitValueParser={onSubmitValueParser}
+          />
+        </div>
       );
-    } else {
-      node = 'Data must be an Array or Object';
     }
 
-    return <div className="rejt-tree">{node}</div>;
+    return fallback;
   }
 }
 
@@ -157,6 +159,7 @@ JsonTree.defaultProps = {
   inputElement: (usage, keyPath, deep, keyName, data, dataType) => <input />,
   textareaElement: (usage, keyPath, deep, keyName, data, dataType) => <textarea />,
   /* eslint-enable */
+  fallback: null,
 };
 
 export { JsonTree };