@taon-dev/cms 21.0.24 → 21.0.25

package/ts-source/browser-code-prod/taon-posts/taon-cms-post/taon-cms-post.component.ts

@@ -10,13 +10,15 @@
   
  * ========================================================================== */
 
-import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, TemplateRef, ViewChild, computed, effect, inject, input, model, output, signal, untracked, viewChild, } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, TemplateRef, ViewChild, computed, effect, inject, input, model, output, signal, untracked, viewChild, OnDestroy, } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDialog } from '@angular/material/dialog';
-import { MatCardModule } from '@angular/material/card';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -30,21 +32,28 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { Translation } from '@taon-dev/i18n/browser-prod';
 import { TaonPermissionApiService } from '@taon-dev/session/browser-prod';
 import type { TaonPermissionEntity } from '@taon-dev/session/browser-prod';
-import { TaonConfirmDialogComponent } from '@taon-dev/ui/browser-prod';
+import { editorTableSchema, TaonConfirmDialogComponent, } from '@taon-dev/ui/browser-prod';
+import { createTableEditor, insertTable } from '@taon-dev/ui/browser-prod';
 import { Editor, NgxEditorModule, toHTML } from 'ngx-editor';
 import type { Toolbar } from 'ngx-editor';
+import type { Command } from 'prosemirror-state';
+import { addRowBefore, addRowAfter, deleteRow, addColumnBefore, addColumnAfter, deleteColumn, deleteTable, } from 'prosemirror-tables';
+import { tableEditing } from 'prosemirror-tables';
 import { Observable, Subscription, finalize, firstValueFrom, forkJoin, from, of, switchMap, take, } from 'rxjs';
 import { Taon__NS____FILE_RELATIVE_PATH, Taon__NS__asset, Taon__NS__assetsFrom, Taon__NS__assetsListFrom, Taon__NS__createContext, Taon__NS__createContextTemplate, Taon__NS__error, Taon__NS__getResponseValue, Taon__NS__isBrowser, Taon__NS__isElectron, Taon__NS__isNode, Taon__NS__isWebSQL, Taon__NS__LANG_IMPORT_MAP, Taon__NS__removeLoader, Taon__NS__Response, Taon__NS__ResponseHtml, Taon__NS__StartParams } from 'taon/browser-prod';
