@ethlete/contentful 4.0.0-next.7 → 4.0.0-next.8

package/fesm2022/ethlete-contentful.mjs

@@ -1,12 +1,12 @@
 import { NgClass, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, Component, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, ElementRef, linkedSignal, effect, untracked, signal, reflectComponentType, inputBinding } from '@angular/core';
+import { input, computed, ViewEncapsulation, Component, inject, InjectionToken, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, ElementRef, effect, untracked, signal, reflectComponentType, inputBinding } from '@angular/core';
 import { normalizePictureSizes, PictureComponent } from '@ethlete/components';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { RuntimeError, isObject, injectRenderer, getObjectProperty } from '@ethlete/core';
 
 const GQL_FRAGMENT_CONTENTFUL_ASSET = `
-  fragment AssetData on Asset {
+  fragment ContentfulAssetData on Asset {
     sys {
       id
     }
@@ -21,7 +21,7 @@ const GQL_FRAGMENT_CONTENTFUL_ASSET = `
 `;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isContentfulGqlAsset = (asset) => {
-    return asset?.sys?.id && asset?.url && typeof asset?.size === 'number';
+    return Boolean(asset && typeof asset === 'object' && asset.sys?.id && !('fields' in asset));
 };
 
 class ContentfulAudioComponent {
@@ -39,25 +39,28 @@ class ContentfulAudioComponent {
             if (!asset) {
                 return null;
             }
-            if (isContentfulGqlAsset(asset)) {
+            if (isContentfulGqlAsset(asset) && asset.url) {
                 return {
                     url: asset.url,
                     title: asset.title,
                 };
             }
-            return {
-                url: asset.fields.file.url,
-                title: asset.fields.title,
-            };
+            if (!isContentfulGqlAsset(asset) && asset.fields.file.url) {
+                return {
+                    url: asset.fields.file.url,
+                    title: asset.fields.title,
+                };
+            }
+            return null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, audioClass: { classPropertyName: "audioClass", publicName: "audioClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, audioClass: { classPropertyName: "audioClass", publicName: "audioClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-audio" }, ngImport: i0, template: `
     @if (data(); as data) {
       <figure [ngClass]="figureClass()">
         <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
-        <audio [ngClass]="audioClass()" controls src="{{ data.url }}"></audio>
+        <audio [ngClass]="audioClass()" [src]="data.url" controls></audio>
       </figure>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
@@ -70,12 +73,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     @if (data(); as data) {
       <figure [ngClass]="figureClass()">
         <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
-        <audio [ngClass]="audioClass()" controls src="{{ data.url }}"></audio>
+        <audio [ngClass]="audioClass()" [src]="data.url" controls></audio>
       </figure>
     }
   `,
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
+                    host: {
+                        class: 'et-contentful-audio',
+                    },
                 }]
         }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], audioClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "audioClass", required: false }] }], figureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureClass", required: false }] }], figcaptionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figcaptionClass", required: false }] }] } });
 
@@ -90,28 +96,32 @@ class ContentfulFileComponent {
             if (!asset) {
                 return null;
             }
-            if (isContentfulGqlAsset(asset)) {
+            if (isContentfulGqlAsset(asset) && asset.url) {
                 return {
                     url: asset.url,
-                    contentType: asset.contentType,
                     size: asset.size,
                     title: asset.title,
                 };
             }
-            return {
-                url: asset.fields.file.url,
-                contentType: asset.fields.file.contentType,
-                size: asset.fields.file.details.size,
-                title: asset.fields.title,
-            };
+            if (!isContentfulGqlAsset(asset) && asset.fields.file.url) {
+                return {
+                    url: asset.fields.file.url,
+                    size: asset.fields.file.details.size,
+                    title: asset.fields.title,
+                };
+            }
+            return null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, fileClass: { classPropertyName: "fileClass", publicName: "fileClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, fileClass: { classPropertyName: "fileClass", publicName: "fileClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-file" }, ngImport: i0, template: `
     @if (data(); as data) {
-      <a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
-        {{ data.title }} ({{ data.size }} Bytes)
+      <a [href]="data.url" [ngClass]="fileClass()" target="_blank" rel="noopener noreferrer">
+        {{ data.title }}
+        @if (data.size !== null) {
+          ({{ data.size }} Bytes)
+        }
       </a>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
@@ -122,18 +132,218 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     selector: 'et-contentful-file',
                     template: `
     @if (data(); as data) {
-      <a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
-        {{ data.title }} ({{ data.size }} Bytes)
+      <a [href]="data.url" [ngClass]="fileClass()" target="_blank" rel="noopener noreferrer">
+        {{ data.title }}
+        @if (data.size !== null) {
+          ({{ data.size }} Bytes)
+        }
       </a>
     }
   `,
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
+                    host: {
+                        class: 'et-contentful-file',
+                    },
                 }]
         }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], fileClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileClass", required: false }] }] } });
 
