@taon-dev/cms 21.0.24 → 21.0.25

package/ts-source/browser-code/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';
 import { TaonPermissionApiService } from '@taon-dev/session/browser';
 import type { TaonPermissionEntity } from '@taon-dev/session/browser';
-import { TaonConfirmDialogComponent } from '@taon-dev/ui/browser';
+import { editorTableSchema, TaonConfirmDialogComponent, } from '@taon-dev/ui/browser';
+import { createTableEditor, insertTable } from '@taon-dev/ui/browser';
 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 } from 'taon/browser';
+import type { TaonStorageObject } from 'taon/browser';
 import { _ } from 'tnp-core/browser';
 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/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/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/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/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/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..."
         }
     ]
 };

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

@@ -8,6 +8,10 @@ msgstr ""
 msgid "CMS posts"
 msgstr "CMS-Beiträge"
 
+#: src/lib/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.component.html:3
+msgid "Loading posts..."
+msgstr "Beiträge werden geladen..."
+
 #: src/lib/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.component.html:22
 msgid "ID"
 msgstr "ID"
@@ -35,7 +39,3 @@ msgstr "Entwurf"
 #: src/lib/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.component.html:47
 msgid "Archived"
 msgstr "Archiviert"
-
-#: src/lib/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.component.html:3
-msgid "Loading posts..."
-msgstr "Beiträge werden geladen..."

package/ts-source/browser-code/taon-posts/taon-cms-posts-backoffice/i18n/taon-cms-posts-backoffice.component.html.en-US.i18n.data.ts

@@ -33,6 +33,11 @@ export default {
             "lineNumber": 1,
             "translation": "CMS posts"
         },
+        {
+            "gettextString": "Loading posts...",
+            "lineNumber": 3,
+            "translation": "Loading posts..."
+        },
         {
             "gettextString": "ID",
             "lineNumber": 22
@@ -60,11 +65,6 @@ export default {
         {
             "gettextString": "Archived",
             "lineNumber": 47
-        },
-        {
-            "gettextString": "Loading posts...",
-            "lineNumber": 3,
-            "translation": "Loading posts..."
         }
     ]
 };