Mustache / JsonEditor not rendering HTML in template

Expected behavior

When specifying Mustache as the template engine, it is possible to specify a template or headerTemplate with HTML that Mustache will render if the variable is specified with triple curly brackets. Mustache should return the HTML string as a non-escaped HTML string that can then be injected into the page and rendered properly as HTML, with the appropriate CSS applied to it.

Actual behavior

Mustache seems to be doing its part in returning the correct HTML string <i class='glyphicon glyphicon-transfer'></i>, but the JSONEditor is rendering it as an actual literal string <i class='glyphicon glyphicon-transfer'></i> rather than rendering it as an icon with the proper CSS applied. Inspecting Element, I can see the that HTML is injected as a String, not as HTML.

Steps to reproduce the behavior

1. Define JSONEditor and specify a template engine to use for it.
2. Define a template view to be used by Mustache when it renders variables.
3. Specify a schema that specifies a triple-curly brace Mustache variable in the headerTemplate property.

// define a template view to give to the template engine so that mustache will render {{{icon_html}}} as the HTML defined here
var _TEMPLATE_VIEW = {
    "icon_html": "<i class='glyphicon glyphicon-transfer'></i>"
  };

// define a template engine which uses Mustache to render the template as defined above
var _TEMPLATE_ENGINE = {
    compile: function(template) {
      // Compile should return a render function
      return function(vars) {
        // hook into the mustache rendering engine
        Object.assign(_TEMPLATE_VIEW, vars);
        return Mustache.render(template, _TEMPLATE_VIEW);
      }
    }
  };

// Specifies options for the JSONEditor
  var _EDITOR_OPTIONS = {
    theme: 'bootstrap3',
    iconlib: 'bootstrap3',
    template: _TEMPLATE_ENGINE,
    display_required_only: true,
    ajax: true,
    keep_oneof_values: false,
    show_errors: "always",
    schema: {
      $ref: CONFIG.getEditorSchema()
    }
  };

var _EDITOR = new JSONEditor($editor[0], _EDITOR_OPTIONS); 

// schema
{  
  "title": "Output",
  "type": "object",
  "$schema": "http://json-schema.org/draft-04/schema#",
  "headerTemplate": "{{#self.destination.overwrite}}{{{icon_html}}} {{/self.destination.overwrite}} {{self.destination.id}}.{{self.destination.field}}",
  "required": ["destination"],
  "properties": {
    "source": {
      "type": "string",
      "format": "text",
      "propertyOrder": 1
    },
    "values": {
      "type": "array",
      "propertyOrder": 10,
      "items": {
        "oneOf": [
          {"type": "boolean"},
          {"type": "string"},
          {"type": "null"},
          {"type": "number"}
        ]
      }
    },
    "destination": {
      "propertyOrder": 20,
      "$ref": "./destination.json"
    }
  }
}

[pmk65]

With current release you can now use HTML tags in header/title and description if DOMPurify library is loaded.

[theBull]

Hey guys - sorry my activity on this (and other) issues has been limited. @taschmidt I did not get it working and just put some plain text in instead. Overriding the method sounds like a perfectly reasonable approach, I personally wouldn’t be too worried about it…just be careful when pulling in the latest version of json editor at a minimum.