Skip to content

Commit 9598ff5

Browse files
pokornydpokornyd
committed
adjust naming for links and components
1 parent 860fa8f commit 9598ff5

File tree

10 files changed

+32
-29
lines changed

10 files changed

+32
-29
lines changed

‎README.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ The tool provides environment-aware (browser or Node.js) `parseHTML` function to
4242
> [!TIP]
4343
> This module re-exports modified `toHTML` function and `<PortableText>` component from `to-html` and `react-portabletext` packages respectively. These modified helpers provide default resolution for tags which are either unsupported or only partially supported in the original packages (`sub` and `sup` tags, images, tables and links).
4444
>
45-
> Make sure to use these re-exports if you want to take advantage of the default resolution.
45+
> Make sure to use these re-exports if you want to take advantage of the default resolution. You can still provide your own custom resolutions for the above tags even when using these helpers.
4646
4747
The tool provides `transformToPortableText` function to convert rich text content into an array of Portable Text blocks, with custom blocks defined for Kontent.ai-specific objects.
4848

@@ -101,7 +101,7 @@ const resolvers: PortableTextHtmlResolvers = {
101101
},
102102
componentOrItem: ({ value }) => {
103103
const linkedItem = linkedItems.find(
104-
(item) => item.system.codename === value.component._ref
104+
(item) => item.system.codename === value.componentOrItem._ref
105105
);
106106
switch (linkedItem?.system.type) {
107107
case "component_type_codename": {
@@ -120,7 +120,7 @@ const resolvers: PortableTextHtmlResolvers = {
120120
},
121121
marks: {
122122
contentItemLink: ({ children, value }) => {
123-
return `<a href="https://website.com/${value.reference._ref}">${children}</a>`;
123+
return `<a href="https://website.com/${value.contentItemLink._ref}">${children}</a>`;
124124
},
125125
link: ({ children, value }) => {
126126
return `<a href=${value?.href} data-new-window=${value?.["data-new-window"]}>${children}</a>`;
@@ -137,7 +137,6 @@ const resolvedHtml = toHTML(portableText, resolvers);
137137
React, using a slightly modified version of `PortableText` component from `@portabletext/react` package.
138138

139139
```tsx
140-
import { toPlainText } from "@portabletext/react";
141140
import {
142141
PortableTextReactResolvers,
143142
PortableText,
@@ -153,7 +152,7 @@ import {
153152
const resolvers: PortableTextReactResolvers = {
154153
types: {
155154
componentOrItem: ({ value }) => {
156-
const item = richTextElement.linkedItems.find(item => item.system.codename === value.component._ref);
155+
const item = richTextElement.linkedItems.find(item => item.system.codename === value?.componentOrItem._ref);
157156
return <div>{item?.elements.text_element.value}</div>;
158157
},
159158
// Image and Table components are used as a default fallback if a resolver isn't explicitly specified
@@ -169,7 +168,7 @@ const resolvers: PortableTextReactResolvers = {
169168
)
170169
},
171170
contentItemLink: ({ value, children }) => {
172-
const item = richTextElement.linkedItems.find(item => item.system.id === value?.reference._ref);
171+
const item = richTextElement.linkedItems.find(item => item.system.id === value?.contentItemLink._ref);
173172
return (
174173
<a href={"https://website.xyz/" + item?.system.codename}>
175174
{children}

‎showcase/showcase.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { PortableTextComponentOrItem, PortableTextImage, PortableTextItemLink, P
33
const portableTextComponent: PortableTextComponentOrItem = {
44
_type: "componentOrItem",
55
_key: "guid",
6-
component: {
6+
componentOrItem: {
77
_type: "reference",
88
_ref: "linkedItemOrComponentCodename",
99
referenceType: "codename",
@@ -26,7 +26,7 @@ import { PortableTextComponentOrItem, PortableTextImage, PortableTextItemLink, P
2626
const portableTextItemLink: PortableTextItemLink = {
2727
_type: "contentItemLink",
2828
_key: "guid",
29-
reference: {
29+
contentItemLink: {
3030
_type: "reference",
3131
_ref: "0184a8ac-9781-4292-9e30-1fb56f648a6c",
3232
referenceType: "id",

‎src/transformers/transformer-models.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export interface PortableTextExternalLink extends PortableTextMarkDefinition {
6161
*/
6262
export interface PortableTextItemLink extends PortableTextMarkDefinition {
6363
_type: "contentItemLink";
64-
reference: Reference;
64+
contentItemLink: Reference;
6565
}
6666

6767
/**
@@ -120,7 +120,7 @@ export interface PortableTextComponentOrItem extends ArbitraryTypedObject {
120120
/**
121121
* Reference to a component or a linked item.
122122
*/
123-
component: Reference;
123+
componentOrItem: Reference;
124124
}
125125

126126
/**

‎src/utils/resolution/html.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,3 +136,5 @@ export const resolveImage = (
136136
*/
137137
export const toHTMLImageDefault = (image: PortableTextImage): string =>
138138
`<img src="${image.asset.url}" alt="${image.asset.alt}">`;
139+
140+
export { defaultComponents } from "@portabletext/to-html";

‎src/utils/resolution/mapi.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { resolveTable } from "./html.js";
2020
const toManagementApiImage = (image: PortableTextImage) => createFigureTag(image.asset._ref);
2121

2222
const toManagementApiRichTextItem = (richTextItem: PortableTextComponentOrItem) =>
23-
`<object type="application/kenticocloud" data-type="${richTextItem.dataType}" data-id="${richTextItem.component._ref}"></object>`;
23+
`<object type="application/kenticocloud" data-type="${richTextItem.dataType}" data-id="${richTextItem.componentOrItem._ref}"></object>`;
2424

2525
const toManagementApiTable = (table: PortableTextTable) =>
2626
resolveTable(table, (blocks) => toHTML(blocks, portableTextComponents));
@@ -32,7 +32,7 @@ const toManagementApiExternalLink = (children: string, link?: PortableTextExtern
3232

3333
const toManagementApiItemLink = (children: string, link?: PortableTextItemLink) =>
3434
link
35-
? `<a data-item-id="${link.reference._ref}">${children}</a>`
35+
? `<a data-item-id="${link.contentItemLink._ref}">${children}</a>`
3636
: throwError("Mark definition for item link not found.");
3737

3838
const createImgTag = (assetId: string) => `<img src="#" data-asset-id="${assetId}">`;

‎src/utils/resolution/react.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,3 +110,5 @@ export const PortableText = <B extends TypedObject = PortableTextBlock>({
110110
/>
111111
);
112112
};
113+
114+
export { defaultComponents } from "@portabletext/react";

‎src/utils/transformer-utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export const createItemLink = (
128128
): PortableTextItemLink => ({
129129
_key: guid,
130130
_type: "contentItemLink",
131-
reference: {
131+
contentItemLink: {
132132
_type: "reference",
133133
_ref: reference,
134134
referenceType,
@@ -167,7 +167,7 @@ export const createComponentOrItemBlock = (
167167
_type: "componentOrItem",
168168
_key: guid,
169169
dataType,
170-
component: reference,
170+
componentOrItem: reference,
171171
});
172172

173173
export const { randomUUID } = new ShortUniqueId({ length: 10 });

‎tests/components/portable-text.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@ const dummyRichText: Elements.RichTextElement = {
4040
const portableTextComponents: PortableTextReactResolvers = {
4141
types: {
4242
componentOrItem: ({ value }) => {
43-
const item = dummyRichText.linkedItems.find(item => item.system.codename === value.component._ref);
43+
const item = dummyRichText.linkedItems.find(item => item.system.codename === value.componentOrItem._ref);
4444
return <div>{item?.elements.text_element.value}</div>;
4545
},
4646
},
4747
marks: {
4848
contentItemLink: ({ value, children }) => {
49-
const item = dummyRichText.linkedItems.find(item => item.system.id === value?.reference._ref);
49+
const item = dummyRichText.linkedItems.find(item => item.system.id === value?.contentItemLink._ref);
5050
return (
5151
<a href={"https://somerandomwebsite.xyz/" + item?.system.codename}>
5252
{children}

‎tests/transfomers/portable-text-transformer/__snapshots__/portable-text-transformer.spec.ts.snap‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ exports[`Portable Text Transformer doesn't extend link mark to adjacent spans 1`
6767
{
6868
"_key": "guid",
6969
"_type": "contentItemLink",
70-
"reference": {
70+
"contentItemLink": {
7171
"_ref": "3120ec15-a4a2-47ec-8ccd-c85ac8ac5ba5",
7272
"_type": "reference",
7373
"referenceType": "id",
@@ -85,7 +85,7 @@ exports[`Portable Text Transformer extends component block with additional data
8585
"_key": "guid",
8686
"_type": "componentOrItem",
8787
"additionalData": "data",
88-
"component": {
88+
"componentOrItem": {
8989
"_ref": "test_item",
9090
"_type": "reference",
9191
"referenceType": "codename",
@@ -359,7 +359,7 @@ exports[`Portable Text Transformer transforms a linked item and a component from
359359
{
360360
"_key": "guid",
361361
"_type": "componentOrItem",
362-
"component": {
362+
"componentOrItem": {
363363
"_ref": "n27ec1626_93ac_0129_64e5_1beeda45416c",
364364
"_type": "reference",
365365
"referenceType": "codename",
@@ -383,7 +383,7 @@ exports[`Portable Text Transformer transforms a linked item and a component from
383383
{
384384
"_key": "guid",
385385
"_type": "componentOrItem",
386-
"component": {
386+
"componentOrItem": {
387387
"_ref": "commercet",
388388
"_type": "reference",
389389
"referenceType": "codename",
@@ -412,7 +412,7 @@ exports[`Portable Text Transformer transforms a linked item and a component from
412412
{
413413
"_key": "guid",
414414
"_type": "componentOrItem",
415-
"component": {
415+
"componentOrItem": {
416416
"_ref": "d6a10cb4-3639-429f-b6b0-b7fea6dec252",
417417
"_type": "reference",
418418
"referenceType": "id",
@@ -436,7 +436,7 @@ exports[`Portable Text Transformer transforms a linked item and a component from
436436
{
437437
"_key": "guid",
438438
"_type": "componentOrItem",
439-
"component": {
439+
"componentOrItem": {
440440
"_ref": "99e17fe7-a215-400d-813a-dc3608ee0294",
441441
"_type": "reference",
442442
"referenceType": "id",
@@ -833,7 +833,7 @@ exports[`Portable Text Transformer transforms complex rich text into portable te
833833
{
834834
"_key": "guid",
835835
"_type": "componentOrItem",
836-
"component": {
836+
"componentOrItem": {
837837
"_ref": "test_item",
838838
"_type": "reference",
839839
"referenceType": "codename",
@@ -977,7 +977,7 @@ exports[`Portable Text Transformer transforms item links 1`] = `
977977
{
978978
"_key": "guid",
979979
"_type": "contentItemLink",
980-
"reference": {
980+
"contentItemLink": {
981981
"_ref": "23f71096-fa89-4f59-a3f9-970e970944ec",
982982
"_type": "reference",
983983
"referenceType": "id",
@@ -1714,7 +1714,7 @@ exports[`Portable Text Transformer transforms tables with input <p>Text</p>
17141714
{
17151715
"_key": "guid",
17161716
"_type": "contentItemLink",
1717-
"reference": {
1717+
"contentItemLink": {
17181718
"_ref": "6538fde0-e6e5-425c-8642-278e637b2dc1",
17191719
"_type": "reference",
17201720
"referenceType": "id",
@@ -2788,7 +2788,7 @@ exports[`Portable Text Transformer transforms tables with input <table>
27882788
{
27892789
"_key": "guid",
27902790
"_type": "contentItemLink",
2791-
"reference": {
2791+
"contentItemLink": {
27922792
"_ref": "e2d97322-470a-42e7-a31e-40be26c2ef24",
27932793
"_type": "reference",
27942794
"referenceType": "id",
@@ -2832,7 +2832,7 @@ exports[`Portable Text Transformer transforms tables with input <table>
28322832
{
28332833
"_key": "guid",
28342834
"_type": "contentItemLink",
2835-
"reference": {
2835+
"contentItemLink": {
28362836
"_ref": "abaf708d-5d91-4b50-9905-30f1d0f482f9",
28372837
"_type": "reference",
28382838
"referenceType": "id",

‎tests/transfomers/portable-text-transformer/resolution/html-resolver.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ describe("HTML resolution", () => {
9292
value,
9393
}: PortableTextTypeComponentOptions<PortableTextComponentOrItem>) => {
9494
const linkedItem = element.linkedItems.find(
95-
(item) => item.system.codename === value.component._ref,
95+
(item) => item.system.codename === value.componentOrItem._ref,
9696
);
9797
if (!linkedItem) return `Resolver for unknown type not implemented.`;
9898

@@ -108,7 +108,7 @@ describe("HTML resolution", () => {
108108
contentItemLink: ({
109109
children,
110110
value,
111-
}) => `<a href="https://website.com/${value?.reference._ref}">${children}</a>`,
111+
}) => `<a href="https://website.com/${value?.contentItemLink._ref}">${children}</a>`,
112112
sup: ({
113113
children,
114114
value,

0 commit comments

Comments
 (0)