add default image resolution and tests

index.ts

@@ -1,5 +1,5 @@
 export { transformToJson } from "./src/transformers/json-transformer/json-transformer.js";
 export { transformToPortableText } from "./src/transformers/portable-text-transformer/portable-text-transformer.js";
-export { resolveTable, extendPortableText } from "./src/utils/transformer-utils.js";
+export { resolveTable, extendPortableText, resolveImage } from "./src/utils/transformer-utils.js";
 export { parse as browserParse } from "./src/parser/browser/rich-text-browser-parser.js";
 export { parse as nodeParse } from "./src/parser/node/rich-text-node-parser.js";

src/utils/transformer-utils.ts

@@ -1,4 +1,11 @@
-import { PortableTextBlockStyle, PortableTextListItemType, PortableTextMarkDefinition, PortableTextSpan } from "@portabletext/types"
+import {
+ArbitraryTypedObject,
+PortableTextBlock,
+PortableTextBlockStyle,
+PortableTextListItemType,
+PortableTextMarkDefinition,
+PortableTextSpan
+} from "@portabletext/types"
 import ShortUniqueId from "short-unique-id";
 
 import { IDomHtmlNode, IDomTextNode } from "../parser/index.js";
@@ -56,6 +63,8 @@ export type TransformTableCellFunction = (node: IDomHtmlNode, extensionFunction?
 export type TransformFunction = TransformElementFunction | TransformListItemFunction;
 
 export type MergePortableTextItemsFunction = (itemsToMerge: PortableTextObject[]) => PortableTextObject[];
+// TODO: could perhaps be merged with extendportabletextfunction?
+export type ResolverFunction<T extends ArbitraryTypedObject> = (value: T) => string;
 
 export const extendPortableText = <T extends PortableTextObject> (
     portableTextArray: T[],
@@ -239,7 +248,7 @@ export const compose = <T>(
 
 export const resolveTable = (
   table: PortableTextTable,
-  resolver: (value: any) => string
+  resolver: (value: PortableTextBlock[]) => string
 ): string => {
   let tableHtml = "<table><tbody>";
   const resolveCell = (cell: PortableTextTableCell) => {
@@ -259,6 +268,13 @@ export const resolveTable = (
   return tableHtml;
 };
 
+export const resolveImage = (
+  image: PortableTextImage,
+  resolver?: ResolverFunction<PortableTextImage>
+): string => {
+  return resolver ? resolver(image) : `<img src="${image.asset.url} alt="${image.asset.rel ?? ""}">`
+}
+
 export const getAllNewLineAndWhiteSpace = /\n\s*/g;
 
 export const uid = new ShortUniqueId.default({length: 16});

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

@@ -6,6 +6,8 @@ exports[`HTML converter resolves a linked item 1`] = `"<p>resolved value of text
 
 exports[`HTML converter resolves a table 1`] = `"<table><tbody><tr><td><p>Ivan</p></td><td><p>Jiri</p></td></tr><tr><td><p>Ondra</p></td><td><p>Dan</p></td></tr></tbody></table>"`;
 
-exports[`HTML converter resolves an asset 1`] = `"<img src="https://assets-us-01.kc-usercontent.com:443/cec32064-07dd-00ff-2101-5bde13c9e30c/3594632c-d9bb-4197-b7da-2698b0dab409/Riesachsee_Dia_1_1963_%C3%96sterreich_16k_3063.jpg"></img>"`;
+exports[`HTML converter resolves an asset 1`] = `"<img src="https://assets-us-01.kc-usercontent.com:443/cec32064-07dd-00ff-2101-5bde13c9e30c/3594632c-d9bb-4197-b7da-2698b0dab409/Riesachsee_Dia_1_1963_%C3%96sterreich_16k_3063.jpg alt="">"`;
+
+exports[`HTML converter resolves an asset with custom resolver 1`] = `"<img src="https://assets-us-01.kc-usercontent.com:443/cec32064-07dd-00ff-2101-5bde13c9e30c/3594632c-d9bb-4197-b7da-2698b0dab409/Riesachsee_Dia_1_1963_%C3%96sterreich_16k_3063.jpg alt=" height="800">"`;
 
 exports[`HTML converter resolves internal link 1`] = `"<p><a href="https://website.com/23f71096-fa89-4f59-a3f9-970e970944ec"><em>item</em></a></p>"`;

tests/transfomers/portable-text-transformer/html-transformer.spec.ts

@@ -1,7 +1,20 @@
 import { Elements, ElementType } from "@kontent-ai/delivery-sdk";
 import { escapeHTML,PortableTextOptions, toHTML } from "@portabletext/to-html";
-
-import { browserParse,nodeParse, resolveTable, transformToPortableText } from "../../../src";
+import { PortableTextBlock } from '@portabletext/types';
+
+import {
+browserParse,
+nodeParse,
+PortableTextComponent,
+PortableTextExternalLink,
+PortableTextImage,
+PortableTextInternalLink,
+PortableTextTable,
+resolveImage,
+ResolverFunction,
+resolveTable,
+transformToPortableText
+} from "../../../src"
 
 jest.mock('short-unique-id', () => {
     return {
@@ -11,6 +24,19 @@ jest.mock('short-unique-id', () => {
     }
   });
 
+  type CustomResolvers = {
+    image?: ResolverFunction<PortableTextImage>;
+    block?: ResolverFunction<PortableTextBlock>;
+    table?: ResolverFunction<PortableTextTable>;
+    component?: ResolverFunction<PortableTextComponent>;
+    internalLink?: ResolverFunction<PortableTextInternalLink>;
+    link?: ResolverFunction<PortableTextExternalLink>;
+};
+
+const customResolvers: Partial<CustomResolvers> = {
+    image: (image) => `<img src="${image.asset.url} alt="${image.asset.rel ?? ""} height="800">`
+}
+
 describe("HTML converter", () => {
 
     const richTextTemplate: Elements.RichTextElement = {
@@ -44,11 +70,11 @@ describe("HTML converter", () => {
         name: "dummy"
     };
 
-    const getPortableTextComponents = (element: Elements.RichTextElement): PortableTextOptions => ({
+    const getPortableTextComponents = (element: Elements.RichTextElement, customResolvers: CustomResolvers = {}): PortableTextOptions => ({
         components: {
             types: {
                 image: ({ value }) => {
-                    return `<img src="${value.asset.url}"></img>`;
+                    return customResolvers.image ? customResolvers.image(value) : resolveImage(value);
                 },
                 component: ({ value }) => {
                     const linkedItem = element.linkedItems.find(item => item.system.codename === value.component._ref);
@@ -62,7 +88,7 @@ describe("HTML converter", () => {
                     }
                 },
                 table: ({ value }) => {
-                    const tableHtml = resolveTable(value, toHTML);
+                    const tableHtml = customResolvers.table ? customResolvers.table(value) : resolveTable(value, toHTML);
                     return tableHtml;
                 }
             },
@@ -148,4 +174,18 @@ describe("HTML converter", () => {
         expect(nodeResult).toMatchSnapshot();
         expect(nodeResult).toEqual(browserResult);
     })
+
+    it("resolves an asset with custom resolver", () => {
+        const richTextInput = { ...richTextTemplate }
+        richTextInput.value = `<figure data-asset-id="62ba1f17-13e9-43c0-9530-6b44e38097fc" data-image-id="62ba1f17-13e9-43c0-9530-6b44e38097fc"><img src="https://assets-us-01.kc-usercontent.com:443/cec32064-07dd-00ff-2101-5bde13c9e30c/3594632c-d9bb-4197-b7da-2698b0dab409/Riesachsee_Dia_1_1963_%C3%96sterreich_16k_3063.jpg" data-asset-id="62ba1f17-13e9-43c0-9530-6b44e38097fc" data-image-id="62ba1f17-13e9-43c0-9530-6b44e38097fc" alt=""></figure>`;
+        const browserTree = browserParse(richTextInput.value);
+        const nodeTree = nodeParse(richTextInput.value);
+        const nodePortableText = transformToPortableText(nodeTree);
+        const browserPortableText = transformToPortableText(browserTree);
+        const nodeResult = toHTML(nodePortableText, getPortableTextComponents(richTextInput, customResolvers));
+        const browserResult = toHTML(browserPortableText, getPortableTextComponents(richTextInput, customResolvers));
+
+        expect(nodeResult).toMatchSnapshot();
+        expect(nodeResult).toEqual(browserResult);
+    })
 })