# Example output (generated by `example.py`)

## HTML

```html
<h2>
   draftjs_exporter is an HTML exporter for
   <a href="https://github.com/facebook/draft-js">
    Draft.js
   </a>
   content
  </h2>
  <blockquote cite="http://example.com/">
   Try it out by running this file!
  </blockquote>
  <h3 class="u-text-center">
   Features 📝🍸
  </h3>
  <p>
   The exporter aims to provide sensible defaults from basic block types and inline styles to HTML, that can easily be customized when required. For more advanced scenarios, an API is provided (mimicking React's
   <a href="https://facebook.github.io/react/docs/top-level-api.html#react.createelement">
    <code>
     createElement
    </code>
   </a>
   ) to create custom rendering components of arbitrary complexity.
  </p>
  <hr/>
  <p>
   Here are some features worth highlighting:
  </p>
  <ul class="bullet-list">
   <li>
    Convert line breaks to
    <code>
     &lt;br&gt;
    </code>
    <br/>
    elements.
   </li>
   <li>
    Automatic conversion of entity data to HTML attributes (int &amp; boolean to string,
    <a href="https://facebook.github.io/react/docs/jsx-in-depth.html">
     <code>
      style object
     </code>
     to
     <code>
      style string
     </code>
    </a>
    ).
   </li>
   <li>
    Wrapped blocks (
    <code>
     &lt;li&gt;
    </code>
    elements go inside
    <code>
     &lt;ul&gt;
    </code>
    or
    <code>
     &lt;ol&gt;
    </code>
    ).
    <ul class="bullet-list">
     <li>
      With arbitrary nesting.
      <ul class="bullet-list">
       <li>
        Common text styles:
        <strong>
         Bold
        </strong>
        ,
        <em>
         Italic
        </em>
        ,
        <u>
         Underline
        </u>
        ,
        <code>
         Monospace
        </code>
        ,
        <s>
         Strikethrough.
        </s>
        <kbd>
         cmd + b
        </kbd>
       </li>
       <li>
        <s>
         Overlapping
        </s>
        <strong>
         <s>
          te
         </s>
         <em>
          xt
         </em>
        </strong>
        <em>
         styles.
        </em>
        <strong style="text-decoration: underline;">
         Custom styles
        </strong>
        too!
        <ul class="bullet-list">
         <li>
          <span class="hashtag">
           #hashtag
          </span>
          support via
          <a href="https://github.com/wagtail/draftjs_exporter/pull/17">
           #CompositeDecorators
          </a>
          .
          <ul class="bullet-list">
           <li>
            Linkify URLs too!
            <a href="http://example.com/">
             http://example.com/
            </a>
           </li>
          </ul>
         </li>
        </ul>
       </li>
       <li>
        Depth can go back and forth, it works fiiine (1)
       </li>
      </ul>
     </li>
     <li>
      Depth can go back and forth, it works fiiine (2)
      <ul class="bullet-list">
       <li>
        Depth can go back and forth, it works fiiine (3)
       </li>
      </ul>
     </li>
     <li>
      Depth can go back and forth, it works fiiine (4)
     </li>
    </ul>
   </li>
   <li>
    Depth can go back and forth, it works fiiine (5)
   </li>
  </ul>
  <img alt="Test image alt text" height="200" src="https://placekitten.com/g/300/200" width="300"/>
  <h3 class="u-text-center">
   For developers 🚀
  </h3>
  <ol class="list--depth-0">
   <li class="list-item--depth-0">
    Import the library
   </li>
   <li class="list-item--depth-0">
    Define your configuration
   </li>
   <li class="list-item--depth-0">
    Go!
    <ol class="list--depth-1">
     <li class="list-item--depth-1">
      Optionally, define your custom components.
     </li>
    </ol>
   </li>
  </ol>
  <pre><code>def blockquote(props):
    block_data = props['block']['data']
    return DOM.create_element('blockquote', {
        'cite': block_data.get('cite')
    }, props['children'])
</code></pre>
  Discarded block but the content stays.
  <div>
   Render as
   <span class="missing-entity">
    div
   </span>
  </div>
  <p>
   Voilà!
  </p>
```

## Markdown

## draftjs_exporter is an HTML exporter for [Draft.js](https://github.com/facebook/draft-js) content

> Try it out by running this file!

### Features 📝🍸

The exporter aims to provide sensible defaults from basic block types and inline styles to HTML, that can easily be customized when required. For more advanced scenarios, an API is provided (mimicking React's [`createElement`](https://facebook.github.io/react/docs/top-level-api.html#react.createelement)) to create custom rendering components of arbitrary complexity.

______________________________________________________________________

Here are some features worth highlighting:

- Convert line breaks to `<br>` elements.
- Automatic conversion of entity data to HTML attributes (int & boolean to string, [`style object` to `style string`](https://facebook.github.io/react/docs/jsx-in-depth.html)).
- Wrapped blocks (`<li>` elements go inside `<ul>` or `<ol>`).
- With arbitrary nesting.
  - Common text styles: **Bold**, *Italic*, Underline, `Monospace`, Strikethrough. cmd + b

  - ~Overlapping \*\*te~**\*\**xt***\_ styles. \_Custom styles too!

  - # hashtag support via [#CompositeDecorators](https://github.com/wagtail/draftjs_exporter/pull/17).

    - Linkify URLs too! <http://example.com/>

  - Depth can go back and forth, it works fiiine (1)
- Depth can go back and forth, it works fiiine (2)
  - Depth can go back and forth, it works fiiine (3)
- Depth can go back and forth, it works fiiine (4)
- Depth can go back and forth, it works fiiine (5)

### For developers 🚀

1. Import the library
1. Define your configuration
1. Go!
1. Optionally, define your custom components.

```text
def blockquote(props):
    block_data = props['block']['data']
    return DOM.create_element('blockquote', {
        'cite': block_data.get('cite')
    }, props['children'])
```

Discarded block but the content stays.

Render as div

Voilà!