Show examples from schema in field tooltip

src/js/Node.js

@@ -1845,7 +1845,7 @@ Node.prototype._deleteDomColor = function () {
 Node.prototype._updateDomField = function () {
   var domField = this.dom.field;
   if (domField) {
-    var tooltip = util.makeFieldTooltip(this.schema);
+    var tooltip = util.makeFieldTooltip(this.schema, this.editor.options.language);
     if (tooltip) {
       domField.title = tooltip;
     }

src/js/i18n.js

@@ -83,6 +83,7 @@ var _defs = {
     modeTreeTitle: 'Switch to tree editor',
     modeViewText: 'View',
     modeViewTitle: 'Switch to tree view',
+    examples: 'Examples',
   },
   'zh-CN': {
     array: '数组',
@@ -165,6 +166,7 @@ var _defs = {
     modeTreeTitle: '切换至树编辑',
     modeViewText: '视图',
     modeViewTitle: '切换至树视图',
+    examples: '例子',
   },
   'pt-BR': {
     array: 'Lista',
@@ -258,7 +260,8 @@ var _defs = {
       'Uma lista contem uma coleção de valores ordenados.',
     stringType: 'Campo do tipo "string". ' +
       'Campo do tipo nao é determinado através do seu valor, ' +
-      'mas sempre retornara um texto.'
+      'mas sempre retornara um texto.',
+    examples: 'Exemplos',
   },
   tr: {
     array: 'Dizin',
@@ -340,7 +343,8 @@ var _defs = {
     modeTreeText: 'Ağaç',
     modeTreeTitle: 'Ağaç düzenleyiciye geç',
     modeViewText: 'Görünüm',
-    modeViewTitle: 'Ağaç görünümüne geç'
+    modeViewTitle: 'Ağaç görünümüne geç',
+    examples: 'Örnekler',
   }
 };
 

src/js/util.js

@@ -2,6 +2,7 @@
 
 var jsonlint = require('./assets/jsonlint/jsonlint');
 var jsonMap = require('json-source-map');
+var translate = require('./i18n').translate;
 
 /**
  * Parse JSON using the parser built-in in the browser.
@@ -1109,10 +1110,11 @@ if (!Array.prototype.find) {
 
 /**
  * Make a tooltip for a field based on the field's schema.
- * @param {Object} schema JSON schema
+ * @param {object} schema JSON schema
+ * @param {string} [locale] Locale code (for example, zh-CN)
  * @returns {string} Field tooltip, may be empty string if all relevant schema properties are missing
  */
-exports.makeFieldTooltip = function (schema) {
+exports.makeFieldTooltip = function (schema, locale) {
   if (!schema) {
     return '';
   }
@@ -1129,5 +1131,15 @@ exports.makeFieldTooltip = function (schema) {
     tooltip += schema.description;
   }
 
+  if (Array.isArray(schema.examples) && schema.examples.length > 0) {
+    if (tooltip.length > 0) {
+      tooltip += '\n\n';
+    }
+    tooltip += translate('examples', undefined, locale) + '\n';
+    schema.examples.forEach(function (example) {
+      tooltip += JSON.stringify(example, null, 2) + '\n';
+    });
+  }
+
   return tooltip;
 }

test/util.test.js

@@ -1,9 +1,6 @@
 var assert = require('assert');
 var util = require('../src/js/util');
 
-// console.log('TEST', util.parsePath('.items[3].name'));
-// console.log('TEST', util.parsePath('.items[*].name'));
-
 describe('util', function () {
 
   describe('sanitize', function () {
@@ -163,6 +160,10 @@ describe('util', function () {
       assert.strictEqual(util.makeFieldTooltip({description: 'foo'}), 'foo');
     });
 
+    it('should make tooltips with only examples', function () {
+      assert.strictEqual(util.makeFieldTooltip({examples: ['foo', 'bar']}), 'Examples\n"foo"\n"bar"\n');
+    });
+
     it('should make tooltips with title and description', function () {
       assert.strictEqual(util.makeFieldTooltip({title: 'foo', description: 'bar'}), 'foo\nbar');
 
@@ -175,6 +176,24 @@ describe('util', function () {
         longTitle + '\n' + longDescription
       );
     });
+
+    it('should make tooltips with title, description, and examples', function () {
+      assert.strictEqual(
+        util.makeFieldTooltip({title: 'foo', description: 'bar', examples: ['baz']}),
+        'foo\nbar\n\nExamples\n"baz"\n',
+      );
+    });
+
+    it('should handle empty fields', function () {
+      assert.strictEqual(util.makeFieldTooltip({title: '', description: 'bar'}), 'bar');
+      assert.strictEqual(util.makeFieldTooltip({title: 'foo', description: ''}), 'foo');
+      assert.strictEqual(util.makeFieldTooltip({description: 'bar', examples: []}), 'bar');
+      assert.strictEqual(util.makeFieldTooltip({description: 'bar', examples: ['']}), 'bar\n\nExamples\n""\n');
+    });
+
+    it('should internationalize "Examples" correctly', function () {
+      assert.strictEqual(util.makeFieldTooltip({examples: ['foo']}, 'pt-BR'), 'Exemplos\n"foo"\n');
+    });
   });
   // TODO: thoroughly test all util methods
 });