@taon-dev/cms 21.0.22 → 21.0.24

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

@@ -10,12 +10,14 @@
   
  * ========================================================================== */
 
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, computed, effect, inject, input, model, output, signal, untracked, viewChild, } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, TemplateRef, ViewChild, computed, effect, inject, input, model, output, signal, untracked, viewChild, } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 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';
@@ -24,14 +26,16 @@ 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/browser';
 import { TaonPermissionApiService } from '@taon-dev/session/browser';
 import type { TaonPermissionEntity } from '@taon-dev/session/browser';
 import { TaonConfirmDialogComponent } from '@taon-dev/ui/browser';
 import { Editor, NgxEditorModule, toHTML } from 'ngx-editor';
 import type { Toolbar } from 'ngx-editor';
-import { Observable, Subscription, finalize, firstValueFrom, forkJoin, of, take, } from 'rxjs';
+import { Observable, Subscription, finalize, firstValueFrom, forkJoin, from, of, switchMap, take, } from 'rxjs';
 import { Taon } 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';
@@ -40,18 +44,25 @@ import { TaonCmsContentApiService } from '../../taon-cms-content/taon-cms-conten
 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 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';
 import { TaonCmsTagApiService } from '../../taon-cms-tag/taon-cms-tag-api.service';
 import type { TaonCmsTagEntity } from '../../taon-cms-tag/taon-cms-tag.entity';
+import { TaonCmsTaxonomyQuickCreateDialogComponent } from '../../taon-cms-taxonomy-backoffice/taon-cms-taxonomy-quick-create-dialog.component';
 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 type { TaonCmsPostDraft, TaonCmsPostMode } from './taon-cms-post.models';
 import { defaultThumbnailKey, defaultThumbnailUrl, generateVideoThumbnail, } from './taon-cms-thumbnail';
-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 { 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);
 @Component({
     selector: 'taon-cms-post',
     templateUrl: './taon-cms-post.component.html',
@@ -60,6 +71,8 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
     imports: [
         MatButtonModule,
         MatCheckboxModule,
+        MatCardModule,
+        MatExpansionModule,
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
@@ -70,7 +83,10 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
         MatProgressBarModule,
         MatRadioModule,
         MatSelectModule,
+        MatTooltipModule,
         TaonCmsEditableDirective,
+        TaonCmsCommentsComponent,
+        NgTemplateOutlet,
     ],
     providers: [
         TaonCmsContentApiService,
@@ -80,17 +96,22 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
         TaonCmsTagApiService,
     ],
 })
