Add linkResolver

addon/components/prismic/children.hbs

@@ -1,5 +1,9 @@
 {{~#each @node.children as |child|~}}
-  <Prismic::Element @node={{child}} @onUnknownTag={{@onUnknownTag}} />
+  <Prismic::Element
+    @linkResolver={{@linkResolver}}
+    @node={{child}}
+    @onUnknownTag={{@onUnknownTag}}
+  />
 {{~else~}}
   {{[email protected]~}}
 {{~/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
+        @linkResolver={{@linkResolver}}
+        @node={{child}}
+        @onUnknownTag={{@onUnknownTag}}
+      />
     {{~/each~}}
   {{~/if~}}
 </div>

addon/components/prismic/element.hbs

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

addon/components/prismic/element.js

@@ -32,4 +32,29 @@ export default class PrismicElementComponent extends Component {
   get target() {
     return this.args.node.element.data.value?.target || '_blank';
   }
+
+  get linkHref() {
+    // https://prismic.io/docs/technologies/link-resolver-javascript
+    let {
+      id,
+      slug: uid,
+      type,
+      tags,
+      lang,
+      isBroken,
+      link_type,
+    } = this.args.node.element.data;
+    if (link_type === 'Document') {
+      return this.args.linkResolver?.({
+        id,
+        uid,
+        type,
+        tags,
+        lang,
+        isBroken,
+      });
+    } else {
+      return this.args.node.element.data.url;
+    }
+  }
 }

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

@@ -17,6 +17,40 @@ module('Integration | Component | prismic/dom', function (hooks) {
   });
 
   module('complex combinations', function () {
+    test('doc hyperlink with linkResolver', async function (assert) {
+      this.nodes = [
+        {
+          type: 'paragraph',
+          text: 'A link to another doc',
+          spans: [
+            {
+              start: 18,
+              end: 21,
+              type: 'hyperlink',
+              data: {
+                id: 'YAlUbREAACIAEKtG',
+                type: 'faq_article',
+                tags: ['transaction_helper_cards'],
+                slug: 'processing-card-transaction',
+                lang: 'en-us',
+                link_type: 'Document',
+                isBroken: false,
+              },
+            },
+          ],
+        },
+      ];
+      this.linkResolver = ({ uid }) => `https://qonto.com/${uid}`;
+
+      await render(
+        hbs`<Prismic::Dom @linkResolver={{this.linkResolver}} @nodes={{this.nodes}} />`
+      );
+
+      assert
+        .dom('a')
+        .hasProperty('href', 'https://qonto.com/processing-card-transaction');
+    });
+
     test('list', async function (assert) {
       this.nodes = [
         { type: 'o-list-item', text: 'one', spans: [] },

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

@@ -9,6 +9,57 @@ import cleanHtml from '../../../helpers/clean-html';
 module('Integration | Component | prismic/element', function (hooks) {
   setupRenderingTest(hooks);
 
+  module('linkResolver', function () {
+    test('called with doc object', async function (assert) {
+      assert.expect(1);
+      this.node = {
+        key: 'f37fa1aa-5d40-41fd-951a-cebb2b2f1839',
+        type: 'hyperlink',
+        element: {
+          start: 18,
+          end: 21,
+          type: 'hyperlink',
+          data: {
+            id: 'YAlUbREAACIAEKtG',
+            type: 'faq_article',
+            tags: ['transaction_helper_cards'],
+            slug: 'processing-card-transaction',
+            lang: 'en-us',
+            link_type: 'Document',
+            isBroken: false,
+          },
+        },
+        children: [
+          {
+            key: '728406cc-c73c-4ffb-ba4c-fff0cef3d8fa',
+            type: 'span',
+            element: { type: 'span', start: 18, end: 21, text: 'doc' },
+            children: [],
+            start: 18,
+            end: 21,
+            text: 'doc',
+          },
+        ],
+        start: 18,
+        end: 21,
+        text: 'doc',
+      };
+      this.linkResolver = (doc) => {
+        assert.deepEqual(doc, {
+          id: 'YAlUbREAACIAEKtG',
+          uid: 'processing-card-transaction',
+          type: 'faq_article',
+          tags: ['transaction_helper_cards'],
+          lang: 'en-us',
+          isBroken: false,
+        });
+      };
+      await render(
+        hbs`<Prismic::Element @node={{this.node}} @linkResolver={{this.linkResolver}}/>`
+      );
+    });
+  });
+
   module('single elements', function () {
     test('figure - unknown type call onUnknownTag with node', async function (assert) {
       assert.expect(2);