Display a colored square left from values containing a color

examples/01_basic_usage.html

@@ -31,6 +31,7 @@
     var json = {
       'array': [1, 2, 3],
       'boolean': true,
+      'color': '#82B92C',
       'null': null,
       'number': 123,
       'object': {'a': 'b', 'c': 'd'},

src/css/jsoneditor.css

@@ -199,6 +199,15 @@ div.jsoneditor-tree div.jsoneditor-show-more a:focus {
   color: #ee422e;
 }
 
+div.jsoneditor-tree div.jsoneditor-color {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin: 4px;
+
+  border: 1px solid #808080;
+}
+
 div.jsoneditor {
   color: #1A1A1A;
   border: 1px solid #3883fa;

src/js/Node.js

@@ -1619,7 +1619,6 @@ Node.prototype._updateDomValue = function () {
   if (domValue) {
     var classNames = ['jsoneditor-value'];
 
-
     // set text color depending on value type
     var value = this.value;
     var type = (this.type == 'auto') ? util.type(value) : this.type;
@@ -1680,8 +1679,8 @@ Node.prototype._updateDomValue = function () {
       }
     }
 
+    // create select box when this node has an enum object
     if (this.enum && this.editable.value) {
-      // create select box when this node has an enum object
       if (!this.dom.select) {
         this.dom.select = document.createElement('select');
         this.id = this.field + "_" + new Date().getUTCMilliseconds();
@@ -1737,6 +1736,31 @@ Node.prototype._updateDomValue = function () {
       }
     }
 
+    // show color picker when value is a color
+    if (this.editable.value && typeof value === 'string' && util.isValidColor(value)) {
+      if (!this.dom.color) {
+        this.dom.color = document.createElement('div');
+        this.dom.color.className = 'jsoneditor-color';
+
+        this.dom.tdColor = document.createElement('td');
+        this.dom.tdColor.className = 'jsoneditor-tree';
+        this.dom.tdColor.appendChild(this.dom.color);
+
+        this.dom.tdValue.parentNode.insertBefore(this.dom.tdColor, this.dom.tdValue);
+      }
+
+      // update the color background
+      this.dom.color.style.backgroundColor = value;
+    }
+    else {
+      // cleanup color picker when displayed
+      if (this.dom.color) {
+        this.dom.tdColor.parentNode.removeChild(this.dom.tdColor);
+        delete this.dom.tdColor;
+        delete this.dom.color;
+      }
+    }
+
     // strip formatting from the contents of the editable div
     util.stripFormatting(domValue);
   }

src/js/util.js

@@ -976,6 +976,28 @@ exports.getPositionForPath = function(text, paths) {
   
 }
 
+/**
+ * Get the applied color given a color name or code
+ * Source: https://stackoverflow.com/questions/6386090/validating-css-color-names/33184805
+ * @param {string} color
+ * @returns {string | null} returns the color if the input is a valid
+ *                   color, and returns null otherwise. Example output:
+ *                   'rgba(255,0,0,0.7)' or 'rgb(255,0,0)'
+ */
+exports.getColorCSS = function (color) {
+  var ele = document.createElement('div');
+  ele.style.color = color;
+  return ele.style.color.split(/\s+/).join('').toLowerCase() || null;
+}
+
+/**
+ * Test if a string contains a valid color name or code.
+ * @param {string} color
+ * @returns {boolean} returns true if a valid color, false otherwise
+ */
+exports.isValidColor = function (color) {
+  return !!exports.getColorCSS(color);
+}
 
 if (typeof Element !== 'undefined') {
   // Polyfill for array remove

test/test_build.html

@@ -64,6 +64,7 @@
   json = {
     "array": [1, 2, [3,4,5]],
     "boolean": true,
+    "color": "#82B92C",
     "htmlcode": '"',
     "escaped_unicode": '\\u20b9',
     "unicode": '\u20b9,\uD83D\uDCA9',

test/test_build_min.html

@@ -50,6 +50,7 @@
   json = {
     "array": [1, 2, 3],
     "boolean": true,
+    "color": "#82B92C",
     "null": null,
     "number": 123,
     "object": {"a": "b", "c": "d"},

test/test_minimalist_min.html

@@ -50,6 +50,7 @@
   json = {
     "array": [1, 2, 3],
     "boolean": true,
+    "color": "#82B92C",
     "null": null,
     "number": 123,
     "object": {"a": "b", "c": "d"},