Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashleysommer/ember-mobiledoc-dom-renderer-3
The MobileDoc-kit DOM Renderer for Ember, forked and updated for Ember 3.16+ and Octane
https://github.com/ashleysommer/ember-mobiledoc-dom-renderer-3
Last synced: about 21 hours ago
JSON representation
The MobileDoc-kit DOM Renderer for Ember, forked and updated for Ember 3.16+ and Octane
- Host: GitHub
- URL: https://github.com/ashleysommer/ember-mobiledoc-dom-renderer-3
- Owner: ashleysommer
- License: mit
- Created: 2020-06-02T03:28:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T23:14:52.000Z (about 2 years ago)
- Last Synced: 2024-12-06T09:04:07.589Z (16 days ago)
- Language: JavaScript
- Size: 2.68 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-mobiledoc-dom-renderer-3
==============================================================================
Forked from [ember-mobiledoc-dom-renderer](https://raw.githubusercontent.com/bustle/ember-mobiledoc-dom-renderer),
updated for compatibility with Ember 3.16+ and Octane.
Added some batteries-included Cards, including a Markdown renderer card.
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.16 or above
* Ember CLI v3.16 or above
* Node.js v10 or above
Installation
------------------------------------------------------------------------------
```
ember install ember-mobiledoc-dom-renderer-3
```
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 subclass
the `render-mobiledoc` component and override its `cardNameToComponentName` method.
E.g.:
```javascript
// components/my-render-mobiledoc.js
import RenderMobiledoc from 'ember-mobiledoc-dom-renderer/components/render-mobiledoc';
class MyRenderMobiledoc extends RenderMobiledoc {
cardNameToComponentName(mobiledocCardName) {
return 'cards/' + mobiledocCardName;
}
}
export default MyRenderMobiledoc;
```
#### 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, extend the `render-mobiledoc` component and override
its `atomNameToComponentName` method.
#### 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 `{{render-mobiledoc}}` component, but if you need
to use the renderer directly in code, it can be imported:
`import RendererFactory from 'ember-mobiledoc-dom-renderer'`;
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).