+import type { TaonStorageObject } from 'taon/browser-prod';
 import { ___NS__add, ___NS__after, ___NS__ary, ___NS__assign, ___NS__assignIn, ___NS__assignInWith, ___NS__assignWith, ___NS__at, ___NS__attempt, ___NS__before, ___NS__bind, ___NS__bindAll, ___NS__bindKey, ___NS__camelCase, ___NS__capitalize, ___NS__castArray, ___NS__ceil, ___NS__chain, ___NS__chunk, ___NS__clamp, ___NS__clone, ___NS__cloneDeep, ___NS__cloneDeepWith, ___NS__cloneWith, ___NS__compact, ___NS__concat, ___NS__cond, ___NS__conforms, ___NS__conformsTo, ___NS__constant, ___NS__countBy, ___NS__create, ___NS__curry, ___NS__curryRight, ___NS__debounce, ___NS__deburr, ___NS__defaults, ___NS__defaultsDeep, ___NS__defaultTo, ___NS__defer, ___NS__delay, ___NS__difference, ___NS__differenceBy, ___NS__differenceWith, ___NS__divide, ___NS__drop, ___NS__dropRight, ___NS__dropRightWhile, ___NS__dropWhile, ___NS__each, ___NS__eachRight, ___NS__endsWith, ___NS__entries, ___NS__entriesIn, ___NS__eq, ___NS__escape, ___NS__escapeRegExp, ___NS__every, ___NS__extend, ___NS__extendWith, ___NS__fill, ___NS__filter, ___NS__find, ___NS__findIndex, ___NS__findKey, ___NS__findLast, ___NS__findLastIndex, ___NS__findLastKey, ___NS__first, ___NS__flatMap, ___NS__flatMapDeep, ___NS__flatMapDepth, ___NS__flatten, ___NS__flattenDeep, ___NS__flattenDepth, ___NS__flip, ___NS__floor, ___NS__flow, ___NS__flowRight, ___NS__forEach, ___NS__forEachRight, ___NS__forIn, ___NS__forInRight, ___NS__forOwn, ___NS__forOwnRight, ___NS__fromPairs, ___NS__functions, ___NS__functionsIn, ___NS__get, ___NS__groupBy, ___NS__gt, ___NS__gte, ___NS__has, ___NS__hasIn, ___NS__head, ___NS__identity, ___NS__includes, ___NS__indexOf, ___NS__initial, ___NS__inRange, ___NS__intersection, ___NS__intersectionBy, ___NS__intersectionWith, ___NS__invert, ___NS__invertBy, ___NS__invoke, ___NS__invokeMap, ___NS__isArguments, ___NS__isArray, ___NS__isArrayBuffer, ___NS__isArrayLike, ___NS__isArrayLikeObject, ___NS__isBoolean, ___NS__isBuffer, ___NS__isDate, ___NS__isElement, ___NS__isEmpty, ___NS__isEqual, ___NS__isEqualWith, ___NS__isError, ___NS__isFinite, ___NS__isFunction, ___NS__isInteger, ___NS__isLeafObject, ___NS__isLength, ___NS__isMap, ___NS__isMatch, ___NS__isMatchWith, ___NS__isNaN, ___NS__isNative, ___NS__isNil, ___NS__isNull, ___NS__isNumber, ___NS__isObject, ___NS__isObjectLike, ___NS__isPlainObject, ___NS__isRegExp, ___NS__isSafeInteger, ___NS__isSet, ___NS__isString, ___NS__isSymbol, ___NS__isTypedArray, ___NS__isUndefined, ___NS__isWeakMap, ___NS__isWeakSet, ___NS__iteratee, ___NS__join, ___NS__kebabCase, ___NS__keyBy, ___NS__keys, ___NS__keysIn, ___NS__last, ___NS__lastIndexOf, ___NS__lowerCase, ___NS__lowerFirst, ___NS__lt, ___NS__lte, ___NS__map, ___NS__mapKeys, ___NS__mapValues, ___NS__matches, ___NS__matchesProperty, ___NS__max, ___NS__maxBy, ___NS__mean, ___NS__meanBy, ___NS__memoize, ___NS__merge, ___NS__mergeWith, ___NS__method, ___NS__methodOf, ___NS__min, ___NS__minBy, ___NS__mixin, ___NS__multiply, ___NS__negate, ___NS__noop, ___NS__now, ___NS__nth, ___NS__nthArg, ___NS__omit, ___NS__omitBy, ___NS__once, ___NS__orderBy, ___NS__over, ___NS__overArgs, ___NS__overEvery, ___NS__overSome, ___NS__pad, ___NS__padEnd, ___NS__padStart, ___NS__parseInt, ___NS__partial, ___NS__partialRight, ___NS__partition, ___NS__pick, ___NS__pickBy, ___NS__property, ___NS__propertyOf, ___NS__pull, ___NS__pullAll, ___NS__pullAllBy, ___NS__pullAllWith, ___NS__pullAt, ___NS__random, ___NS__range, ___NS__rangeRight, ___NS__rearg, ___NS__reduce, ___NS__reduceRight, ___NS__reject, ___NS__remove, ___NS__repeat, ___NS__replace, ___NS__rest, ___NS__result, ___NS__reverse, ___NS__round, ___NS__sample, ___NS__sampleSize, ___NS__set, ___NS__setWith, ___NS__shuffle, ___NS__size, ___NS__slice, ___NS__snakeCase, ___NS__some, ___NS__sortBy, ___NS__sortedIndex, ___NS__sortedIndexBy, ___NS__sortedIndexOf, ___NS__sortedLastIndex, ___NS__sortedLastIndexBy, ___NS__sortedLastIndexOf, ___NS__sortedUniq, ___NS__sortedUniqBy, ___NS__split, ___NS__spread, ___NS__startCase, ___NS__startsWith, ___NS__stubArray, ___NS__stubFalse, ___NS__stubObject, ___NS__stubString, ___NS__stubTrue, ___NS__subtract, ___NS__sum, ___NS__sumBy, ___NS__tail, ___NS__take, ___NS__takeRight, ___NS__takeRightWhile, ___NS__takeWhile, ___NS__tap, ___NS__template, ___NS__templateSettings, ___NS__throttle, ___NS__thru, ___NS__times, ___NS__toArray, ___NS__toFinite, ___NS__toInteger, ___NS__toLength, ___NS__toLower, ___NS__toNumber, ___NS__toPairs, ___NS__toPairsIn, ___NS__toPath, ___NS__toPlainObject, ___NS__toSafeInteger, ___NS__toString, ___NS__toUpper, ___NS__transform, ___NS__trim, ___NS__trimEnd, ___NS__trimStart, ___NS__truncate, ___NS__unary, ___NS__unescape, ___NS__union, ___NS__unionBy, ___NS__unionWith, ___NS__uniq, ___NS__uniqBy, ___NS__uniqueId, ___NS__uniqWith, ___NS__unset, ___NS__unzip, ___NS__unzipWith, ___NS__update, ___NS__updateWith, ___NS__upperCase, ___NS__upperFirst, ___NS__values, ___NS__valuesIn, ___NS__without, ___NS__words, ___NS__wrap, ___NS__xor, ___NS__xorBy, ___NS__xorWith, ___NS__zip, ___NS__zipObject, ___NS__zipObjectDeep, ___NS__zipWith } from 'tnp-core/browser-prod';
 import type { TaonCmsApplicationHookEntity } from '../../taon-cms-application-hook/taon-cms-application-hook.entity';
 import type { TaonCmsApplicationHook } from '../../taon-cms-application-hooks';
 import { TaonCmsCategoryApiService } from '../../taon-cms-category/taon-cms-category-api.service';
 import type { TaonCmsCategoryEntity } from '../../taon-cms-category/taon-cms-category.entity';
+import { TaonCmsCommentsComponent } from '../../taon-cms-comment/taon-cms-comments.component';
 import { TaonCmsContentApiService } from '../../taon-cms-content/taon-cms-content-api.service';
 import { TaonCmsContentConfigService } from '../../taon-cms-content/taon-cms-content.config.service';
 import type { TaonCmsContentEntity } from '../../taon-cms-content/taon-cms-content.entity';
 import type { TaonCmsUpdateContent } from '../../taon-cms-content/taon-cms-content.models';
 import type { TaonCmsContentFields } from '../../taon-cms-content/taon-cms-content.models';
