Implemented mode form

src/JSONNodeForm.js

@@ -2,21 +2,25 @@ import { h } from 'preact'
 
 import { escapeHTML } from './utils/stringUtils'
 import JSONNode from './JSONNode'
-import { valueType, isUrl } from  './utils/typeUtils'
 
-export default class JSONNodeViewer extends JSONNode {
-  constructor (props) {
-    super(props)
-  }
+/**
+ * JSONNodeForm
+ *
+ * Creates JSONNodes without action menus and with readonly properties
+ */
+export default class JSONNodeForm extends JSONNode {
 
+  // render no action menu...
   renderActionMenuButton () {
     return null
   }
 
+  // render no append menu...
   renderAppendMenuButton () {
     return null
   }
 
+  // render a readonly property
   renderProperty (prop, data, options) {
     if (prop !== null) {
       const isIndex = typeof prop === 'number' // FIXME: pass an explicit prop isIndex
@@ -43,35 +47,4 @@ export default class JSONNodeViewer extends JSONNode {
       }, content)
     }
   }
-
-  renderValue (value) {
-    const escapedValue = escapeHTML(value)
-    const type = valueType (value)
-    const isEmpty = escapedValue.length === 0
-    const itsAnUrl = isUrl(value)
-    const className = JSONNode.getValueClass(type, itsAnUrl, isEmpty)
-
-    if (itsAnUrl) {
-      return h('a', {
-        class: className,
-        href: escapedValue
-      }, escapedValue)
-    }
-    else {
-
-      return h('div', {
-        class: className,
-        contentEditable: 'false',
-        spellCheck: 'false',
-        onClick: this.handleClickValue
-      }, escapedValue)
-    }
-
-  }
-
-  handleClickValue = (event) => {
-    if (event.button === 0) { // Left click
-      this.openLinkIfUrl(event)
-    }
-  }
 }

src/JSONNodeView.js

@@ -0,0 +1,42 @@
+import { h } from 'preact'
+
+import { escapeHTML } from './utils/stringUtils'
+import JSONNode from './JSONNode'
+import JSONNodeForm from './JSONNodeForm'
+import { valueType, isUrl } from  './utils/typeUtils'
+
+/**
+ * JSONNodeView
+ *
+ * Creates JSONNodes without action menus and with readonly properties and values
+ */
+export default class JSONNodeView extends JSONNodeForm {
+
+  // render a readonly value
+  renderValue (value) {
+    const escapedValue = escapeHTML(value)
+    const type = valueType (value)
+    const isEmpty = escapedValue.length === 0
+    const itsAnUrl = isUrl(value)
+    const className = JSONNode.getValueClass(type, itsAnUrl, isEmpty)
+
+    if (itsAnUrl) {
+      return h('a', {
+        class: className,
+        href: escapedValue
+      }, escapedValue)
+    }
+    else {
+      return h('div', {
+        class: className,
+        onClick: this.handleClickValue
+      }, escapedValue)
+    }
+  }
+
+  handleClickValue = (event) => {
+    if (event.button === 0) { // Left click
+      this.openLinkIfUrl(event)
+    }
+  }
+}

src/TreeMode.js

@@ -6,7 +6,8 @@ import {
   duplicate, insert, append, remove, changeType, changeValue, changeProperty, sort
 } from './actions'
 import JSONNode from './JSONNode'
-import JSONNodeViewer from './JSONNodeViewer'
+import JSONNodeView from './JSONNodeView'
+import JSONNodeForm from './JSONNodeForm'
 import ModeButton from './menu/ModeButton'
 import { parseJSON } from './utils/jsonUtils'
 
@@ -47,10 +48,11 @@ export default class TreeMode extends Component {
   }
 
   render (props, state) {
-    console.log('mode', props.mode)
-    const Node = props.mode === 'view'
-        ? JSONNodeViewer
-        : JSONNode
+    const Node = (props.mode === 'view')
+        ? JSONNodeView
+        : (props.mode === 'form')
+            ? JSONNodeForm
+            : JSONNode
 
     return h('div', {
       class: `jsoneditor jsoneditor-mode-${props.mode}`,

src/develop.html

@@ -23,9 +23,10 @@
 
   <label for="mode">mode:
     <select id="mode">
-      <option value="code">code</option>
       <option value="text">text</option>
+      <option value="code">code</option>
       <option value="tree" selected>tree</option>
+      <option value="form">form</option>
       <option value="view">view</option>
     </select>
   </label>
@@ -54,7 +55,7 @@
       alert(err)
     },
     mode: mode,
-    modes: ['text', 'code', 'tree', 'view'],
+    modes: ['text', 'code', 'tree', 'form', 'view'],
     indentation: 4
   }
   const editor = jsoneditor(container, options)

src/index.js

@@ -5,9 +5,9 @@ import TreeMode from './TreeMode'
 
 import '!style!css!less!./jsoneditor.less'
 
-// TODO: allow adding new modes
 const modes = {
   code: CodeMode,
+  form: TreeMode,
   text: TextMode,
   tree: TreeMode,
   view: TreeMode

src/jsoneditor.less

@@ -169,6 +169,12 @@ ul.jsoneditor-list {
   background-color: #f5f5f5;
 }
 
+.jsoneditor-mode-form {
+  .jsoneditor-property:hover {
+    background-color: inherit;
+  }
+}
+
 .jsoneditor-mode-view {
   .jsoneditor-property:hover,
   .jsoneditor-value:hover {

src/typedef.js

@@ -31,7 +31,7 @@
  * }} JSONPatchResult
  *
  * @typedef {{
- *   mode: 'code' | 'text' | 'tree' | 'view',
+ *   mode: 'code' | 'form' | 'text' | 'tree' | 'view',
  *   modes: string[],
  *   indentation: number | string,
  *   onChange: function (patch: JSONPatch, revert: JSONPatch),