@ethlete/contentful 4.0.0-next.10 → 4.0.0-next.11

package/fesm2022/ethlete-contentful.mjs

@@ -1,9 +1,9 @@
 import { NgClass, DOCUMENT } from '@angular/common';
 import * as i0 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 { formatFileSize, normalizePictureSizes, PictureComponent } from '@ethlete/components';
+import { defineLabels, toProvideFn, toInjectFn, toToken, injectUrl, RuntimeError, isObject, injectRenderer, getObjectProperty } from '@ethlete/core';
 import { Router, RouterLink } from '@angular/router';
-import { RuntimeError, isObject, injectRenderer, getObjectProperty } from '@ethlete/core';
 
 const GQL_FRAGMENT_CONTENTFUL_ASSET = `
   fragment ContentfulAssetData on Asset {
@@ -12,6 +12,7 @@ const GQL_FRAGMENT_CONTENTFUL_ASSET = `
     }
     url
     title
+    fileName
     width
     height
     description
@@ -42,13 +43,13 @@ class ContentfulAudioComponent {
             if (isContentfulGqlAsset(asset) && asset.url) {
                 return {
                     url: asset.url,
-                    title: asset.title,
+                    title: asset.title || asset.fileName || null,
                 };
             }
-            if (!isContentfulGqlAsset(asset) && asset.fields.file.url) {
+            if (!isContentfulGqlAsset(asset) && asset.fields.file?.url) {
                 return {
                     url: asset.fields.file.url,
-                    title: asset.fields.title,
+                    title: asset.fields.title || asset.fields.file.fileName || null,
                 };
             }
             return null;
@@ -85,8 +86,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], 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 }] }] } });
 
+/** The built-in English labels. */
+const DEFAULT_CONTENTFUL_FILE_LABELS = {
+    fileSize: (bytes) => `(${formatFileSize(bytes)})`,
+};
+const CONTENTFUL_FILE_LABELS_DEF = /* @__PURE__ */ defineLabels('CONTENTFUL_FILE_LABELS', DEFAULT_CONTENTFUL_FILE_LABELS);
+/**
+ * Localize `et-contentful-file` for everything below this injector, and read the set in effect here as a signal.
+ * Partial - whatever you leave out keeps its {@link DEFAULT_CONTENTFUL_FILE_LABELS} value.
+ *
+ * @example
+ * provideContentfulFileLabels({ fileSize: (bytes) => `(${new Intl.NumberFormat('de').format(bytes)} Byte)` });
+ */
+const provideContentfulFileLabels = /* @__PURE__ */ toProvideFn(CONTENTFUL_FILE_LABELS_DEF);
+const injectContentfulFileLabels = /* @__PURE__ */ toInjectFn(CONTENTFUL_FILE_LABELS_DEF);
+const CONTENTFUL_FILE_LABELS = /* @__PURE__ */ toToken(CONTENTFUL_FILE_LABELS_DEF);
+
 class ContentfulFileComponent {
     constructor() {
+        this.labels = injectContentfulFileLabels();
         this.asset = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
         this.fileClass = input(null, /* @ts-ignore */
@@ -100,14 +118,14 @@ class ContentfulFileComponent {
                 return {
                     url: asset.url,
                     size: asset.size,
-                    title: asset.title,
+                    title: asset.title || asset.fileName || null,
                 };
             }
-            if (!isContentfulGqlAsset(asset) && asset.fields.file.url) {
+            if (!isContentfulGqlAsset(asset) && asset.fields.file?.url) {
                 return {
                     url: asset.fields.file.url,
                     size: asset.fields.file.details.size,
-                    title: asset.fields.title,
+                    title: asset.fields.title || asset.fields.file.fileName || null,
                 };
             }
             return null;
@@ -120,7 +138,7 @@ class ContentfulFileComponent {
       <a [href]="data.url" [ngClass]="fileClass()" target="_blank" rel="noopener noreferrer">
         {{ data.title }}
         @if (data.size !== null) {
-          ({{ data.size }} Bytes)
+          {{ labels().fileSize(data.size) }}
         }
       </a>
     }
@@ -135,7 +153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       <a [href]="data.url" [ngClass]="fileClass()" target="_blank" rel="noopener noreferrer">
         {{ data.title }}
         @if (data.size !== null) {
-          ({{ data.size }} Bytes)
+          {{ labels().fileSize(data.size) }}
         }
       </a>
     }
@@ -172,23 +190,35 @@ const matchesHostname = (hostname, configuredHost) => {
     const normalizedHost = normalizeHostname(configuredHost);
     return hostname === normalizedHost || hostname.endsWith('.' + normalizedHost);
 };
+const isInternalWebUrl = (url, { location, internalHosts }) => (url.hostname === location.hostname && url.port === location.port) ||
+    internalHosts.some((host) => matchesHostname(url.hostname, host));
+const isExternalWebHref = (href, context) => {
+    const url = parseWebUrl(href);
+    return url !== null && !isInternalWebUrl(url, context);
+};
+
 class ContentfulLinkComponent {
     constructor() {
         this.document = inject(DOCUMENT);
         this.router = inject(Router);
         this.config = injectContentfulConfig();
+        this.url = injectUrl();
         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.anchorClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchorClass" }] : /* 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 isInternalWebUrl(absoluteUrl, {
+                    location: this.document.location,
+                    internalHosts: this.config.internalHosts,
+                });
             }
             return !href.startsWith('#') && !/^[a-z][a-z\d+.-]*:/i.test(href);
         }, /* @ts-ignore */
@@ -198,23 +228,23 @@ class ContentfulLinkComponent {
         this.internalPath = computed(() => {
             const href = this.href();
             const url = parseWebUrl(href);
-            if (!url) {
+            if (url) {
+                return url.pathname + url.search + url.hash;
+            }
+            if (href.startsWith('/')) {
                 return href;
             }
-            return url.pathname + url.search + url.hash;
+            const resolved = new URL(href, 'https://contentful.invalid' + this.url());
+            return resolved.pathname + resolved.search + resolved.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 */
+        this.linkClass = computed(() => [this.anchorClass(), this.textClass()].filter(Boolean).join(' ') || null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "linkClass" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, anchorClass: { classPropertyName: "anchorClass", publicName: "anchorClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-link" }, ngImport: i0, template: `
     @if (usesRouterLink()) {
       <a [class]="linkClass()" [routerLink]="internalUrlTree()">{{ text() }}</a>
     } @else {
@@ -245,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
   `, 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 }] }] } });
