sanitize-element.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="sanitize-import.html">

<!--
Element wrapper for the [Sanitize.js](https://github.com/gbirke/Sanitize.js) library (a whitelist-based HTML sanitizer),
to use [`<marked-element>`](https://github.com/polymerelements/marked-element).
-->
<dom-module id="sanitize-element">
  <script>
    class SanitizeElement extends Polymer.Element {
      static get is() {
        return 'sanitize-element'
      }
      static get properties() {
        return {
          /**
           * Custom configuration object. ([parameters](https://github.com/gbirke/Sanitize.js#configuration-object-parameters))
           */
          config: {
            type: Object,
            value: null
          },
          /**
           * Function used for `<marked-element>`
           *
           * without `config`, sanitize all elements and attributes.
           */
          sanitizer: {
            type: Function,
            readOnly: true,
            notify: true,
            computed: "_sanitizer(config)"
          }
        }
      }
      /**
       * Return function of sanitizer for marked-element.
       */
      _sanitizer(config) {
        const sa = new Sanitize(config)
        return i=>{
          const isEnd = i.match(/^<\//),
                start = isEnd ? i.replace(/^<\//,'<') : i,
                temp = document.createElement('div')
          temp.innerHTML = start
          const clean = sa.clean_node(temp)
          return clean.firstElementChild ?
                 isEnd ? i : clean.firstElementChild.outerHTML.replace(/<\/[^>]+>$/,'')
                 : ''
        }
      }
    }
    customElements.define(SanitizeElement.is, SanitizeElement)
  </script>
</dom-module>