-export class TaonCmsPostComponent {
+export class TaonCmsPostComponent implements AfterViewInit {
     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>>();
+    @ViewChild('actionButtonsTemplate')
+    private readonly actionButtonsTemplateRef?: TemplateRef<unknown>;
     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,
@@ -117,6 +138,20 @@ export class TaonCmsPostComponent {
             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,
@@ -184,6 +219,24 @@ export class TaonCmsPostComponent {
     readonly relatedPosts = signal<TaonCmsContentEntity[]>([]);
     readonly relatedPostsLoading = signal(false);
     readonly relatedPostsError = signal('');
+    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('');
@@ -191,6 +244,16 @@ export class TaonCmsPostComponent {
     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;
@@ -217,10 +280,25 @@ export class TaonCmsPostComponent {
         !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);
@@ -255,8 +333,16 @@ export class TaonCmsPostComponent {
     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;
+    ngAfterViewInit(): void {
+        if (this.actionButtonsTemplateRef) {
+            this.actionButtonsTemplate.emit(this.actionButtonsTemplateRef);
+        }
+    }
     constructor() {
         const editor = new Editor({
             attributes: {
@@ -301,8 +387,8 @@ export class TaonCmsPostComponent {
         });
         effect(onCleanup => {
             const key = this.thumbnailReference();
-            const slug = this.thumbnailSlug();
             const editing = this.editing();
+            const slug = editing ? '' : this.thumbnailSlug();
             const staged = this.stagedThumbnail();
             let active = true;
             onCleanup(() => {
@@ -322,7 +408,7 @@ export class TaonCmsPostComponent {
                 this.thumbnailPreviewUrl.set(placeholder);
                 return;
             }
-            if (!slug) {
+            if (!editing && !slug) {
                 return;
             }
             const load = async () => {
@@ -426,7 +512,7 @@ export class TaonCmsPostComponent {
             this.releaseThumbnailPreview();
         });
     }
-    loadTaxonomy(): void {
+    loadTaxonomy(preserveSelectedTags = false): void {
         this.taxonomyLoad?.unsubscribe();
         const session = this.editorSession;
         const postId = this.currentPost()?.id;
@@ -443,7 +529,9 @@ export class TaonCmsPostComponent {
                 if (session === this.editorSession) {
                     this.categories.set(result.categories.sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name)));
                     this.tags.set(result.tags);
-                    this.updateDraft('tagIds', result.tagIds);
+                    if (!preserveSelectedTags) {
+                        this.updateDraft('tagIds', result.tagIds);
+                    }
                 }
             },
             error: (error: unknown) => {
@@ -465,6 +553,58 @@ export class TaonCmsPostComponent {
             this.tagSearch.set(event.target.value);
         }
     }
+    createTaxonomy(taxonomy: 'category' | 'tag'): void {
+        if (this.busy() || this.dialogOpen()) {
+            return;
+        }
+        this.dialogOpen.set(true);
+        this.taxonomyError.set('');
+        const ref = this.dialog.open<TaonCmsTaxonomyQuickCreateDialogComponent, {
+            taxonomy: 'category' | 'tag';
+        }, {
+            name: string;
+            slug: string;
+            description: string | null;
+            parentCategoryId: number | null;
+            sortOrder: number;
+        }>(TaonCmsTaxonomyQuickCreateDialogComponent, {
+            data: { taxonomy },
+            width: '560px',
+            maxWidth: '95vw',
+            disableClose: true,
+        });
+        ref
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(fields => {
+            if (!fields) {
+                this.dialogOpen.set(false);
+                return;
+            }
+            const request = taxonomy === 'category'
+                ? this.categoryApi.save(null, fields)
+                : this.tagApi.save(null, fields);
+            request
+                .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.dialogOpen.set(false)))
+                .subscribe({
+                next: saved => {
+                    if (taxonomy === 'category') {
+                        this.updateDraft('categoryId', saved.id);
+                    }
+                    else {
+                        this.addTag(saved.id);
+                    }
+                    this.loadTaxonomy(true);
+                },
+                error: (error: unknown) => {
+                    console.error(`[taon-cms-post] Unable to create ${taxonomy}`, error);
+                    this.taxonomyError.set(taxonomy === 'category'
+                        ? this.t.gettext('The category could not be created. Please try again.')
+                        : this.t.gettext('The tag could not be created. Please try again.'));
+                },
+            });
+        });
+    }
     applyDefaultThumbnail(): void {
         if (!this.editing() || this.busy() || this.dialogOpen()) {
             return;
@@ -558,6 +698,124 @@ export class TaonCmsPostComponent {
             },
         });
     }
+    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() ||
@@ -588,6 +846,53 @@ export class TaonCmsPostComponent {
             }
         });
     }
+    addAsChildOf(): void {
+        const post = this.currentPost();
+        if (!this.editing() ||
+            !post ||
+            this.busy() ||
+            this.dialogOpen() ||
+            this.relatedPostsLoading()) {
+            return;
+        }
+        this.dialogOpen.set(true);
+        const ref = this.dialog.open<TaonRelatedPostChooserComponent, TaonRelatedPostChooserData, TaonCmsContentEntity>(TaonRelatedPostChooserComponent, {
+            data: { postId: post.id, excludedIds: [] },
+            width: '560px',
+            maxWidth: '95vw',
+            disableClose: true,
+        });
+        ref
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(parent => {
+            this.dialogOpen.set(false);
+            if (!parent || !this.currentPost()) {
+                return;
+            }
+            this.busy.set(true);
+            this.error.set('');
+            this.api
+                .addRelatedPost(parent.id, post.id, parent.version)
+                .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: refreshed => {
+                    this.currentPost.set(refreshed.post);
+                    this.parentPost.set(refreshed.parent);
+                    this.permissionsLoad?.unsubscribe();
+                    this.permissionsLoading.set(false);
+                    this.loadPermissions();
+                },
+                error: (error: unknown) => {
+                    console.error('[taon-cms-post] Unable to make post a child', error);
+                    this.error.set(this.t.gettext('The parent post could not be changed. Please try again.'));
+                },
+            });
+        });
+    }
     removeRelatedPost(id: number): void {
         if (!this.editing() ||
             this.busy() ||
@@ -598,6 +903,92 @@ export class TaonCmsPostComponent {
         }
         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;
@@ -701,6 +1092,22 @@ export class TaonCmsPostComponent {
             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;
@@ -721,6 +1128,15 @@ export class TaonCmsPostComponent {
         }
     }
     updateDraft<K extends keyof TaonCmsPostDraft>(field: K, value: TaonCmsPostDraft[K]): void {
+        if (field === 'title' && this.mode() === 'add') {
+            const title = String(value);
+            this.draft.update(draft => ({
+                ...draft,
+                title,
+                slug: _.kebabCase(title),
+            }));
+            return;
+        }
         this.draft.update(draft => ({ ...draft, [field]: value }));
     }
     async fileSelected(event: Event): Promise<void> {
@@ -884,6 +1300,8 @@ export class TaonCmsPostComponent {
                 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,
@@ -896,43 +1314,97 @@ export class TaonCmsPostComponent {
             }
         }
     }
-    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();
@@ -964,15 +1436,23 @@ export class TaonCmsPostComponent {
         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
@@ -981,7 +1461,22 @@ export class TaonCmsPostComponent {
             .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.'));
+                    },
+                });
             }
         });
     }
@@ -996,7 +1491,54 @@ export class TaonCmsPostComponent {
         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),
@@ -1016,6 +1558,7 @@ export class TaonCmsPostComponent {
                     permissionIds: this.permissions().map(permission => permission.id),
                 }),
             applyPermissionsToRelatedPosts: this.applyPermissionsToRelatedPosts(),
+            applyVisibilityToRelatedPosts: this.applyVisibilityToRelatedPosts(),
             applicationHook: this.useAsApplicationHook()
                 ? this.selectedApplicationHook()
                 : null,
@@ -1050,10 +1593,17 @@ export class TaonCmsPostComponent {
         this.mediaPreviewSignature = '';
         this.mediaPreviewRequest += 1;
         this.currentPost.set(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({