kontent-ai/kontent-delivery-node-parser

Rich text element parser for node.js & javascript delivery SDK.

Node.js parser for Rich text elements

This library is an optional addon for the javascript delivery SDK that can be used to resolve rich text elements in node.js environment.

This is an alternative to built-in browserParser that comes native with the SDK and works in browsers.

Usage

import { createRichTextHtmlResolver, createAsyncRichTextHtmlResolver } from '@kontent-ai/delivery-sdk';
import { nodeParser, asyncNodeParser } from '@kontent-ai/delivery-node-parser';

// transform rich text html into json
const json = createRichTextHtmlResolver(nodeParser).resolveRichText(data);

// or
const html = await createAsyncRichTextHtmlResolver(asyncNodeParser).resolveRichText(data);

kontent-delivery-node-parser's Issues

nodeParser for richtext

Brief bug description

Using nodeParser, it doesn't resolve rendering empty object references. The HTML element that I want to use remains wrapped in an object type. I use nodeParser in createRichTextHtmlResolver(nodeParser) to resolve rich text with components and items.

<object type="application/kenticocloud" data-type="item" data-rel="link" data-codename="image__test" data-sdk-resolved="1"><img src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*xMuIOwjliGUPjkzukeWKfw.jpeg" alt="undefined">
</object>

Using nodeParser I expected to get rid of object type but it doen't happen.

Empty text

Brief bug description

When I want to parse an HTML string like this one <p>one <strong>two</strong></p>, the first TextNode child (#text) of the P tag does not contain the value one .

The issue comes from the text node which is serialized with parse5 while parse5 computes the text value from the childNodes, which a TextNode has not.

If you replace the parentNode instead of adding it to the childNodes, it works better:
https://github.com/kontent-ai/kontent-delivery-node-parser/blob/master/lib/parser/implementation/shared.ts#L160

-        text: striptags(serialize(node)),
+        text:  tagName === "#text" ? node.value : striptags(serialize(node)),

Test environment

• Node

RangeError: Maximum call stack size exceeded with certain content

Brief bug description

I'm trying to use the node parser for url resolution, but am encountering RangeError in the striptags dependency used by it.

Repro steps

Here's a gist: https://gist.github.com/tveimo/9ed80c181d80c449cc95dcf079c47cd6

run with ts-node --esm test.mts

Test environment

We're using nuxt, typescript, node v18.12.1.

Incorrect main/module/exports specified in its package.json

Brief bug description

When using this package in an Astro project, Astro throws this error
error Failed to resolve entry for package "@kontent-ai/delivery-node-parser". The package may have incorrect main/module/exports specified in its package.json.

It looks like

"module": "./dist/esm5/index.js",
"es2015": "./dist/esm/index.js",

in the package.json should read

"module": "./dist/es6/index.js",
"es2015": "./dist/es6/index.js",

as there is no esm5 or esm folder in the package /dist folder, only 'cjs, es6, es2020, esnext'.

Repro steps

There's quite a few steps to reproduce in our demo repo but I believe if you try and add this package to any Vite project, it should throw the same error (as Astro uses Vite under the hood).

If you need more details @Enngage I'm more than happy to record a quick demo video or jump on a Zoom call / Hangout.

Expected behavior

The module references in package.json point to the correct output folder.

Additional context

In our demo Astro project we resolve rich text info from the Delivery API into an object, so that we can create a custom resolver component for outputting the HTML we need.

import { nodeParser } from "@kontent-ai/delivery-node-parser";
import { createRichTextObjectResolver, Elements, linkedItemsHelper } from "@kontent-ai/delivery-sdk";

export default async function resolveRichText(richTextElement: Elements.RichTextElement) {
    const resolvedObject = createRichTextObjectResolver(nodeParser).resolveRichText({
        element: richTextElement,
        linkedItems: linkedItemsHelper.convertLinkedItemsToArray(richTextElement.linkedItems),
    });

    return resolvedObject;
}

but while our editor doesn't throw an error (it resolves the dist/cjs files), the Vite dev server Astro runs under the hood throws an error

Going into node_modules/@kontent-ai/delivery-node-parser/package.json and changing module and es2015 to the following resolves the issues

"module": "./dist/es6/index.js",
"es2015": "./dist/es6/index.js",

preserveResolvedObjectTags set to false preserve object tags

Brief bug description

When I use the node example with the option preserveResolvedObjectTags: false, the HTML output still contains the A or OBJECT tags.

If you replace the parentNode instead of adding it to the childNodes, it works better:
https://github.com/kontent-ai/kontent-delivery-node-parser/blob/master/lib/parser/implementation/shared.ts#L155

-    element.childNodes = [rootNode];
+    Object.entries(rootNode).forEach(([attributeName, attributeValue]) => {
+        element[attributeName] = attributeValue
+    })

Expected behavior

No duplicated tags.

Test environment

• Node

Additional context

Add any other context about the problem here.

Screenshots

Add links to screenshots, if possible.