+import { extractDocumentHtml } from './taon-cms-document-extractor';
 import type { TaonCmsPostVersionKind, TaonCmsPostVersionLinks, } from '../../taon-cms-content/taon-cms-content.models';
 import { TaonCmsContentType } from '../../taon-cms-content/taon-cms-content.models';
 import { resolveTemplateVariables } from '../../taon-cms-content/taon-cms-template-variables';
@@ -55,14 +64,26 @@ import { TaonCmsTaxonomyQuickCreateDialogComponent } from '../../taon-cms-taxono
 import { TaonCmsRevisionChooserComponent } from '../taon-cms-revision-chooser/taon-cms-revision-chooser.component';
 import { TaonRelatedPostChooserComponent } from '../taon-related-post-chooser/taon-related-post-chooser.component';
 import type { TaonRelatedPostChooserData } from '../taon-related-post-chooser/taon-related-post-chooser.component';
-import { TaonCmsPostChoiceDialogComponent, } from './taon-cms-post-choice-dialog.component';
-import type { TaonCmsPostChoiceDialogData } from './taon-cms-post-choice-dialog.component';
 import { TaonCmsEditableDirective } from './taon-cms-editable.directive';
-import { TaonCmsCommentsComponent } from '../../taon-cms-comment/taon-cms-comments.component';
+import { TaonCmsPostThumbnailComponent } from './taon-cms-post-thumbnail.component';
+import { TaonCmsPostChoiceDialogComponent } from './taon-cms-post-choice-dialog.component';
+import type { TaonCmsPostChoiceDialogData } from './taon-cms-post-choice-dialog.component';
 import type { TaonCmsPostDraft, TaonCmsPostMode } from './taon-cms-post.models';
 import { defaultThumbnailKey, defaultThumbnailUrl, generateVideoThumbnail, } from './taon-cms-thumbnail';
-import { NgTemplateOutlet } from '@angular/common';
-const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./i18n/taon-cms-post.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.html.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.ts.de-DE.i18n.data')).default } } as any);
+import { MatDividerModule } from '@angular/material/divider';
+const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post-thumbnail.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-thumbnail.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-thumbnail.component.ts.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./i18n/taon-cms-post.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.html.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.ts.de-DE.i18n.data')).default } } as any);
+interface RelatedChildFileSelection {
+    id: number;
+    file: File;
+    status: 'pending' | 'processing' | 'success' | 'error';
+    progress: number;
+    error: string;
+    createdTitle?: string;
+    uploads?: {
+        source?: TaonStorageObject;
+        thumbnail?: TaonStorageObject;
+    };
+}
 @Component({
     selector: 'taon-cms-post',
     templateUrl: './taon-cms-post.component.html',
@@ -87,6 +108,9 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
         TaonCmsEditableDirective,
         TaonCmsCommentsComponent,
         NgTemplateOutlet,
+        MatDividerModule,
+        DragDropModule,
+        TaonCmsPostThumbnailComponent,
     ],
     providers: [
         TaonCmsContentApiService,
@@ -96,7 +120,7 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
         TaonCmsTagApiService,
     ],
 })
-export class TaonCmsPostComponent implements AfterViewInit {
+export class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
     readonly t = t.for(this);
     readonly post = input<TaonCmsContentEntity | null>(null);
     readonly mode = model<TaonCmsPostMode>('view');
@@ -175,6 +199,15 @@ export class TaonCmsPostComponent implements AfterViewInit {
             accept: '',
         },
     ] as const;
+    protected readonly tableCommands = [
+        { label: 'Add row above', command: addRowBefore },
+        { label: 'Add row below', command: addRowAfter },
+        { label: 'Delete row', command: deleteRow },
+        { label: 'Add column before', command: addColumnBefore },
+        { label: 'Add column after', command: addColumnAfter },
+        { label: 'Delete column', command: deleteColumn },
+        { label: 'Delete table', command: deleteTable },
+    ];
     readonly mediaAttachment = computed(() => this.mediaAttachments.find(media => media.type === this.draft().type));
     readonly busy = signal(false);
     readonly thumbnailPreviewUrl = signal('');
