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

package/fesm2022/ethlete-contentful.mjs

@@ -1,15 +1,11 @@
 import { NgClass, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, Component, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, ElementRef, reflectComponentType } from '@angular/core';
-import { gql } from '@ethlete/query';
-import { normalizePictureSizes, PictureComponent } from '@ethlete/cdk';
+import { input, computed, ViewEncapsulation, Component, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, ElementRef, linkedSignal, effect, untracked, signal, reflectComponentType, inputBinding } from '@angular/core';
+import { normalizePictureSizes, PictureComponent } from '@ethlete/components';
 import { RouterLink } from '@angular/router';
-import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { INLINES, BLOCKS } from '@contentful/rich-text-types';
 import { RuntimeError, isObject, injectRenderer, getObjectProperty } from '@ethlete/core';
-import { startWith, pairwise, tap } from 'rxjs';
 
-const GQL_FRAGMENT_CONTENTFUL_ASSET = gql `
+const GQL_FRAGMENT_CONTENTFUL_ASSET = `
   fragment AssetData on Asset {
     sys {
       id
@@ -56,8 +52,8 @@ class ContentfulAudioComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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.ɵ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: `
     @if (data(); as data) {
       <figure [ngClass]="figureClass()">
         <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
@@ -66,7 +62,7 @@ class ContentfulAudioComponent {
     }
   `, 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.5", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-audio',
@@ -111,8 +107,8 @@ class ContentfulFileComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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.ɵ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: `
     @if (data(); as data) {
       <a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
         {{ data.title }} ({{ data.size }} Bytes)
@@ -120,7 +116,7 @@ class ContentfulFileComponent {
     }
   `, 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.5", ngImport: i0, type: ContentfulFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulFileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-file',
@@ -189,13 +185,13 @@ const parseContentfulImageSize = (size) => {
         height: height ? parseInt(height, 10) : null,
     };
 };
+const SOURCE_TYPES = ['image/avif', 'image/webp', 'image/png', 'image/jpg'];
 const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior) => {
     const assetData = data;
     if (!assetData) {
         return [];
     }
     const sources = [];
-    const SOURCE_TYPES = ['image/avif', 'image/webp', 'image/png', 'image/jpg'];
     for (const type of SOURCE_TYPES) {
         const baseUrl = isContentfulGqlAsset(assetData) ? assetData.url : assetData.fields.file.url;
         const sourceSets = [];
@@ -239,28 +235,20 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, qual
 
 class ContentfulImageComponent {
     constructor() {
-        this._contentfulConfig = inject(CONTENTFUL_CONFIG);
+        this.contentfulConfig = inject(CONTENTFUL_CONFIG);
         this.asset = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
         this.backgroundColor = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
-        this.srcsetSizes = input(this._contentfulConfig.imageOptions.srcsetSizes, /* @ts-ignore */
+        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.focusArea = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focusArea" }] : /* istanbul ignore next */ []));
         this.resizeBehavior = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizeBehavior" }] : /* istanbul ignore next */ []));
-        this.hasPriority = input(false, { ...(ngDevMode ? { debugName: "hasPriority" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.imgClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "imgClass" }] : /* istanbul ignore next */ []));
-        this.figureClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "figureClass" }] : /* istanbul ignore next */ []));
-        this.figcaptionClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "figcaptionClass" }] : /* istanbul ignore next */ []));
-        this.pictureClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pictureClass" }] : /* istanbul ignore next */ []));
-        this.sizes = input(normalizePictureSizes(this._contentfulConfig.imageOptions.sizes), { ...(ngDevMode ? { debugName: "sizes" } : /* istanbul ignore next */ {}), transform: (v) => normalizePictureSizes(v) });
+        this.priority = input(false, { ...(ngDevMode ? { debugName: "priority" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.sizes = input(normalizePictureSizes(this.contentfulConfig.imageOptions.sizes), { ...(ngDevMode ? { debugName: "sizes" } : /* istanbul ignore next */ {}), transform: (v) => normalizePictureSizes(v) });
         this.normalizedAsset = computed(() => {
             const asset = this.asset();
             if (isContentfulGqlAsset(asset)) {
@@ -281,7 +269,7 @@ class ContentfulImageComponent {
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "normalizedAsset" }] : /* istanbul ignore next */ []));
-        this._sources = computed(() => {
+        this.sourcesValue = computed(() => {
             const asset = this.asset();
             const backgroundColor = this.backgroundColor();
             const srcsetSizes = this.srcsetSizes();
@@ -293,49 +281,41 @@ class ContentfulImageComponent {
             }
             return generateContentfulImageSources(asset, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior);
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_sources" }] : /* istanbul ignore next */ []));
-        this._defaultSrc = computed(() => {
+        ...(ngDevMode ? [{ debugName: "sourcesValue" }] : /* istanbul ignore next */ []));
+        this.defaultSrcValue = computed(() => {
             const asset = this.asset();
             return asset ? generateDefaultContentfulImageSource(asset) : null;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_defaultSrc" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "defaultSrcValue" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, srcsetSizes: { classPropertyName: "srcsetSizes", publicName: "srcsetSizes", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null }, focusArea: { classPropertyName: "focusArea", publicName: "focusArea", isSignal: true, isRequired: false, transformFunction: null }, resizeBehavior: { classPropertyName: "resizeBehavior", publicName: "resizeBehavior", isSignal: true, isRequired: false, transformFunction: null }, hasPriority: { classPropertyName: "hasPriority", publicName: "hasPriority", isSignal: true, isRequired: false, transformFunction: null }, imgClass: { classPropertyName: "imgClass", publicName: "imgClass", 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 }, pictureClass: { classPropertyName: "pictureClass", publicName: "pictureClass", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-image" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, srcsetSizes: { classPropertyName: "srcsetSizes", publicName: "srcsetSizes", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null }, focusArea: { classPropertyName: "focusArea", publicName: "focusArea", isSignal: true, isRequired: false, transformFunction: null }, resizeBehavior: { classPropertyName: "resizeBehavior", publicName: "resizeBehavior", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-image" }, ngImport: i0, template: `
     <et-picture
-      [imgClass]="imgClass()"
-      [hasPriority]="hasPriority()"
-      [figureClass]="figureClass()"
-      [pictureClass]="pictureClass()"
-      [figcaptionClass]="figcaptionClass()"
-      [defaultSrc]="_defaultSrc()"
-      [alt]="normalizedAsset().alt ?? null"
+      [priority]="priority()"
+      [defaultSrc]="defaultSrcValue()"
+      [alt]="normalizedAsset().alt ?? ''"
       [figcaption]="normalizedAsset().figcaption ?? null"
       [width]="normalizedAsset().width ?? null"
       [height]="normalizedAsset().height ?? null"
       [sizes]="sizes()"
-      [sources]="_sources()"
+      [sources]="sourcesValue()"
     />
-  `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "hasPriority", "imgClass", "figureClass", "figcaptionClass", "pictureClass", "defaultSrc", "alt", "figcaption", "width", "height", "sizes"], outputs: ["imgLoaded", "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"], outputs: ["imgLoad", "imgError"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentfulImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulImageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-image',
                     template: `
     <et-picture
-      [imgClass]="imgClass()"
-      [hasPriority]="hasPriority()"
-      [figureClass]="figureClass()"
-      [pictureClass]="pictureClass()"
-      [figcaptionClass]="figcaptionClass()"
-      [defaultSrc]="_defaultSrc()"
-      [alt]="normalizedAsset().alt ?? null"
+      [priority]="priority()"
+      [defaultSrc]="defaultSrcValue()"
+      [alt]="normalizedAsset().alt ?? ''"
       [figcaption]="normalizedAsset().figcaption ?? null"
       [width]="normalizedAsset().width ?? null"
       [height]="normalizedAsset().height ?? null"
       [sizes]="sizes()"
-      [sources]="_sources()"
+      [sources]="sourcesValue()"
     />
   `,
                     encapsulation: ViewEncapsulation.None,
@@ -344,7 +324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         class: 'et-contentful-image',
                     },
                 }]
-        }], 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 }] }], hasPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPriority", required: false }] }], imgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgClass", required: false }] }], figureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureClass", required: false }] }], figcaptionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figcaptionClass", required: false }] }], pictureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pictureClass", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }] } });
+        }], 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() {
@@ -370,8 +350,8 @@ class ContentfulVideoComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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: `
+    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 }}" />
@@ -379,7 +359,7 @@ class ContentfulVideoComponent {
     }
   `, 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.5", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-video',
@@ -395,10 +375,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], 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
     ...{
-        useTailwindClasses: false,
         internalHosts: [],
         components: {
             audio: ContentfulAudioComponent,
@@ -416,6 +410,11 @@ const createContentfulConfig = (config = {}) => ({
     },
     ...(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('.');
@@ -423,8 +422,8 @@ const getPrimaryDomain = (host) => {
 };
 class ContentfulLinkComponent {
     constructor() {
-        this._document = inject(DOCUMENT);
-        this._config = inject(CONTENTFUL_CONFIG, { optional: true }) ?? createContentfulConfig();
+        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 */
@@ -438,7 +437,7 @@ class ContentfulLinkComponent {
                 return false;
             try {
                 const parsed = new URL(href.startsWith('//') ? `https:${href}` : href);
-                const internalHosts = [this._document.location.host, ...this._config.internalHosts];
+                const internalHosts = [this.document.location.host, ...this.config.internalHosts];
                 return !internalHosts.includes(parsed.host);
             }
             catch {
@@ -453,8 +452,8 @@ class ContentfulLinkComponent {
             try {
                 const parsed = new URL(href.startsWith('//') ? `https:${href}` : href);
                 const internalPrimaryDomains = [
-                    getPrimaryDomain(this._document.location.host),
-                    ...this._config.internalHosts.map(getPrimaryDomain),
+                    getPrimaryDomain(this.document.location.host),
+                    ...this.config.internalHosts.map(getPrimaryDomain),
                 ];
                 return !internalPrimaryDomains.includes(getPrimaryDomain(parsed.host));
             }
@@ -484,8 +483,8 @@ class ContentfulLinkComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "linkClass" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentfulLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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: `
+    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()"
@@ -499,7 +498,7 @@ class ContentfulLinkComponent {
     }
   `, 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.5", ngImport: i0, type: ContentfulLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-link',
@@ -516,14 +515,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <a [class]="linkClass()" [routerLink]="internalPath()">{{ text() }}</a>
     }
   `,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [RouterLink],
                     host: {
                         style: 'display: contents',
                     },
-                    imports: [RouterLink],
-                    encapsulation: ViewEncapsulation.None,
                 }]
         }], 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.
+ */
+const CF_BLOCKS = {
+    DOCUMENT: 'document',
+    PARAGRAPH: 'paragraph',
+    HEADING_1: 'heading-1',
+    HEADING_2: 'heading-2',
+    HEADING_3: 'heading-3',
+    HEADING_4: 'heading-4',
+    HEADING_5: 'heading-5',
+    HEADING_6: 'heading-6',
+    OL_LIST: 'ordered-list',
+    UL_LIST: 'unordered-list',
+    LIST_ITEM: 'list-item',
+    HR: 'hr',
+    QUOTE: 'blockquote',
+    EMBEDDED_ENTRY: 'embedded-entry-block',
+    EMBEDDED_ASSET: 'embedded-asset-block',
+    EMBEDDED_RESOURCE: 'embedded-resource-block',
+    TABLE: 'table',
+    TABLE_ROW: 'table-row',
+    TABLE_CELL: 'table-cell',
+    TABLE_HEADER_CELL: 'table-header-cell',
+};
+/**
+ * The `INLINES` 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.
+ */
+const CF_INLINES = {
+    ASSET_HYPERLINK: 'asset-hyperlink',
+    EMBEDDED_ENTRY: 'embedded-entry-inline',
+    EMBEDDED_RESOURCE: 'embedded-resource-inline',
+    ENTRY_HYPERLINK: 'entry-hyperlink',
+    HYPERLINK: 'hyperlink',
+    RESOURCE_HYPERLINK: 'resource-hyperlink',
+};
+
 const RICH_TEXT_RENDERER_ERRORS = {
     rich_text_undefined: 'The property value given at richTextPath is undefined. Use the richTextPath input to specify the path to the rich text object.',
     rich_text_wrong_type: 'The rich text object does not satisfy the RichTextResponse interface. It should contain a property named "nodeType" with the value "document".',
@@ -535,10 +573,17 @@ const RICH_TEXT_RENDERER_ERRORS = {
     text_parent_not_found: 'The parent node is not found. This structure is not supported.',
     text_parent_wrong_type: 'The parent node neither a html element nor a custom component. This structure is not supported.',
 };
-const RICH_TEXT_RENDERER_ERROR_CODES = Object.keys(RICH_TEXT_RENDERER_ERRORS).reduce((acc, key, index) => {
-    acc[key] = index;
-    return acc;
-}, {});
+const RICH_TEXT_RENDERER_ERROR_CODES = {
+    rich_text_undefined: 0,
+    rich_text_wrong_type: 1,
+    asset_id_not_found: 2,
+    entry_id_not_found: 3,
+    asset_not_found: 4,
+    entry_not_found: 5,
+    custom_component_not_found: 6,
+    text_parent_not_found: 7,
+    text_parent_wrong_type: 8,
+};
 const richTextRendererError = (code, data) => {
     const message = `<et-contentful-rich-text-renderer>: ${RICH_TEXT_RENDERER_ERRORS[code]}`;
     throw new RuntimeError(RICH_TEXT_RENDERER_ERROR_CODES[code], message, data);
@@ -549,160 +594,93 @@ const isRichTextRootNode = (node) => {
 };
 const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
     switch (nodeType) {
-        case BLOCKS.HEADING_1:
+        case CF_BLOCKS.HEADING_1:
             return 'h1';
-        case BLOCKS.HEADING_2:
+        case CF_BLOCKS.HEADING_2:
             return 'h2';
-        case BLOCKS.HEADING_3:
+        case CF_BLOCKS.HEADING_3:
             return 'h3';
-        case BLOCKS.HEADING_4:
+        case CF_BLOCKS.HEADING_4:
             return 'h4';
-        case BLOCKS.HEADING_5:
+        case CF_BLOCKS.HEADING_5:
             return 'h5';
-        case BLOCKS.HEADING_6:
+        case CF_BLOCKS.HEADING_6:
             return 'h6';
-        case BLOCKS.PARAGRAPH:
+        case CF_BLOCKS.PARAGRAPH:
             return 'p';
-        case BLOCKS.UL_LIST:
+        case CF_BLOCKS.UL_LIST:
             return 'ul';
-        case BLOCKS.OL_LIST:
+        case CF_BLOCKS.OL_LIST:
             return 'ol';
-        case BLOCKS.LIST_ITEM:
+        case CF_BLOCKS.LIST_ITEM:
             return 'li';
-        case BLOCKS.HR:
+        case CF_BLOCKS.HR:
             return 'hr';
-        case BLOCKS.QUOTE:
+        case CF_BLOCKS.QUOTE:
             return 'blockquote';
-        case BLOCKS.TABLE:
+        case CF_BLOCKS.TABLE:
             return 'table';
-        case BLOCKS.TABLE_ROW:
+        case CF_BLOCKS.TABLE_ROW:
             return 'tr';
-        case BLOCKS.TABLE_CELL:
+        case CF_BLOCKS.TABLE_CELL:
             return 'td';
-        case BLOCKS.TABLE_HEADER_CELL:
+        case CF_BLOCKS.TABLE_HEADER_CELL:
             return 'th';
-        case BLOCKS.EMBEDDED_ASSET:
+        case CF_BLOCKS.EMBEDDED_ASSET:
             return 'div';
-        case INLINES.ENTRY_HYPERLINK:
+        case CF_INLINES.ENTRY_HYPERLINK:
             return 'a';
-        case INLINES.ASSET_HYPERLINK:
+        case CF_INLINES.ASSET_HYPERLINK:
             return 'a';
         case 'text':
             return 'span';
         // Will be ignored by the renderer
         case 'document':
             return 'div';
-        case BLOCKS.EMBEDDED_ENTRY:
+        case CF_BLOCKS.EMBEDDED_ENTRY:
             return 'div';
-        case INLINES.EMBEDDED_ENTRY:
+        case CF_INLINES.EMBEDDED_ENTRY:
             return 'div';
         default:
             return 'div';
     }
 };
 
-const RENDER_COMMAND_TYPE = {
-    HTML_OPEN: 0,
-    HTML_CLOSE: 1,
-    TEXT: 2,
-    COMPONENT: 3,
-};
-const RENDER_COMMAND_POSITION = {
-    TYPE: 0,
-    NESTING_LEVEL: 1,
-    DOM_POSITION: 2,
-    INDEX: 3,
-};
-const HTML_OPEN_RENDER_COMMAND_POSITION = {
-    ATTRIBUTES: 4,
-    TAG_NAME: 5,
-    ELEMENT_ID: 6,
+const MARK_TAG_MAP = {
+    bold: 'strong',
+    italic: 'em',
+    underline: 'u',
+    code: 'code',
+    strikethrough: 's',
+    subscript: 'sub',
+    superscript: 'sup',
 };
-const HTML_CLOSE_RENDER_COMMAND_POSITION = {
-    TAG_NAME: 4,
-    ELEMENT_ID: 5,
-};
-const TEXT_RENDER_COMMAND_POSITION = {
-    ATTRIBUTES: 4,
-    TEXT: 5,
-    TEXT_ID: 6,
-};
-const COMPONENT_RENDER_COMMAND_POSITION = {
-    ATTRIBUTES: 4,
-    COMPONENT: 5,
-    INPUTS: 6,
-    COMPONENT_ID: 7,
-};
-const RENDER_INSTRUCTION_POSITION = {
-    TYPE: 0,
-    COMMAND: 1,
-};
-const RENDER_INSTRUCTION_TYPE = {
-    CREATE: 0,
-    UPDATE: 1,
-    DELETE: 2,
-    MOVE: 3,
-};
-const MARK_TAILWIND_MAP = {
-    bold: 'font-bold',
-    italic: 'italic',
-    underline: 'underline',
-    code: 'font-mono',
-};
-const marksToClass = (marks) => {
-    const classes = [];
+/**
+ * Translates contentful text marks into the semantic html elements the marked text is
+ * wrapped in, outermost first. Unknown marks are skipped (with a dev-mode warning).
+ */
+const marksToTags = (marks) => {
+    const tags = [];
     for (const mark of marks) {
-        let klass = MARK_TAILWIND_MAP[mark.type];
-        if (!klass) {
-            console.warn(`No class found for mark type! Falling back to "${mark.type}".`, mark);
-            klass = mark.type;
+        const tag = MARK_TAG_MAP[mark.type];
+        if (!tag) {
+            if (isDevMode()) {
+                console.warn(`No element found for mark type "${mark.type}"! The mark is ignored.`, mark);
+            }
+            continue;
         }
-        classes.push(klass);
-    }
-    return classes.join(' ');
-};
-const isHtmlOpenRenderCommand = (command) => {
-    return command[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.HTML_OPEN;
-};
-const isHtmlCloseRenderCommand = (command) => {
-    return command[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.HTML_CLOSE;
-};
-const isTextRenderCommand = (command) => {
-    return command[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.TEXT;
-};
-const isComponentRenderCommand = (command) => {
-    return command[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.COMPONENT;
-};
-const getRenderCommandId = (command) => {
-    if (isHtmlOpenRenderCommand(command)) {
-        return command[HTML_OPEN_RENDER_COMMAND_POSITION.ELEMENT_ID];
-    }
-    else if (isHtmlCloseRenderCommand(command)) {
-        return command[HTML_CLOSE_RENDER_COMMAND_POSITION.ELEMENT_ID];
-    }
-    else if (isTextRenderCommand(command)) {
-        return command[TEXT_RENDER_COMMAND_POSITION.TEXT_ID];
-    }
-    else {
-        return command[COMPONENT_RENDER_COMMAND_POSITION.COMPONENT_ID];
+        tags.push(tag);
     }
+    return tags;
 };
-const CLASS_ATTR = 'class';
-const DEFAULT_COMPONENT_TYPES = {
-    IMAGE: '$$$_et-image',
-    VIDEO: '$$$_et-video',
-    AUDIO: '$$$_et-audio',
-    FILE: '$$$_et-file',
-    LINK: '$$$_et-link',
-};
+/**
+ * The classes marked text inside a hyperlink is rendered with, since the link component
+ * receives its text as a plain string.
+ */
+const marksToClass = (marks) => marks.map((mark) => `et-contentful-rich-text-mark-${mark.type}`).join(' ');
+const LINK_COMPONENT_TYPE = '$$$_et-link';
 const isExecutedComponentCommandCacheItem = (cache) => {
-    return isComponentRenderCommand(cache.command);
-};
-const isExecutedHtmlOrTextCommandCacheItem = (cache) => {
-    return isHtmlCloseRenderCommand(cache.command) || isHtmlOpenRenderCommand(cache.command);
-};
-const isExecutedTextCommandCacheItem = (cache) => {
-    return isTextRenderCommand(cache.command);
+    return cache.command.kind === 'component';
 };
 const ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID = '$$$_et-contentful-any-entry-content-type-sys-id';
 /**
@@ -758,17 +736,10 @@ const createContentfulIncludeMap = (config) => {
 };
 class ContentfulRichTextRendererComponent {
     constructor() {
-        this._viewContainerRef = inject(ViewContainerRef);
-        this._renderer = injectRenderer();
-        this._elementRef = inject(ElementRef);
-        this._document = inject(DOCUMENT);
-        this._config = inject(CONTENTFUL_CONFIG, { optional: true }) ?? createContentfulConfig();
-        /**
-         * 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 element ID.
-         */
-        this._executedCommandsCache = new Map();
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = injectRenderer();
+        this.elementRef = inject(ElementRef);
+        this.config = injectContentfulConfig();
         /**
          * The contentful response gotten via their REST api.
          * @see https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/entries/entries-collection
@@ -781,6 +752,12 @@ 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.
@@ -816,93 +793,116 @@ class ContentfulRichTextRendererComponent {
             if (!richTextData) {
                 return [];
             }
-            return this._createRenderCommands(richTextData);
+            return this.createRenderCommands(richTextData);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "renderCommands" }] : /* istanbul ignore next */ []));
-        this.renderCommandHistory = toSignal(toObservable(this.renderCommands).pipe(startWith([]), pairwise()), { initialValue: [[], []] });
+        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(getRenderCommandId(command), command);
+                map.set(command.id, command);
             }
             return map;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "previousRenderCommandMap" }] : /* istanbul ignore next */ []));
         this.renderInstructions = computed(() => {
             const commands = this.renderCommands();
-            const previousRenderCommandMap = new Map(this.previousRenderCommandMap());
+            const previousRenderCommandMap = this.previousRenderCommandMap();
             const instructions = [];
-            // remove deleted components as well as all other elements
-            for (const [, command] of previousRenderCommandMap) {
-                if (isComponentRenderCommand(command)) {
-                    // keep the component around if it's still in the new commands
-                    if (commands.some((c) => getRenderCommandId(c) === getRenderCommandId(command))) {
-                        continue;
+            // 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) => {
+                if (command.nestingLevel === 0) {
+                    return null;
+                }
+                for (let i = command.index - 1; i >= 0; i--) {
+                    const cmd = commands[i];
+                    if (cmd && cmd.nestingLevel === command.nestingLevel - 1 && cmd.kind === 'htmlOpen') {
+                        return cmd.id;
                     }
                 }
-                instructions.push([RENDER_INSTRUCTION_TYPE.DELETE, command]);
-                // remove from map to mark as used
-                previousRenderCommandMap.delete(getRenderCommandId(command));
-            }
-            // Find the indexes of the commands remaining in the previousRenderCommandMap in the new commands array.
-            const lastComponentIndexes = [];
-            for (const [id, command] of previousRenderCommandMap) {
-                const index = commands.findIndex((c) => getRenderCommandId(c) === id);
-                const newCommand = commands[index];
-                if (index === -1) {
-                    throw new Error('Command not found!');
+                return null;
+            };
+            const markTagsEqual = (a, b) => a.length === b.length && a.every((tag, index) => tag === b[index]);
+            const attributesEqual = (a, b) => {
+                const aKeys = Object.keys(a);
+                return aKeys.length === Object.keys(b).length && aKeys.every((key) => a[key] === b[key]);
+            };
+            for (const command of commands) {
+                if (command.kind === 'htmlClose') {
+                    continue;
                 }
-                lastComponentIndexes.push({
-                    newIndex: index,
-                    prevIndex: command[RENDER_COMMAND_POSITION.INDEX],
-                    command: newCommand,
-                });
-            }
-            lastComponentIndexes.sort((a, b) => a.newIndex - b.newIndex);
-            // check if the prevIndex are in order ascending
-            // for indexes that are not in order, create a move instruction
-            // for indexes that are in order, create an update instruction
-            let moveCheckIndex = 0;
-            while (moveCheckIndex < lastComponentIndexes.length - 1) {
-                const moveCurr = lastComponentIndexes[moveCheckIndex];
-                const moveNext = lastComponentIndexes[moveCheckIndex + 1];
-                if (!moveCurr || !moveNext) {
-                    break;
+                const previous = previousRenderCommandMap.get(command.id);
+                if (!previous || previous.kind !== command.kind) {
+                    continue;
                 }
-                if (moveCurr.prevIndex > moveNext.prevIndex) {
-                    lastComponentIndexes.splice(moveCheckIndex + 1, 1);
-                    instructions.push([RENDER_INSTRUCTION_TYPE.MOVE, moveNext.command]);
+                // 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;
                 }
-                else {
-                    instructions.push([RENDER_INSTRUCTION_TYPE.UPDATE, moveNext.command]);
-                    moveCheckIndex++;
+                const parentId = parentIdOf(command);
+                const parentPreserved = parentId === null || preserved.has(parentId);
+                if (command.kind === 'component') {
+                    preserved.add(command.id);
+                    const samePlace = parentPreserved &&
+                        previous.nestingLevel === command.nestingLevel &&
+                        previous.domPosition === command.domPosition;
+                    if (!samePlace) {
+                        needsReattach.add(command.id);
+                    }
+                    continue;
+                }
+                const sameOutput = previous.kind === command.kind &&
+                    (previous.kind !== 'htmlOpen' || previous.tagName === command.tagName) &&
+                    (previous.kind !== 'text' ||
+                        (previous.text === command.text &&
+                            markTagsEqual(previous.markTags, command.markTags)));
+                if (parentPreserved &&
+                    sameOutput &&
+                    previous.nestingLevel === command.nestingLevel &&
+                    previous.domPosition === command.domPosition &&
+                    attributesEqual(previous.attributes, command.attributes)) {
+                    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) {
-                const id = getRenderCommandId(command);
-                if (isComponentRenderCommand(command)) {
-                    const previousCommand = previousRenderCommandMap.get(id);
-                    if (!previousCommand) {
-                        // create
-                        instructions.push([RENDER_INSTRUCTION_TYPE.CREATE, command]);
-                    }
+                if (command.kind === 'htmlClose') {
+                    continue;
+                }
+                if (!preserved.has(command.id)) {
+                    instructions.push({ type: 'create', command });
+                }
+                else if (command.kind === 'component' && needsReattach.has(command.id)) {
+                    instructions.push({ type: 'move', command });
                 }
                 else {
-                    // create
-                    instructions.push([RENDER_INSTRUCTION_TYPE.CREATE, command]);
+                    instructions.push({ type: 'update', command });
                 }
             }
             return instructions;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "renderInstructions" }] : /* istanbul ignore next */ []));
-        toObservable(this.renderInstructions)
-            .pipe(takeUntilDestroyed(), tap((instructions) => {
-            this._execInstructions(instructions);
-        }))
-            .subscribe();
+        effect(() => {
+            const instructions = this.renderInstructions();
+            untracked(() => this.execInstructions(instructions));
+        });
     }
-    _createRenderCommands(richTextData) {
+    createRenderCommands(richTextData) {
         /** List of all render commands */
         const rootCommands = [];
         /** Counter for generating unique html element IDs. */
@@ -920,32 +920,26 @@ class ContentfulRichTextRendererComponent {
         const traverse = (node) => {
             switch (node.nodeType) {
                 case 'text': {
-                    // Render media
-                    const type = RENDER_COMMAND_TYPE.TEXT;
                     const text = node.value;
                     if (!text)
                         break;
                     const attributes = {
                         class: 'et-contentful-rich-text-default-element et-contentful-rich-text-default-span',
                     };
-                    if (node.marks.length) {
-                        const markClasses = marksToClass(node.marks);
-                        if (CLASS_ATTR in attributes) {
-                            attributes[CLASS_ATTR] += ` ${markClasses}`;
-                        }
-                        else {
-                            attributes[CLASS_ATTR] = markClasses;
-                        }
-                    }
-                    const id = 't' + textId++;
-                    const command = [type, nestingLevel, domPosition, commandIndex++, attributes, text, id];
-                    rootCommands.push(command);
+                    rootCommands.push({
+                        kind: 'text',
+                        nestingLevel,
+                        domPosition,
+                        index: commandIndex++,
+                        attributes,
+                        markTags: node.marks.length ? marksToTags(node.marks) : [],
+                        text,
+                        id: 't' + textId++,
+                    });
                     domPosition++;
                     break;
                 }
-                case BLOCKS.EMBEDDED_ASSET: {
-                    // Render media
-                    const type = RENDER_COMMAND_TYPE.COMPONENT;
+                case CF_BLOCKS.EMBEDDED_ASSET: {
                     const assetId = node.data['target']?.sys?.id;
                     if (!assetId) {
                         throw richTextRendererError('asset_id_not_found', { node });
@@ -955,7 +949,7 @@ class ContentfulRichTextRendererComponent {
                         throw richTextRendererError('asset_not_found', { assetId, node });
                     }
                     const contentType = asset.fields.file.contentType;
-                    const assetComponents = this._config.components;
+                    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;
@@ -975,35 +969,29 @@ class ContentfulRichTextRendererComponent {
                             : isAudio
                                 ? assetComponents.audio
                                 : assetComponents.file;
-                    const componentType = isImage
-                        ? DEFAULT_COMPONENT_TYPES.IMAGE
-                        : isVideo
-                            ? DEFAULT_COMPONENT_TYPES.VIDEO
-                            : isAudio
-                                ? DEFAULT_COMPONENT_TYPES.AUDIO
-                                : DEFAULT_COMPONENT_TYPES.FILE;
-                    let componentId = componentIdMap.get(componentType) ?? -1;
-                    const id = componentType + ++componentId;
-                    componentIdMap.set(componentType, componentId);
-                    const attributes = {};
-                    const inputs = {
-                        asset,
-                    };
-                    const command = [
-                        type,
+                    if (!component) {
+                        if (isDevMode()) {
+                            console.warn('No component registered for this embedded asset! The asset will be skipped. Provide one via provideContentfulConfig({ components: … }).', { asset });
+                        }
+                        break;
+                    }
+                    const occurrenceKey = 'asset:' + assetId;
+                    const occurrence = (componentIdMap.get(occurrenceKey) ?? -1) + 1;
+                    componentIdMap.set(occurrenceKey, occurrence);
+                    const id = occurrence === 0 ? occurrenceKey : `${occurrenceKey}:${occurrence}`;
+                    rootCommands.push({
+                        kind: 'component',
                         nestingLevel,
                         domPosition,
-                        commandIndex++,
-                        attributes,
+                        index: commandIndex++,
                         component,
-                        inputs,
+                        inputs: { asset },
                         id,
-                    ];
-                    rootCommands.push(command);
+                    });
                     domPosition++;
                     break;
                 }
-                case INLINES.HYPERLINK: {
+                case CF_INLINES.HYPERLINK: {
                     const uri = node.data['uri'] ?? '';
                     // Collect all text and marks from children (hyperlink children are text nodes)
                     let linkText = '';
@@ -1014,28 +1002,67 @@ 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.
+                        rootCommands.push({
+                            kind: 'htmlOpen',
+                            nestingLevel,
+                            domPosition,
+                            index: commandIndex++,
+                            attributes: {
+                                class: 'et-contentful-rich-text-default-element et-contentful-rich-text-default-a',
+                                href: uri,
+                            },
+                            tagName: 'a',
+                            id: 'e-o' + elementOpenId++,
+                        });
+                        const anchorDomPosition = domPosition;
+                        nestingLevel++;
+                        domPosition = 0;
+                        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++,
+                        });
+                        nestingLevel--;
+                        domPosition = anchorDomPosition;
+                        rootCommands.push({
+                            kind: 'htmlClose',
+                            nestingLevel,
+                            domPosition,
+                            index: commandIndex++,
+                            tagName: 'a',
+                            id: 'e-c' + elementCloseId++,
+                        });
+                        domPosition++;
+                        break;
+                    }
                     const textClass = linkMarks.length ? marksToClass(linkMarks) : '';
-                    let linkComponentId = componentIdMap.get(DEFAULT_COMPONENT_TYPES.LINK) ?? -1;
-                    const linkId = DEFAULT_COMPONENT_TYPES.LINK + ++linkComponentId;
-                    componentIdMap.set(DEFAULT_COMPONENT_TYPES.LINK, linkComponentId);
-                    const linkCommand = [
-                        RENDER_COMMAND_TYPE.COMPONENT,
+                    let linkComponentId = componentIdMap.get(LINK_COMPONENT_TYPE) ?? -1;
+                    const linkId = LINK_COMPONENT_TYPE + ++linkComponentId;
+                    componentIdMap.set(LINK_COMPONENT_TYPE, linkComponentId);
+                    rootCommands.push({
+                        kind: 'component',
                         nestingLevel,
                         domPosition,
-                        commandIndex++,
-                        {},
-                        this._config.components.link,
-                        { href: uri, text: linkText, textClass },
-                        linkId,
-                    ];
-                    rootCommands.push(linkCommand);
+                        index: commandIndex++,
+                        component: linkComponent,
+                        inputs: { href: uri, text: linkText, textClass },
+                        id: linkId,
+                    });
                     domPosition++;
                     break;
                 }
-                case BLOCKS.EMBEDDED_ENTRY:
-                case INLINES.EMBEDDED_ENTRY: {
-                    // Render component
-                    const type = RENDER_COMMAND_TYPE.COMPONENT;
+                case CF_BLOCKS.EMBEDDED_ENTRY:
+                case CF_INLINES.EMBEDDED_ENTRY: {
                     const entryId = node.data['target']?.sys?.id;
                     if (!entryId) {
                         throw richTextRendererError('entry_id_not_found', { node });
@@ -1045,47 +1072,49 @@ class ContentfulRichTextRendererComponent {
                         throw richTextRendererError('entry_not_found', { entryId, node });
                     }
                     const componentType = entry.sys.contentType.sys.id;
-                    const component = this._config.customComponents[componentType];
+                    const component = this.config.customComponents[componentType];
                     if (!component) {
                         throw richTextRendererError('custom_component_not_found', {
                             componentType,
-                            customComponents: this._config.customComponents,
+                            customComponents: this.config.customComponents,
                             entry,
                         });
                     }
-                    const attributes = {};
-                    let componentId = componentIdMap.get(componentType) ?? -1;
-                    const id = componentType + ++componentId;
-                    componentIdMap.set(componentType, componentId);
-                    const inputs = {
-                        fields: entry.fields,
-                        metadata: entry.metadata,
-                        sys: entry.sys,
-                        includes: this.contentIncludesMap(),
-                    };
-                    const command = [
-                        type,
+                    const occurrenceKey = 'entry:' + entryId;
+                    const occurrence = (componentIdMap.get(occurrenceKey) ?? -1) + 1;
+                    componentIdMap.set(occurrenceKey, occurrence);
+                    const id = occurrence === 0 ? occurrenceKey : `${occurrenceKey}:${occurrence}`;
+                    rootCommands.push({
+                        kind: 'component',
                         nestingLevel,
                         domPosition,
-                        commandIndex++,
-                        attributes,
+                        index: commandIndex++,
                         component,
-                        inputs,
+                        inputs: {
+                            fields: entry.fields,
+                            metadata: entry.metadata,
+                            sys: entry.sys,
+                            includes: this.contentIncludesMap(),
+                        },
                         id,
-                    ];
-                    rootCommands.push(command);
+                    });
                     domPosition++;
                     break;
                 }
                 default: {
-                    const type = RENDER_COMMAND_TYPE.HTML_OPEN;
                     const tag = translateContentfulNodeTypeToHtmlTag(node.nodeType);
                     const attributes = {
                         class: `et-contentful-rich-text-default-element et-contentful-rich-text-default-${tag}`,
                     };
-                    const id = 'e-o' + elementOpenId++;
-                    const command = [type, nestingLevel, domPosition, commandIndex++, attributes, tag, id];
-                    rootCommands.push(command);
+                    rootCommands.push({
+                        kind: 'htmlOpen',
+                        nestingLevel,
+                        domPosition,
+                        index: commandIndex++,
+                        attributes,
+                        tagName: tag,
+                        id: 'e-o' + elementOpenId++,
+                    });
                     const domPositionAtThisLevel = domPosition;
                     // Normal html elements can have children
                     for (const child of node.content) {
@@ -1096,25 +1125,21 @@ class ContentfulRichTextRendererComponent {
                         domPosition = domPositionAtThisLevel;
                     }
                     const lastCommand = rootCommands[rootCommands.length - 1];
-                    if (lastCommand?.[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.HTML_OPEN &&
-                        lastCommand[HTML_OPEN_RENDER_COMMAND_POSITION.TAG_NAME] !== 'td' &&
-                        lastCommand[HTML_OPEN_RENDER_COMMAND_POSITION.TAG_NAME] !== 'hr') {
+                    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
                         rootCommands.pop();
                         elementOpenId--;
                         commandIndex--;
                     }
                     else {
-                        const closeId = 'e-c' + elementCloseId++;
-                        const closeCommand = [
-                            RENDER_COMMAND_TYPE.HTML_CLOSE,
+                        rootCommands.push({
+                            kind: 'htmlClose',
                             nestingLevel,
                             domPosition,
-                            commandIndex++,
-                            tag,
-                            closeId,
-                        ];
-                        rootCommands.push(closeCommand);
+                            index: commandIndex++,
+                            tagName: tag,
+                            id: 'e-c' + elementCloseId++,
+                        });
                         domPosition++;
                     }
                     break;
@@ -1126,194 +1151,171 @@ class ContentfulRichTextRendererComponent {
         }
         return rootCommands;
     }
-    _execInstructions(instructions) {
+    execInstructions(instructions) {
         for (const instruction of instructions) {
-            const type = instruction[RENDER_INSTRUCTION_POSITION.TYPE];
-            const command = instruction[RENDER_INSTRUCTION_POSITION.COMMAND];
-            switch (type) {
-                case RENDER_INSTRUCTION_TYPE.CREATE:
-                    this._runCreateInstruction(command);
+            switch (instruction.type) {
+                case 'create':
+                    this.runCreateInstruction(instruction.command);
                     break;
-                case RENDER_INSTRUCTION_TYPE.UPDATE:
-                    this._runUpdateInstruction(command);
+                case 'update':
+                    this.runUpdateInstruction(instruction.command);
                     break;
-                case RENDER_INSTRUCTION_TYPE.MOVE:
-                    this._runMoveInstruction(command);
+                case 'move':
+                    this.runMoveInstruction(instruction.command);
                     break;
-                case RENDER_INSTRUCTION_TYPE.DELETE:
-                    this._runDeleteInstruction(command);
+                case 'delete':
+                    this.runDeleteInstruction(instruction.command);
                     break;
             }
         }
     }
-    _runCreateInstruction(command) {
-        const id = getRenderCommandId(command);
-        const parentElement = this._findParent(command);
-        const nextElement = this._findFollowingElement(command);
-        if (isComponentRenderCommand(command)) {
-            const componentRef = this._viewContainerRef.createComponent(command[COMPONENT_RENDER_COMMAND_POSITION.COMPONENT]);
-            this._updateComponentInputs(command, componentRef);
-            const rootNode = this._getComponentRootNode(componentRef);
-            this._renderInsertOrAppend(rootNode, parentElement, nextElement);
-            this._executedCommandsCache.set(id, {
+    runCreateInstruction(command) {
+        const parentElement = this.findParent(command);
+        const nextElement = this.findFollowingElement(command);
+        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)
+                .map((declared) => inputBinding(declared.templateName, () => inputs()[declared.propName]));
+            const componentRef = this.viewContainerRef.createComponent(command.component, { bindings });
+            const rootNode = this.getComponentRootNode(componentRef);
+            this.renderInsertOrAppend(rootNode, parentElement, nextElement);
+            this.executedCommandsCache.set(command.id, {
                 command,
                 componentRef,
+                inputs,
                 element: rootNode,
             });
         }
-        else if (isTextRenderCommand(command)) {
-            const text = command[TEXT_RENDER_COMMAND_POSITION.TEXT];
-            const span = this._renderer.createElement('span');
-            const attributes = command[TEXT_RENDER_COMMAND_POSITION.ATTRIBUTES];
-            const textSplitInLineBreaks = text.split('\n').filter((t) => t.trim().length > 0);
-            const textNodes = [];
-            for (const [key, value] of Object.entries(attributes)) {
-                this._renderer.setAttribute(span, key, value);
+        else if (command.kind === 'text') {
+            const span = this.renderer.createElement('span');
+            const textSplitInLineBreaks = command.text.split('\n').filter((t) => t.trim().length > 0);
+            for (const [key, value] of Object.entries(command.attributes)) {
+                this.renderer.setAttribute(span, key, value);
             }
-            if (text.startsWith('\n')) {
-                const brNode = this._renderer.createElement('br');
-                this._renderer.appendChild(parentElement, brNode);
+            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);
+                this.renderer.appendChild(textContainer, markElement);
+                textContainer = markElement;
             }
             for (const [textPartIndex, textPart] of textSplitInLineBreaks.entries()) {
                 if (textPartIndex > 0) {
-                    const brNode = this._renderer.createElement('br');
-                    this._renderer.appendChild(span, brNode);
+                    const brNode = this.renderer.createElement('br');
+                    this.renderer.appendChild(textContainer, brNode);
                 }
-                const textNode = this._renderer.createText(textPart);
-                this._renderer.appendChild(span, textNode);
-                textNodes.push(textNode);
+                const textNode = this.renderer.createText(textPart);
+                this.renderer.appendChild(textContainer, textNode);
             }
-            this._renderInsertOrAppend(span, parentElement, nextElement);
-            this._executedCommandsCache.set(id, {
+            this.renderInsertOrAppend(span, parentElement, nextElement);
+            this.executedCommandsCache.set(command.id, {
                 command,
                 element: span,
-                textNode: textNodes,
             });
         }
-        else if (isHtmlOpenRenderCommand(command)) {
-            const tag = command[HTML_OPEN_RENDER_COMMAND_POSITION.TAG_NAME];
-            const attributes = command[HTML_OPEN_RENDER_COMMAND_POSITION.ATTRIBUTES];
-            const element = this._renderer.createElement(tag);
-            for (const [key, value] of Object.entries(attributes)) {
-                this._renderer.setAttribute(element, key, value);
+        else if (command.kind === 'htmlOpen') {
+            const element = this.renderer.createElement(command.tagName);
+            for (const [key, value] of Object.entries(command.attributes)) {
+                this.renderer.setAttribute(element, key, value);
             }
-            this._renderInsertOrAppend(element, parentElement, nextElement);
-            this._executedCommandsCache.set(id, {
+            this.renderInsertOrAppend(element, parentElement, nextElement);
+            this.executedCommandsCache.set(command.id, {
                 command,
                 element,
             });
         }
     }
-    _runUpdateInstruction(command) {
-        const id = getRenderCommandId(command);
-        const cached = this._executedCommandsCache.get(id);
+    runUpdateInstruction(command) {
+        const cached = this.executedCommandsCache.get(command.id);
         if (!cached) {
             throw new Error('Cached command not found!');
         }
-        if (isComponentRenderCommand(command)) {
+        if (command.kind === 'component') {
             if (!isExecutedComponentCommandCacheItem(cached)) {
                 throw new Error('Cached command is not a component command!');
             }
-            const componentRef = cached.componentRef;
-            if (!componentRef) {
-                throw new Error('Component ref not found!');
-            }
-            this._updateComponentInputs(command, componentRef);
+            cached.inputs.set(command.inputs);
         }
-        this._executedCommandsCache.set(id, {
+        // `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: command,
+            command,
         });
     }
-    _runMoveInstruction(command) {
-        const id = getRenderCommandId(command);
-        const cached = this._executedCommandsCache.get(id);
+    runMoveInstruction(command) {
+        const cached = this.executedCommandsCache.get(command.id);
         if (!cached) {
             throw new Error('Cached command not found!');
         }
-        if (isComponentRenderCommand(command)) {
+        if (command.kind === 'component') {
             if (!isExecutedComponentCommandCacheItem(cached)) {
                 throw new Error('Cached command is not a component command!');
             }
-            const componentRef = cached.componentRef;
-            if (!componentRef) {
-                throw new Error('Component ref not found!');
-            }
             const rootNode = cached.element;
             const oldParentElement = cached.element.parentElement;
             if (oldParentElement) {
-                this._renderer.removeChild(oldParentElement, rootNode);
+                this.renderer.removeChild(oldParentElement, rootNode);
             }
-            const newParentElement = this._findParent(command);
-            const nextElement = this._findFollowingElement(command);
-            this._renderInsertOrAppend(rootNode, newParentElement, nextElement);
-            this._updateComponentInputs(command, componentRef);
-            this._executedCommandsCache.set(id, {
+            const newParentElement = this.findParent(command);
+            const nextElement = this.findFollowingElement(command);
+            this.renderInsertOrAppend(rootNode, newParentElement, nextElement);
+            cached.inputs.set(command.inputs);
+            this.executedCommandsCache.set(command.id, {
                 ...cached,
-                command: command,
+                command,
             });
         }
     }
-    _runDeleteInstruction(command) {
-        const id = getRenderCommandId(command);
-        const cached = this._executedCommandsCache.get(id);
+    runDeleteInstruction(command) {
+        const cached = this.executedCommandsCache.get(command.id);
         if (!cached) {
-            if (isHtmlCloseRenderCommand(command)) {
+            if (command.kind === 'htmlClose') {
                 return;
             }
             throw new Error('Cached command not found!');
         }
-        if (isComponentRenderCommand(command)) {
+        if (command.kind === 'component') {
             if (!isExecutedComponentCommandCacheItem(cached)) {
                 throw new Error('Cached command is not a component command!');
             }
-            cached.componentRef?.destroy();
-        }
-        else if (isTextRenderCommand(command)) {
-            if (cached.element?.parentElement) {
-                this._renderer.removeChild(cached.element.parentElement, cached.element);
-            }
+            cached.componentRef.destroy();
         }
-        else if (isHtmlOpenRenderCommand(command)) {
-            if (cached.element?.parentElement) {
-                this._renderer.removeChild(cached.element.parentElement, cached.element);
+        else if (command.kind === 'text' || command.kind === 'htmlOpen') {
+            if (cached.element.parentElement) {
+                this.renderer.removeChild(cached.element.parentElement, cached.element);
             }
         }
-        this._executedCommandsCache.delete(id);
+        this.executedCommandsCache.delete(command.id);
     }
-    _getComponentRootNode(componentRef) {
+    getComponentRootNode(componentRef) {
         return componentRef.hostView.rootNodes[0];
     }
-    _updateComponentInputs(command, componentRef) {
-        const inputMeta = reflectComponentType(command[COMPONENT_RENDER_COMMAND_POSITION.COMPONENT])?.inputs ?? [];
-        const inputsByProp = new Map(inputMeta.map((i) => [i.propName, i.templateName]));
-        for (const [key, value] of Object.entries(command[COMPONENT_RENDER_COMMAND_POSITION.INPUTS])) {
-            const publicName = inputsByProp.get(key);
-            if (publicName === undefined)
-                continue;
-            componentRef.setInput(publicName, value);
-        }
-    }
-    _findParent(command) {
-        const hostElement = this._elementRef.nativeElement;
-        const nestingLevel = command[RENDER_COMMAND_POSITION.NESTING_LEVEL];
+    findParent(command) {
+        const hostElement = this.elementRef.nativeElement;
         let parentElement;
-        if (nestingLevel === 0) {
+        if (command.nestingLevel === 0) {
             parentElement = hostElement;
         }
         else {
-            // Reverse search all render commands beginning from the current one using a for loop.
-            // The parent is found when the command's nesting level ist the same as the current nesting level minus 1.
-            // If the parent is not found, throw an error.
+            // 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();
-            const currentCommandIndex = command[RENDER_COMMAND_POSITION.INDEX];
             let parentCommand = null;
-            for (let i = currentCommandIndex - 1; i >= 0; i--) {
+            for (let i = command.index - 1; i >= 0; i--) {
                 const cmd = allCommands[i];
                 if (!cmd) {
                     throw new Error('Command not found!');
                 }
-                if (cmd[RENDER_COMMAND_POSITION.NESTING_LEVEL] === nestingLevel - 1 && isHtmlOpenRenderCommand(cmd)) {
+                if (cmd.nestingLevel === command.nestingLevel - 1 && cmd.kind === 'htmlOpen') {
                     parentCommand = cmd;
                     break;
                 }
@@ -1321,45 +1323,41 @@ class ContentfulRichTextRendererComponent {
             if (!parentCommand) {
                 throw new Error('Parent command not found!');
             }
-            parentElement = this._executedCommandsCache.get(getRenderCommandId(parentCommand))?.element;
+            parentElement = this.executedCommandsCache.get(parentCommand.id)?.element;
         }
         if (!parentElement) {
             throw new Error('Parent element not found!');
         }
         return parentElement;
     }
-    _findFollowingElement(command) {
-        const cacheArray = Array.from(this._executedCommandsCache.values());
-        let nextElement = undefined;
-        const domPosition = command[RENDER_COMMAND_POSITION.DOM_POSITION];
-        const nestingLevel = command[RENDER_COMMAND_POSITION.NESTING_LEVEL];
-        const type = command[RENDER_COMMAND_POSITION.TYPE];
-        // Try to find an already rendered element with a domPosition that is greater than the current domPosition. If there are multiple, use the one with the smallest domPosition.
-        // If it does not exist, use .appendChild to simply append the element to the end of the parent element.
-        // If it does exist, use .insertBefore to insert the element before the found element.
-        for (const cached of cacheArray) {
-            if (cached.command[RENDER_COMMAND_POSITION.DOM_POSITION] > domPosition &&
-                cached.command[RENDER_COMMAND_POSITION.NESTING_LEVEL] === nestingLevel &&
-                // Make sure the element does not find itself
-                cached.command[RENDER_COMMAND_POSITION.TYPE] !== type) {
+    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.
+        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.command.id !== command.id) {
                 nextElement = cached.element;
-                break;
+                nextDomPosition = cached.command.domPosition;
             }
         }
         return nextElement;
     }
-    _renderInsertOrAppend(nodeToRender, parentElement, nextElement) {
+    renderInsertOrAppend(nodeToRender, parentElement, nextElement) {
         if (nextElement) {
-            this._renderer.insertBefore(parentElement, nodeToRender, nextElement);
+            this.renderer.insertBefore(parentElement, nodeToRender, nextElement);
         }
         else {
-            this._renderer.appendChild(parentElement, nodeToRender);
+            this.renderer.appendChild(parentElement, nodeToRender);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, richTextPath: { classPropertyName: "richTextPath", publicName: "richTextPath", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, richTextPath: { classPropertyName: "richTextPath", publicName: "richTextPath", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-rich-text-renderer',
@@ -1384,11 +1382,9 @@ const provideContentfulConfig = (contentfulConfig = {}) => {
 };
 const isContentfulEntryType = (entry, type) => entry.sys.contentType.sys.id === type;
 
-// Burst cache
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { COMPONENT_RENDER_COMMAND_POSITION, CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, HTML_CLOSE_RENDER_COMMAND_POSITION, HTML_OPEN_RENDER_COMMAND_POSITION, RENDER_COMMAND_POSITION, RENDER_COMMAND_TYPE, RENDER_INSTRUCTION_POSITION, RENDER_INSTRUCTION_TYPE, TEXT_RENDER_COMMAND_POSITION, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, getRenderCommandId, isComponentRenderCommand, isContentfulEntryType, isContentfulGqlAsset, isExecutedComponentCommandCacheItem, isExecutedHtmlOrTextCommandCacheItem, isExecutedTextCommandCacheItem, isHtmlCloseRenderCommand, isHtmlOpenRenderCommand, isRichTextRootNode, isTextRenderCommand, marksToClass, parseContentfulImageSize, provideContentfulConfig, translateContentfulNodeTypeToHtmlTag };
+export { CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, injectContentfulConfig, isContentfulEntryType, isContentfulGqlAsset, isRichTextRootNode, marksToClass, marksToTags, parseContentfulImageSize, provideContentfulConfig, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map