https://github.com/bustle/ember-mobiledoc-dom-renderer

Render mobiledoc documents in an ember app
https://github.com/bustle/ember-mobiledoc-dom-renderer

ember-addon mobiledoc mobiledoc-editor

Last synced: about 2 months ago
JSON representation

Render mobiledoc documents in an ember app

• Host: GitHub
• URL: https://github.com/bustle/ember-mobiledoc-dom-renderer
• Owner: bustle
• License: mit
• Created: 2015-11-13T16:35:24.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T03:27:43.000Z (almost 2 years ago)
• Last Synced: 2024-04-29T19:06:24.288Z (8 months ago)
• Topics: ember-addon, mobiledoc, mobiledoc-editor
• Language: JavaScript
• Homepage:
• Size: 3.97 MB
• Stars: 15
• Watchers: 14
• Forks: 12
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-mobiledoc-dom-renderer

[![Build Status](https://travis-ci.org/bustle/ember-mobiledoc-dom-renderer.svg?branch=master)](https://travis-ci.org/bustle/ember-mobiledoc-dom-renderer)

Provides:

  * Component `` for rendering mobiledoc in your ember app

  * (For advanced use) The ability to import the [`mobiledoc-dom-renderer`](https://github.com/bustlelabs/mobiledoc-dom-renderer) class

  

To learn more about mobiledoc see [mobiledoc-kit](https://github.com/bustlelabs/mobiledoc-kit).

## Installation

* `ember install ember-mobiledoc-dom-renderer`

## Requirements

* Ember.js v3.16 or above (for older versions of Ember, try 0.7.0)

* Ember CLI v3.16 or above

* Node.js v12 or above

### Usage

#### Render basic mobiledoc in your template

```hbs

```

#### Render mobiledoc with cards, using ember components to render cards

```hbs

{{! myMobiledoc is the mobiledoc you want to render }}

{{! myCardNames is an array of card names, e.g. ['embed-card', 'slideshow-card'] }}

```

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 pass an argument to

the `` component to provide your own mapping.

E.g.:

```hbs

// components/my-component.hbs

```

```javascript

// components/my-component.js

import Component from '@glimmer/component';

import { action } from '@ember/object';

export default class extends Component {

  @action

  cardNameToComponentName(mobiledocCardName) {

    return 'cards/' + mobiledocCardName;

  }

}

```

#### Render mobiledoc with atoms, using ember components to render atoms

This works the same way as rendering mobiledoc with ember components for cards.

To pass atom names to the renderer, use the `atomNames` property, e.g.:

```hbs

{{! myAtomNames is an array of atom names, e.g. ['mention-atom'] }}

```

The component will be passed a `payload` and `value` property.

To customize atom lookup, pass an `atomNameToComponentName` argument similar to

what is shown above for `cardNameToComponentName`.

#### Customizing markup and section rendering

The `sectionElementRenderer` and `markupElementRenderer` options can be used to

customize the elements used for sections and inline text decorations respectively.

E.g.:

```hbs

```

```js

mySectionElementRenderer: {

  h1: (tagName, domDocument) => {

    let element = domDocument.createElement('h1');

    element.classList.add('primary-heading');

    return element;

  }

}

```

#### Use mobiledoc-dom-renderer directly

This addon provides the mobiledoc-dom-renderer directly. Most of the time

you will want to use the `` component, but if you need

to use the renderer directly in code, it can be imported:

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

#### Release process

See RELEASE.md