Merge branch 'main' of https://github.com/kontent-ai/rich-text-resolv…

…er-js

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

@@ -26,7 +26,7 @@ import {
 import {
   blockElements,
   compose,
-  countChildTextNodes,
+  countChildTextNodesAndLineBreaks,
   createBlock,
   createComponentBlock,
   createExternalLink,
@@ -294,7 +294,7 @@ const transformLink: TransformLinkFunction = (node) => {
     ? createItemLink(linkId, node.attributes["data-item-id"])
     : createExternalLink(linkId, node.attributes);
 
-  const mark = createMark(randomUUID(), link._key, countChildTextNodes(node));
+  const mark = createMark(randomUUID(), link._key, countChildTextNodesAndLineBreaks(node));
 
   return [link, mark];
 };
@@ -325,7 +325,7 @@ const transformBlock: TransformElementFunction = (
 
 const transformTextMark: TransformElementFunction = (
   node,
-) => [createMark(randomUUID(), node.tagName as TextStyleElement, countChildTextNodes(node))];
+) => [createMark(randomUUID(), node.tagName as TextStyleElement, countChildTextNodesAndLineBreaks(node))];
 
 const transformLineBreak: TransformElementFunction = () => [createSpan(randomUUID(), [], "\n")];
 

src/utils/common-utils.ts

@@ -62,15 +62,15 @@ export const isNestedImg = (node?: DomNode): node is DomHtmlNode<ImgElementAttri
   && node.attributes["data-asset-id"] !== undefined;
 
 /**
- * Recursively counts the number of text nodes within a given DOM node and all of its descendants.
+ * Recursively counts the number of text nodes and line breaks within a given DOM node and all of its descendants.
  *
  * @param node - Node to start counting from
  * @returns The total number of text nodes found within the provided node and its children
  */
-export const countChildTextNodes = (node: DomNode): number =>
-  node.type === "text"
+export const countChildTextNodesAndLineBreaks = (node: DomNode): number =>
+  node.type === "text" || node.tagName === "br"
     ? 1
-    : node.children.reduce((count, child) => count + countChildTextNodes(child), 0);
+    : node.children.reduce((count, child) => count + countChildTextNodesAndLineBreaks(child), 0);
 
 export const throwError = (msg: string) => {
   throw new Error(msg);

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

@@ -11,3 +11,5 @@ exports[`HTML transformer resolves an asset 1`] = `"<img src="https://assets-us-
 exports[`HTML transformer 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 transformer resolves internal link 1`] = `"<p><a href="https://website.com/23f71096-fa89-4f59-a3f9-970e970944ec"><em>item</em></a></p>"`;
+
+exports[`HTML transformer resolves styled text with line breaks 1`] = `"<p><strong>Strong text with line break<br/>Strong text with line break</strong></p>"`;

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

@@ -189,4 +189,10 @@ describe("HTML transformer", () => {
       customResolvers,
     );
   });
+
+  it("resolves styled text with line breaks", () => {
+    transformAndCompare(
+      "</p>\n<p><strong>Strong text with line break<br>\nStrong text with line break</strong></p>",
+    );
+  });
 });