ember-prismic-dom

ember-prismic-dom

Easy Prismic rendering in Ember.js.

<Prismic::Dom @nodes={{@prismicData}} />

Compatibility

• Ember.js v4.4 or above
• Ember CLI v4.4 or above
• Node.js v14 or above

Installation

ember install ember-prismic-dom

Usage

<Prismic::Dom @nodes={{@myPrismicDoc.data.myRichText}} />

onUnknonwnTag

Additionaly you can pass an onUnknownTag action to handle recieving data of a type Prismic::Dom can't render.

<Prismic::Dom
  @nodes={{@myPrismicDoc.data.myRichText}}
  @onUnknownTag={{this.onUnknownTag}}
/>

import Component from "@glimmer/component";
import { action } from "@ember/object";

export default class MyComponent extends Component {
  @action
  onUnknownTag(node) {
    console.error(`Could not render ${node.type}`);
  }
}

Custom Rendering

Pass a custom component name to be used to render a prismic type. For example to custom render the group-list-item and hyperlink types

<Prismic::Dom
  @group-list-item="my-list"
  @hyperlink="my-hyperlink"
  @nodes={{@myPrismicDoc.data.myRichText}}
/>

my-list.hbs

<h1>My List</h2>
<ul>{{yield}}<ul>

my-hyperlink.hbs

<a href={{@node.element.data.url}}>{{yield}}</a>

Use existing addons

For example you want to use ember-async-image

<Prismic::Dom @nodes={{@nodes}} @image='image'>

image.hbs

<AsyncImage src={{@node.element.url}} />

Migrating from prismic-dom

<Primcic::Dom/> replaces prismic-dom , please see the blog post for more information.

In place of:

import Component from "@glimmer/component";
import PrismicDOM from "prismic-dom";

export default class MyComponent extends Component {
  get html() {
    return PrismicDOM.RichText.asHtml(this.args.myPrismicDoc.data.myRichText);
  }
}

{{{this.html}}}

Use this:

<Prismic::Dom @nodes={{@myPrismicDoc.data.myRichText}} />

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.