@taon-dev/cms 21.0.23 → 21.0.25

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

@@ -10,13 +10,16 @@
   
  * ========================================================================== */
 
-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';
 import { MatInputModule } from '@angular/material/input';
@@ -25,23 +28,33 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule } from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { Translation } from '@taon-dev/i18n/websql';
 import { TaonPermissionApiService } from '@taon-dev/session/websql';
 import type { TaonPermissionEntity } from '@taon-dev/session/websql';
-import { TaonConfirmDialogComponent } from '@taon-dev/ui/websql';
+import { editorTableSchema, TaonConfirmDialogComponent, } from '@taon-dev/ui/websql';
+import { createTableEditor, insertTable } from '@taon-dev/ui/websql';
 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/websql';
+import type { TaonStorageObject } from 'taon/websql';
 import { _ } from 'tnp-core/websql';
 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';
 import type { TaonCmsTemplateVariable } from '../../taon-cms-content/taon-cms-template-variables';
@@ -52,10 +65,25 @@ import { TaonCmsRevisionChooserComponent } from '../taon-cms-revision-chooser/ta
 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 { TaonCmsEditableDirective } from './taon-cms-editable.directive';
+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.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',
@@ -65,6 +93,7 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
         MatButtonModule,
         MatCheckboxModule,
         MatCardModule,
+        MatExpansionModule,
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
@@ -75,8 +104,13 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
         MatProgressBarModule,
         MatRadioModule,
         MatSelectModule,
+        MatTooltipModule,
         TaonCmsEditableDirective,
+        TaonCmsCommentsComponent,
         NgTemplateOutlet,
