add direct transformation method, adjust naming

index.ts

@@ -1,7 +1,7 @@
 export { PortableTextReactResolvers } from './src/utils/resolution/react.js';
 export { traversePortableText, traverseAndTransformNodes, traverseAndTransformNodesAsync } from './src/utils/transformer-utils.js';
 export { transformToJson } from "./src/transformers/json-transformer/json-transformer.js";
-export { transformToPortableText } from "./src/transformers/portable-text-transformer/portable-text-transformer.js";
+export { nodesToPortableText, transformToPortableText } from "./src/transformers/portable-text-transformer/portable-text-transformer.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";
 export { resolveImage, resolveTable, toHTMLImageDefault, PortableTextHtmlResolvers } from "./src/utils/resolution/html.js";

package.json

@@ -103,10 +103,11 @@
     "vue": "^3.5.12"
   },
   "dependencies": {
-    "@portabletext/to-html": "^2.0.13",
     "@portabletext/react": "^3.1.0",
-    "@portabletext/vue": "^1.0.11",
+    "@portabletext/to-html": "^2.0.13",
     "@portabletext/types": "^2.0.13",
+    "@portabletext/vue": "^1.0.11",
+    "browser-or-node": "^3.0.0",
     "node-html-parser": "^6.1.13",
     "short-unique-id": "^5.2.0"
   },

src/transformers/portable-text-transformer/portable-text-transformer.ts

@@ -1,8 +1,12 @@
+import * as runtimeEnvironment from "browser-or-node";
+
 import {
+  browserParse,
   DomHtmlNode,
   DomNode,
   DomTextNode,
   ImgElementAttributes,
+  nodeParse,
   ObjectElementAttributes,
   ParseResult,
 } from "../../parser/index.js";