@@ -219,6 +252,52 @@ export class TaonCmsPostComponent implements AfterViewInit {
     readonly relatedPosts = signal<TaonCmsContentEntity[]>([]);
     readonly relatedPostsLoading = signal(false);
     readonly relatedPostsError = signal('');
+    readonly childTitlePrefix = signal('');
+    readonly childFiles = signal<RelatedChildFileSelection[]>([]);
+    readonly childBatchError = signal('');
+    readonly canUploadRelatedChildren = computed(() => !!this.currentPost() &&
+        !!this.childTitlePrefix().trim() &&
+        !this.relatedPostsLoading() &&
+        !this.relatedPostsError() &&
+        !this.busy() &&
+        !this.dialogOpen() &&
+        this.childFiles().some(file => file.status !== 'success'));
+    readonly childOverallProgress = computed(() => {
+        const files = this.childFiles();
+        return files.length
+            ? Math.round(files.reduce((total, file) => total +
+                (file.status === 'success' ? 100 : Math.max(0, file.progress)), 0) / files.length)
+            : 0;
+    });
+    readonly childTitlePreviews = computed(() => {
+        const prefix = this.childTitlePrefix().trim();
+        let highest = 0;
+        if (prefix) {
+            for (const post of this.relatedPosts()) {
+                const titlePrefix = `${prefix} `;
+                if (!post.title.startsWith(titlePrefix)) {
+                    continue;
+                }
+                const suffix = post.title.slice(titlePrefix.length);
+                if (/^\d+$/.test(suffix)) {
+                    const number = Number(suffix);
+                    if (Number.isSafeInteger(number)) {
+                        highest = Math.max(highest, number);
+                    }
+                }
+            }
+        }
+        return this.childFiles().map(file => {
+            if (file.status === 'success' && file.createdTitle) {
+                return file.createdTitle;
+            }
+            highest += 1;
+            return prefix ? `${prefix} ${String(highest).padStart(2, '0')}` : '';
+        });
+    });
+    private childFileSequence = 0;
+    private childTitlePrefixParentId: number | null = null;
+    private childTitlePrefixEdited = false;
     readonly parentPost = signal<TaonCmsContentEntity | null>(null);
     readonly parentPostLoading = signal(false);
     readonly parentPostError = signal('');
@@ -283,7 +362,7 @@ export class TaonCmsPostComponent implements AfterViewInit {
     readonly statusLabel = computed(() => {
         const status = this.mode() === 'add'
             ? this.draftStatus()
-            : this.currentPost()?.status ?? 'draft';
+            : (this.currentPost()?.status ?? 'draft');
         switch (status) {
             case 'published':
                 return this.t.gettext('Status: Published');
@@ -338,13 +417,21 @@ export class TaonCmsPostComponent implements AfterViewInit {
     private postVersionLinksRequest = 0;
     private applicationHooksLoad?: Subscription;
     private permissionsLoad?: Subscription;
+    protected insertTable(event: MouseEvent): void {
+        event.preventDefault();
+        const editor = this.contentEditor();
+        if (!editor || this.busy() || this.dialogOpen()) {
+            return;
+        }
+        insertTable(editor);
+    }
     ngAfterViewInit(): void {
         if (this.actionButtonsTemplateRef) {
             this.actionButtonsTemplate.emit(this.actionButtonsTemplateRef);
         }
     }
     constructor() {
-        const editor = new Editor({
+        const editor = createTableEditor({
             attributes: {
                 'aria-label': this.t.gettext('Post body'),
                 style: 'min-height: 20rem',
@@ -512,6 +599,7 @@ export class TaonCmsPostComponent implements AfterViewInit {
             this.releaseThumbnailPreview();
         });
     }
+    ngOnDestroy(): void { }
     loadTaxonomy(preserveSelectedTags = false): void {
         this.taxonomyLoad?.unsubscribe();
         const session = this.editorSession;
@@ -893,6 +981,21 @@ export class TaonCmsPostComponent implements AfterViewInit {
             });
         });
     }
+    reorderRelatedPosts(event: CdkDragDrop<TaonCmsContentEntity[]>): void {
+        if (!this.editing() ||
+            this.busy() ||
+            this.dialogOpen() ||
+            this.relatedPostsLoading() ||
+            this.relatedPostsError() ||
+            event.previousContainer !== event.container) {
+            return;
+        }
+        this.relatedPosts.update(posts => {
+            const reordered = [...posts];
+            moveItemInArray(reordered, event.previousIndex, event.currentIndex);
+            return reordered;
+        });
+    }
     removeRelatedPost(id: number): void {
         if (!this.editing() ||
             this.busy() ||
@@ -1087,6 +1190,23 @@ export class TaonCmsPostComponent implements AfterViewInit {
             },
         });
     }
+    protected canRunTableCommand(command: Command): boolean {
+        const editor = this.contentEditor();
+        return (!!editor &&
+            !this.busy() &&
+            !this.dialogOpen() &&
+            command(editor.view.state));
+    }
+    protected runTableCommand(event: MouseEvent, command: Command): void {
+        event.preventDefault();
+        const editor = this.contentEditor();
+        if (!editor || this.busy() || this.dialogOpen()) {
+            return;
+        }
+        const view = editor.view;
+        command(view.state, transaction => view.dispatch(transaction), view);
+        view.focus();
+    }
     updateRawContent(event: Event): void {
         if (event.target instanceof HTMLTextAreaElement) {
             this.updateDraft('body', event.target.value);
@@ -1139,6 +1259,281 @@ export class TaonCmsPostComponent implements AfterViewInit {
         }
         this.draft.update(draft => ({ ...draft, [field]: value }));
     }
+    updateChildTitlePrefix(event: Event): void {
+        if (event.target instanceof HTMLInputElement) {
+            this.childTitlePrefixEdited = true;
+            this.childTitlePrefix.set(event.target.value);
+        }
+    }
+    relatedChildFilesSelected(event: Event): void {
+        if (!(event.target instanceof HTMLInputElement)) {
+            this.childBatchError.set(this.t.gettext('Unable to read the selected files.'));
+            return;
+        }
+        const input = event.target;
+        const files = Array.from(input.files ?? []);
+        input.value = '';
+        if (!this.currentPost() || this.busy() || !files.length) {
+            return;
+        }
+        this.childBatchError.set('');
+        this.childFiles.update(selected => [
+            ...selected,
+            ...files.map(file => ({
+                id: ++this.childFileSequence,
+                file,
+                status: 'pending' as const,
+                progress: 0,
+                error: '',
+            })),
+        ]);
+    }
+    removeRelatedChildFile(id: number): void {
+        if (this.busy()) {
+            return;
+        }
+        this.childFiles.update(files => files.filter(file => file.id !== id));
+    }
+    async uploadAndCreateChildren(): Promise<void> {
+        const parent = this.currentPost();
+        const titlePrefix = this.childTitlePrefix().trim();
+        if (!parent ||
+            !titlePrefix ||
+            this.busy() ||
+            !this.childFiles().some(file => file.status !== 'success')) {
+            return;
+        }
+        const pendingFiles = this.childFiles()
+            .map((file, index) => ({ file, index }))
+            .filter(({ file }) => file.status !== 'success');
+        this.busy.set(true);
+        this.childBatchError.set('');
+        try {
+            for (const { file: selectedFile, index } of pendingFiles) {
+                const expectedTitle = this.childTitlePreviews()[index];
+                this.updateRelatedChildFile(selectedFile.id, {
+                    status: 'processing',
+                    progress: selectedFile.uploads ? 75 : 0,
+                    error: '',
+                });
+                const type = this.relatedChildFileType(selectedFile.file);
+                let body: string | null = null;
+                try {
+                    if (type === TaonCmsContentType.Normal) {
+                        body = await extractDocumentHtml(selectedFile.file);
+                        this.updateRelatedChildFile(selectedFile.id, { progress: 10 });
+                    }
+                    let uploads = this.childFiles().find(file => file.id === selectedFile.id)?.uploads;
+                    if (!uploads?.source) {
+                        const source = await this.api.uploadMedia(selectedFile.file, percentage => this.updateRelatedChildFile(selectedFile.id, {
+                            progress: type === TaonCmsContentType.Video
+                                ? Math.round(percentage * 0.65)
+                                : Math.round(percentage * 0.8),
+                        }));
+                        uploads = { ...uploads, source };
+                        this.updateRelatedChildFile(selectedFile.id, { uploads });
+                    }
+                    if (type === TaonCmsContentType.Video && !uploads.thumbnail) {
+                        const thumbnailBlob = await generateVideoThumbnail(selectedFile.file);
+                        const extension = thumbnailBlob.type === 'image/webp' ? 'webp' : 'png';
+                        const thumbnail = await this.api.uploadMedia(new File([thumbnailBlob], `thumbnail.${extension}`, {
+                            type: thumbnailBlob.type,
+                        }), percentage => this.updateRelatedChildFile(selectedFile.id, {
+                            progress: 65 + Math.round(percentage * 0.25),
+                        }));
+                        uploads = { ...uploads, thumbnail };
+                        this.updateRelatedChildFile(selectedFile.id, { uploads });
+                    }
+                    this.updateRelatedChildFile(selectedFile.id, { progress: 95 });
+                    const thumbnailKey = type === TaonCmsContentType.Video
+                        ? uploads.thumbnail?.key
+                        : type === TaonCmsContentType.Audio
+                            ? defaultThumbnailKey(TaonCmsContentType.Audio)
+                            : defaultThumbnailKey(TaonCmsContentType.Normal);
+                    if (!thumbnailKey) {
+                        throw new Error('The video thumbnail could not be uploaded.');
+                    }
+                    const sourceUpload = uploads.source;
+                    if (!sourceUpload) {
+                        throw new Error('The uploaded source file is unavailable.');
+                    }
+                    const result = await this.api.createRelatedChild(parent.id, {
+                        titlePrefix,
+                        expectedTitle,
+                        fileName: selectedFile.file.name,
+                        mimeType: selectedFile.file.type,
+                        sourceKey: sourceUpload.key,
+                        type,
+                        body,
+                        videoKey: type === TaonCmsContentType.Video ? sourceUpload.key : null,
+                        audioKey: type === TaonCmsContentType.Audio ? sourceUpload.key : null,
+                        attachmentKey: type === TaonCmsContentType.Attachment ? sourceUpload.key : null,
+                        thumbnailKey,
+                    });
+                    this.recordRelatedChildSuccess(selectedFile.id, result.child, result.parentVersion);
+                    if (type === TaonCmsContentType.Normal) {
+                        const cleanupErrors = await this.cleanupRelatedChildUploads(selectedFile.id, uploads, [sourceUpload]);
+                        if (cleanupErrors.length) {
+                            this.updateRelatedChildFile(selectedFile.id, {
+                                error: cleanupErrors.join(' '),
+                            });
+                        }
+                    }
+                }
+                catch (error: unknown) {
+                    console.error('[taon-cms-post] Unable to create related child from file', selectedFile.file.name, error);
+                    let relatedPosts: TaonCmsContentEntity[] | null = null;
+                    try {
+                        relatedPosts = await firstValueFrom(this.api.listRelatedPosts(parent.id));
+                        this.relatedPosts.set(relatedPosts);
+                    }
+                    catch (refreshError: unknown) {
+                        console.error('[taon-cms-post] Unable to verify related child creation', refreshError);
+                    }
+                    const uploads = this.childFiles().find(file => file.id === selectedFile.id)?.uploads;
+                    const existingChild = relatedPosts?.find(post => post.title === expectedTitle &&
+                        this.relatedChildMatchesFile(post, type, body, uploads));
+                    if (existingChild) {
+                        this.recordRelatedChildSuccess(selectedFile.id, existingChild, this.currentPost()?.version ?? parent.version);
+                        if (type === TaonCmsContentType.Normal && uploads?.source) {
+                            const cleanupErrors = await this.cleanupRelatedChildUploads(selectedFile.id, uploads, [uploads.source]);
+                            if (cleanupErrors.length) {
+                                this.updateRelatedChildFile(selectedFile.id, {
+                                    error: cleanupErrors.join(' '),
+                                });
+                            }
+                        }
+                        continue;
+                    }
+                    const cleanupErrors = uploads
+                        ? relatedPosts
+                            ? await this.cleanupRelatedChildUploads(selectedFile.id, uploads)
+                            : []
+                        : [];
+                    const reason = error instanceof Error ? error.message : String(error);
+                    const verificationError = relatedPosts
+                        ? ''
+                        : `${this.t.gettext('The creation result could not be verified; retrying will not duplicate an existing child.')} `;
+                    this.updateRelatedChildFile(selectedFile.id, {
+                        status: 'error',
+                        error: `${verificationError}${reason}` +
+                            (cleanupErrors.length ? ` ${cleanupErrors.join(' ')}` : ''),
+                    });
+                    break;
+                }
+            }
+        }
+        finally {
+            this.busy.set(false);
+            this.loadRelatedPosts();
+        }
+    }
+    private relatedChildFileType(file: File): TaonCmsContentType {
+        const extension = file.name.split('.').pop()?.toLowerCase() ?? '';
+        if (['doc', 'docx', 'rtf', 'txt'].includes(extension)) {
+            return TaonCmsContentType.Normal;
+        }
+        if (file.type.startsWith('video/') ||
+            [
+                '3gp',
+                'avi',
+                'm4v',
+                'mkv',
+                'mov',
+                'mp4',
+                'mpeg',
+                'mpg',
+                'ogv',
+                'webm',
+            ].includes(extension)) {
+            return TaonCmsContentType.Video;
+        }
+        if (file.type.startsWith('audio/') ||
+            [
+                'aac',
+                'flac',
+                'm4a',
+                'mp3',
+                'oga',
+                'ogg',
+                'opus',
+                'wav',
+                'weba',
+                'wma',
+            ].includes(extension)) {
+            return TaonCmsContentType.Audio;
+        }
+        return TaonCmsContentType.Attachment;
+    }
+    private relatedChildMatchesFile(post: TaonCmsContentEntity, type: TaonCmsContentType, body: string | null, uploads?: RelatedChildFileSelection['uploads']): boolean {
+        const thumbnailKey = type === TaonCmsContentType.Video
+            ? uploads?.thumbnail?.key
+            : type === TaonCmsContentType.Audio
+                ? defaultThumbnailKey(TaonCmsContentType.Audio)
+                : defaultThumbnailKey(TaonCmsContentType.Normal);
+        return (post.type === type &&
+            post.body === body &&
+            post.videoKey ===
+                (type === TaonCmsContentType.Video ? uploads?.source?.key : null) &&
+            post.audioKey ===
+                (type === TaonCmsContentType.Audio ? uploads?.source?.key : null) &&
+            post.attachmentKey ===
+                (type === TaonCmsContentType.Attachment
+                    ? uploads?.source?.key
+                    : null) &&
+            post.thumbnailKey === thumbnailKey);
+    }
+    private recordRelatedChildSuccess(fileId: number, child: TaonCmsContentEntity, parentVersion: number): void {
+        this.relatedPosts.update(posts => posts.some(post => post.id === child.id) ? posts : [...posts, child]);
+        this.currentPost.update(post => post
+            ? ({
+                ...post,
+                version: parentVersion,
+                relatedPosts: this.relatedPosts(),
+            } as TaonCmsContentEntity)
+            : post);
+        this.updateRelatedChildFile(fileId, {
+            status: 'success',
+            progress: 100,
+            createdTitle: child.title,
+            error: '',
+            uploads: undefined,
+        });
+    }
+    private async cleanupRelatedChildUploads(fileId: number, uploads: NonNullable<RelatedChildFileSelection['uploads']>, only?: TaonStorageObject[]): Promise<string[]> {
+        const objects = only ??
+            [uploads.thumbnail, uploads.source].filter((object): object is TaonStorageObject => !!object);
+        const remaining = new Set<string>();
+        const errors: string[] = [];
+        for (const object of objects) {
+            try {
+                if (!(await this.api.deleteUnattachedMedia(object.key))) {
+                    remaining.add(object.key);
+                    errors.push(this.t.gettext('An uploaded file is still linked to a post and was not deleted.'));
+                }
+            }
+            catch (error: unknown) {
+                console.error('[taon-cms-post] Unable to clean up uploaded media', object.key, error);
+                remaining.add(object.key);
+                errors.push(this.t.gettext('An uploaded file could not be cleaned up.'));
+            }
+        }
+        const retained = {
+            ...(uploads.source && remaining.has(uploads.source.key)
+                ? { source: uploads.source }
+                : {}),
+            ...(uploads.thumbnail && remaining.has(uploads.thumbnail.key)
+                ? { thumbnail: uploads.thumbnail }
+                : {}),
+        };
+        this.updateRelatedChildFile(fileId, {
+            uploads: Object.keys(retained).length ? retained : undefined,
+        });
+        return errors;
+    }
+    private updateRelatedChildFile(id: number, changes: Partial<RelatedChildFileSelection>): void {
+        this.childFiles.update(files => files.map(file => (file.id === id ? { ...file, ...changes } : file)));
+    }
     async fileSelected(event: Event): Promise<void> {
         if (!(event.target instanceof HTMLInputElement)) {
             this.error.set(this.t.gettext('Unable to read the selected media file.'));
@@ -1592,6 +1987,16 @@ export class TaonCmsPostComponent implements AfterViewInit {
         this.uploadedMediaPreview.set(null);
         this.mediaPreviewSignature = '';
         this.mediaPreviewRequest += 1;
+        if ((post?.id ?? null) !== this.childTitlePrefixParentId) {
+            this.childTitlePrefixParentId = post?.id ?? null;
+            this.childTitlePrefixEdited = false;
+            this.childTitlePrefix.set(post ? `${post.title} child` : '');
+            this.childFiles.set([]);
+            this.childBatchError.set('');
+        }
+        else if (post && !this.childTitlePrefixEdited) {
+            this.childTitlePrefix.set(`${post.title} child`);
+        }
         this.currentPost.set(post);
         this.loadVisibilityConfiguration(post && this.mode() !== 'view-clean' ? post : null);
         this.loadParentPost(post && this.mode() !== 'view-clean' ? post : null);

package/ts-source/browser-code-prod/taon-posts/taon-cms-post-details-page/i18n/taon-cms-post-details-page.component.ts.de-DE.i18n.data.ts

@@ -23,7 +23,8 @@ export default {
     "tags": [
         {
             "gettextString": "Back to Courses",
-            "lineNumber": 32
+            "lineNumber": 32,
+            "translation": "Zurück zu den Kursen"
         },
         {
             "gettextString": "Back to Posts",

package/ts-source/browser-code-prod/taon-posts/taon-cms-post-details-page/i18n/taon-cms-post-details-page.component.ts.de-DE.po

@@ -6,7 +6,7 @@ msgstr ""
 
 #: src/lib/taon-posts/taon-cms-post-details-page/taon-cms-post-details-page.component.ts:32
 msgid "Back to Courses"
-msgstr ""
+msgstr "Zurück zu den Kursen"
 
 #: src/lib/taon-posts/taon-cms-post-details-page/taon-cms-post-details-page.component.ts:33
 msgid "Back to Posts"

package/ts-source/browser-code-prod/taon-posts/taon-cms-post-details-page/i18n/taon-cms-post-details-page.component.ts.pl-PL.i18n.data.ts

@@ -23,7 +23,8 @@ export default {
     "tags": [
         {
             "gettextString": "Back to Courses",
-            "lineNumber": 32
+            "lineNumber": 32,
+            "translation": "Wróć do kursów"
         },
         {
             "gettextString": "Back to Posts",

package/ts-source/browser-code-prod/taon-posts/taon-cms-post-details-page/i18n/taon-cms-post-details-page.component.ts.pl-PL.po

@@ -6,7 +6,7 @@ msgstr ""
 
 #: src/lib/taon-posts/taon-cms-post-details-page/taon-cms-post-details-page.component.ts:32
 msgid "Back to Courses"
-msgstr ""
+msgstr "Wróć do kursów"
 
 #: src/lib/taon-posts/taon-cms-post-details-page/taon-cms-post-details-page.component.ts:33
 msgid "Back to Posts"

package/ts-source/browser-code-prod/taon-posts/taon-cms-post-details-page/i18n/taon-cms-post-details-page.translation.ts

@@ -10,7 +10,7 @@
   
  * ========================================================================== */
 
-import { CoreModels__NS__BaseProjectType, CoreModels__NS__BaseProjectTypeArr, CoreModels__NS__BuildType, CoreModels__NS__BuildTypeArr, CoreModels__NS__buildTypeToWatcherFn, CoreModels__NS__BuildWatcherErrorType, CoreModels__NS__BuildWatcherType, CoreModels__NS__BuildWatcherTypeArr, CoreModels__NS__CfontAlign, CoreModels__NS__CfontStyle, CoreModels__NS__ClassNameStaticProperty, CoreModels__NS__ContentType, CoreModels__NS__ContentTypeKeys, CoreModels__NS__CoreLibCategory, CoreModels__NS__CutableFileExt, CoreModels__NS__DatabaseType, CoreModels__NS__DeepPartial, CoreModels__NS__FileEvent, CoreModels__NS__FileExtension, CoreModels__NS__FirstParamsFrom, CoreModels__NS__FrameworkVersion, CoreModels__NS__GitConnection, CoreModels__NS__GitConnectionArr, CoreModels__NS__GlobalDependencies, CoreModels__NS__hasExitCleaningFunction, CoreModels__NS__HttpCode, CoreModels__NS__HttpMethod, CoreModels__NS__HttpMethodArr, CoreModels__NS__ImageFileExtension, CoreModels__NS__ImageFileExtensionArr, CoreModels__NS__InstalationType, CoreModels__NS__InstalationTypeArr, CoreModels__NS__LibType, CoreModels__NS__localhostDomain, CoreModels__NS__localhostIp127, CoreModels__NS__ManifestIcon, CoreModels__NS__MediaType, CoreModels__NS__MediaTypeAllArr, CoreModels__NS__mimeTypes, CoreModels__NS__NewFactoryType, CoreModels__NS__NpmInstallOptions, CoreModels__NS__NpmPublishOptions, CoreModels__NS__NpmSpecialVersions, CoreModels__NS__OrignalClassKey, CoreModels__NS__OutFolder, CoreModels__NS__Package, CoreModels__NS__ParamType, CoreModels__NS__parentLocation, CoreModels__NS__pathToChildren, CoreModels__NS__Position, CoreModels__NS__PreReleaseVersionTag, CoreModels__NS__PROGRESS_DATA_TYPE, CoreModels__NS__PUSHTYPE, CoreModels__NS__PwaManifest, CoreModels__NS__ReleaseVersionType, CoreModels__NS__ReleaseVersionTypeEnum, CoreModels__NS__RunOptions, CoreModels__NS__Size, CoreModels__NS__SPECIAL_APP_READY_MESSAGE, CoreModels__NS__SPECIAL_WORKER_READY_MESSAGE, CoreModels__NS__StatusCode401, CoreModels__NS__tagForTaskName, CoreModels__NS__TaonHttpErrorCustomProp, CoreModels__NS__TsUsage, CoreModels__NS__UIFramework, CoreModels__NS__ValueOf, CoreModels__NS__VSCodeSettings } from 'tnp-core/browser-prod';
+import { CoreModels__NS__BaseProjectType, CoreModels__NS__BaseProjectTypeArr, CoreModels__NS__BuildType, CoreModels__NS__BuildTypeArr, CoreModels__NS__buildTypeToWatcherFn, CoreModels__NS__BuildWatcherErrorType, CoreModels__NS__BuildWatcherType, CoreModels__NS__BuildWatcherTypeArr, CoreModels__NS__CfontAlign, CoreModels__NS__CfontStyle, CoreModels__NS__ClassNameStaticProperty, CoreModels__NS__ContentType, CoreModels__NS__ContentTypeKeys, CoreModels__NS__CoreLibCategory, CoreModels__NS__CutableFileExt, CoreModels__NS__DatabaseType, CoreModels__NS__DeepPartial, CoreModels__NS__FileEvent, CoreModels__NS__FileExtension, CoreModels__NS__FirstParamsFrom, CoreModels__NS__FrameworkVersion, CoreModels__NS__GitConnection, CoreModels__NS__GitConnectionArr, CoreModels__NS__GlobalDependencies, CoreModels__NS__hasExitCleaningFunction, CoreModels__NS__HttpCode, CoreModels__NS__HttpMethod, CoreModels__NS__HttpMethodArr, CoreModels__NS__ImageFileExtension, CoreModels__NS__ImageFileExtensionArr, CoreModels__NS__InstalationType, CoreModels__NS__InstalationTypeArr, CoreModels__NS__LibType, CoreModels__NS__localhostDomain, CoreModels__NS__localhostIp127, CoreModels__NS__ManifestIcon, CoreModels__NS__MediaType, CoreModels__NS__MediaTypeAllArr, CoreModels__NS__mimeTypes, CoreModels__NS__NewFactoryType, CoreModels__NS__NpmInstallOptions, CoreModels__NS__NpmPublishOptions, CoreModels__NS__NpmSpecialVersions, CoreModels__NS__OrignalClassKey, CoreModels__NS__OutFolder, CoreModels__NS__Package, CoreModels__NS__ParamType, CoreModels__NS__parentLocation, CoreModels__NS__pathToChildren, CoreModels__NS__Position, CoreModels__NS__PreReleaseVersionTag, CoreModels__NS__PROGRESS_DATA_TYPE, CoreModels__NS__PUSHTYPE, CoreModels__NS__PwaManifest, CoreModels__NS__queryExtract, CoreModels__NS__queryNormal, CoreModels__NS__ReleaseVersionType, CoreModels__NS__ReleaseVersionTypeEnum, CoreModels__NS__RunOptions, CoreModels__NS__Size, CoreModels__NS__SPECIAL_APP_READY_MESSAGE, CoreModels__NS__SPECIAL_WORKER_READY_MESSAGE, CoreModels__NS__StatusCode401, CoreModels__NS__tagForTaskName, CoreModels__NS__TaonHttpErrorCustomProp, CoreModels__NS__TaonRetryHttpErrorStatus, CoreModels__NS__TaonRetryLogicHeader, CoreModels__NS__TaonXStatusHeader, CoreModels__NS__TsUsage, CoreModels__NS__UIFramework, CoreModels__NS__ValueOf, CoreModels__NS__VSCodeSettings } from 'tnp-core/browser-prod';
 import { EnUsTraslationOverrideSrcLibTaonPostsTaonCmsPostDetailsPageTaonCmsPostDetailsPageComponentTs } from './taon-cms-post-details-page.component.ts.en-US.i18n.data';
 import { PlPlTraslationOverrideSrcLibTaonPostsTaonCmsPostDetailsPageTaonCmsPostDetailsPageComponentTs } from './taon-cms-post-details-page.component.ts.pl-PL.i18n.data';
 import { DeDeTraslationOverrideSrcLibTaonPostsTaonCmsPostDetailsPageTaonCmsPostDetailsPageComponentTs } from './taon-cms-post-details-page.component.ts.de-DE.i18n.data';

package/ts-source/browser-code-prod/taon-posts/taon-cms-posts-backoffice/i18n/taon-cms-posts-backoffice.component.html.de-DE.i18n.data.ts

@@ -33,6 +33,11 @@ export default {
             "lineNumber": 1,
             "translation": "CMS-Beiträge"
         },
+        {
+            "gettextString": "Loading posts...",
+            "lineNumber": 3,
+            "translation": "Beiträge werden geladen..."
+        },
         {
             "gettextString": "ID",
             "lineNumber": 22,
@@ -67,11 +72,6 @@ export default {
             "gettextString": "Archived",
             "lineNumber": 47,
             "translation": "Archiviert"
-        },
-        {
-            "gettextString": "Loading posts...",
-            "lineNumber": 3,
-            "translation": "Beiträge werden geladen..."
         }
     ]
 };