polymer-quill-html-render.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="polymer-quill-styles-html.html">

<!--
## Polymer Quill HTML Render

`<polymer-quill-html-render>` creates a Polymer Quill HTML Render. This will render HTML generated by Quill.

Quill is a free, open source WYSIWYG editor built for the modern web.
With its modular architecture and expressive API, it is completely customizable to fit any need.
Learn more at http://quilljs.com/.


### Examples

#### Render Quill HTML

    <polymer-quill-html-render
      content='<h2>Hello World</h2>'>
    </polymer-quill-html-render>

#### Custom (stores as HTML every 5 seconds, show results)

    <polymer-quill
      content="<h2>Hello World</h2>"
      store-as="html"
      store-interval="5000"
      show-results>
    </polymer-quill>

#### Demo example

```html
<style is="custom-style">
  polymer-quill-htmt-render.standard {
    --polymer-quill-editor-max-width: 870px;
    --polymer-quill-editor-border: solid 1px #ccc;
  }
</style>
<polymer-quill-html-render class="standard"
  content='<h2>Hello World</h2>'>
</polymer-quill-html-render>
```

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--polymer-quill-html-max-width`           | Custom max-width for render         | `none`
`--polymer-quill-html-margin-left`         | Custom margin-left for render       | `auto`
`--polymer-quill-html-margin-right`        | Custom margin-right for render      | `auto`
`--polymer-quill-html-background-color`    | Custom background-color for render  | `white`
`--polymer-quill-html-border`              | Custom border for render            | `none`
`--polymer-quill-html-border-radius`       | Custom border-radius for render     | `5px`
`--polymer-quill-html-padding`             | Custom padding for render           | `20px`
`--polymer-quill-html`                     | Mixin applied to the render         | `{}`

### Install

    bower install --save polymer-quill

@demo demo/html-render.html
-->

<dom-module id="polymer-quill-html-render">
  <template>
    <style include="polymer-quill-styles-html">
      :host {
        --calculated-polymer-quill-html-max-width: var(--polymer-quill-html-max-width, none);
        --calculated-polymer-quill-html-margin-left: var(--polymer-quill-html-margin-left, auto);
        --calculated-polymer-quill-html-margin-right: var(--polymer-quill-html-margin-right, auto);
        --calculated-polymer-quill-html-background-color: var(--polymer-quill-html-background-color, white);
        --calculated-polymer-quill-html-border: var(--polymer-quill-html-border, none);
        --calculated-polymer-quill-html-border-radius: var(--polymer-quill-html-border-radius, 5px);
        --calculated-polymer-quill-html-padding: var(--polymer-quill-html-padding, 20px);
        display: block;
        @apply --polymer-quill-html;
      }
      .viewCard {
        max-width: var(--polymer-quill-html-max-width);
        margin-left: var(--polymer-quill-html-margin-left);
        margin-right: var(--polymer-quill-html-margin-right);
        padding: 0 0;
        border: var(--calculated-polymer-quill-html-border);
        border-radius: var(--calculated-polymer-quill-html-border-radius);
        background-color: var(--calculated-polymer-quill-html-background-color);
      }
      .markdown-html {
        padding: var(--calculated-polymer-quill-html-padding);
      }
    </style>
    
    <div class="viewCard">
      <marked-element  id="markedView" markdown="[[content]]">
        <div class="markdown-html"></div>
      </marked-element>
    </div>
  </template>

  <script>
    Polymer({

      is: 'polymer-quill-html-render',

      /**
        * Fired when element is attached.
        *
        * @event attached
        */

      /**
        * Fired when element is ready.
        *
        * @event ready
        */

      properties: {
        /**
         * Content which is in HTML format.
         */
        content: {
          type: String,
          value: '',
          notify: true,
        },
      },

      ready: function() {
        // console.log('polymer-quill-html-render ready');
      }

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