JSON Schema Editor Example

(http://thomashansen.me)", 26 | "license": "MIT", 27 | "standard": { 28 | "parser": "babel-eslint", 29 | "rules": { 30 | "strict": 0 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | window.JSONSchemaEditor = function(element,options) { 2 | if (!(element instanceof Element)) { 3 | throw new Error('element should be an instance of Element'); 4 | } 5 | options = options||{}; 6 | this.element = element; 7 | this.options = options; 8 | this.init(); 9 | }; 10 | 11 | JSONSchemaEditor.prototype = { 12 | // necessary since we remove the ctor property by doing a literal assignment. Without this 13 | // the $isplainobject function will think that this is a plain object. 14 | constructor: JSONSchemaEditor, 15 | init: function() { 16 | var self = this; 17 | var data = this.options.startval || {}; 18 | 19 | this.react = ReactDOM.render( 20 | , 21 | self.element 22 | ); 23 | this.callbacks = {}; 24 | }, 25 | on: function(event, callback) { 26 | this.react.on(event, callback); 27 | }, 28 | onChange: function() { 29 | }, 30 | getValue: function() { 31 | return this.react.export(); 32 | }, 33 | setValue: function(data) { 34 | var self = this; 35 | // uncommenting this makes the update work on the test page 36 | // self.element.children[0].remove(); 37 | this.react = ReactDOM.render( 38 | , 39 | self.element 40 | ); 41 | } 42 | } 43 | 44 | var shortNumberStyle = { 45 | width: '50px' 46 | } 47 | 48 | var SchemaString = React.createClass({ 49 | getInitialState: function() { 50 | var state = this.props.data; 51 | state.hasEnum = !!state.enum; 52 | return state 53 | }, 54 | componentWillReceiveProps: function(newProps) { 55 | if (typeof newProps.data.description !== 'undefined') { 56 | this.state.description = newProps.data.description; 57 | } 58 | this.setState(this.state); 59 | }, 60 | componentDidUpdate: function() { 61 | this.props.onChange(); 62 | }, 63 | export: function() { 64 | return { 65 | type: 'string', 66 | default: this.state.default, 67 | description: this.state.description, 68 | format: this.state.format, 69 | pattern: !!this.state.pattern ? this.state.pattern : undefined, 70 | enum: this.state.enum 71 | }; 72 | }, 73 | change: function(event) { 74 | this.state[event.target.name] = event.target.value; 75 | this.setState(this.state); 76 | }, 77 | changeBool: function(event) { 78 | this.state[event.target.name] = event.target.checked; 79 | this.setState(this.state); 80 | }, 81 | changeEnum: function(event) { 82 | var arr = event.target.value.split('\n'); 83 | if (arr.length == 1 && !arr[0]) { 84 | arr = undefined; 85 | } 86 | this.state[event.target.name] = arr 87 | this.setState(this.state); 88 | }, 89 | render: function() { 90 | var settings; 91 | if (this.state.hasEnum) { 92 | settings =

93 | Enum (one value per line): 94 |

95 | 					  </div>
 96 | 		} else {
 97 | 			settings = <span>
 98 | 				<input placeholder="pattern" name="pattern" type="text" value={this.state.pattern} onChange={this.change} />
 99 | 				</span>
100 | 		}
101 | 		return (
102 | 			<div>
103 | 				Format: 
104 | 				<select name="format" onChange={this.change} value={this.state.format}>
105 | 					<option value=""></option>
106 | 					<option value="color">color</option>
107 | 					<option value="date">date</option>
108 | 					<option value="datetime">datetime</option>
109 | 					<option value="datetime-local">datetime-local</option>
110 | 					<option value="email">email</option>
111 | 					<option value="month">month</option>
112 | 					<option value="number">number</option>
113 | 					<option value="range">range</option>
114 | 					<option value="tel">tel</option>
115 | 					<option value="text">text</option>
116 | 					<option value="textarea">textarea</option>
117 | 					<option value="time">time</option>
118 | 					<option value="url">url</option>
119 | 					<option value="week">week</option>
120 | 				</select>
121 | 				Enum: <input name="hasEnum" type="checkbox" checked={this.state.hasEnum} onChange={this.changeBool}  />
122 | 				{settings}
123 | 			</div>
124 | 		);
125 | 	}
126 | });
127 | 
128 | var SchemaAny = React.createClass({
129 | 	getInitialState: function() {
130 | 		return this.props.data;
131 | 	},
132 | 	export: function() {
133 | 		return {
134 | 			type: ["string", "number", "object", "array", "boolean", "null"],
135 | 			default: this.state.default,
136 | 			description: this.state.description
137 | 		}
138 | 	},
139 | 	componentWillReceiveProps: function(newProps) {
140 | 		if (typeof newProps.data.description !== 'undefined') {
141 | 			this.state.description = newProps.data.description;
142 | 		}
143 | 		this.setState(this.state);
144 | 	},
145 | 	render() {
146 | 		return (
147 | 			<div></div>
148 | 		);
149 | 	}
150 | })
151 | 
152 | var SchemaBoolean = React.createClass({
153 | 	getInitialState: function() {
154 | 		return this.props.data;
155 | 	},
156 | 	export: function() {
157 | 		return {
158 | 			type: 'boolean',
159 | 			format: 'checkbox',
160 | 			default: this.state.default,
161 | 			description: this.state.description
162 | 		}
163 | 	},
164 | 	componentWillReceiveProps: function(newProps) {
165 | 		if (typeof newProps.data.description !== 'undefined') {
166 | 			this.state.description = newProps.data.description;
167 | 		}
168 | 		this.setState(this.state);
169 | 	},
170 | 	render() {
171 | 		return (
172 | 			<div></div>
173 | 		);
174 | 	}
175 | })
176 | 
177 | var SchemaNumber = React.createClass({
178 | 	getInitialState: function() {
179 | 		return this.props.data;
180 | 	},
181 | 	componentDidUpdate: function() {
182 | 		this.props.onChange();
183 | 	},
184 | 	change: function(event) {
185 | 		this.state[event.target.name] = parseInt(event.target.value);
186 | 		this.setState(this.state);
187 | 	},
188 | 	componentWillReceiveProps: function(newProps) {
189 | 		if (typeof newProps.data.description !== 'undefined') {
190 | 			this.state.description = newProps.data.description;
191 | 		}
192 | 		this.setState(this.state);
193 | 	},
194 | 	export: function() {
195 | 		var o = JSON.parse(JSON.stringify(this.state));
196 | 		o.type = 'number';
197 | 		delete o.name;
198 | 		return o;
199 | 	},
200 | 	render: function() {
201 | 		return (
202 | 			<div>
203 | 				Min: <input name="minimum" style={shortNumberStyle} type="number" value={this.state.minimum} onChange={this.change} />
204 | 				Max: <input name="maximum" style={shortNumberStyle} type="number" value={this.state.maximum} onChange={this.change} />
205 | 			</div>
206 | 		);
207 | 	}
208 | });
209 | 
210 | function mapType(type) {
211 | 	return Array.isArray(type) ? 'any' : type;
212 | }
213 | 
214 | var mapping = function(name, data, changeHandler) {
215 | 	return {
216 | 		any: <SchemaAny onChange={changeHandler} ref={name} data={data}/>,
217 | 		string: <SchemaString onChange={changeHandler} ref={name} data={data} />,
218 | 		number: <SchemaNumber onChange={changeHandler} ref={name} data={data} />,
219 | 		array: <SchemaArray onChange={changeHandler} ref={name} data={data}/>,
220 | 		object: <SchemaObject onChange={changeHandler} ref={name} data={data}/>,
221 | 		boolean: <SchemaBoolean onChange={changeHandler} ref={name} data={data}/>,
222 | 	}[mapType(data.type)];
223 | };
224 | 
225 | var SchemaArray = React.createClass({
226 | 	getInitialState: function() {
227 | 		return this.props.data;
228 | 	},
229 | 	change: function(event) {
230 | 		if (event.target.type == 'checkbox') {
231 | 			this.state[event.target.name] = event.target.checked;
232 | 		}
233 | 		else if (event.target.name == 'itemtype') {
234 | 			this.state.items.type = event.target.value;
235 | 		}
236 | 		else {
237 | 			this.state[event.target.name] = event.target.value;
238 | 		}
239 | 		this.setState(this.state);
240 | 	},
241 | 	export: function() {
242 | 		//console.log(this.refs.items.state)
243 | 		return {
244 | 			items: this.refs['items'].export(),
245 | 			minItems: this.state.minItems,
246 | 			maxItems: this.state.maxItems,
247 | 			uniqueItems: (this.state.uniqueItems ? true : undefined),
248 | 			format: this.state.format,
249 | 			default: this.state.default,
250 | 			description: this.state.description,
251 | 			type: 'array'
252 | 		};
253 | 	},
254 | 	componentDidUpdate: function() {
255 | 		this.onChange();
256 | 	},
257 | 	componentWillReceiveProps: function(newProps) {
258 | 		if (typeof newProps.data.description !== 'undefined') {
259 | 			this.state.description = newProps.data.description;
260 | 		}
261 | 		this.setState(this.state);
262 | 	},
263 | 	onChange: function() {
264 | 		this.props.onChange();
265 | 	},
266 |  	render: function() {
267 | 		var self = this;
268 | 		var optionFormStyle = {
269 | 			paddingLeft: '25px',
270 | 			paddingTop: '4px',
271 | 		};
272 | 		this.state.items = this.state.items || {type: 'string'};
273 | 		var optionForm = mapping('items', this.state.items, this.onChange);
274 | 		return (
275 | 			<div>
276 | 				Items Type:
277 | 				<select name="itemtype" onChange={this.change} value={mapType(this.state.items.type)}>
278 | 						<option value="string">string</option>
279 | 						<option value="number">number</option>
280 | 						<option value="array">array</option>
281 | 						<option value="object">object</option>
282 | 						<option value="boolean">boolean</option>
283 | 						<option value="any">any</option>
284 | 					</select>
285 | 				minItems:  <input name="minItems" style={shortNumberStyle} type="number" onChange={self.change} value={self.state.minItems}  />
286 | 				maxItems:  <input name="maxItems" style={shortNumberStyle} type="number" onChange={self.change} value={self.state.maxItems}  />
287 | 				uniqueItems:  <input name="uniqueItems" type="checkbox" onChange={self.change} checked={self.state.uniqueItems}  />
288 | 				Format: 
289 | 				<select name="format" onChange={this.change} value={this.state.format}>
290 | 					<option value=""></option>
291 | 					<option value="table">table</option>
292 | 					<option value="checkbox">checkbox</option>
293 | 					<option value="select">select</option>
294 | 					<option value="tabs">tabs</option>
295 | 				</select>
296 | 				<div style={optionFormStyle}>
297 | 					{optionForm}
298 | 				</div>
299 | 			</div>
300 | 		);
301 | 	}
302 | });
303 | 
304 | var SchemaObject = React.createClass({
305 | 	getInitialState: function() {
306 | 		return this.propsToState(this.props)
307 | 	},
308 | 	propsToState: function(props) {
309 | 		var data = props.data;
310 | 		data.properties = data.properties || {}
311 | 		data.required = data.required || [];
312 | 		data.additionalProperties = data.additionalProperties || false;
313 | 		data.propertyNames = [];
314 | 		// convert from object to array
315 | 		data.properties = Object.keys(data.properties).map(function(name) {
316 | 			data.propertyNames.push(name);
317 | 			var item = data.properties[name];
318 | 			return item;
319 | 		})
320 | 		return data
321 | 	},
322 | 	componentWillReceiveProps: function(newProps) {
323 | 		if (!this.state || this.state.properties.length === 0) {
324 | 			this.setState(this.propsToState(newProps))
325 | 		}
326 | 		if (typeof newProps.data.description !== 'undefined') {
327 | 			this.state.description = newProps.data.description;
328 | 			this.setState(this.state);
329 | 		}
330 | 	},
331 | 	deleteItem: function(event) {
332 | 		var i = event.target.parentElement.dataset.index;
333 | 		var requiredIndex = this.state.required.indexOf(this.state.propertyNames[i])
334 | 		if (requiredIndex !== -1) {
335 | 			this.state.required.splice(requiredIndex, 1)
336 | 		}
337 | 		this.state.properties.splice(i, 1);
338 | 		this.state.propertyNames.splice(i, 1);
339 | 		this.setState(this.state);
340 | 	},
341 | 	changeItem: function(event) {
342 | 		var i = event.target.parentElement.dataset.index;
343 | 		if (event.target.name == 'type') {
344 | 			this.state.properties[i].type = event.target.value;
345 | 		} else if (event.target.name == 'field') {
346 | 			this.state.propertyNames[i] = event.target.value;
347 | 		} else if (event.target.name == 'description') {
348 | 			this.state.properties[i].description = event.target.value;
349 | 		}
350 | 		this.setState(this.state);
351 | 	},
352 | 	changeRequired: function(event) {
353 | 		if (event.target.checked)
354 | 			this.state.required.push(event.target.name);
355 | 		else {
356 | 			var i = this.state.required.indexOf(event.target.name)
357 | 			this.state.required.splice(i, 1);
358 | 		}
359 | 		this.setState(this.state);
360 | 	},
361 | 	change: function(event) {
362 | 		this.state[event.target.name] = event.target.checked;
363 | 		this.setState(this.state);
364 | 	},
365 | 	changeText: function(event) {
366 | 		this.state[event.target.name] = event.target.value;
367 | 		this.setState(this.state);
368 | 	},
369 | 	onChange: function() {
370 | 		this.props.onChange()
371 | 		this.trigger('change');
372 | 	},
373 | 	componentDidUpdate: function() {
374 | 		this.onChange();
375 | 	},
376 | 	add: function() {
377 | 		this.state.properties.push({name: '', type: 'string'});
378 | 		this.setState(this.state);
379 | 	},
380 | 	export: function() {
381 | 		var self = this;
382 | 		var properties = {};
383 | 		Object.keys(self.state.properties).forEach(function(index) {
384 | 			//var name = self.state.properties[index].name;
385 | 			var name = self.state.propertyNames[index];
386 | 			if (typeof self.refs['item'+index] != 'undefined' && name && name.length > 0)
387 | 				properties[name] = self.refs['item'+index].export();
388 | 		});
389 | 		return {
390 | 			type: 'object',
391 | 			default: this.state.default,
392 | 			description: this.state.description,
393 | 			additionalProperties: this.state.additionalProperties,
394 | 			format: this.state.format,
395 | 			properties: properties,
396 | 			required: this.state.required.length ? this.state.required : undefined
397 | 		};
398 | 	},
399 | 	on: function(event, callback) {
400 | 		this.callbacks = this.callbacks || {};
401 | 		this.callbacks[event] = this.callbacks[event] || [];
402 | 		this.callbacks[event].push(callback);
403 | 
404 | 		return this;
405 | 	},
406 | 	trigger: function(event) {
407 | 		if (this.callbacks && this.callbacks[event] && this.callbacks[event].length) {
408 | 			for (var i=0; i<this.callbacks[event].length; i++) {
409 | 				this.callbacks[event][i]();
410 | 			}
411 | 		}
412 | 
413 | 		return this;
414 | 	},
415 | 	render: function() {
416 | 		var self = this;
417 | 
418 | 		var optionFormStyle = {
419 | 			paddingLeft: '25px',
420 | 			paddingTop: '4px',
421 | 		};
422 | 		var requiredIcon = {
423 | 			fontSize: '1em',
424 | 			color: 'red',
425 | 			fontWeight: 'bold',
426 | 			paddingLeft: '5px'
427 | 		};
428 | 		var fieldStyle = {
429 | 			paddingBottom: '10px',
430 | 		}
431 | 		var objectStyle = {
432 | 			borderLeft: '2px dotted gray',
433 | 			paddingLeft: '8px',
434 | 			paddingTop: '10px',
435 | 		}
436 | 		var typeSelectStyle = {
437 | 			marginLeft: '5px'
438 | 		}
439 | 		var descriptionStyle = {
440 | 			marginLeft: '6px',
441 | 			width: '350px'
442 | 		}
443 | 		var deletePropStyle = {
444 | 			border: '1px solid black',
445 | 			padding: '0px 4px 0px 4px',
446 | 			pointer: 'cursor',
447 | 		}
448 | 		return (
449 | 		<div style={objectStyle}>
450 | 
451 | 			{this.state.properties.map(function(value, index) {
452 | 			var name = self.state.propertyNames[index]
453 | 			var copiedState = JSON.parse(JSON.stringify(self.state.properties[index]));
454 |  			var optionForm = mapping('item' + index, copiedState, self.onChange);
455 | 			return <div data-index={index} style={fieldStyle} key={index}>
456 | 				<input name="field" type="string" onChange={self.changeItem} value={name} />
457 | 				<select style={typeSelectStyle} name="type" onChange={self.changeItem} value={mapType(value.type)}>
458 | 					<option value="string">string</option>
459 | 					<option value="number">number</option>
460 | 					<option value="array">array</option>
461 | 					<option value="object">object</option>
462 | 					<option value="boolean">boolean</option>
463 | 					<option value="any">any</option>
464 | 				</select>
465 | 				<input style={descriptionStyle} placeholder="description" name="description" type="text" value={value.description} onChange={self.changeItem} />
466 | 				<span style={requiredIcon}>*</span><input name={name} type="checkbox" onChange={self.changeRequired} checked={self.state.required.indexOf(name) != -1} />
467 | 				<span onClick={self.deleteItem} style={deletePropStyle}>x</span>
468 | 				<div style={optionFormStyle}>
469 | 					{optionForm}
470 | 				</div>
471 | 			</div>
472 | 			})}
473 | 			<div>
474 | 			Allow additional properties: <input name="additionalProperties" type="checkbox" onChange={self.change} checked={self.state.additionalProperties} />
475 | 			Format: 
476 | 				<select name="format" onChange={this.changeText} value={this.state.format}>
477 | 					<option value=""></option>
478 | 					<option value="grid">grid</option>
479 | 					<option value="schema">schema</option>
480 | 				</select>
481 | 			</div>
482 | 
483 | 			<button onClick={self.add}>Add another field</button>
484 | 		</div>
485 | 	);
486 |   }
487 | });
488 | 
489 | if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
490 | 	module.exports = window.JSONSchemaEditor;
491 |

