Some styling improvements for errors

src/components/TextMode.js

@@ -6,6 +6,12 @@ import { enrichSchemaError, limitErrors } from '../utils/schemaUtils'
 import { jsonToData, dataToJson, patchData } from '../jsonData'
 import ModeButton from './menu/ModeButton'
 
+const AJV_OPTIONS = {
+  allErrors: true,
+  verbose: true,
+  jsonPointers: true
+}
+
 /**
  * TextMode
  *
@@ -59,6 +65,7 @@ export default class TextMode extends Component {
 
   /** @protected */
   renderMenu () {
+    // TODO: move Menu into a separate Component
     return h('div', {class: 'jsoneditor-menu'}, [
       h('button', {
         class: 'jsoneditor-format',
@@ -86,7 +93,7 @@ export default class TextMode extends Component {
 
   /** @protected */
   renderSchemaErrors () {
-    // TODO: move the JSON Schema stuff into a separate Component?
+    // TODO: move the JSON Schema stuff into a separate Component
 
     try {
       // TODO: only validate again when json is changed since last validation
@@ -99,9 +106,13 @@ export default class TextMode extends Component {
         const allErrors = this.state.compiledSchema.errors.map(enrichSchemaError)
         const limitedErrors = limitErrors(allErrors)
 
-        return h('table', {class: 'jsoneditor-text-errors'},
+        console.log('errors', allErrors)
+
+        return h('div', { class: 'jsoneditor-errors'},
+          h('table', {},
             h('tbody', {}, limitedErrors.map(TextMode.renderSchemaError))
           )
+        )
       }
       else {
         return null
@@ -126,7 +137,7 @@ export default class TextMode extends Component {
   static renderSchemaError (error) {
     const icon = h('input', {type: 'button', class: 'jsoneditor-schema-error'})
 
-    if (error && error.data && error.schema) {
+    if (error && error.schema && error.schemaPath) {
       // this is an ajv error message
       return h('tr', {}, [
         h('td', {}, icon),
@@ -136,6 +147,7 @@ export default class TextMode extends Component {
     }
     else {
       // any other error message
+      console.log('error???', error)
       return h('tr', {},
         h('td', {}, icon),
         h('td', {colSpan: 2}, h('code', {}, String(error)))
@@ -150,8 +162,7 @@ export default class TextMode extends Component {
    */
   setSchema (schema) {
     if (schema) {
-      const ajv = this.props.options.ajv ||
-          Ajv && Ajv({ allErrors: true, verbose: true })
+      const ajv = this.props.options.ajv || Ajv && Ajv(AJV_OPTIONS)
 
       if (!ajv) {
         throw new Error('Cannot validate JSON: ajv not available. ' +

src/jsoneditor.less

@@ -576,24 +576,27 @@ div.jsoneditor-code {
 
 /* JSON schema errors displayed at the bottom of the editor in mode text and code */
 
-.jsoneditor-text-errors {
+.jsoneditor-errors {
   width: 100%;
-  border-collapse: collapse;
   background-color: #ffef8b;
   border-top: 1px solid #ffd700;
 
+  table {
+    border-collapse: collapse;
+
     font-family: @fontFamily;
     font-size: @fontSize;
 
     td {
       padding: 3px 6px;
       vertical-align: middle;
-  }
 
       code {
         display: block;
         white-space: pre-wrap;
       }
+    }
+  }
 
   .jsoneditor-schema-error {
     user-select: none;