@@ -260,7 +264,7 @@ const toPortableText: NodeToPortableText<DomNode> = (node, processedItems, listC
  * @param {ParseResult} parsedTree The parsed tree structure representing the rich text content.
  * @returns {PortableTextObject[]} An array of Portable Text Blocks representing the structured content.
  */
-export const transformToPortableText = (
+export const nodesToPortableText = (
   parsedTree: ParseResult,
 ): PortableTextObject[] =>
   traverseAndTransformNodes(
@@ -270,6 +274,22 @@ export const transformToPortableText = (
     updateListContext,
   ) as PortableTextObject[];
 
+/**
+ * Transforms rich text HTML into an array of Portable Text Blocks.
+ *
+ * @param {string} richText HTML string of Kontent.ai rich text content.
+ * @returns {PortableTextObject[]} An array of Portable Text Blocks representing the structured content.
+ */
+export const transformToPortableText = (
+  richText: string,
+): PortableTextObject[] => {
+  const parseResult = runtimeEnvironment.isBrowser
+    ? browserParse(richText)
+    : nodeParse(richText);
+
+  return nodesToPortableText(parseResult);
+};
+
 const transformMap: Record<ValidElement, NodeToPortableText<DomHtmlNode<any>>> = {
   ...(Object.fromEntries(
     blockElements.map((tagName) => [tagName, processBlock]),

src/utils/resolution/react.ts

@@ -1,4 +1,8 @@
-import { PortableTextMarkComponent, PortableTextReactComponents, PortableTextTypeComponent } from "@portabletext/react";
+import {
+  PortableTextMarkComponent,
+  PortableTextReactComponents,
+  PortableTextTypeComponent,
+} from "@portabletext/react";
 
 import {
   PortableTextComponentOrItem,
@@ -28,7 +32,7 @@ export type PortableTextReactResolvers = Partial<
     PortableTextReactComponents,
     "types" | "marks"
   > & {
-    types: PortableTextReactComponents["types"] & RichTextCustomBlocks;
-    marks: PortableTextReactComponents["marks"] & RichTextCustomMarks;
+    types: PortableTextReactComponents["types"] & Partial<RichTextCustomBlocks>;
+    marks: PortableTextReactComponents["marks"] & Partial<RichTextCustomMarks>;
   }
 >;

tests/components/portable-text.spec.tsx

@@ -3,7 +3,7 @@ import { PortableText, toPlainText } from "@portabletext/react";
 import React from "react";
 import TestRenderer from "react-test-renderer";
 
-import { nodeParse, transformToPortableText } from "../../src";
+import { nodeParse, nodesToPortableText } from "../../src";
 import { resolveImage, resolveTable } from "../../src/utils/resolution/html";
 import { PortableTextReactResolvers } from "../../src/utils/resolution/react";
 
@@ -84,7 +84,7 @@ describe("portable text React resolver", () => {
   const renderPortableText = (richTextValue: string, components = portableTextComponents) => {
     dummyRichText.value = richTextValue;
     const jsonTree = nodeParse(dummyRichText.value);
-    const portableText = transformToPortableText(jsonTree);
+    const portableText = nodesToPortableText(jsonTree);
     return TestRenderer.create(<PortableText value={portableText} components={components} />).toJSON();
   };
 

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

@@ -4,14 +4,14 @@ import { escapeHTML, PortableTextTypeComponentOptions, toHTML } from "@portablet
 import {
   browserParse,
   nodeParse,
+  nodesToPortableText,
   PortableTextBlock,
   PortableTextComponentOrItem,
   PortableTextExternalLink,
   PortableTextImage,
   PortableTextItemLink,
   PortableTextTable,
   ResolverFunction,
-  transformToPortableText,
 } from "../../../src";
 import { PortableTextHtmlResolvers, resolveImage, resolveTable } from "../../../src/utils/resolution/html";
 
@@ -132,8 +132,8 @@ describe("HTML transformer", () => {
 
     const browserTree = browserParse(richTextInput.value);
     const nodeTree = nodeParse(richTextInput.value);
-    const nodePortableText = transformToPortableText(nodeTree);
-    const browserPortableText = transformToPortableText(browserTree);
+    const nodePortableText = nodesToPortableText(nodeTree);
+    const browserPortableText = nodesToPortableText(browserTree);
     const nodeResult = toHTML(
       nodePortableText,
       getPortableTextComponents(richTextInput, customResolvers),

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

@@ -3,7 +3,7 @@ import {
   browserParse,
   nodeParse,
   PortableTextSpan,
-  transformToPortableText,
+  nodesToPortableText,
   traversePortableText,
 } from "../../../src";
 import { toManagementApiFormat } from "../../../src/utils/resolution/mapi";
@@ -27,16 +27,16 @@ describe("portabletext to MAPI resolver", () => {
     const nodeTree = nodeParse(richTextContent);
 
     // Convert the tree to Portable Text
-    const nodePortableText = transformToPortableText(nodeTree);
-    const browserPortableText = transformToPortableText(browserTree);
+    const nodePortableText = nodesToPortableText(nodeTree);
+    const browserPortableText = nodesToPortableText(browserTree);
 
     // Convert Portable Text to MAPI format
     const nodeManagementApiFormat = toManagementApiFormat(nodePortableText);
     const browserManagementApiFormat = toManagementApiFormat(browserPortableText);
 
     // Parse the MAPI format back into a tree and convert it to Portable Text
     const secondParseTree = nodeParse(nodeManagementApiFormat);
-    const secondParsePortableText = transformToPortableText(secondParseTree);
+    const secondParsePortableText = nodesToPortableText(secondParseTree);
 
     // Compare the MAPI formats to ensure consistency across platforms
     expect(nodeManagementApiFormat).toEqual(browserManagementApiFormat);
@@ -97,11 +97,11 @@ describe("portabletext to MAPI resolver", () => {
     const richTextContent =
       `<p><strong>strong text </strong><a href="https://example.com"><strong>example strong link text</strong>not strong link text</a></p>`;
     const tree = nodeParse(richTextContent);
-    const portableText = transformToPortableText(tree);
+    const portableText = nodesToPortableText(tree);
     const mapiFormat = toManagementApiFormat(portableText);
 
     const secondParseTree = nodeParse(mapiFormat);
-    const secondParsePortableText = transformToPortableText(secondParseTree);
+    const secondParsePortableText = nodesToPortableText(secondParseTree);
     const secondParseMapiFormat = toManagementApiFormat(secondParsePortableText);
 
     expect(portableText).toMatchInlineSnapshot(`

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

@@ -1,4 +1,4 @@
-import { browserParse, nodeParse, PortableTextItem, transformToPortableText, traversePortableText } from "../../../src";
+import { browserParse, nodeParse, nodesToPortableText, PortableTextItem, transformToPortableText, traversePortableText } from "../../../src";
 
 jest.mock("short-unique-id", () => {
   return jest.fn().mockImplementation(() => {
@@ -18,8 +18,8 @@ describe("Portable Text Transformer", () => {
     const browserTree = browserParse(input);
     const nodeTree = nodeParse(input);
     return {
-      nodeResult: transformToPortableText(nodeTree),
-      browserResult: transformToPortableText(browserTree),
+      nodeResult: nodesToPortableText(nodeTree),
+      browserResult: nodesToPortableText(browserTree),
     };
   };
 
@@ -249,7 +249,7 @@ describe("Portable Text Transformer", () => {
     (parse) => {
       const input = "<p>text in a paragraph</p><div>text in a div, which doesnt exist in kontent RTE</div>";
       const tree = parse(input);
-      expect(() => transformToPortableText(tree)).toThrow();
+      expect(() => nodesToPortableText(tree)).toThrow();
     },
   );
 

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

@@ -2,7 +2,7 @@ import { PortableText, PortableTextComponentProps, PortableTextComponents, toPla
 import { mount } from "@vue/test-utils";
 import { h } from "vue";
 
-import { nodeParse, PortableTextImage, PortableTextTable, transformToPortableText } from "../../../src";
+import { nodeParse, nodesToPortableText,PortableTextImage, PortableTextTable } from "../../../src";
 import { resolveImage, resolveTable } from "../../../src/utils/resolution/vue";
 
 const components: PortableTextComponents = {
@@ -18,7 +18,7 @@ describe("PortableText Vue Renderer", () => {
     customComponents = components,
   ) => {
     const jsonTree = nodeParse(richTextValue);
-    const portableText = transformToPortableText(jsonTree);
+    const portableText = nodesToPortableText(jsonTree);
 
     return mount(PortableText, {
       props: {