Editable react-json-view

JsonArea.js

import React, { Component } from 'react'
import ReactJson from 'react-json-view'
import FormField from 'grommet/components/FormField'

export default class JsonArea extends Component {
	static isValid(str, warn = false) {
		try {
			JSON.parse(str)
			return true
		}
 		catch (e) {
			warn && alert('Invalid JSON format!')
		}
	}

	constructor(...args) {
		super(...args)
		const { input } = this.props
		this.state = {
			isEditing : false,
			changeValue : JSON.stringify(input.value, undefined, 4),
			isInvalid : false
		}
	}

	handleToggle = () => {
		this.setState({ isEditing : !this.state.isEditing })
	}

	handleTexareaChange = ({ target : { value } }) => {
		const { input } = this.props
		this.setState({
			changeValue : value
		})
		if (JsonArea.isValid(value))
			input.onChange(JSON.parse(value))
	}

	handleTexareaBlur = ({ target : { value } }) => {
		const { input } = this.props

		if (JsonArea.isValid(value)) {
			input.onChange(JSON.parse(value))

			this.setState({
				changeValue : value,
				isInvalid : false
			})
		}
		else
			this.setState({ isInvalid : true })
	}

	handleChanges = ({ updated_src : updatedSrc }) => {
		const { input } = this.props
		this.setState({
			changeValue : JSON.stringify(updatedSrc, undefined, 4)
		})
		input.onChange(updatedSrc)
	}

	render () {
		const { input, meta } = this.props
		const { isEditing, changeValue, isInvalid } = this.state

		return (
			<FormField error={meta.touched ? meta.error : undefined}
					   className={`jsonArea ${isInvalid && 'grommetux-form-field--error'}`}>
				{isInvalid &&
					<span className="grommetux-form-field__error">Invalid JSON - Will use last valid state</span>
				}
				<button type="button" onClick={this.handleToggle}>{isEditing ? 'Pretty' : 'RAW'}</button>
				{isEditing &&
				<textarea
					onChange={this.handleTexareaChange}
					onBlur={this.handleTexareaBlur}
					value={changeValue} />
				}
				{!isEditing &&
				<ReactJson src={input.value}
						   theme="ocean"
						   iconStyle="triangle"
						   indentWidth="2"
						   displayObjectSize={false}
						   displayDataTypes={false}
						   onEdit={this.handleChanges}
						   onAdd={this.handleChanges}
						   onDelete={this.handleChanges} />
				}
			</FormField>
		)
	}
}

styles.scss

.react-json-view, .jsonArea > .grommetux-form-field__contents > textarea {
		float: left;
		width: 100%;
		overflow: auto;
		height: calc(100vh - 656px);
		min-height: 250px;
		padding: 5px !important;
		resize: none;
	}

	.jsonArea {
		position: relative;
		margin-top: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		float: left;
		overflow: visible !important;
	}

	.jsonArea > .grommetux-form-field__contents > button {
		position: absolute;
		background: #01a982 !important;
		transform: scale(0.7);
		top: -44px;
		right: -18px;
	}

	.jsonArea .grommetux-form-field__error {
		position: absolute;
		z-index: 1;
		right: 0;
		top: 0;
		padding: 5px;
		line-height: 1;
		background: #f59f9f;
		color: #fff !important;
	}

	.jsonArea .key-modal-input {
		color: #000 !important;
	}

.jsonArea {
		position: relative;
		margin-top: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		float: left;
		overflow: visible !important;
	}

	.jsonArea > .grommetux-form-field__contents > button {
		position: absolute;
		background: #01a982 !important;
		transform: scale(0.7);
		top: -44px;
		right: -18px;
	}

	.jsonArea .grommetux-form-field__error {
		position: absolute;
		z-index: 1;
		right: 0;
		top: 0;
		padding: 5px;
		line-height: 1;
		background: #f59f9f;
		color: #fff !important;
	}

	.jsonArea .key-modal-input {
		color: #000 !important;
	}