Add JSON editing

Author: valpackett

src/micro-panel-editor-entry.js

@@ -1,13 +1,24 @@
 import 'codeflask-element'
 import 'prismjs/components/prism-markdown.min.js'
+import 'prismjs/components/prism-json.min.js'
 import { LitElement, html } from '@polymer/lit-element'
 import { sharedStyles, icons, iconCode } from './util.js'
 import produce from 'immer'
 
 export default class MicroPanelEditorEntry extends LitElement {
-	static get properties () { return { entry: Object, setEntry: Function } }
+	static get properties () {
+		return {
+			entry: Object, setEntry: Function, openJsonEditors: Object, jsonParseError: Object
+		}
+	}
+
+	constructor () {
+		super()
+		this.openJsonEditors = {}
+		this.jsonParseError = {}
+	}
 
-	_render ({ entry }) {
+	_render ({ entry, openJsonEditors, jsonParseError }) {
 		return html`
 			${sharedStyles}
 			<style>
@@ -33,7 +44,7 @@ export default class MicroPanelEditorEntry extends LitElement {
 				.input-row + .input-row {
 					padding-top: 0;
 				}
-				.input-row input, .input-row textarea, .input-row code-flask {
+				.input-row input, .input-row textarea, .input-row code-flask, .input-row .error-value {
 					flex: 1;
 				}
 				.input-row button {
@@ -46,6 +57,14 @@ export default class MicroPanelEditorEntry extends LitElement {
 					resize: vertical;
 					min-height: 200px;
 				}
+				.error-value {
+					color: #bb1111;
+				}
+				.json-error {
+					background: #bb1111;
+					color: #fff;
+					padding: 0.5rem;
+				}
 
 				@media screen and (min-width: 700px) {
 					fieldset { width: 70%; }
@@ -59,18 +78,23 @@ export default class MicroPanelEditorEntry extends LitElement {
 						<button on-click=${_ =>
 							this._modify(entry, draft => delete draft.properties[propname])
 						} title="Delete this property" class="icon-button">${iconCode(icons.minus)}</button>
+						<button on-click=${_ => {
+							this.openJsonEditors = produce(openJsonEditors, x => { x[propname] = !(x[propname] || false) })
+							this.jsonParseError = produce(jsonParseError, pes => { pes[propname] = null })
+						}} title="Edit this property as JSON" class="icon-button">${iconCode(icons.json)}</button>
 						<button on-click=${_ =>
 							this._modify(entry, draft => draft.properties[propname].push(''))
 						} title="Add new value to this property" class="icon-button">${iconCode(icons.plus)}</button>
 					</header>
-					${entry.properties[propname] && entry.properties[propname].map((propval, idx) => html`
+					${openJsonEditors[propname] ? this._jsonEditor(entry, propname, jsonParseError)
+						: (entry.properties[propname] && entry.properties[propname].map((propval, idx) => html`
 						<div class="input-row">
 							${this._rowEditor(entry, propname, propval, idx)}
 							<button on-click=${_ =>
 								this._modify(entry, draft => draft.properties[propname].splice(idx, 1))
 							} title="Delete this value" class="icon-button">${iconCode(icons.minus)}</button>
 						</div>
-					`)}
+					`))}
 				</fieldset>
 			`)}
 
@@ -89,8 +113,11 @@ export default class MicroPanelEditorEntry extends LitElement {
 				}/>
 			`
 		}
+		if (propval === null) {
+			return html`<div class="error-value">null</div>`
+		}
 		if (typeof propval !== 'object') {
-			return `Unsupported object type ${typeof propval}`
+			return html`<div class="error-value">Item of unsupported type ${typeof propval}</div>`
 		}
 		if ('html' in propval) {
 			return html`
@@ -104,9 +131,30 @@ export default class MicroPanelEditorEntry extends LitElement {
 					this._modify(entry, draft => draft.properties[propname][idx].markdown = e.target.value)
 				}></code-flask>
 			`
+		} else {
+			return html`<div class="error-value">Unsupported object with keys: ${Object.keys(propval)}</div>`
 		}
 	}
 
+	_jsonEditor (entry, propname, jsonParseError) {
+		return html`
+			<code-flask language="json" value=${JSON.stringify(entry.properties[propname], null, 2)} on-value-changed=${e =>
+				this._modify(entry, draft => {
+					try {
+						draft.properties[propname] = JSON.parse(e.target.value)
+						this.jsonParseError = produce(jsonParseError, pes => { pes[propname] = null })
+					} catch (e) {
+						this.jsonParseError = produce(jsonParseError, pes => { pes[propname] = e.toString() })
+					}
+				})
+			}></code-flask>
+			${jsonParseError[propname] ? html`<div class="json-error">
+				<p><strong>JSON parsing error!</strong> The changes are not saved when this error is present. Please fix the syntax in the editor above. The error is:</p>
+				<p><code>${jsonParseError[propname]}</code></p>
+			</div>` : ''}
+		`
+	}
+
 	addNewProp (e, entry) {
 		if ('key' in e && e.key !== 'Enter') {
 			return

src/util.js

@@ -118,6 +118,10 @@ export const icons = {
 	close: svg`
 		<path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
 	`,
+	/* by Austin Andrews @Templarian | OFL licensed: */
+	json: svg`
+		<path fill="currentColor" d="M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z" />
+	`,
 }
 
 export function iconCode (icon, title = null) {