marked-github-element.html

<!--
@license
Copyright (c) 2017 Preview-Code. All rights reserved.
This code may only be used under the BSD style license found in LICENSE.txt
-->
<link rel="import" href="../marked-element/marked-element.html">

<script>
  /*exported SubstituteRenderedGitHubMarkdownBehavior*/

  /**
   * @polymerBehavior
   */
  var SubstituteRenderedGitHubMarkdownBehavior = (function () {
    var githublink = '<a href="https://www.github.com/';

    function toLink(url, text) {
      return githublink + url + '" target="_blank">' + text + '</a>';
    }

    /**
     * Behavior to generate a regex substituter to turn GitHub flavored
     * markdown into correctly rendered HTML.
     *
     * Examples include issue references (#1234) and user references (@TimvdLippe)
     */
    return {
      /**
       * Create the substituter for the provided project.
       * @param  {Object} project The project to generate the GitHub flavored
       * markdown for.
       * @return {function} The function that transforms HTML text
       * by applying regex substitutions.
       */
      createMarkdownSubstituter: function (project) {
        var owner = project.owner;
        var name = project.name;

        var replacers = [
          // Remove direct link in GitHub comment to our application
          {
            regex: /\<hr\>\n\<p\>Review this pull request.*\<\/p\>$/m,
            callback: function () {
              return '';
            }
          },
          // Substitute issue references #1234
          {
            regex: /&?#(\d+)/g,
            callback: function (match, digits) {
              // Character was escaped, we should modify these numbers
              if (match.charAt(0) === '&') {
                return match;
              }
              return toLink(owner + '/' + name + '/issues/' + digits, '#' + digits);
            }
          },
          // Substitute user name references @TimvdLippe
          {
            regex: /\@(\w+)/g,
            callback: function (match, username) {
              return toLink(username, match);
            }
          }
        ];

        return function (err, text) {
          for (var i = 0, l = replacers.length; i < l; i++) {
            var replacer = replacers[i];
            text = text.replace(replacer.regex, replacer.callback);
          }
          return text;
        };
      }
    };
  })();

</script>

<!--
Element that shows GitHub flavored markdown.
-->
<dom-module id="marked-github-element">
  <template>
    <style>
      :host {
        display: block;
        @apply --commits;
        line-height: 1.4em;
      }
      img {
        max-width: 100%;
      }
      pre {
        background-color: #f7f7f7;
        padding: 16px;
        overflow: auto;
      }
      a {
        text-decoration: none;
        color: var(--anchor-color);
      }
      a:hover {
        text-decoration: underline;
      }
      .markdown-html, p {
        word-wrap: break-word;
        @apply --commits;
      }
      marked-element {
        width: 100%;
      }
    </style>
    <marked-element markdown="[[markdown]]" callback="[[createMarkdownSubstituter(project)]]">
      <div class="markdown-html"></div>
    </marked-element>
  </template>
  <script>
    /*global SubstituteRenderedGitHubMarkdownBehavior*/
    Polymer({
      is: 'marked-github-element',
      behaviors: [SubstituteRenderedGitHubMarkdownBehavior],
      properties: {
        /**
         * The markdown to be transformed into rendered HTML.
         * @type {String}
         */
        markdown: String,
        project: Object
      }
    });
  </script>
</dom-module>