medium-editor-element.html

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

<link rel="import" href="medium-editor-script.html">
<link rel="import" href="medium-editor-md-script.html">

<!--
`medium-editor`
Polymer element for https://github.com/yabwe/medium-editor

## Usage

The following shows the usage of the element with it's properties

```html
<medium-editor
    id="myEditor"
    value="{{value}}">
</medium-editor>

<pre>[[value]]</pre>
```

by default, it should just work. It will output HTML using it's value property. If you want markdown output, just change the output property.

```html
<medium-editor
    id="myEditor"
    output="markdown"
    value="{{value}}">
</medium-editor>

<pre>[[value]]</pre>
```

## Style

The preferred approach to styling the element is using CSS custom properties and mixins.

Custom property | Description | Default
:--- | :--- | :---
`--medium-editor-min-height` | The minimum height of the editor. | 300px


@demo demo/index.html 
-->

<dom-module id="medium-editor">
    <template>
        <link rel="stylesheet" href="../medium-editor/dist/css/medium-editor.css">
        <link rel="stylesheet" href="../medium-editor/dist/css/themes/default.css">
        <style>
            :host {
                display: block;
                width: 100%;
                --medium-editor-min-height: 300px;
            }

            #editor {
                width: 100%;
                height: 100%;
                outline: 0 solid transparent;
                min-height: var(--medium-editor-min-height);
            }

            #editor:focus {
                outline: 0 solid transparent;
            }
        </style>

        <div id="editor"></div>
    </template>

    <script>
      Polymer({

        is: 'medium-editor',

        properties: {
          /**
           * Instance of MediumEditor class
           */
          editor: {
            type: Object,
            readOnly: true
          },

          /**
           * Custom placeholder text shown in the editor window
           */
          placeholderText: {
            type: String,
            value: null
          },

          /**
           * Defines whether to hide the placeholder upon clicking the text editor
           */
          placeholderHide: {
            type: Boolean,
            value: true
          },

          /**
           * The output format for the text editor
           *
           * Supported values are 'html' and 'markdown'
           */
          output: {
            type: String,
            value: 'html'
          },

          /**
           * The current content of the text editor in format defined by output property
           */
          value: {
            type: String,
            notify: true,
            readOnly: true
          }
        },

        ready: function () {
          this._reinitializeEditor()
        },

        _reinitializeEditor: function () {
          if (this.editor) {
            this.editor.destroy()
            this._setEditor(null)
          }

          this._setEditor(new MediumEditor(this.$.editor, this._buildOptions()))
          this.editor.subscribe('editableInput', this._handleEditableInput.bind(this))
        },

        _buildOptions: function () {
          var options = {}

          if (this.placeholderText || this.placeholderHide) {
            var placeholderOptions = {}

            if (this.placeholderText) {
              placeholderOptions[ 'text' ] = this.placeholderText
            }

            if (this.placeholderHide) {
              placeholderOptions[ 'hideOnClick' ] = this.placeholderHide
            }

            options[ 'placeholder' ] = placeholderOptions
          }

          var extensions = options[ 'extensions' ] = {}

          switch (this.output) {
            case 'markdown': {
              extensions[ 'markdown' ] = new MeMarkdown(function (markdown) {
                this._handleOutput(markdown)
              }.bind(this))
            }
          }

          return options
        },

        _handleEditableInput: function (event, editable) {
          if (this.output === 'html') {
            this._handleOutput(editable.textContent)
          }
        },

        _handleOutput: function (newValue) {
          console.log('_handleOutput', newValue)
          this._setValue(newValue)
        }

      });
    </script>
</dom-module>