Extend RichText resolver by component flag

[Simply007]

Problem

Currently, it is hard to distinguish it an item is a component. And there is no information in resolveLinkedItem if an item is a component.

Workarounds

Following workarounds are not recommended.

• use schema customization and add this information to the mode using
  • components do not have workflow_step codename being set
  • Check if Substring(14, 2).Equals("01") of an item ID -> then it is component

Enhancement

Extend resolveLinkedItem handler with the information if item is component or content item, or just pass domNode as a second parameter, so that user has access to all attributes (as It is for resolveLink callback).

This information is being stored in data-rel attribute in Richtext value property.

• data-rel="link" -> linked item
• data-rel="component" -> component

https://github.com/Kentico/kontent-gatsby-packages/blob/cb491dc14092e33a9259b99a28a46d55d733b259/packages/gatsby-kontent-components/src/rich-text-element/index.tsx#L43-L48

[Emeka-Ugbanu-hub]

I would love to help with this

[Simply007]

Hello @Emeka-Ugbanu-hub, thanks for your interest :) I am assigning you this issue.

[Emeka-Ugbanu-hub]

I need more info on this issue. It's kind of confusing

[Simply007]

The rich text element could contain some external items like image, component, and linked items.

RichText component is built to resolve the HTML value containing external objects. An example of the rich text element structure could be found here: https://kontent.ai/learn/reference/delivery-api#section/Rich-text-element.

So this issue is about adding information for resolveLinkedItem as a new parameter - https://github.com/Kentico/kontent-gatsby-packages/blob/gatsbyv4-upgrade/packages/gatsby-kontent-components/src/rich-text-element/index.tsx#L48.

[Emeka-Ugbanu-hub]

what information are we adding for resolveLinkedItem

[Simply007]

At least pass the domNode similary as we do for resolveLink callback: https://github.com/Kentico/kontent-gatsby-packages/blob/master/packages/gatsby-kontent-components/src/rich-text-element/index.tsx#L64.

[Emeka-Ugbanu-hub]

Something like this

[Simply007]

Yes, and include the test for it and showcase getting the information from domNode.

Basically getting the information whether the linked item is a component or linked item:

This information is being stored in `data-rel` attribute in Richtext value property.

data-rel="link" -> linked item
data-rel="component" -> component

So you can extend tests on https://github.com/Kentico/kontent-gatsby-packages/blob/master/packages/gatsby-kontent-components/tests/rich-text-emelemt.spec.tsx after you extend the callback.

You can use i.e. this string as a value of the rich text (the same as it is already in the tests, but one component is added at the end)

"<p>This is Ondřej Chrastina - Developer Advocate with <a href=\"https://kontent.ai\" data-new-window=\"true\" target=\"_blank\" rel=\"noopener noreferrer\">Kentico Kontent</a>.</p>\n<figure data-asset-id=\"d32b8ad5-0cf4-47a8-8b53-ed4a1e80dc88\" data-image-id=\"d32b8ad5-0cf4-47a8-8b53-ed4a1e80dc88\"><img src=\"https://assets-us-01.kc-usercontent.com:443/0f6785d7-8214-000f-62b3-d9580d692b59/44299668-b37b-4224-a115-1fd66f7d7b36/Yprofile.jpg\" data-asset-id=\"d32b8ad5-0cf4-47a8-8b53-ed4a1e80dc88\" data-image-id=\"d32b8ad5-0cf4-47a8-8b53-ed4a1e80dc88\" alt=\"\"></figure>\n<p>He likes to do web sites. This is his latest project:</p>\n<object type=\"application/kenticocloud\" data-type=\"item\" data-rel=\"link\" data-codename=\"ondrej_chrastina_tech\"></object>\n<p><br>\nHe also likes OSS. This is his latest repository:</p>\n<object type=\"application/kenticocloud\" data-type=\"item\" data-rel=\"link\" data-codename=\"simply007_kontent_gatsby_benchmark\"></object>\n<p><br>\nOn some projects, he was cooperating with <a data-item-id=\"2b805947-7ca5-4e6a-baa5-734a91f3cfa2\" href=\"\">John Doe</a>.</p>\n<p>You could take a look at their&nbsp;<a href=\"https://google.com\" title=\"sample link\">latest project</a>.</p>\n<p>Check out also this interesting repository</p>\n<object type=\"application/kenticocloud\" data-type=\"item\" data-rel=\"component\" data-codename=\"n5b76e971_4709_01f2_e8ea_36a9716d7b42\"></object>"

And extend linkedItems with this object:

{
  "__typename": "kontent_item_repository",
  "system": {
    "codename": "n5b76e971_4709_01f2_e8ea_36a9716d7b42"
  },
  "elements": {
    "name": {
      "name": "Name"
    },
    "slug": {
      "value": ""
    },
    "summary": {
      "value": "Gatsby packages repository containing the source plugin, components package, and a bunch of Gatsby examples."
    },
    "url": {
      "value": "https://github.com/Kentico/kontent-gatsby-packages"
    }
  }
}

[Emeka-Ugbanu-hub]

Thanks am still new to the open source world so I need alot of guidance, I get the test I can do that but how do I showcase the information from domNode

[Emeka-Ugbanu-hub]

extend linkedItems object in the test file like this right

[Emeka-Ugbanu-hub]

and Resolve linked items test should also like this right

[Simply007]

and Resolve linked items test should also like this right

Everything seems fine. Just in the quoted bit, you need to use domNode for the test to be able to exactly check the output.

---

I guess, just try to submit a PR and we can iterate on the solution. It is much easier to reference the actual code parts than to reference the screenshots.

[Emeka-Ugbanu-hub]

Ok Thanks I'll do that

[Emeka-Ugbanu-hub]

just created the pull request
#204

[Emeka-Ugbanu-hub]

Just completed the changes

[Simply007]

Thanks, please use re-request review next time, so that I get a notification to take a look at the PR.

https://github.blog/changelog/2019-02-21-re-request-review-on-a-pull-request/

[Emeka-Ugbanu-hub]

OK Thanks didn't know about that, Thanks for letting me know

[Emeka-Ugbanu-hub]

So is there still anymore changes for me to work on

[Simply007]

I have just finished the review - #204 (review)

[Emeka-Ugbanu-hub]

Ok I'll Work On the changes

[Simply007]

Any update on this?

If you are stuck I am open to merging this into a separate branch, then make the last touches myself and merge this with master .

[Emeka-Ugbanu-hub]

am sorry but have been facing some issues and not been able to code for weeks but it would all be resolved, and I would start working on the changes

[Simply007]

Fixed by #204 + #205