+        MatDividerModule,
+        DragDropModule,
+        TaonCmsPostThumbnailComponent,
     ],
     providers: [
         TaonCmsContentApiService,
@@ -86,12 +120,13 @@ 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');
     readonly changed = output<TaonCmsContentEntity>();
     readonly deleted = output<TaonCmsContentEntity>();
+    readonly editPostRequested = output<TaonCmsContentEntity>();
     readonly duplicated = output<TaonCmsContentEntity>();
     readonly cancelled = output<void>();
     readonly actionButtonsTemplate = output<TemplateRef<unknown>>();
@@ -100,6 +135,7 @@ export class TaonCmsPostComponent implements AfterViewInit {
     readonly currentPost = signal<TaonCmsContentEntity | null>(null);
     readonly placeholderShortIntro = this.t.signal.gettext('A short introduction...');
     readonly placeholderTitle = this.t.signal.gettext('Title');
+    readonly visibilityInheritedTooltip = this.t.signal.gettext('Visibility inherited from parent');
     readonly placeholderTellYourStory = this.t.signal.gettext('Tell your story...');
     readonly draft = signal<TaonCmsPostDraft>({
         type: TaonCmsContentType.Normal,
@@ -126,6 +162,20 @@ export class TaonCmsPostComponent implements AfterViewInit {
             label: this.t.gettext('Attachment post'),
         },
     ];
+    readonly currentPostType = computed(() => this.postTypes.find(type => type.value === this.draft().type) ??
+        this.postTypes[0]);
+    readonly currentPostTypeIcon = computed(() => {
+        switch (this.draft().type) {
+            case TaonCmsContentType.Video:
+                return 'video_library';
+            case TaonCmsContentType.Audio:
+                return 'audiotrack';
+            case TaonCmsContentType.Attachment:
+                return 'attach_file';
+            default:
+                return 'article';
+        }
+    });
     private readonly mediaAttachments = [
         {
             type: TaonCmsContentType.Video,
@@ -149,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('');
@@ -188,12 +247,75 @@ export class TaonCmsPostComponent implements AfterViewInit {
     } | null>(null);
     private mediaPreviewRequest = 0;
     private mediaPreviewSignature = '';
-    private slugManuallySet = false;
     readonly dialogOpen = signal(false);
     readonly error = signal('');
     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('');
+    readonly postVersionLinks = signal<TaonCmsPostVersionLinks>({
+        publicVersionPost: null,
+        privateVersionPost: null,
+    });
+    readonly postVersionLinksLoading = signal(false);
+    readonly postVersionLinksError = signal('');
+    readonly canEditPublicVersion = computed(() => {
+        const status = this.currentPost()?.status;
+        return ((status === 'draft' || status === 'archived') &&
+            !this.postVersionLinksLoading() &&
+            !this.postVersionLinksError());
+    });
+    readonly canEditPrivateVersion = computed(() => this.currentPost()?.status === 'published' &&
+        !this.postVersionLinksLoading() &&
+        !this.postVersionLinksError());
     readonly applicationHooks = signal<TaonCmsApplicationHookEntity[]>([]);
     readonly applicationHooksLoading = signal(false);
     readonly applicationHooksError = signal('');
@@ -201,6 +323,16 @@ export class TaonCmsPostComponent implements AfterViewInit {
     readonly selectedApplicationHook = signal<TaonCmsApplicationHook | null>(null);
     readonly permissions = signal<TaonPermissionEntity[]>([]);
     readonly applyPermissionsToRelatedPosts = signal(false);
+    readonly applyVisibilityToRelatedPosts = signal(false);
+    readonly visibilitySource = signal<{
+        id: number;
+        title: string;
+    } | null>(null);
+    readonly visibilityLoading = signal(false);
+    readonly visibilityError = signal(false);
+    readonly draftStatus = signal<TaonCmsContentFields['status']>('draft');
+    readonly subtitleEmpty = computed(() => this.isEmptyContent(this.draft().excerpt));
+    readonly descriptionEmpty = computed(() => this.isEmptyContent(this.draft().body));
     readonly permissionSource = signal<{
         id: number;
         title: string;
@@ -227,10 +359,25 @@ export class TaonCmsPostComponent implements AfterViewInit {
         !this.permissionsError() &&
         !this.taxonomyLoading() &&
         !this.taxonomyError());
-    readonly canPublish = computed(() => {
-        const post = this.currentPost();
-        return !!post && post.status !== 'published';
+    readonly statusLabel = computed(() => {
+        const status = this.mode() === 'add'
+            ? this.draftStatus()
+            : (this.currentPost()?.status ?? 'draft');
+        switch (status) {
+            case 'published':
+                return this.t.gettext('Status: Published');
+            case 'archived':
+                return this.t.gettext('Status: Archived');
+            default:
+                return this.t.gettext('Status: Draft');
+        }
     });
+    readonly statusControlDisabled = computed(() => this.busy() ||
+        this.dialogOpen() ||
+        this.visibilityLoading() ||
+        this.visibilityError() ||
+        !!this.visibilitySource() ||
+        (this.mode() === 'edit' && !this.canSave()));
     private readonly api = inject(TaonCmsContentApiService);
     private readonly contentConfig = inject(TaonCmsContentConfigService);
     readonly contentTab = signal(0);
@@ -265,15 +412,26 @@ export class TaonCmsPostComponent implements AfterViewInit {
     private readonly dialog = inject(MatDialog);
     private readonly destroyRef = inject(DestroyRef);
     private relatedPostsLoad?: Subscription;
+    private parentPostRequest = 0;
+    private visibilityRequest = 0;
+    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',
@@ -441,6 +599,7 @@ export class TaonCmsPostComponent implements AfterViewInit {
             this.releaseThumbnailPreview();
         });
     }
+    ngOnDestroy(): void { }
     loadTaxonomy(preserveSelectedTags = false): void {
         this.taxonomyLoad?.unsubscribe();
         const session = this.editorSession;
@@ -627,6 +786,124 @@ export class TaonCmsPostComponent implements AfterViewInit {
             },
         });
     }
+    private loadParentPost(post: TaonCmsContentEntity | null): void {
+        const request = ++this.parentPostRequest;
+        this.parentPost.set(null);
+        this.parentPostError.set('');
+        if (!post) {
+            this.parentPostLoading.set(false);
+            return;
+        }
+        this.parentPostLoading.set(true);
+        void this.api
+            .getParentPost(post.id)
+            .then(parent => {
+            if (request === this.parentPostRequest) {
+                this.parentPost.set(parent);
+            }
+        })
+            .catch((error: unknown) => {
+            console.error('[taon-cms-post] Unable to load parent post', error);
+            if (request === this.parentPostRequest) {
+                this.parentPostError.set(this.t.gettext('The parent post could not be loaded. Please retry.'));
+            }
+        })
+            .finally(() => {
+            if (request === this.parentPostRequest) {
+                this.parentPostLoading.set(false);
+            }
+        });
+    }
+    private loadVisibilityConfiguration(post: TaonCmsContentEntity | null): void {
+        const request = ++this.visibilityRequest;
+        this.visibilitySource.set(null);
+        this.visibilityError.set(false);
+        if (!post) {
+            this.visibilityLoading.set(false);
+            return;
+        }
+        this.visibilityLoading.set(true);
+        void this.api
+            .getVisibilityConfiguration(post.id)
+            .then(configuration => {
+            if (request === this.visibilityRequest) {
+                this.visibilitySource.set(configuration.source);
+            }
+        })
+            .catch((error: unknown) => {
+            console.error('[taon-cms-post] Unable to load visibility inheritance', error);
+            if (request === this.visibilityRequest) {
+                this.visibilityError.set(true);
+                this.error.set(this.t.gettext('The post visibility could not be verified.'));
+            }
+        })
+            .finally(() => {
+            if (request === this.visibilityRequest) {
+                this.visibilityLoading.set(false);
+            }
+        });
+    }
+    loadPostVersionLinks(post: TaonCmsContentEntity | null): void {
+        const request = ++this.postVersionLinksRequest;
+        this.postVersionLinks.set({
+            publicVersionPost: null,
+            privateVersionPost: null,
+        });
+        this.postVersionLinksError.set('');
+        if (!post) {
+            this.postVersionLinksLoading.set(false);
+            return;
+        }
+        this.postVersionLinksLoading.set(true);
+        void this.api
+            .getPostVersions(post.id)
+            .then(links => {
+            if (request === this.postVersionLinksRequest) {
+                this.postVersionLinks.set(links);
+            }
+        })
+            .catch((error: unknown) => {
+            console.error('[taon-cms-post] Unable to load post versions', error);
+            if (request === this.postVersionLinksRequest) {
+                this.postVersionLinksError.set(this.t.gettext('Post version links could not be loaded. Please retry.'));
+            }
+        })
+            .finally(() => {
+            if (request === this.postVersionLinksRequest) {
+                this.postVersionLinksLoading.set(false);
+            }
+        });
+    }
+    requestPostEditor(event: Event, post: TaonCmsContentEntity): void {
+        event.preventDefault();
+        this.editPostRequested.emit(post);
+    }
+    removeParentPost(): void {
+        const post = this.currentPost();
+        const parent = this.parentPost();
+        if (!this.editing() ||
+            !post ||
+            !parent ||
+            this.busy() ||
+            this.dialogOpen()) {
+            return;
+        }
+        this.busy.set(true);
+        this.error.set('');
+        this.api
+            .deleteRelatedPost(parent.id, post.id, parent.version)
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.busy.set(false)))
+            .subscribe({
+            next: () => {
+                this.parentPost.set(null);
+                this.loadPermissions();
+            },
+            error: (error: unknown) => {
+                console.error('[taon-cms-post] Unable to remove parent post', error);
+                this.error.set(this.t.gettext('The parent post could not be removed. Please try again.'));
+            },
+        });
+    }
     addRelatedPost(): void {
         if (!this.editing() ||
             this.busy() ||
@@ -685,10 +962,14 @@ export class TaonCmsPostComponent implements AfterViewInit {
             this.error.set('');
             this.api
                 .addRelatedPost(parent.id, post.id, parent.version)
-                .pipe(switchMap(() => from(this.api.getById(post.id))), takeUntilDestroyed(this.destroyRef), finalize(() => this.busy.set(false)))
+                .pipe(switchMap(() => forkJoin({
+                post: from(this.api.getById(post.id)),
+                parent: from(this.api.getById(parent.id)),
+            })), takeUntilDestroyed(this.destroyRef), finalize(() => this.busy.set(false)))
                 .subscribe({
-                next: refreshedPost => {
-                    this.currentPost.set(refreshedPost);
+                next: refreshed => {
+                    this.currentPost.set(refreshed.post);
+                    this.parentPost.set(refreshed.parent);
                     this.permissionsLoad?.unsubscribe();
                     this.permissionsLoading.set(false);
                     this.loadPermissions();
@@ -700,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() ||
@@ -710,6 +1006,92 @@ export class TaonCmsPostComponent implements AfterViewInit {
         }
         this.relatedPosts.update(posts => posts.filter(post => post.id !== id));
     }
+    selectVersionPost(kind: TaonCmsPostVersionKind): void {
+        const post = this.currentPost();
+        const canEdit = kind === 'public'
+            ? this.canEditPublicVersion()
+            : this.canEditPrivateVersion();
+        if (!this.editing() ||
+            !post ||
+            !canEdit ||
+            this.busy() ||
+            this.dialogOpen()) {
+            return;
+        }
+        this.dialogOpen.set(true);
+        const isPublicVersion = kind === 'public';
+        const ref = this.dialog.open<TaonRelatedPostChooserComponent, TaonRelatedPostChooserData, TaonCmsContentEntity>(TaonRelatedPostChooserComponent, {
+            data: {
+                postId: post.id,
+                excludedIds: [],
+                eligibleStatuses: isPublicVersion
+                    ? ['published']
+                    : ['draft', 'archived'],
+                dialogTitle: isPublicVersion
+                    ? this.t.gettext('Select the public version post')
+                    : this.t.gettext('Select the private version post'),
+                confirmLabel: this.t.gettext('Link post version'),
+                selectionLabel: this.t.gettext('Post version'),
+                selectionError: this.t.gettext('Select an eligible post version.'),
+            },
+            width: '560px',
+            maxWidth: '95vw',
+            disableClose: true,
+        });
+        ref
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(versionPost => {
+            this.dialogOpen.set(false);
+            const currentPost = this.currentPost();
+            if (!versionPost || !currentPost) {
+                return;
+            }
+            this.busy.set(true);
+            this.error.set('');
+            this.api
+                .linkVersionPost(currentPost.id, versionPost.id, kind, currentPost.version)
+                .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.busy.set(false)))
+                .subscribe({
+                next: updatedPost => {
+                    this.currentPost.set(updatedPost);
+                    this.loadPostVersionLinks(updatedPost);
+                },
+                error: (error: unknown) => {
+                    console.error('[taon-cms-post] Unable to link post version', error);
+                    this.error.set(this.t.gettext('The post version could not be linked. Reload the post and try again.'));
+                },
+            });
+        });
+    }
+    removeVersionPost(kind: TaonCmsPostVersionKind): void {
+        const post = this.currentPost();
+        const canEdit = kind === 'public'
+            ? this.canEditPublicVersion()
+            : this.canEditPrivateVersion();
+        if (!this.editing() ||
+            !post ||
+            !canEdit ||
+            this.busy() ||
+            this.dialogOpen()) {
+            return;
+        }
+        this.busy.set(true);
+        this.error.set('');
+        this.api
+            .removeVersionPost(post.id, kind, post.version)
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.busy.set(false)))
+            .subscribe({
+            next: updatedPost => {
+                this.currentPost.set(updatedPost);
+                this.loadPostVersionLinks(updatedPost);
+            },
+            error: (error: unknown) => {
+                console.error('[taon-cms-post] Unable to remove post version', error);
+                this.error.set(this.t.gettext('The post version could not be removed. Reload the post and try again.'));
+            },
+        });
+    }
     loadApplicationHooks(): void {
         if (this.applicationHooksLoading()) {
             return;
@@ -808,11 +1190,44 @@ 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);
         }
     }
+    setContentTab(index: number): void {
+        const editor = this.contentEditor();
+        if (editor && this.contentTab() === 0 && index !== 0) {
+            this.updateDraft('body', toHTML(editor.view.state.doc, editor.schema));
+        }
+        if (editor && index === 0) {
+            this.loadingEditorContent = true;
+            try {
+                editor.setContent(this.draft().body);
+            }
+            finally {
+                this.loadingEditorContent = false;
+            }
+        }
+        this.contentTab.set(index);
+    }
     insertVariable(variable: TaonCmsTemplateVariable): void {
         if (!this.editing() || this.busy() || this.dialogOpen()) {
             return;
@@ -833,10 +1248,7 @@ export class TaonCmsPostComponent implements AfterViewInit {
         }
     }
     updateDraft<K extends keyof TaonCmsPostDraft>(field: K, value: TaonCmsPostDraft[K]): void {
-        if (field === 'title' &&
-            this.mode() === 'add' &&
-            !this.slugManuallySet &&
-            !this.draft().slug) {
+        if (field === 'title' && this.mode() === 'add') {
             const title = String(value);
             this.draft.update(draft => ({
                 ...draft,
@@ -847,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.'));
@@ -970,7 +1657,6 @@ export class TaonCmsPostComponent implements AfterViewInit {
     }
     updateSlug(event: Event): void {
         if (event.target instanceof HTMLInputElement) {
-            this.slugManuallySet = true;
             this.updateDraft('slug', event.target.value);
         }
     }
@@ -1009,6 +1695,8 @@ export class TaonCmsPostComponent implements AfterViewInit {
                 relatedPostIds: this.relatedPosts().map(post => post.id),
                 permissionIds: this.permissions().map(permission => permission.id),
                 applyPermissionsToRelatedPosts: this.applyPermissionsToRelatedPosts(),
+                applyVisibilityToRelatedPosts: this.applyVisibilityToRelatedPosts(),
+                status: this.draftStatus(),
                 applicationHook: this.useAsApplicationHook()
                     ? this.selectedApplicationHook()
                     : null,
@@ -1021,43 +1709,97 @@ export class TaonCmsPostComponent implements AfterViewInit {
             }
         }
     }
-    publish(): void {
-        if (this.busy() ||
-            this.dialogOpen() ||
-            !this.canPublish() ||
-            this.mode() === 'view-clean' ||
-            this.mode() === 'add') {
+    selectStatus(): void {
+        if (this.statusControlDisabled() || this.mode() === 'view-clean') {
             return;
         }
-        if (this.editing() && !this.canSave()) {
-            this.error.set(this.t.gettext('A title and slug are required.'));
-            return;
-        }
-        const post = this.requirePost();
-        if (post) {
+        const currentStatus = this.draftStatus();
+        this.dialogOpen.set(true);
+        const ref = this.dialog.open<TaonCmsPostChoiceDialogComponent<TaonCmsContentFields['status']>, TaonCmsPostChoiceDialogData<TaonCmsContentFields['status']>, TaonCmsContentFields['status']>(TaonCmsPostChoiceDialogComponent, {
+            data: {
+                title: this.t.gettext('Change post status'),
+                options: [
+                    { value: 'published', label: this.t.gettext('Published') },
+                    { value: 'draft', label: this.t.gettext('Draft') },
+                    { value: 'archived', label: this.t.gettext('Archived') },
+                ],
+                selected: currentStatus,
+            },
+            disableClose: true,
+        });
+        ref
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(status => {
+            this.dialogOpen.set(false);
+            if (!status || status === currentStatus) {
+                return;
+            }
+            if (this.mode() === 'add') {
+                this.draftStatus.set(status);
+                return;
+            }
+            if (this.editing() && !this.canSave()) {
+                this.error.set(this.t.gettext('A title and slug are required.'));
+                return;
+            }
+            const post = this.requirePost();
+            if (!post) {
+                return;
+            }
             this.persist(this.api.updateContent(post.id, {
                 ...(this.editing()
                     ? this.updateInput(post)
                     : { expectedVersion: post.version }),
-                status: 'published',
-                publishedAt: new Date(),
+                status,
+                ...(status === 'published' && post.status !== 'published'
+                    ? { publishedAt: new Date() }
+                    : {}),
             }));
-        }
+        });
     }
-    unpublish(): void {
-        const post = this.currentPost();
-        if (!post ||
-            post.status !== 'published' ||
-            this.busy() ||
-            this.dialogOpen() ||
-            this.mode() === 'view-clean' ||
-            this.mode() === 'add') {
+    private isEmptyContent(value: string): boolean {
+        if (/<(?:img|video|audio|iframe|object|embed|table|hr)\b/i.test(value)) {
+            return false;
+        }
+        return !value
+            .replace(/<[^>]*>/g, '')
+            .replace(/&(?:nbsp|#160|#x0*a0);/gi, ' ')
+            .trim();
+    }
+    generateLoremIpsum(field: 'excerpt' | 'body'): void {
+        if (!this.editing() || this.busy() || this.dialogOpen()) {
             return;
         }
-        this.persist(this.api.updateContent(post.id, {
-            expectedVersion: post.version,
-            status: 'draft',
-        }));
+        const existing = this.draft()[field] ?? '';
+        if (!this.isEmptyContent(existing)) {
+            return;
+        }
+        const title = this.draft().title.trim() || this.t.gettext('this post');
+        if (field === 'excerpt') {
+            this.updateDraft('excerpt', `Lorem ipsum dolor sit amet, ${title}; consectetur adipiscing elit.`);
+            return;
+        }
+        const description = `Lorem ipsum dolor sit amet, ${title}. ` +
+            'Consectetur adipiscing elit. Integer nec odio. Praesent libero. ' +
+            'Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh ' +
+            'elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce ' +
+            'nec tellus sed augue semper porta.';
+        const escapedDescription = description
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+        this.updateDraft('body', `<p>${escapedDescription}</p>`);
+        const editor = this.contentEditor();
+        if (editor) {
+            this.loadingEditorContent = true;
+            try {
+                editor.setContent(this.draft().body);
+            }
+            finally {
+                this.loadingEditorContent = false;
+            }
+        }
     }
     revert(): void {
         const post = this.requirePost();
@@ -1089,15 +1831,23 @@ export class TaonCmsPostComponent implements AfterViewInit {
         if (!post ||
             this.busy() ||
             this.dialogOpen() ||
-            this.mode() === 'view-clean') {
+            this.mode() === 'view-clean' ||
+            this.mode() === 'add') {
             return;
         }
+        const archived = post.status === 'archived';
         this.dialogOpen.set(true);
         const ref = this.dialog.open(TaonConfirmDialogComponent, {
             data: {
-                title: this.t.gettext('Delete post?'),
-                message: this.t.gettext('This archives the post. It can be restored from its revisions.'),
-                confirmText: this.t.gettext('Delete'),
+                title: archived
+                    ? this.t.gettext('Permanently delete post?')
+                    : this.t.gettext('Archive post?'),
+                message: archived
+                    ? this.t.gettext('This permanently deletes the post and its assets. This action cannot be undone.')
+                    : this.t.gettext('This archives the post. It can be restored from its revisions.'),
+                confirmText: archived
+                    ? this.t.gettext('Permanently delete')
+                    : this.t.gettext('Delete'),
             },
         });
         ref
@@ -1106,7 +1856,22 @@ export class TaonCmsPostComponent implements AfterViewInit {
             .subscribe(confirmed => {
             this.dialogOpen.set(false);
             if (confirmed) {
-                this.persist(this.api.deleteContent(post.id, post.version), true);
+                if (!archived) {
+                    this.persist(this.api.deleteContent(post.id, post.version), true);
+                    return;
+                }
+                this.busy.set(true);
+                this.error.set('');
+                this.api
+                    .permanentlyDeleteContent(post.id, post.version)
+                    .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.busy.set(false)))
+                    .subscribe({
+                    next: () => this.deleted.emit(post),
+                    error: (error: unknown) => {
+                        console.error('[taon-cms-post] Unable to permanently delete post', error);
+                        this.error.set(this.t.gettext('The post could not be permanently deleted. Please refresh before retrying.'));
+                    },
+                });
             }
         });
     }
@@ -1121,7 +1886,54 @@ export class TaonCmsPostComponent implements AfterViewInit {
         this.busy.set(true);
         this.error.set('');
         this.api
-            .duplicateContent(post.id)
+            .listRelatedPosts(post.id)
+            .pipe(takeUntilDestroyed(this.destroyRef), take(1))
+            .subscribe({
+            next: children => {
+                if (!children.length) {
+                    this.runDuplication(post, false);
+                    return;
+                }
+                this.dialogOpen.set(true);
+                const ref = this.dialog.open<TaonCmsPostChoiceDialogComponent<'single' | 'hierarchy'>, TaonCmsPostChoiceDialogData<'single' | 'hierarchy'>, 'single' | 'hierarchy'>(TaonCmsPostChoiceDialogComponent, {
+                    data: {
+                        title: this.t.gettext('Duplicate post'),
+                        options: [
+                            {
+                                value: 'single',
+                                label: this.t.gettext('Duplicate only this post'),
+                            },
+                            {
+                                value: 'hierarchy',
+                                label: this.t.gettext('Duplicate this post and its children'),
+                            },
+                        ],
+                        selected: 'single',
+                    },
+                    disableClose: true,
+                });
+                ref
+                    .afterClosed()
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(choice => {
+                    this.dialogOpen.set(false);
+                    if (!choice) {
+                        this.busy.set(false);
+                        return;
+                    }
+                    this.runDuplication(post, choice === 'hierarchy');
+                });
+            },
+            error: (error: unknown) => {
+                console.error('[taon-cms-post] Unable to load children for duplication', error);
+                this.busy.set(false);
+                this.error.set(this.t.gettext('The post could not be duplicated. Please try again.'));
+            },
+        });
+    }
+    private runDuplication(post: TaonCmsContentEntity, includeChildren: boolean): void {
+        this.api
+            .duplicateContent(post.id, includeChildren)
             .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.busy.set(false)))
             .subscribe({
             next: duplicate => this.duplicated.emit(duplicate),
@@ -1141,6 +1953,7 @@ export class TaonCmsPostComponent implements AfterViewInit {
                     permissionIds: this.permissions().map(permission => permission.id),
                 }),
             applyPermissionsToRelatedPosts: this.applyPermissionsToRelatedPosts(),
+            applyVisibilityToRelatedPosts: this.applyVisibilityToRelatedPosts(),
             applicationHook: this.useAsApplicationHook()
                 ? this.selectedApplicationHook()
                 : null,
@@ -1174,12 +1987,28 @@ 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.slugManuallySet = Boolean(post);
+        this.loadVisibilityConfiguration(post && this.mode() !== 'view-clean' ? post : null);
+        this.loadParentPost(post && this.mode() !== 'view-clean' ? post : null);
+        this.loadPostVersionLinks(post && this.mode() !== 'view-clean' ? post : null);
         this.relatedPosts.set(post?.relatedPosts ?? []);
         this.permissions.set(post?.permissions ?? []);
         this.permissionSource.set(null);
         this.applyPermissionsToRelatedPosts.set(post?.applyPermissionsToRelatedPosts ?? false);
+        this.applyVisibilityToRelatedPosts.set(post?.applyVisibilityToRelatedPosts ?? false);
+        this.draftStatus.set(post?.status === 'published' || post?.status === 'archived'
+            ? post.status
+            : 'draft');
         this.selectedPermissionId.set(null);
         this.setApplicationHookSelection(post, this.applicationHooks());
         this.draft.set({