+const parseWebUrl = (href) => {
+    if (!/^(?:https?:)?\/\//i.test(href)) {
+        return null;
+    }
+    try {
+        return new URL(href.startsWith('//') ? 'https:' + href : href);
+    }
+    catch {
+        return null;
+    }
+};
+const normalizeHostname = (host) => {
+    const value = host.trim().toLowerCase();
+    try {
+        return new URL(value.includes('://') ? value : 'https://' + value).hostname;
+    }
+    catch {
+        return value.split(':')[0] ?? value;
+    }
+};
+const matchesHostname = (hostname, configuredHost) => {
+    const normalizedHost = normalizeHostname(configuredHost);
+    return hostname === normalizedHost || hostname.endsWith('.' + normalizedHost);
+};
+class ContentfulLinkComponent {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.router = inject(Router);
+        this.config = injectContentfulConfig();
+        this.href = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+        this.text = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.textClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
+        this.usesRouterLink = computed(() => {
+            const href = this.href();
+            const absoluteUrl = parseWebUrl(href);
+            if (absoluteUrl) {
+                const internalHosts = [this.document.location.hostname, ...this.config.internalHosts];
+                return internalHosts.some((host) => matchesHostname(absoluteUrl.hostname, host));
+            }
+            return !href.startsWith('#') && !/^[a-z][a-z\d+.-]*:/i.test(href);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "usesRouterLink" }] : /* istanbul ignore next */ []));
+        this.openInNewTab = computed(() => Boolean(parseWebUrl(this.href())) && !this.usesRouterLink(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openInNewTab" }] : /* istanbul ignore next */ []));
+        this.internalPath = computed(() => {
+            const href = this.href();
+            const url = parseWebUrl(href);
+            if (!url) {
+                return href;
+            }
+            return url.pathname + url.search + url.hash;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "internalPath" }] : /* istanbul ignore next */ []));
+        this.internalUrlTree = computed(() => this.router.parseUrl(this.internalPath()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "internalUrlTree" }] : /* istanbul ignore next */ []));
+        this.linkClass = computed(() => {
+            const base = 'et-contentful-rich-text-default-element et-contentful-rich-text-default-a';
+            const extra = this.textClass();
+            return extra ? `${base} ${extra}` : base;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ContentfulLinkComponent, isStandalone: true, selector: "et-contentful-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, textClass: { classPropertyName: "textClass", publicName: "textClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-link" }, ngImport: i0, template: `
+    @if (usesRouterLink()) {
+      <a [class]="linkClass()" [routerLink]="internalUrlTree()">{{ text() }}</a>
+    } @else {
+      <a
+        [class]="linkClass()"
+        [href]="href()"
+        [target]="openInNewTab() ? '_blank' : null"
+        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        >{{ text() }}</a
+      >
+    }
+  `, isInline: true, styles: ["@layer components{.et-contentful-link{display:contents}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-contentful-link', template: `
+    @if (usesRouterLink()) {
+      <a [class]="linkClass()" [routerLink]="internalUrlTree()">{{ text() }}</a>
+    } @else {
+      <a
+        [class]="linkClass()"
+        [href]="href()"
+        [target]="openInNewTab() ? '_blank' : null"
+        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        >{{ text() }}</a
+      >
+    }
+  `, encapsulation: ViewEncapsulation.None, imports: [RouterLink], host: {
+                        class: 'et-contentful-link',
+                    }, styles: ["@layer components{.et-contentful-link{display:contents}}\n"] }]
+        }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], textClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "textClass", required: false }] }] } });
+
+class ContentfulVideoComponent {
+    constructor() {
+        this.asset = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
+        this.videoClass = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "videoClass" }] : /* istanbul ignore next */ []));
+        this.data = computed(() => {
+            const asset = this.asset();
+            if (!asset) {
+                return null;
+            }
+            if (isContentfulGqlAsset(asset) && asset.url) {
+                return {
+                    url: asset.url,
+                    contentType: asset.contentType,
+                };
+            }
+            if (!isContentfulGqlAsset(asset) && asset.fields.file.url) {
+                return {
+                    url: asset.fields.file.url,
+                    contentType: asset.fields.file.contentType,
+                };
+            }
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, videoClass: { classPropertyName: "videoClass", publicName: "videoClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-video" }, ngImport: i0, template: `
+    @if (data(); as data) {
+      <video [ngClass]="videoClass()" controls>
+        <source [src]="data.url" [type]="data.contentType" />
+      </video>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-contentful-video',
+                    template: `
+    @if (data(); as data) {
+      <video [ngClass]="videoClass()" controls>
+        <source [src]="data.url" [type]="data.contentType" />
+      </video>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [NgClass],
+                    host: {
+                        class: 'et-contentful-video',
+                    },
+                }]
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], videoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoClass", required: false }] }] } });
+
 const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
 
+/**
+ * The config used when no `provideContentfulConfig()` is in scope. It declares no
+ * `components`, so embedded assets are skipped and hyperlinks render as plain anchors
+ * until a config is provided.
+ */
+const CONTENTFUL_FALLBACK_CONFIG = {
+    internalHosts: [],
+    components: {},
+    customComponents: {},
+    imageOptions: {
+        srcsetSizes: ['375w', '1280w', '1920w', '2560w'],
+        sizes: ['100vw'],
+        backgroundColor: null,
+    },
+};
+const createContentfulConfig = (config) => ({
+    ...{
+        internalHosts: [],
+        components: {
+            audio: ContentfulAudioComponent,
+            file: ContentfulFileComponent,
+            image: ContentfulImageComponent,
+            video: ContentfulVideoComponent,
+            link: ContentfulLinkComponent,
+        },
+        customComponents: {},
+        imageOptions: {
+            srcsetSizes: ['375w', '1280w', '1920w', '2560w'],
+            sizes: ['100vw'],
+            backgroundColor: null,
+        },
+    },
+    ...(config ?? {}),
+});
+/**
+ * Reads the contentful config from the current injector. Falls back to a config without
+ * any `components` when none was provided via `provideContentfulConfig()`.
+ */
+const injectContentfulConfig = () => inject(CONTENTFUL_CONFIG, { optional: true }) ?? CONTENTFUL_FALLBACK_CONFIG;
+
 const generateDefaultContentfulImageSource = (data) => {
     if (isContentfulGqlAsset(data)) {
         if (!data.contentType || !data.url) {
@@ -167,41 +377,37 @@ const generateDefaultContentfulImageSource = (data) => {
  * - `"400wx300h"` - 400px width and 300px height
  **/
 const parseContentfulImageSize = (size) => {
-    let width = null;
-    let height = null;
-    if (size.includes('x')) {
-        const [w, h] = size.split('x');
-        width = w;
-        height = h;
-    }
-    else if (size.includes('h')) {
-        height = size;
+    const widthAndHeight = /^(\d+)w?x(\d+)h?$/.exec(size);
+    if (widthAndHeight) {
+        return {
+            width: Number(widthAndHeight[1]),
+            height: Number(widthAndHeight[2]),
+        };
     }
-    else {
-        width = size;
+    const height = /^(\d+)h$/.exec(size);
+    if (height) {
+        return { width: null, height: Number(height[1]) };
     }
-    return {
-        width: width ? parseInt(width, 10) : null,
-        height: height ? parseInt(height, 10) : null,
-    };
+    const width = /^(\d+)w?$/.exec(size);
+    return width ? { width: Number(width[1]), height: null } : { width: null, height: null };
 };
-const SOURCE_TYPES = ['image/avif', 'image/webp', 'image/png', 'image/jpg'];
+const SOURCE_TYPES = ['image/avif', 'image/webp'];
 const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior) => {
-    const assetData = data;
-    if (!assetData) {
+    const isGqlAsset = isContentfulGqlAsset(data);
+    const baseUrl = isGqlAsset ? data.url : data.fields.file.url;
+    if (!baseUrl) {
         return [];
     }
+    const imageDimensions = isGqlAsset ? data : data.fields.file.details.image;
     const sources = [];
     for (const type of SOURCE_TYPES) {
-        const baseUrl = isContentfulGqlAsset(assetData) ? assetData.url : assetData.fields.file.url;
         const sourceSets = [];
         const queryParams = [];
-        // Set the format (e.g. 'fm=webp')
         queryParams.push(`fm=${type.split('/')[1]}`);
         if (backgroundColor) {
             queryParams.push(`bg=rgb:${backgroundColor}`);
         }
-        if (quality !== null) {
+        if (quality !== null && Number.isFinite(quality)) {
             queryParams.push(`q=${quality}`);
         }
         if (focusArea) {
@@ -211,7 +417,7 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, qual
             queryParams.push(`fit=${resizeBehavior}`);
         }
         if (srcsetSizes?.length) {
-            const urlWithParams = `${baseUrl}?${queryParams.join('&')}`;
+            const urlWithParams = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${queryParams.join('&')}`;
             for (const size of srcsetSizes) {
                 const { width, height } = parseContentfulImageSize(size);
                 if (width && height) {
@@ -220,29 +426,36 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, qual
                 else if (width) {
                     sourceSets.push(`${urlWithParams}&w=${width} ${width}w`);
                 }
-                else if (height) {
-                    sourceSets.push(`${urlWithParams}&h=${height} ${height}h`);
+                else if (height && imageDimensions?.width && imageDimensions.height) {
+                    const derivedWidth = Math.round((height * imageDimensions.width) / imageDimensions.height);
+                    sourceSets.push(`${urlWithParams}&w=${derivedWidth}&h=${height} ${derivedWidth}w`);
                 }
             }
         }
         sources.push({
             type,
-            srcset: sourceSets.length ? sourceSets.join(', ') : `${baseUrl}?${queryParams.join('&')}`,
+            srcset: sourceSets.length
+                ? sourceSets.join(', ')
+                : `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${queryParams.join('&')}`,
         });
     }
     return sources;
 };
 
+const optionalNumberAttribute = (value) => {
+    const transformed = numberAttribute(value);
+    return Number.isFinite(transformed) ? transformed : null;
+};
 class ContentfulImageComponent {
     constructor() {
-        this.contentfulConfig = inject(CONTENTFUL_CONFIG);
+        this.contentfulConfig = injectContentfulConfig();
         this.asset = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
-        this.backgroundColor = input(null, /* @ts-ignore */
+        this.backgroundColor = input(this.contentfulConfig.imageOptions.backgroundColor, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
         this.srcsetSizes = input(this.contentfulConfig.imageOptions.srcsetSizes, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "srcsetSizes" }] : /* istanbul ignore next */ []));
-        this.quality = input(null, { ...(ngDevMode ? { debugName: "quality" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.quality = input(null, { ...(ngDevMode ? { debugName: "quality" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
         this.focusArea = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focusArea" }] : /* istanbul ignore next */ []));
         this.resizeBehavior = input(null, /* @ts-ignore */
@@ -300,7 +513,7 @@ class ContentfulImageComponent {
       [sizes]="sizes()"
       [sources]="sourcesValue()"
     />
-  `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "defaultSrc", "alt", "figcaption", "priority", "width", "height", "aspectRatio", "sizes"], outputs: ["imgLoad", "imgError"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "defaultSrc", "alt", "figcaption", "priority", "width", "height", "aspectRatio", "sizes", "fit"], outputs: ["imgLoad", "imgError"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulImageComponent, decorators: [{
             type: Component,
@@ -326,206 +539,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], srcsetSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcsetSizes", required: false }] }], quality: [{ type: i0.Input, args: [{ isSignal: true, alias: "quality", required: false }] }], focusArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusArea", required: false }] }], resizeBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeBehavior", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }] } });
 
-class ContentfulVideoComponent {
-    constructor() {
-        this.asset = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
-        this.videoClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "videoClass" }] : /* istanbul ignore next */ []));
-        this.data = computed(() => {
-            const asset = this.asset();
-            if (!asset) {
-                return null;
-            }
-            if (isContentfulGqlAsset(asset)) {
-                return {
-                    url: asset.url,
-                    contentType: asset.contentType,
-                };
-            }
-            return {
-                url: asset.fields.file.url,
-                contentType: asset.fields.file.contentType,
-            };
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, videoClass: { classPropertyName: "videoClass", publicName: "videoClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (data(); as data) {
-      <video [ngClass]="videoClass()" controls>
-        <source src="{{ data.url }}" type="{{ data.contentType }}" />
-      </video>
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-contentful-video',
-                    template: `
-    @if (data(); as data) {
-      <video [ngClass]="videoClass()" controls>
-        <source src="{{ data.url }}" type="{{ data.contentType }}" />
-      </video>
-    }
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    imports: [NgClass],
-                }]
-        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], videoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoClass", required: false }] }] } });
-
-/**
- * The config used when no `provideContentfulConfig()` is in scope. It declares no
- * `components`, so embedded assets are skipped and hyperlinks render as plain anchors
- * until a config is provided.
- */
-const CONTENTFUL_FALLBACK_CONFIG = {
-    internalHosts: [],
-    components: {},
-    customComponents: {},
-    imageOptions: {
-        srcsetSizes: ['375w', '1280w', '1920w', '2560w'],
-        sizes: [],
-        backgroundColor: null,
-    },
-};
-const createContentfulConfig = (config = {}) => ({
-    // This default config must be inline and not saved inside a const for some weird webpack reason
-    ...{
-        internalHosts: [],
-        components: {
-            audio: ContentfulAudioComponent,
-            file: ContentfulFileComponent,
-            image: ContentfulImageComponent,
-            video: ContentfulVideoComponent,
-            link: ContentfulLinkComponent,
-        },
-        customComponents: {},
-        imageOptions: {
-            srcsetSizes: ['375w', '1280w', '1920w', '2560w'],
-            sizes: [],
-            backgroundColor: null,
-        },
-    },
-    ...(config || {}),
-});
-/**
- * Reads the contentful config from the current injector. Falls back to a config without
- * any `components` when none was provided via `provideContentfulConfig()`.
- */
-const injectContentfulConfig = () => inject(CONTENTFUL_CONFIG, { optional: true }) ?? CONTENTFUL_FALLBACK_CONFIG;
-
-const getPrimaryDomain = (host) => {
-    const parts = host.split('.');
-    return parts.length > 2 ? parts.slice(-2).join('.') : host;
-};
-class ContentfulLinkComponent {
-    constructor() {
-        this.document = inject(DOCUMENT);
-        this.config = injectContentfulConfig();
-        this.href = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
-        this.text = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-        this.textClass = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
-        this.isExternal = computed(() => {
-            const href = this.href();
-            const isAbsolute = href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//');
-            if (!isAbsolute)
-                return false;
-            try {
-                const parsed = new URL(href.startsWith('//') ? `https:${href}` : href);
-                const internalHosts = [this.document.location.host, ...this.config.internalHosts];
-                return !internalHosts.includes(parsed.host);
-            }
-            catch {
-                return true;
-            }
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isExternal" }] : /* istanbul ignore next */ []));
-        this.openInNewTab = computed(() => {
-            if (!this.isExternal())
-                return false;
-            const href = this.href();
-            try {
-                const parsed = new URL(href.startsWith('//') ? `https:${href}` : href);
-                const internalPrimaryDomains = [
-                    getPrimaryDomain(this.document.location.host),
-                    ...this.config.internalHosts.map(getPrimaryDomain),
-                ];
-                return !internalPrimaryDomains.includes(getPrimaryDomain(parsed.host));
-            }
-            catch {
-                return true;
-            }
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "openInNewTab" }] : /* istanbul ignore next */ []));
-        this.internalPath = computed(() => {
-            const href = this.href();
-            if (!href.startsWith('http://') && !href.startsWith('https://') && !href.startsWith('//')) {
-                return href;
-            }
-            try {
-                const url = new URL(href.startsWith('//') ? `https:${href}` : href);
-                return url.pathname + url.search + url.hash;
-            }
-            catch {
-                return href;
-            }
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "internalPath" }] : /* istanbul ignore next */ []));
-        this.linkClass = computed(() => {
-            const base = 'et-contentful-rich-text-default-element et-contentful-rich-text-default-a';
-            const extra = this.textClass();
-            return extra ? `${base} ${extra}` : base;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "linkClass" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ContentfulLinkComponent, isStandalone: true, selector: "et-contentful-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, textClass: { classPropertyName: "textClass", publicName: "textClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
-    @if (isExternal()) {
-      <a
-        [class]="linkClass()"
-        [href]="href()"
-        [target]="openInNewTab() ? '_blank' : null"
-        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
-        >{{ text() }}</a
-      >
-    } @else {
-      <a [class]="linkClass()" [routerLink]="internalPath()">{{ text() }}</a>
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulLinkComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-contentful-link',
-                    template: `
-    @if (isExternal()) {
-      <a
-        [class]="linkClass()"
-        [href]="href()"
-        [target]="openInNewTab() ? '_blank' : null"
-        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
-        >{{ text() }}</a
-      >
-    } @else {
-      <a [class]="linkClass()" [routerLink]="internalPath()">{{ text() }}</a>
-    }
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    imports: [RouterLink],
-                    host: {
-                        style: 'display: contents',
-                    },
-                }]
-        }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], textClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "textClass", required: false }] }] } });
-
 /**
  * The `BLOCKS` node type strings of `@contentful/rich-text-types`, as a plain literal map.
  * Keep the values in sync with the enum - they are part of the Contentful Delivery API.
+ *
+ * These maps exist because `BLOCKS` and `INLINES` are TS enums: reading one in a *value* position
+ * anywhere in this lib emits a runtime import and costs every consumer ~2.4 kB gz. Use the enums for
+ * types only - the `contentful-deps` size golden fails if that slips.
  */
 const CF_BLOCKS = {
     DOCUMENT: 'document',
@@ -679,6 +699,18 @@ const marksToTags = (marks) => {
  */
 const marksToClass = (marks) => marks.map((mark) => `et-contentful-rich-text-mark-${mark.type}`).join(' ');
 const LINK_COMPONENT_TYPE = '$$$_et-link';
+const normalizeHref = (href) => {
+    if (!href.trim()) {
+        return null;
+    }
+    try {
+        const url = new URL(href, 'https://contentful.invalid');
+        return ['http:', 'https:', 'mailto:', 'tel:', 'ftp:'].includes(url.protocol) ? href : null;
+    }
+    catch {
+        return null;
+    }
+};
 const isExecutedComponentCommandCacheItem = (cache) => {
     return cache.command.kind === 'component';
 };
@@ -752,26 +784,14 @@ class ContentfulRichTextRendererComponent {
          */
         this.richTextPath = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "richTextPath" }] : /* istanbul ignore next */ []));
-        /**
-         * A cache for all executed commands that are not deleted.
-         * This is used to keep track of all rendered elements and components.
-         * The key is the render command ID.
-         */
         this.executedCommandsCache = new Map();
-        /**
-         * A map of all includes in the contentful response.
-         * This is useful for looking up assets and entries that are referenced in the rich text without having to use loops.
-         */
         this.contentIncludesMap = computed(() => {
             const content = this.content();
-            const assets = content?.includes.Asset;
-            const entries = content?.includes.Entry;
+            const assets = content?.includes?.Asset;
+            const entries = content?.includes?.Entry;
             return createContentfulIncludeMap({ assets: assets ?? [], entries: entries ?? [] });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentIncludesMap" }] : /* istanbul ignore next */ []));
-        /**
-         * The rich text data that should be rendered.
-         */
         this.richTextData = computed(() => {
             const content = this.content();
             const richTextPath = this.richTextPath();
@@ -779,6 +799,9 @@ class ContentfulRichTextRendererComponent {
                 return null;
             }
             const richText = getObjectProperty(content, richTextPath);
+            if (richText === null || richText === undefined) {
+                return null;
+            }
             if (!isObject(richText)) {
                 throw richTextRendererError('rich_text_undefined', { content, richTextPath });
             }
@@ -796,25 +819,10 @@ class ContentfulRichTextRendererComponent {
             return this.createRenderCommands(richTextData);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "renderCommands" }] : /* istanbul ignore next */ []));
-        this.renderCommandHistory = linkedSignal({ ...(ngDevMode ? { debugName: "renderCommandHistory" } : /* istanbul ignore next */ {}), source: this.renderCommands,
-            computation: (commands, previous) => [previous?.source ?? [], commands] });
-        this.previousRenderCommandMap = computed(() => {
-            const [prevCommands] = this.renderCommandHistory();
-            const map = new Map();
-            for (const command of prevCommands) {
-                map.set(command.id, command);
-            }
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "previousRenderCommandMap" }] : /* istanbul ignore next */ []));
         this.renderInstructions = computed(() => {
             const commands = this.renderCommands();
-            const previousRenderCommandMap = this.previousRenderCommandMap();
+            const previousRenderCommandMap = new Map([...this.executedCommandsCache.entries()].map(([id, item]) => [id, item.command]));
             const instructions = [];
-            // Decide, in document order, which commands survive the change with their DOM intact.
-            // A plain element or text node survives when the same id renders the same output at the same
-            // spot inside a surviving parent. Ancestors are decided first because parents precede their
-            // children in command order. Components survive on id alone — their DOM can be reattached.
             const preserved = new Set();
             const needsReattach = new Set();
             const parentIdOf = (command) => {
@@ -842,7 +850,6 @@ class ContentfulRichTextRendererComponent {
                 if (!previous || previous.kind !== command.kind) {
                     continue;
                 }
-                // The same key must render the same component class — a changed class means a fresh instance.
                 if (previous.kind === 'component' && command.kind === 'component' && previous.component !== command.component) {
                     continue;
                 }
@@ -871,15 +878,11 @@ class ContentfulRichTextRendererComponent {
                     preserved.add(command.id);
                 }
             }
-            // Everything that did not survive is removed first, so the ordered pass below can rebuild
-            // into a clean tree. Close commands never render DOM and are skipped throughout.
             for (const [id, command] of previousRenderCommandMap) {
                 if (command.kind !== 'htmlClose' && !preserved.has(id)) {
                     instructions.push({ type: 'delete', command });
                 }
             }
-            // One pass in document order: parents are created before a child component is reattached.
-            // Surviving plain elements still get an update so the cache tracks their fresh command data.
             for (const command of commands) {
                 if (command.kind === 'htmlClose') {
                     continue;
@@ -903,17 +906,11 @@ class ContentfulRichTextRendererComponent {
         });
     }
     createRenderCommands(richTextData) {
-        /** List of all render commands */
         const rootCommands = [];
-        /** Counter for generating unique html element IDs. */
         let elementOpenId = 0;
-        /** Counter for generating unique html element IDs. */
         let elementCloseId = 0;
-        /** Counter for generating unique component IDs. */
         const componentIdMap = new Map();
-        /** The nesting level of the current node. */
         let nestingLevel = 0;
-        /** The position (index) of the current node inside the parent node. */
         let domPosition = 0;
         let textId = 0;
         let commandIndex = 0;
@@ -950,8 +947,6 @@ class ContentfulRichTextRendererComponent {
                     }
                     const contentType = asset.fields.file.contentType;
                     const assetComponents = this.config.components;
-                    // Every property inside the asset will be null if no file was provided for a translation.
-                    // In this case, we can assume that the asset is missing due to user error.
                     const isMissing = !contentType && !asset.fields.file.url;
                     if (isMissing) {
                         if (isDevMode()) {
@@ -991,9 +986,18 @@ class ContentfulRichTextRendererComponent {
                     domPosition++;
                     break;
                 }
-                case CF_INLINES.HYPERLINK: {
-                    const uri = node.data['uri'] ?? '';
-                    // Collect all text and marks from children (hyperlink children are text nodes)
+                case CF_INLINES.HYPERLINK:
+                case CF_INLINES.ASSET_HYPERLINK:
+                case CF_INLINES.ENTRY_HYPERLINK: {
+                    let href = null;
+                    if (node.nodeType === CF_INLINES.HYPERLINK) {
+                        href = normalizeHref(node.data['uri'] ?? '');
+                    }
+                    else if (node.nodeType === CF_INLINES.ASSET_HYPERLINK) {
+                        const assetId = node.data['target']?.sys?.id;
+                        const asset = assetId ? this.contentIncludesMap().getAsset(assetId) : null;
+                        href = asset?.fields.file.url ? normalizeHref(asset.fields.file.url) : null;
+                    }
                     let linkText = '';
                     const linkMarks = [];
                     for (const child of node.content) {
@@ -1002,9 +1006,8 @@ class ContentfulRichTextRendererComponent {
                             linkMarks.push(...child.marks);
                         }
                     }
-                    const linkComponent = this.config.components.link;
-                    if (!linkComponent) {
-                        // Without a link component the hyperlink still renders - as a plain anchor.
+                    const linkComponent = href ? this.config.components.link : null;
+                    if (href && !linkComponent) {
                         rootCommands.push({
                             kind: 'htmlOpen',
                             nestingLevel,
@@ -1012,7 +1015,7 @@ class ContentfulRichTextRendererComponent {
                             index: commandIndex++,
                             attributes: {
                                 class: 'et-contentful-rich-text-default-element et-contentful-rich-text-default-a',
-                                href: uri,
+                                href,
                             },
                             tagName: 'a',
                             id: 'e-o' + elementOpenId++,
@@ -1045,6 +1048,25 @@ class ContentfulRichTextRendererComponent {
                         domPosition++;
                         break;
                     }
+                    if (!href) {
+                        rootCommands.push({
+                            kind: 'text',
+                            nestingLevel,
+                            domPosition,
+                            index: commandIndex++,
+                            attributes: {
+                                class: 'et-contentful-rich-text-default-element et-contentful-rich-text-default-span',
+                            },
+                            markTags: marksToTags(linkMarks),
+                            text: linkText,
+                            id: 't' + textId++,
+                        });
+                        domPosition++;
+                        break;
+                    }
+                    if (!linkComponent) {
+                        break;
+                    }
                     const textClass = linkMarks.length ? marksToClass(linkMarks) : '';
                     let linkComponentId = componentIdMap.get(LINK_COMPONENT_TYPE) ?? -1;
                     const linkId = LINK_COMPONENT_TYPE + ++linkComponentId;
@@ -1055,7 +1077,7 @@ class ContentfulRichTextRendererComponent {
                         domPosition,
                         index: commandIndex++,
                         component: linkComponent,
-                        inputs: { href: uri, text: linkText, textClass },
+                        inputs: { href, text: linkText, textClass },
                         id: linkId,
                     });
                     domPosition++;
@@ -1116,17 +1138,18 @@ class ContentfulRichTextRendererComponent {
                         id: 'e-o' + elementOpenId++,
                     });
                     const domPositionAtThisLevel = domPosition;
-                    // Normal html elements can have children
+                    nestingLevel++;
+                    domPosition = 0;
                     for (const child of node.content) {
-                        domPosition = 0;
-                        nestingLevel++;
                         traverse(child);
-                        nestingLevel--;
-                        domPosition = domPositionAtThisLevel;
                     }
+                    nestingLevel--;
+                    domPosition = domPositionAtThisLevel;
                     const lastCommand = rootCommands[rootCommands.length - 1];
-                    if (lastCommand?.kind === 'htmlOpen' && lastCommand.tagName !== 'td' && lastCommand.tagName !== 'hr') {
-                        // If the last command is an open command, we can remove it since it's empty
+                    if (lastCommand?.kind === 'htmlOpen' &&
+                        lastCommand.tagName !== 'td' &&
+                        lastCommand.tagName !== 'th' &&
+                        lastCommand.tagName !== 'hr') {
                         rootCommands.pop();
                         elementOpenId--;
                         commandIndex--;
@@ -1175,7 +1198,6 @@ class ContentfulRichTextRendererComponent {
         if (command.kind === 'component') {
             const inputs = signal(command.inputs, /* @ts-ignore */
             ...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
-            // Components may declare any subset of the offered inputs — only bind the declared ones.
             const declaredInputs = reflectComponentType(command.component)?.inputs ?? [];
             const bindings = declaredInputs
                 .filter((declared) => declared.propName in command.inputs)
@@ -1192,15 +1214,10 @@ class ContentfulRichTextRendererComponent {
         }
         else if (command.kind === 'text') {
             const span = this.renderer.createElement('span');
-            const textSplitInLineBreaks = command.text.split('\n').filter((t) => t.trim().length > 0);
+            const textSplitInLineBreaks = command.text.split('\n');
             for (const [key, value] of Object.entries(command.attributes)) {
                 this.renderer.setAttribute(span, key, value);
             }
-            if (command.text.startsWith('\n')) {
-                const brNode = this.renderer.createElement('br');
-                this.renderer.appendChild(parentElement, brNode);
-            }
-            // Marks are rendered as nested semantic elements inside the span, outermost mark first.
             let textContainer = span;
             for (const tag of command.markTags) {
                 const markElement = this.renderer.createElement(tag);
@@ -1212,8 +1229,10 @@ class ContentfulRichTextRendererComponent {
                     const brNode = this.renderer.createElement('br');
                     this.renderer.appendChild(textContainer, brNode);
                 }
-                const textNode = this.renderer.createText(textPart);
-                this.renderer.appendChild(textContainer, textNode);
+                if (textPart) {
+                    const textNode = this.renderer.createText(textPart);
+                    this.renderer.appendChild(textContainer, textNode);
+                }
             }
             this.renderInsertOrAppend(span, parentElement, nextElement);
             this.executedCommandsCache.set(command.id, {
@@ -1244,8 +1263,6 @@ class ContentfulRichTextRendererComponent {
             }
             cached.inputs.set(command.inputs);
         }
-        // `cached` and the fresh `command` share the same id and therefore the same union variant,
-        // but TS can't correlate the two after the spread — assert the merged object as the union.
         this.executedCommandsCache.set(command.id, {
             ...cached,
             command,
@@ -1306,8 +1323,6 @@ class ContentfulRichTextRendererComponent {
             parentElement = hostElement;
         }
         else {
-            // Reverse search all render commands beginning from the current one.
-            // The parent is the closest preceding html open command one nesting level up.
             const allCommands = this.renderCommands();
             let parentCommand = null;
             for (let i = command.index - 1; i >= 0; i--) {
@@ -1321,24 +1336,24 @@ class ContentfulRichTextRendererComponent {
                 }
             }
             if (!parentCommand) {
-                throw new Error('Parent command not found!');
+                throw richTextRendererError('text_parent_not_found', { command });
             }
             parentElement = this.executedCommandsCache.get(parentCommand.id)?.element;
         }
         if (!parentElement) {
-            throw new Error('Parent element not found!');
+            throw richTextRendererError('text_parent_wrong_type', { command });
         }
         return parentElement;
     }
     findFollowingElement(command) {
-        // Find the closest already rendered element at the same nesting level with a greater
-        // domPosition, to insert before. Without one the element is appended to the parent.
+        const parentElement = this.findParent(command);
         let nextElement;
         let nextDomPosition = Infinity;
         for (const cached of this.executedCommandsCache.values()) {
             if (cached.command.domPosition > command.domPosition &&
                 cached.command.domPosition < nextDomPosition &&
                 cached.command.nestingLevel === command.nestingLevel &&
+                cached.element.parentElement === parentElement &&
                 cached.command.id !== command.id) {
                 nextElement = cached.element;
                 nextDomPosition = cached.command.domPosition;
@@ -1377,7 +1392,7 @@ const ContentfulImports = [
     ContentfulRichTextRendererComponent,
 ];
 
-const provideContentfulConfig = (contentfulConfig = {}) => {
+const provideContentfulConfig = (contentfulConfig) => {
     return { provide: CONTENTFUL_CONFIG, useValue: createContentfulConfig(contentfulConfig) };
 };
 const isContentfulEntryType = (entry, type) => entry.sys.contentType.sys.id === type;