Fixed broken modes `form` and `view`

gulpfile.js

@@ -67,7 +67,7 @@ const loaders = [
 const resolve = {
   'alias': {
     'react': 'preact-compat',
-        'react-dom': 'preact-compat'
+    'react-dom': 'preact-compat'
   }
 }
 

src/components/JSONNode.js

@@ -149,7 +149,7 @@ export default class JSONNode extends Component {
     return h('div', {key: 'readonly', className: 'jsoneditor-readonly', title}, text)
   }
 
-  renderProperty (prop: ?PropertyData, index: ?number, data: JSONData, options) {
+  renderProperty (prop: ?PropertyData, index: ?number, data: JSONData, options: {escapeUnicode: boolean, isPropertyEditable: (Path) => boolean}) {
     const isIndex = typeof index === 'number'
 
     if (!prop && !isIndex) {

src/components/JSONNodeForm.js

@@ -1,7 +1,9 @@
-import { createElement as h } from 'react'
+// @flow
-import { escapeHTML } from '../utils/stringUtils'
+
 import JSONNode from './JSONNode'
 
+import type { PropertyData, JSONData } from '../types'
+
 /**
  * JSONNodeForm
  *
@@ -20,33 +22,13 @@ export default class JSONNodeForm extends JSONNode {
   }
 
   // render a readonly property
-  renderProperty (prop, data, options) {
+  renderProperty (prop: ?PropertyData, index: ?number, data: JSONData, options: {escapeUnicode: boolean, isPropertyEditable: (Path) => boolean}) {
-    if (prop !== null) {
+    const formOptions = Object.assign({}, options, { isPropertyEditable })
-      const isIndex = typeof prop === 'number' // FIXME: pass an explicit prop isIndex
 
-      if (isIndex) { // array item
+    return JSONNode.prototype.renderProperty.call(this, prop, index, data, formOptions)
-        return h('div', {
-          key: 'property',
-          className: 'jsoneditor-property jsoneditor-readonly'
-        }, prop)
-      }
-      else { // object property
-        const escapedProp = escapeHTML(prop, options.escapeUnicode)
-
-        return h('div', {
-          key: 'property',
-          className: 'jsoneditor-property' + (prop.length === 0 ? ' jsoneditor-empty' : '')
-        }, escapedProp)
-      }
-    }
-    else {
-      // root node
-      const content = JSONNode.getRootName(data, options)
-
-      return h('div', {
-        key: 'property',
-        className: 'jsoneditor-property jsoneditor-readonly'
-      }, content)
-    }
   }
 }
+
+function isPropertyEditable () {
+  return false
+}

src/components/JSONNodeView.js

@@ -12,26 +12,31 @@ import JSONNodeForm from './JSONNodeForm'
  */
 export default class JSONNodeView extends JSONNodeForm {
 
-  // render a readonly value
+  // render a readonly value but with colors
-  renderValue (value) {
+  renderValue (value, searchResult, options) {
     const escapedValue = escapeHTML(value, options.escapeUnicode)
     const type = valueType (value)
-    const isEmpty = escapedValue.length === 0
     const itsAnUrl = isUrl(value)
-    const className = JSONNode.getValueClass(type, itsAnUrl, isEmpty)
+    const isEmpty = escapedValue.length === 0
 
-    if (itsAnUrl) {
+    const editable = !options.isValueEditable || options.isValueEditable(this.props.path)
-      return h('a', {
+    if (editable) {
+      return h('div', {
         key: 'value',
-        className: className,
+        ref: 'value',
-        href: escapedValue
+        className: JSONNode.getValueClass(type, itsAnUrl, isEmpty) +
+        JSONNode.getSearchResultClass(searchResult),
+        contentEditable: 'false',
+        spellCheck: 'false',
+        onClick: this.handleClickValue,
+        title: itsAnUrl ? JSONNode.URL_TITLE : null
       }, escapedValue)
     }
     else {
       return h('div', {
         key: 'value',
-        className: className,
+        className: 'jsoneditor-readonly',
-        onClick: this.handleClickValue
+        title: itsAnUrl ? JSONNode.URL_TITLE : null
       }, escapedValue)
     }
   }