markdown-editor.html

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

<!-- Paper elements -->
<link rel="import" href="../paper-input/paper-input-behavior.html">
<link rel="import" href="../paper-input/paper-input-container.html">

<!-- Iron elements -->
<link rel="import" href="../iron-media-query/iron-media-query.html">

<!-- Molecule elements -->
<link rel="import" href="../marked-element/marked-element.html">

<!-- Custom elements -->
<link rel="import" href="medium-editor-markdown-import.html">

<link rel="import" href="../demo-content/shared-markdown-styles.html">

<!--
`<markdown-editor>` is a Medium.com WYSIWYG editor clone (https://github.com/yabwe/medium-editor#button-options) w/ a Markdown extension (https://github.com/IonicaBizau/medium-editor-markdown)

@demo demo/index.html 
-->

<dom-module id="markdown-editor">

  <template>

    <style include="shared-markdown-styles">
      :host {
        display: block;
      }
      #preview {
        background-color: #ededed;
        overflow-x: scroll;
      }
      #preview[hidden] {
        display: none;
      }
    </style>

    <iron-media-query query="max-width: 600px" query-matches="{{_smallScreen}}"></iron-media-query>

    <paper-input-container id="editor"
        always-float-label>
      <label>description</label>
      <marked-element id="marked" class="paper-input-input">
        <div id="input" class="markdown-html" is="iron-input"></div>
      </marked-element>
    </paper-input-container>


    <pre id="preview" hidden="[[!preview]]">[[markdown]]</pre>

  </template>

  <script>
    Polymer({

      is: 'markdown-editor',

      properties: {
        /**
         * Instance of MediumEditor class
         */
        editor: {
          type: Object,
          readOnly: true,
          observer: '_editorChanged'
        },
        /**
         * Custom placeholder text shown in the editor window
         */
        placeholderText: {
          type: String,
          value: null
        },
        /**
         * Hides the placeholder upon clicking the text editor when true
         */
        placeholderHide: {
          type: Boolean,
          value: true
        },
        /**
         * The markdown to be rendered
         */
        markdown: {
          type: String,
          notify: true
        },
        /**
         * Displaying a preview of the markdown when true
         */
        preview: {
          type: Boolean,
          reflectToAttribute: true,
          value: false
        },
        _smallScreen: {
          type: Boolean
        }
      },

      ready: function () {
        this._initializeEditor();
      },

      _initializeEditor: function () {
        if (this.editor) {
          this.editor.destroy();
          this._setEditor(null);
        }
        this._setEditor(new MediumEditor(this.$.input, this._buildOptions()));

        // cleaning span tags
        this.editor.subscribe('editableInput', this._handleEditableInput.bind(this));
      },

      _buildOptions: function () {
        var options = {};

        options['targetBlank'] =  true;

        // TOOLBAR
        var toolbarOptions = {};
        toolbarOptions['buttons'] = [
          'bold',
          'italic',
          'anchor',
          'h1',
          'h2',
          'h3',
          'quote',
          'unorderedlist',
          'orderedlist',
          'removeFormat'
        ];
        if (this._smallScreen) {
          toolbarOptions['static'] = true;
          toolbarOptions['sticky'] = true;
        }
        options['toolbar'] = toolbarOptions;

        // PASTE
        var pasteOptions = {};
        pasteOptions['forcePlainText'] = true;
        options['paste'] = pasteOptions;

        // PLACEHOLDER
        placeholderOptions = {};
        if (this.placeholderText) {
          if (this.placeholderText) {
            placeholderOptions['text'] = this.placeholderText;
          }
          if (this.placeholderHide) {
            placeholderOptions['hideOnClick'] = this.placeholderHide;
          }
        }
        options['placeholder'] = placeholderOptions;

        // EXTENSIONS
        var extensionOptions = {};
        extensionOptions['markdown'] = new MeMarkdown({
          events: [
            'input',
            'change',
            'click',
            'focus'
          ]
        }, function(markdown) {
          this._handleOutput(markdown);
        }.bind(this));
        options['extensions'] = extensionOptions;

        return options;
      },

      _handleEditableInput: function (event, element) {
        // clean those span tags
        var spanList = element.getElementsByTagName('span');
        for (var i = 0; i < spanList.length; i++) {
          spanList[i].outerHTML = spanList[i].innerHTML;
        };
      },

      _handleOutput: function (md) {
        if (this._editorReady) {
          // console.log('md:\n"%s"', md);
          this.set('markdown', md);
        }
      },

      _editorChanged: function(editor) {
        if (editor) {
          this.renderMarkdown();
          this.set('_editorReady', true);
        }
      },

      /**
       * Applies the markdown property to `marked-element`
       */
      renderMarkdown: function() {
        // console.log('renderMarkdown: %s', this.markdown);

        if (this.markdown) {
          this.editor.trigger('focus', {}, this.$.input);
        } else {
          this.editor.trigger('blur', {}, this.$.input);
        }

        this.$.marked.markdown = this.markdown;
      }

    });
  </script>

</dom-module>