--------------------------------------------------------------------------------
/src/json-editor-plugin.js:
--------------------------------------------------------------------------------
 1 | //json-editor-plugin.js
 2 | 
 3 | if (JSONEditor) {
 4 |   JSONEditor.defaults.resolvers.unshift(function(schema) {
 5 |     if (schema.type === "object" && schema.format === "schema") {
 6 |       return "schema";
 7 |     }
 8 | 
 9 |     // If no valid editor is returned, the next resolver function will be used
10 |   });
11 | 
12 |   JSONEditor.defaults.editors.schema = JSONEditor.AbstractEditor.extend({
13 |     setValue: function(value,initial) {
14 |       this.value = value;
15 |     	this.schemaeditor.setValue(value)
16 |       this.onChange();
17 |     },
18 |     getValue: function() {
19 |     	if (typeof this.schemaeditor != 'undefined')
20 |     		return this.schemaeditor.getValue();
21 |      	else
22 |      		return {}
23 |     },
24 |     register: function() {
25 |       this._super();
26 |       if(!this.input) return;
27 |       this.input.setAttribute('name', this.formname);
28 |     },
29 |     unregister: function() {
30 |       this._super();
31 |       if(!this.input) return;
32 |       this.input.removeAttribute('name');
33 |     },
34 |     getNumColumns: function() {
35 |       return 12;
36 |     },
37 |     build: function() {
38 |       var self = this;
39 |       if(!this.options.compact) {
40 |         this.label = this.header = this.theme.getFormInputLabel(this.getTitle());
41 |       }
42 |       if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
43 |       if(this.options.compact) this.container.className += ' compact';
44 | 
45 |       this.input = document.createElement('div')
46 |       this.control = this.theme.getFormControl(this.label, this.input, this.description);
47 | 
48 |       if(this.schema.readOnly || this.schema.readonly) {
49 |         this.always_disabled = true;
50 |         this.input.disabled = true;
51 |       }
52 | 
53 |       this.container.appendChild(this.control);
54 | 
55 |       this.schemaeditor = new JSONSchemaEditor(this.input, {
56 |       	startval: {}
57 |       });
58 |       this.schemaeditor.on('change', function() {
59 |       	self.onChange(true);
60 |       });
61 |     },
62 |     enable: function() {
63 |       if(!this.always_disabled) {
64 |         this.input.disabled = false;
65 |       }
66 |       this._super();
67 |     },
68 |     disable: function() {
69 |       this.input.disabled = true;
70 |       this._super();
71 |     },
72 |     destroy: function() {
73 |       if(this.label && this.label.parentNode) this.label.parentNode.removeChild(this.label);
74 |       if(this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description);
75 |       if(this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input);
76 |       this._super();
77 |     }
78 |   });
79 | }

--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     entry: './src/index.jsx',
 3 |     output: {
 4 |         path: 'dist',
 5 |         filename: 'jsonschemaeditor.js',
 6 |     },
 7 |     module: {
 8 |         loaders: [{
 9 |             test: /\.jsx?$/,
10 |             exclude: /node_modules/,
11 |             loader: "babel",
12 |             query: {
13 |                 presets: ['es2015', 'react']
14 |             }
15 |         }, ],
16 |     }
17 | };

--------------------------------------------------------------------------------