Merge pull request #7 from qonto/em-custom-comp

feat(custom): custom render prismic type

README.md

@@ -53,6 +53,8 @@ Use this:
 <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.
 
 ```hbs
@@ -71,6 +73,29 @@ export default class MyComponent extends Component {
 }
 ```
 
+### 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
+
+```hbs
+<Prismic::Dom
+  @group-list-item='my-list'
+  @hyperlink='my-hyperlink'
+  @nodes={{@myPrismicDoc.data.myRichText}}
+/>
+```
+
+my-list.hbs
+```hbs
+<h1>My List</h2>
+<ul>{{yield}}<ul>
+```
+
+my-hyperlink.hbs
+```hbs
+<a href={{@node.element.data.url}}>{{yield}}</a>
+```
+
 
 Contributing
 ------------------------------------------------------------------------------

addon/components/prismic/children.hbs

@@ -1,5 +1,8 @@
 {{~#each @node.children as |child|~}}
-  <Prismic::Element @node={{child}} @onUnknownTag={{@onUnknownTag}} />
+  <Prismic::Element
+    @componentNames={{@componentNames}}
+    @node={{child}}
+    @onUnknownTag={{@onUnknownTag}} />
 {{~else~}}
   {{~@node.element.text~}}
 {{~/each~}}

addon/components/prismic/dom.hbs

@@ -3,7 +3,11 @@
     {{@nodes}}
   {{~else~}}
     {{~#each this.tree.children as |child|~}}
-      <Prismic::Element @node={{child}} @onUnknownTag={{@onUnknownTag}} />
+      <Prismic::Element
+        @componentNames={{this.componentNames}}
+        @node={{child}}
+        @onUnknownTag={{@onUnknownTag}}
+      />
     {{~/each~}}
   {{~/if~}}
 </div>

addon/components/prismic/dom.js

@@ -10,4 +10,11 @@ export default class PrismicDomComponent extends Component {
   get isString() {
     return typeof this.args.nodes === 'string';
   }
+
+  get componentNames() {
+    let names = { ...this.args };
+    delete names.nodes;
+    delete names.onUnknownTag;
+    return names;
+  }
 }

addon/components/prismic/element.hbs

@@ -1,15 +1,35 @@
-{{~#if (eq @node.type "image")~}}
+{{~#if this.isCustom~}}
+  {{~#component this.componentName node=@node~}}
+    <Prismic::Children
+      @componentNames={{@componentNames}}
+      @node={{@node}}
+      @onUnknownTag={{@onUnknownTag}}
+    />
+  {{~/component~}}
+{{~else if (eq @node.type "image")~}}
   <Prismic::Image @node={{@node}} />
 {{~else if (eq @node.type "span")~}}
-  <Prismic::Children @node={{@node}} @onUnknownTag={{@onUnknownTag}} />
+  <Prismic::Children
+    @componentNames={{@componentNames}}
+    @node={{@node}}
+    @onUnknownTag={{@onUnknownTag}}
+  />
 {{~else if (eq @node.type "hyperlink")~}}
   <a
     href={{@node.element.data.url}}
     rel="noreferrer noopener"
     target={{this.target}}
-  ><Prismic::Children @node={{@node}} @onUnknownTag={{@onUnknownTag}} /></a>
+  ><Prismic::Children
+    @componentNames={{@componentNames}}
+    @node={{@node}}
+    @onUnknownTag={{@onUnknownTag}}
+  /></a>
 {{~else~}}
   {{~#let (element this.tagName) as |Tag|~}}
-    <Tag><Prismic::Children @node={{@node}} @onUnknownTag={{@onUnknownTag}} /></Tag>
+    <Tag><Prismic::Children
+      @componentNames={{@componentNames}}
+      @node={{@node}}
+      @onUnknownTag={{@onUnknownTag}}
+    /></Tag>
   {{~/let~}}
 {{~/if~}}

addon/components/prismic/element.js

@@ -32,4 +32,12 @@ export default class PrismicElementComponent extends Component {
   get target() {
     return this.args.node.element.data.value?.target || '_blank';
   }
+
+  get isCustom() {
+    return Boolean(this.componentName);
+  }
+
+  get componentName() {
+    return this.args.componentNames?.[this.args.node.type];
+  }
 }

tests/dummy/app/components/group-list-item.hbs

@@ -0,0 +1 @@
+<ul>{{~yield~}}elephant</ul>

tests/dummy/app/components/hyperlink.hbs

@@ -0,0 +1 @@
+<a href={{@node.element.data.url}}>{{yield}}</a>

tests/dummy/app/components/list-item.hbs

@@ -0,0 +1 @@
+<li>{{~yield}} bananna</li>

tests/integration/components/prismic/dom-test.js

@@ -16,6 +16,58 @@ module('Integration | Component | prismic/dom', function (hooks) {
     });
   });
 
+  module('custom elements', function () {
+    test('hyperlink', async function (assert) {
+      this.nodes = [
+        {
+          type: 'paragraph',
+          text: 'A link to somewhere',
+          spans: [
+            {
+              start: 2,
+              end: 6,
+              type: 'hyperlink',
+              data: { link_type: 'Web', url: 'https://example.org' },
+            },
+          ],
+        },
+      ];
+
+      await render(
+        hbs`<Prismic::Dom @nodes={{this.nodes}} @hyperlink='hyperlink'/>`
+      );
+      assert.equal(
+        cleanHtml(this),
+        '<div><p>A <a href="https://example.org">link</a> to somewhere</p></div>'
+      );
+    });
+
+    test('list', async function (assert) {
+      this.nodes = [
+        { type: 'list-item', text: 'one', spans: [] },
+        { type: 'list-item', text: 'two', spans: [] },
+      ];
+
+      this.listItem = '';
+
+      await render(
+        hbs`<Prismic::Dom @nodes={{this.nodes}} @group-list-item='group-list-item' @list-item={{this.listItem}}/>`
+      );
+
+      assert.equal(
+        cleanHtml(this),
+        '<div><ul><li>one</li><li>two</li>elephant</ul></div>'
+      );
+
+      this.set('listItem', 'list-item');
+
+      assert.equal(
+        cleanHtml(this),
+        '<div><ul><li>one bananna</li><li>two bananna</li>elephant</ul></div>'
+      );
+    });
+  });
+
   module('complex combinations', function () {
     test('list', async function (assert) {
       this.nodes = [