ember-mobiledoc-dom-renderer

ember-mobiledoc-dom-renderer

Provides:

• Component {{render-mobiledoc}} for rendering mobiledoc in your ember app
• (For advanced use) The ability to import the mobiledoc-dom-renderer class

To learn more about mobiledoc see mobiledoc-kit.

Installation

• ember install ember-mobiledoc-dom-renderer

Usage

Render basic mobiledoc in your template

{{render-mobiledoc mobiledoc=myMobileDoc}}

Render mobiledoc with cards, using ember components to render cards

{{! myMobiledoc is the mobiledoc you want to render }}
{{! myCardNames is an array of card names, e.g. ['embed-card', 'slideshow-card'] }}
{{render-mobiledoc mobiledoc=myMobileDoc cardNames=myCardNames}}

The ember components with names matching the mobiledoc card names will be rendered and passed a payload property. The ember components will be in a wrapper div with the class '__rendered-mobiledoc-card' and '__rendered-mobiledoc-card-${cardName}'.

Customizing card lookup

If your mobiledoc card names do not match component names, you can subclass the render-mobiledoc component and override its cardNameToComponentName method.

E.g.:

// components/my-render-mobiledoc.js
import RenderMobiledoc from 'ember-mobiledoc-dom-renderer/components/render-mobiledoc';
export default RenderMobiledoc.extend({
  cardNameToComponentName(mobiledocCardName) {
    return 'cards/' + mobiledocCardName;
  }
});

Use mobiledoc-dom-renderer directly

This addon provides the mobiledoc-dom-renderer directly. Most of the time you will want to use the {{render-mobiledoc}} component, but if you need to use the renderer directly in code, it can be imported:

import DOMRenderer from 'ember-mobiledoc-dom-renderer';

Changelog

0.5.0 (2016-05-10)

• Render atoms, allow renaming via atomNameToComponentName (72bc7ab)
• Use willRender instead of didInsertElement, make fastboot-compatible (fa8e5ea)
• v0.5.0 (62fbf38)

<a name="0.4.1"></a>