+        }], 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 }] }], anchorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorClass", required: false }] }] } });
 
 class ContentfulVideoComponent {
     constructor() {
@@ -264,7 +294,7 @@ class ContentfulVideoComponent {
                     contentType: asset.contentType,
                 };
             }
-            if (!isContentfulGqlAsset(asset) && asset.fields.file.url) {
+            if (!isContentfulGqlAsset(asset) && asset.fields.file?.url) {
                 return {
                     url: asset.fields.file.url,
                     contentType: asset.fields.file.contentType,
@@ -319,8 +349,8 @@ const CONTENTFUL_FALLBACK_CONFIG = {
         backgroundColor: null,
     },
 };
-const createContentfulConfig = (config) => ({
-    ...{
+const createContentfulConfig = (config) => {
+    const defaults = {
         internalHosts: [],
         components: {
             audio: ContentfulAudioComponent,
@@ -335,9 +365,14 @@ const createContentfulConfig = (config) => ({
             sizes: ['100vw'],
             backgroundColor: null,
         },
-    },
-    ...(config ?? {}),
-});
+    };
+    return {
+        ...defaults,
+        ...config,
+        components: { ...defaults.components, ...config?.components },
+        imageOptions: { ...defaults.imageOptions, ...config?.imageOptions },
+    };
+};
 /**
  * Reads the contentful config from the current injector. Falls back to a config without
  * any `components` when none was provided via `provideContentfulConfig()`.
@@ -357,15 +392,16 @@ const generateDefaultContentfulImageSource = (data) => {
             srcset: data.url,
         };
     }
-    if (!data.fields.file.contentType || !data.fields.file.url) {
+    const file = data.fields.file;
+    if (!file?.contentType || !file.url) {
         return {
             type: '',
             srcset: '',
         };
     }
     return {
-        type: data.fields.file.contentType,
-        srcset: data.fields.file.url,
+        type: file.contentType,
+        srcset: file.url,
     };
 };
 /**
@@ -392,13 +428,20 @@ const parseContentfulImageSize = (size) => {
     return width ? { width: Number(width[1]), height: null } : { width: null, height: null };
 };
 const SOURCE_TYPES = ['image/avif', 'image/webp'];
-const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior) => {
+/**
+ * Builds AVIF and WebP `<source>` entries for a Contentful asset through the Contentful Images API.
+ *
+ * @example
+ * generateContentfulImageSources(asset, { srcsetSizes: ['400w', '800w'], quality: 80 });
+ */
+const generateContentfulImageSources = (data, options = {}) => {
+    const { srcsetSizes = [], backgroundColor = null, quality = null, focusArea = null, resizeBehavior = null } = options;
     const isGqlAsset = isContentfulGqlAsset(data);
-    const baseUrl = isGqlAsset ? data.url : data.fields.file.url;
+    const baseUrl = isGqlAsset ? data.url : data.fields.file?.url;
     if (!baseUrl) {
         return [];
     }
-    const imageDimensions = isGqlAsset ? data : data.fields.file.details.image;
+    const imageDimensions = isGqlAsset ? data : data.fields.file?.details.image;
     const sources = [];
     for (const type of SOURCE_TYPES) {
         const sourceSets = [];
@@ -416,7 +459,7 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, qual
         if (resizeBehavior) {
             queryParams.push(`fit=${resizeBehavior}`);
         }
-        if (srcsetSizes?.length) {
+        if (srcsetSizes.length) {
             const urlWithParams = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${queryParams.join('&')}`;
             for (const size of srcsetSizes) {
                 const { width, height } = parseContentfulImageSize(size);
@@ -484,15 +527,17 @@ class ContentfulImageComponent {
         ...(ngDevMode ? [{ debugName: "normalizedAsset" }] : /* istanbul ignore next */ []));
         this.sourcesValue = computed(() => {
             const asset = this.asset();
-            const backgroundColor = this.backgroundColor();
-            const srcsetSizes = this.srcsetSizes();
-            const quality = this.quality();
-            const focusArea = this.focusArea();
-            const resizeBehavior = this.resizeBehavior();
+            const options = {
+                srcsetSizes: this.srcsetSizes(),
+                backgroundColor: this.backgroundColor(),
+                quality: this.quality(),
+                focusArea: this.focusArea(),
+                resizeBehavior: this.resizeBehavior(),
+            };
             if (!asset) {
                 return [];
             }
-            return generateContentfulImageSources(asset, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior);
+            return generateContentfulImageSources(asset, options);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sourcesValue" }] : /* istanbul ignore next */ []));
         this.defaultSrcValue = computed(() => {
@@ -587,22 +632,18 @@ const RICH_TEXT_RENDERER_ERRORS = {
     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".',
     asset_id_not_found: 'The asset ID was not found. This node is not supported.',
     entry_id_not_found: 'The entry ID was not found. This node is not supported.',
-    asset_not_found: 'The asset was not found. This node is not supported.',
-    entry_not_found: 'The entry was not found. This node is not supported.',
-    custom_component_not_found: 'No custom component found for entry type. Please provide one for this type.',
     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.',
+    cached_command_not_found: 'No rendered node was found for a render command. The renderer state is out of sync.',
+    cached_command_not_component: 'The rendered node for a component command is not a component. The renderer state is out of sync.',
 };
 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,
+    cached_command_not_found: 9,
+    cached_command_not_component: 10,
 };
 const richTextRendererError = (code, data) => {
     const message = `<et-contentful-rich-text-renderer>: ${RICH_TEXT_RENDERER_ERRORS[code]}`;
@@ -612,60 +653,43 @@ const richTextRendererError = (code, data) => {
 const isRichTextRootNode = (node) => {
     return isObject(node) && 'nodeType' in node && node['nodeType'] === 'document';
 };
+const NODE_TYPE_TAGS = /* @__PURE__ */ (() => ({
+    [CF_BLOCKS.HEADING_1]: 'h1',
+    [CF_BLOCKS.HEADING_2]: 'h2',
+    [CF_BLOCKS.HEADING_3]: 'h3',
+    [CF_BLOCKS.HEADING_4]: 'h4',
+    [CF_BLOCKS.HEADING_5]: 'h5',
+    [CF_BLOCKS.HEADING_6]: 'h6',
+    [CF_BLOCKS.PARAGRAPH]: 'p',
+    [CF_BLOCKS.UL_LIST]: 'ul',
+    [CF_BLOCKS.OL_LIST]: 'ol',
+    [CF_BLOCKS.LIST_ITEM]: 'li',
+    [CF_BLOCKS.HR]: 'hr',
+    [CF_BLOCKS.QUOTE]: 'blockquote',
+    [CF_BLOCKS.TABLE]: 'table',
+    [CF_BLOCKS.TABLE_ROW]: 'tr',
+    [CF_BLOCKS.TABLE_CELL]: 'td',
+    [CF_BLOCKS.TABLE_HEADER_CELL]: 'th',
+}))();
+const INLINE_NODE_TYPES = /* @__PURE__ */ (() => new Set(Object.values(CF_INLINES)))();
+/**
+ * The html element a structural rich text node renders as. A node type without an element
+ * (an unsupported inline or block) falls back to `span` for inlines and `div` otherwise,
+ * with a dev-mode warning.
+ */
 const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
-    switch (nodeType) {
-        case CF_BLOCKS.HEADING_1:
-            return 'h1';
-        case CF_BLOCKS.HEADING_2:
-            return 'h2';
-        case CF_BLOCKS.HEADING_3:
-            return 'h3';
-        case CF_BLOCKS.HEADING_4:
-            return 'h4';
-        case CF_BLOCKS.HEADING_5:
-            return 'h5';
-        case CF_BLOCKS.HEADING_6:
-            return 'h6';
-        case CF_BLOCKS.PARAGRAPH:
-            return 'p';
-        case CF_BLOCKS.UL_LIST:
-            return 'ul';
-        case CF_BLOCKS.OL_LIST:
-            return 'ol';
-        case CF_BLOCKS.LIST_ITEM:
-            return 'li';
-        case CF_BLOCKS.HR:
-            return 'hr';
-        case CF_BLOCKS.QUOTE:
-            return 'blockquote';
-        case CF_BLOCKS.TABLE:
-            return 'table';
-        case CF_BLOCKS.TABLE_ROW:
-            return 'tr';
-        case CF_BLOCKS.TABLE_CELL:
-            return 'td';
-        case CF_BLOCKS.TABLE_HEADER_CELL:
-            return 'th';
-        case CF_BLOCKS.EMBEDDED_ASSET:
-            return 'div';
-        case CF_INLINES.ENTRY_HYPERLINK:
-            return 'a';
-        case CF_INLINES.ASSET_HYPERLINK:
-            return 'a';
-        case 'text':
-            return 'span';
-        // Will be ignored by the renderer
-        case 'document':
-            return 'div';
-        case CF_BLOCKS.EMBEDDED_ENTRY:
-            return 'div';
-        case CF_INLINES.EMBEDDED_ENTRY:
-            return 'div';
-        default:
-            return 'div';
+    const tag = NODE_TYPE_TAGS[nodeType];
+    if (tag) {
+        return tag;
+    }
+    const fallback = INLINE_NODE_TYPES.has(nodeType) ? 'span' : 'div';
+    if (isDevMode()) {
+        console.warn(`Unsupported rich text node type "${nodeType}"! Its content is rendered inside a <${fallback}>.`);
     }
+    return fallback;
 };
 
+const DEFAULT_ANCHOR_CLASS = 'et-contentful-rich-text-default-element et-contentful-rich-text-default-a';
 const MARK_TAG_MAP = {
     bold: 'strong',
     italic: 'em',
@@ -727,7 +751,7 @@ const createContentfulIncludeMap = (config) => {
         const entry = entryMap.get(id);
         if (!entry) {
             if (isDevMode()) {
-                console.warn('Entry not found! Will return null. Is the include query param to low?', { id, entryMap });
+                console.warn('Entry not found! Will return null. Is the include query param too low?', { id, entryMap });
             }
             return null;
         }
@@ -772,6 +796,7 @@ class ContentfulRichTextRendererComponent {
         this.renderer = injectRenderer();
         this.elementRef = inject(ElementRef);
         this.config = injectContentfulConfig();
+        this.document = inject(DOCUMENT);
         /**
          * The contentful response gotten via their REST api.
          * @see https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/entries/entries-collection
@@ -825,18 +850,6 @@ class ContentfulRichTextRendererComponent {
             const instructions = [];
             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;
-                    }
-                }
-                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);
@@ -853,8 +866,7 @@ class ContentfulRichTextRendererComponent {
                 if (previous.kind === 'component' && command.kind === 'component' && previous.component !== command.component) {
                     continue;
                 }
-                const parentId = parentIdOf(command);
-                const parentPreserved = parentId === null || preserved.has(parentId);
+                const parentPreserved = previous.parentId === command.parentId && (command.parentId === null || preserved.has(command.parentId));
                 if (command.kind === 'component') {
                     preserved.add(command.id);
                     const samePlace = parentPreserved &&
@@ -913,7 +925,7 @@ class ContentfulRichTextRendererComponent {
         let nestingLevel = 0;
         let domPosition = 0;
         let textId = 0;
-        let commandIndex = 0;
+        const openElementIds = [];
         const traverse = (node) => {
             switch (node.nodeType) {
                 case 'text': {
@@ -927,7 +939,7 @@ class ContentfulRichTextRendererComponent {
                         kind: 'text',
                         nestingLevel,
                         domPosition,
-                        index: commandIndex++,
+                        parentId: openElementIds.at(-1) ?? null,
                         attributes,
                         markTags: node.marks.length ? marksToTags(node.marks) : [],
                         text,
@@ -943,11 +955,14 @@ class ContentfulRichTextRendererComponent {
                     }
                     const asset = this.contentIncludesMap().getAsset(assetId);
                     if (!asset) {
-                        throw richTextRendererError('asset_not_found', { assetId, node });
+                        if (isDevMode()) {
+                            console.warn('Embedded asset is missing from the includes! The asset will be skipped. Is it unpublished or deleted?', { assetId, node });
+                        }
+                        break;
                     }
-                    const contentType = asset.fields.file.contentType;
+                    const contentType = asset.fields.file?.contentType;
                     const assetComponents = this.config.components;
-                    const isMissing = !contentType && !asset.fields.file.url;
+                    const isMissing = !contentType && !asset.fields.file?.url;
                     if (isMissing) {
                         if (isDevMode()) {
                             console.warn('Asset is missing file data! Asset will be skipped. Did you forget to upload a file for the current translation in Contentful?', { asset });
@@ -978,7 +993,7 @@ class ContentfulRichTextRendererComponent {
                         kind: 'component',
                         nestingLevel,
                         domPosition,
-                        index: commandIndex++,
+                        parentId: openElementIds.at(-1) ?? null,
                         component,
                         inputs: { asset },
                         id,
@@ -996,52 +1011,42 @@ class ContentfulRichTextRendererComponent {
                     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) {
-                        if (child.nodeType === 'text') {
-                            linkText += child.value;
-                            linkMarks.push(...child.marks);
-                        }
+                        const url = asset?.fields.file?.url;
+                        href = url ? normalizeHref(url) : null;
                     }
+                    const linkTexts = node.content.filter((child) => child.nodeType === 'text' && Boolean(child.value));
+                    const linkText = linkTexts.map((child) => child.value).join('');
                     const linkComponent = href ? this.config.components.link : null;
                     if (href && !linkComponent) {
+                        const attributes = { class: DEFAULT_ANCHOR_CLASS, href };
+                        if (isExternalWebHref(href, { location: this.document.location, internalHosts: this.config.internalHosts })) {
+                            attributes['target'] = '_blank';
+                            attributes['rel'] = 'noopener noreferrer';
+                        }
                         rootCommands.push({
                             kind: 'htmlOpen',
                             nestingLevel,
                             domPosition,
-                            index: commandIndex++,
-                            attributes: {
-                                class: 'et-contentful-rich-text-default-element et-contentful-rich-text-default-a',
-                                href,
-                            },
+                            parentId: openElementIds.at(-1) ?? null,
+                            attributes,
                             tagName: 'a',
                             id: 'e-o' + elementOpenId++,
                         });
                         const anchorDomPosition = domPosition;
+                        openElementIds.push('e-o' + (elementOpenId - 1));
                         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++,
-                        });
+                        for (const child of linkTexts) {
+                            traverse(child);
+                        }
+                        openElementIds.pop();
                         nestingLevel--;
                         domPosition = anchorDomPosition;
                         rootCommands.push({
                             kind: 'htmlClose',
                             nestingLevel,
                             domPosition,
-                            index: commandIndex++,
+                            parentId: openElementIds.at(-1) ?? null,
                             tagName: 'a',
                             id: 'e-c' + elementCloseId++,
                         });
@@ -1049,25 +1054,16 @@ class ContentfulRichTextRendererComponent {
                         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++;
+                        for (const child of linkTexts) {
+                            traverse(child);
+                        }
                         break;
                     }
                     if (!linkComponent) {
                         break;
                     }
-                    const textClass = linkMarks.length ? marksToClass(linkMarks) : '';
+                    const sharedMarks = linkTexts[0]?.marks.filter((mark) => linkTexts.every((child) => child.marks.some((other) => other.type === mark.type))) ?? [];
+                    const textClass = marksToClass(sharedMarks);
                     let linkComponentId = componentIdMap.get(LINK_COMPONENT_TYPE) ?? -1;
                     const linkId = LINK_COMPONENT_TYPE + ++linkComponentId;
                     componentIdMap.set(LINK_COMPONENT_TYPE, linkComponentId);
@@ -1075,9 +1071,9 @@ class ContentfulRichTextRendererComponent {
                         kind: 'component',
                         nestingLevel,
                         domPosition,
-                        index: commandIndex++,
+                        parentId: openElementIds.at(-1) ?? null,
                         component: linkComponent,
-                        inputs: { href, text: linkText, textClass },
+                        inputs: { href, text: linkText, textClass, anchorClass: DEFAULT_ANCHOR_CLASS },
                         id: linkId,
                     });
                     domPosition++;
@@ -1091,16 +1087,18 @@ class ContentfulRichTextRendererComponent {
                     }
                     const entry = this.contentIncludesMap().getEntry(entryId, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID);
                     if (!entry) {
-                        throw richTextRendererError('entry_not_found', { entryId, node });
+                        if (isDevMode()) {
+                            console.warn('Embedded entry is missing from the includes! The entry will be skipped. Is it unpublished or deleted?', { entryId, node });
+                        }
+                        break;
                     }
                     const componentType = entry.sys.contentType.sys.id;
                     const component = this.config.customComponents[componentType];
                     if (!component) {
-                        throw richTextRendererError('custom_component_not_found', {
-                            componentType,
-                            customComponents: this.config.customComponents,
-                            entry,
-                        });
+                        if (isDevMode()) {
+                            console.warn('No custom component registered for this embedded entry type! The entry will be skipped. Provide one via provideContentfulConfig({ customComponents: … }).', { componentType, customComponents: this.config.customComponents, entry });
+                        }
+                        break;
                     }
                     const occurrenceKey = 'entry:' + entryId;
                     const occurrence = (componentIdMap.get(occurrenceKey) ?? -1) + 1;
@@ -1110,7 +1108,7 @@ class ContentfulRichTextRendererComponent {
                         kind: 'component',
                         nestingLevel,
                         domPosition,
-                        index: commandIndex++,
+                        parentId: openElementIds.at(-1) ?? null,
                         component,
                         inputs: {
                             fields: entry.fields,
@@ -1132,17 +1130,19 @@ class ContentfulRichTextRendererComponent {
                         kind: 'htmlOpen',
                         nestingLevel,
                         domPosition,
-                        index: commandIndex++,
+                        parentId: openElementIds.at(-1) ?? null,
                         attributes,
                         tagName: tag,
                         id: 'e-o' + elementOpenId++,
                     });
                     const domPositionAtThisLevel = domPosition;
+                    openElementIds.push('e-o' + (elementOpenId - 1));
                     nestingLevel++;
                     domPosition = 0;
                     for (const child of node.content) {
                         traverse(child);
                     }
+                    openElementIds.pop();
                     nestingLevel--;
                     domPosition = domPositionAtThisLevel;
                     const lastCommand = rootCommands[rootCommands.length - 1];
@@ -1152,14 +1152,13 @@ class ContentfulRichTextRendererComponent {
                         lastCommand.tagName !== 'hr') {
                         rootCommands.pop();
                         elementOpenId--;
-                        commandIndex--;
                     }
                     else {
                         rootCommands.push({
                             kind: 'htmlClose',
                             nestingLevel,
                             domPosition,
-                            index: commandIndex++,
+                            parentId: openElementIds.at(-1) ?? null,
                             tagName: tag,
                             id: 'e-c' + elementCloseId++,
                         });
@@ -1175,26 +1174,32 @@ class ContentfulRichTextRendererComponent {
         return rootCommands;
     }
     execInstructions(instructions) {
-        for (const instruction of instructions) {
-            switch (instruction.type) {
+        const lastPlacedChild = new Map();
+        for (const { type, command } of instructions) {
+            if (type === 'delete') {
+                this.runDeleteInstruction(command);
+                continue;
+            }
+            const previousSibling = lastPlacedChild.get(command.parentId) ?? null;
+            switch (type) {
                 case 'create':
-                    this.runCreateInstruction(instruction.command);
+                    this.runCreateInstruction(command, previousSibling);
                     break;
                 case 'update':
-                    this.runUpdateInstruction(instruction.command);
+                    this.runUpdateInstruction(command);
                     break;
                 case 'move':
-                    this.runMoveInstruction(instruction.command);
-                    break;
-                case 'delete':
-                    this.runDeleteInstruction(instruction.command);
+                    this.runMoveInstruction(command, previousSibling);
                     break;
             }
+            const element = this.executedCommandsCache.get(command.id)?.element;
+            if (element) {
+                lastPlacedChild.set(command.parentId, element);
+            }
         }
     }
-    runCreateInstruction(command) {
+    runCreateInstruction(command, previousSibling) {
         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 */ []));
@@ -1204,7 +1209,7 @@ class ContentfulRichTextRendererComponent {
                 .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.renderInsertAfter(rootNode, { parentElement, previousSibling });
             this.executedCommandsCache.set(command.id, {
                 command,
                 componentRef,
@@ -1234,7 +1239,7 @@ class ContentfulRichTextRendererComponent {
                     this.renderer.appendChild(textContainer, textNode);
                 }
             }
-            this.renderInsertOrAppend(span, parentElement, nextElement);
+            this.renderInsertAfter(span, { parentElement, previousSibling });
             this.executedCommandsCache.set(command.id, {
                 command,
                 element: span,
@@ -1245,7 +1250,7 @@ class ContentfulRichTextRendererComponent {
             for (const [key, value] of Object.entries(command.attributes)) {
                 this.renderer.setAttribute(element, key, value);
             }
-            this.renderInsertOrAppend(element, parentElement, nextElement);
+            this.renderInsertAfter(element, { parentElement, previousSibling });
             this.executedCommandsCache.set(command.id, {
                 command,
                 element,
@@ -1255,11 +1260,11 @@ class ContentfulRichTextRendererComponent {
     runUpdateInstruction(command) {
         const cached = this.executedCommandsCache.get(command.id);
         if (!cached) {
-            throw new Error('Cached command not found!');
+            throw richTextRendererError('cached_command_not_found', { command });
         }
         if (command.kind === 'component') {
             if (!isExecutedComponentCommandCacheItem(cached)) {
-                throw new Error('Cached command is not a component command!');
+                throw richTextRendererError('cached_command_not_component', { command });
             }
             cached.inputs.set(command.inputs);
         }
@@ -1268,23 +1273,21 @@ class ContentfulRichTextRendererComponent {
             command,
         });
     }
-    runMoveInstruction(command) {
+    runMoveInstruction(command, previousSibling) {
         const cached = this.executedCommandsCache.get(command.id);
         if (!cached) {
-            throw new Error('Cached command not found!');
+            throw richTextRendererError('cached_command_not_found', { command });
         }
         if (command.kind === 'component') {
             if (!isExecutedComponentCommandCacheItem(cached)) {
-                throw new Error('Cached command is not a component command!');
+                throw richTextRendererError('cached_command_not_component', { command });
             }
             const rootNode = cached.element;
             const oldParentElement = cached.element.parentElement;
             if (oldParentElement) {
                 this.renderer.removeChild(oldParentElement, rootNode);
             }
-            const newParentElement = this.findParent(command);
-            const nextElement = this.findFollowingElement(command);
-            this.renderInsertOrAppend(rootNode, newParentElement, nextElement);
+            this.renderInsertAfter(rootNode, { parentElement: this.findParent(command), previousSibling });
             cached.inputs.set(command.inputs);
             this.executedCommandsCache.set(command.id, {
                 ...cached,
@@ -1298,11 +1301,11 @@ class ContentfulRichTextRendererComponent {
             if (command.kind === 'htmlClose') {
                 return;
             }
-            throw new Error('Cached command not found!');
+            throw richTextRendererError('cached_command_not_found', { command });
         }
         if (command.kind === 'component') {
             if (!isExecutedComponentCommandCacheItem(cached)) {
-                throw new Error('Cached command is not a component command!');
+                throw richTextRendererError('cached_command_not_component', { command });
             }
             cached.componentRef.destroy();
         }
@@ -1317,57 +1320,17 @@ class ContentfulRichTextRendererComponent {
         return componentRef.hostView.rootNodes[0];
     }
     findParent(command) {
-        const hostElement = this.elementRef.nativeElement;
-        let parentElement;
-        if (command.nestingLevel === 0) {
-            parentElement = hostElement;
-        }
-        else {
-            const allCommands = this.renderCommands();
-            let parentCommand = null;
-            for (let i = command.index - 1; i >= 0; i--) {
-                const cmd = allCommands[i];
-                if (!cmd) {
-                    throw new Error('Command not found!');
-                }
-                if (cmd.nestingLevel === command.nestingLevel - 1 && cmd.kind === 'htmlOpen') {
-                    parentCommand = cmd;
-                    break;
-                }
-            }
-            if (!parentCommand) {
-                throw richTextRendererError('text_parent_not_found', { command });
-            }
-            parentElement = this.executedCommandsCache.get(parentCommand.id)?.element;
+        if (command.parentId === null) {
+            return this.elementRef.nativeElement;
         }
+        const parentElement = this.executedCommandsCache.get(command.parentId)?.element;
         if (!parentElement) {
-            throw richTextRendererError('text_parent_wrong_type', { command });
+            throw richTextRendererError('text_parent_not_found', { command });
         }
         return parentElement;
     }
-    findFollowingElement(command) {
-        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;
-            }
-        }
-        return nextElement;
-    }
-    renderInsertOrAppend(nodeToRender, parentElement, nextElement) {
-        if (nextElement) {
-            this.renderer.insertBefore(parentElement, nodeToRender, nextElement);
-        }
-        else {
-            this.renderer.appendChild(parentElement, nodeToRender);
-        }
+    renderInsertAfter(node, { parentElement, previousSibling }) {
+        this.renderer.insertBefore(parentElement, node, previousSibling ? previousSibling.nextSibling : parentElement.firstChild);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", 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 }); }
@@ -1401,5 +1364,5 @@ const isContentfulEntryType = (entry, type) => entry.sys.contentType.sys.id ===
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CONTENTFUL_CONFIG, CONTENTFUL_FILE_LABELS, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, DEFAULT_CONTENTFUL_FILE_LABELS, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, injectContentfulConfig, injectContentfulFileLabels, isContentfulEntryType, isContentfulGqlAsset, isRichTextRootNode, marksToClass, marksToTags, parseContentfulImageSize, provideContentfulConfig, provideContentfulFileLabels, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map