Feature: When editing Object or Array fields the data is displayed in a prettier format and the textarea is resizable (#734)

Author: ssamuli

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### NEXT RELEASE
 
 * _Contributing to this repo? Add info about your change here to be included in next release_
+* Feature: When editing Object or Array fields the data is displayed in a prettier format and the textarea is resizable
 * Fix: Display bug on safari when table has empty cells ('')
 
 ### 1.0.28

src/components/StringEditor/StringEditor.react.js

@@ -50,13 +50,17 @@ export default class StringEditor extends React.Component {
   render() {
     let onChange = this.props.readonly ? () => {} : (e) => this.setState({ value: e.target.value });
     if (this.props.multiline) {
+      var style = { minWidth: this.props.minWidth };
+      if (this.props.resizable) {
+        style.resize = 'both';
+      }
       return (
         <div className={styles.editor}>
           <textarea
             ref='input'
             value={this.state.value}
             onChange={onChange}
-            style={{ minWidth: this.props.minWidth }} />
+            style={style} />
         </div>
       );
     }

src/dashboard/Data/Browser/Editor.react.js

@@ -37,7 +37,8 @@ let Editor = ({ top, left, type, targetClass, value, readonly, width, onCommit }
     }
     content = (
       <StringEditor
-        value={JSON.stringify(value)}
+        value={JSON.stringify(value, null, 2)}
+        resizable={true}
         multiline={true}
         width={width}
         onCommit={encodeCommit} />