mobiledoc-dom-renderer

Mobiledoc DOM Renderer

This is a DOM renderer for the Mobiledoc format used by Mobiledoc-Kit.

To learn more about Mobiledoc cards and renderers, see the Mobiledoc Cards docs.

The renderer is a small library intended for use in browser clients.

Usage

var mobiledoc = {
  version: "0.2.0",
  sections: [
    [         // markers
      ['B']
    ],
    [         // sections
      [1, 'P', [ // array of markups
        // markup
        [
          [0],          // open markers (by index)
          0,            // close count
          'hello world'
        ]
      ]
    ]
  ]
};
var renderer = new MobiledocDOMRenderer({cards: []});
var rendered = renderer.render(mobiledoc);
var result = rendered.result;
document.getElementById('output').appendChild(result);
// renders <div><p><b>hello world</b></b></div>
// into 'output' element

The Renderer constructor accepts a single object with the following optional properties:

• cards [array] - The list of card objects that the renderer may encounter in the mobiledoc
• atoms [array] - The list of atom objects that the renderer may encounter in the mobiledoc
• cardOptions [object] - Options to pass to cards and atoms when they are rendered
• unknownCardHandler [function] - Will be called when any unknown card is enountered
• unknownAtomHandler [function] - Will be called when any unknown atom is enountered
• sectionElementRenderer [object] - A map of hooks for section element rendering.
  • Valid keys are P, H1, H2, H3, BLOCKQUOTE, PULL-QUOTE
  • Arguments are tagName, dom
  • A valid value is a function that returns an element
• dom [object] - A native or SimpleDOM implementation of the DOM.

The return value from renderer.render(mobiledoc) is an object with two properties:

• result [DOM Node] - The rendered result
• teardown [function] - When called, this function will tear down the rendered mobiledoc and call any teardown handlers that were registered by cards when they were rendered

Rendering HTML

In a browser, rendering to HTML is simple:

var renderer = new MobiledocDOMRenderer();
var rendered = renderer.render(mobiledoc);
var html = rendered.result.outerHTML;

However on the server in Node.js, native DOM APIs are not available. To make server-rendering easy, this DOM renderer is SimpleDOM compatible. You may pass an instance of a SimpleDOM document and serialize its output. For example:

var renderer = new MobiledocDOMRenderer({
  dom: new SimpleDOM.Document()
});
var rendered = renderer.render(mobiledoc);
var serializer = new SimpleDOM.HTMLSerializer([]);
var html = serializer.serializeChildren(rendered.result);

This usage of the DOM renderer for rendering HTML has the advantage of allowing developers to easily implement cards that work in a server and client context.

sectionElementRenderer

Use this renderer option to customize what element is used when rendering a section.

var renderer = new MobiledocDOMRenderer({
  sectionElementRenderer: {
    P: function(_, dom) { return dom.createElement('span'); },
    H1: function(_, dom) { return dom.createElement('h2'); },
    H2: function(tagName, dom) {
      var element = dom.createElement(tagName);
      element.setAttribute('class', 'subheadline');
      return element;
    }
    /* Valid keys are P, H1, H2, H3, BLOCKQUOTE, PULL-QUOTE */
  }
});
var rendered = renderer.render(mobiledoc);

Tests

• npm test

Releasing

• npm version patch or minor or major
• npm run build
• npm run update-changelog
• git push bustle --tags
• npm publish

Changelog

<small>0.4.1 (2016-03-11)</small>

• 0.4.1 (d350c73)
• Render pull-quote as <div class="pull-quote" (638f46d), closes #26
• Update changelog (72ed2a5)

<a name="0.4.0"></a>